:root {
  color-scheme: light;
  --ink: #241238;
  --muted: #70627e;
  --line: #e7d8f1;
  --paper: #fbf3e8;
  --surface: #ffffff;
  --beige: #f7ead8;
  --beige-soft: #fff8ee;
  --beige-deep: #e6cfb4;
  --mauve-light: #ead7f6;
  --mauve: #a96ad0;
  --mauve-strong: #7433a3;
  --mauve-dark: #3b145f;
  --accent: #8d45ba;
  --accent-dark: #3b145f;
  --blue: #6d4cc2;
  --navy: #3b145f;
  --gold: #c090e8;
  --rose: #a96ad0;
  --success: #7433a3;
  --contrast: #f6c453;
  --contrast-dark: #8a5a00;
  --contrast-soft: #fff6da;
  --contrast-warm: #ffe08a;
  --signature-pink: #c85ba6;
  --signature-teal: #5fbfb6;
  --signature-sky: #bfefff;
  --signature-cream: #fff8e8;
  --shadow: 0 22px 60px rgba(59, 20, 95, 0.18);
  --glow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 26px 80px rgba(116, 51, 163, 0.2);
}

/* Connexion par profil : adulte, enfant et administration. */
.access-gateway-section {
  align-items: stretch !important;
  gap: clamp(22px, 4vw, 46px) !important;
}

.access-gateway-section .vitrine-ref-login-copy {
  align-self: center;
}

.access-role-chooser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.access-role-chooser[hidden],
.access-learner-form[hidden] {
  display: none !important;
}

/* Entrée privée : volontairement discrète, le mot de passe reste obligatoire. */
.vitrine-ref-footer {
  position: relative;
}

.private-admin-access {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 1000;
  display: grid;
  width: 25px;
  height: 25px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: #ffd244;
  color: #35104d;
  box-shadow: 0 4px 12px rgba(40, 12, 57, .22);
  opacity: .72;
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}

.private-admin-access::before {
  content: "🔒";
  display: block;
  font-size: .78rem;
  line-height: 1;
}

.private-admin-access:hover {
  opacity: 1;
  transform: scale(1.12);
  background: #ffd244;
}

.private-admin-access:focus-visible {
  opacity: 1;
  outline: 3px solid rgba(255, 210, 68, .55);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .private-admin-access {
    right: 12px;
    bottom: 84px;
  }
}

.helloasso-workshop-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(84, 29, 119, .22);
  border-radius: 999px;
  background: #fff;
  color: #5a1e7e;
  font-size: .78rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.helloasso-workshop-link:hover {
  transform: translateY(-1px);
  background: #ffd244;
  color: #35104d;
}

.planning-workshop-action .helloasso-workshop-link {
  width: 100%;
  margin-top: 8px;
}

.workshop-detail-primary-action .helloasso-workshop-link {
  width: fit-content;
  margin-top: 8px;
}

.workshop-booking-content .helloasso-workshop-link,
.booking-world-content .helloasso-workshop-link {
  margin: 10px 0 0;
}

/* Cartes visuelles du planning ciblé */
.public-calendar-event {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(83, 28, 116, .14);
  border-radius: 18px;
  background: #fff !important;
  box-shadow: 0 12px 25px rgba(54, 18, 77, .12);
  isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease;
}

.public-calendar-event:hover {
  transform: translateY(-3px) rotate(-.35deg);
  box-shadow: 0 18px 34px rgba(54, 18, 77, .18);
}

.public-calendar-event.is-kids {
  border-color: rgba(20, 167, 152, .28);
}

.public-calendar-event-art {
  position: relative;
  height: 106px;
  overflow: hidden;
  background: #f0e6f6;
}

.public-calendar-event-art::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(40, 12, 57, .02) 30%, rgba(40, 12, 57, .72) 100%);
  pointer-events: none;
}

.public-calendar-event.is-kids .public-calendar-event-art::after {
  background: linear-gradient(180deg, rgba(0, 111, 101, .04) 24%, rgba(0, 91, 85, .68) 100%);
}

.public-calendar-event-art img,
.public-calendar-event-art .workshop-default-image,
.public-calendar-event-art .workshop-default-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-calendar-event-tag {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 1;
  max-width: calc(100% - 18px);
  overflow: hidden;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: #421257;
  font-size: .63rem;
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.public-calendar-event.is-kids .public-calendar-event-tag {
  color: #056b63;
}

.public-calendar-event-main {
  position: relative;
  z-index: 1;
  padding: 10px 11px 8px;
}

.public-calendar-event-main span {
  display: inline-flex;
  margin-bottom: 3px;
  padding: 3px 6px;
  border-radius: 6px;
  background: #f1e6f8;
}

.public-calendar-event.is-kids .public-calendar-event-main span {
  background: #e0f7f2;
}

.public-calendar-event-main strong {
  font-size: .8rem;
}

.public-calendar-event-main small {
  margin-top: 3px;
}

.public-calendar-event-reserve {
  position: relative;
  z-index: 1;
  width: calc(100% - 18px);
  margin: 0 9px 9px;
  border-radius: 10px;
  box-shadow: 0 5px 12px rgba(102, 52, 122, .14);
}

/* Variante immersive : l’image devient toute la carte. */
.public-calendar-event {
  min-height: 258px;
  border: 0;
  border-radius: 24px;
  background: #35104d !important;
  box-shadow: 0 18px 34px rgba(54, 18, 77, .18);
}

.public-calendar-event::before {
  position: absolute;
  top: -34px;
  right: -34px;
  z-index: 2;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 15px rgba(255, 255, 255, .06), 0 0 0 30px rgba(255, 255, 255, .035);
  pointer-events: none;
}

.public-calendar-event-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: auto;
  background: #35104d;
}

.public-calendar-event-art::after {
  background:
    linear-gradient(180deg, rgba(34, 9, 49, .05) 8%, rgba(34, 9, 49, .16) 37%, rgba(34, 9, 49, .94) 100%),
    linear-gradient(90deg, rgba(34, 9, 49, .38), transparent 55%);
}

.public-calendar-event.is-kids .public-calendar-event-art::after {
  background:
    linear-gradient(180deg, rgba(0, 79, 72, .04) 8%, rgba(0, 79, 72, .15) 37%, rgba(0, 61, 57, .94) 100%),
    linear-gradient(90deg, rgba(0, 79, 72, .34), transparent 55%);
}

.public-calendar-event-tag {
  top: 15px;
  right: auto;
  bottom: auto;
  left: 15px;
  border-color: rgba(255, 255, 255, .48);
  background: rgba(255, 210, 68, .94);
  color: #35104d;
  box-shadow: 0 8px 20px rgba(33, 9, 47, .2);
  transform: rotate(-2deg);
}

.public-calendar-event.is-kids .public-calendar-event-tag {
  background: #73e0c6;
  color: #064f49;
}

.public-calendar-event-main {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  width: 100%;
  gap: 4px;
  min-height: 144px;
  padding: 27px 14px 62px;
  color: #fff;
  text-shadow: 0 1px 9px rgba(21, 5, 30, .3);
}

.public-calendar-event-main span,
.public-calendar-event.is-kids .public-calendar-event-main span {
  width: fit-content;
  margin-bottom: 2px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: .72rem;
  text-shadow: none;
}

.public-calendar-event-main strong {
  max-width: 90%;
  color: #fff;
  font-size: .96rem;
  line-height: 1.15;
}

.public-calendar-event-main small {
  max-width: 88%;
  margin-top: 2px;
  color: rgba(255, 255, 255, .84);
  text-shadow: none;
}

.public-calendar-event-reserve {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  width: auto;
  min-height: 35px;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: #ffd244;
  box-shadow: 0 8px 18px rgba(27, 7, 39, .25);
}

.public-calendar-event.is-kids .public-calendar-event-reserve {
  background: #73e0c6;
  color: #064f49;
}

.access-role-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 168px;
  padding: 22px;
  border: 1px solid rgba(92, 43, 125, .14);
  border-radius: 24px;
  color: #321245;
  text-align: left;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 38px rgba(63, 27, 86, .1);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.access-role-card:hover,
.access-role-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(112, 50, 199, .42);
  box-shadow: 0 22px 46px rgba(63, 27, 86, .16);
  outline: none;
}

.access-role-adult {
  background: linear-gradient(145deg, #fff, #faf3ff);
}

.access-role-kids {
  background: linear-gradient(145deg, #fff, #eef9ff 58%, #fff8dc);
}

.access-role-admin {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #37134f, #6d32c7 68%, #b05bb7);
}

.access-role-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  font-size: 1.65rem;
  background: rgba(255, 255, 255, .84);
  box-shadow: inset 0 0 0 1px rgba(105, 47, 143, .09);
}

.access-role-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.access-role-copy small {
  color: #86539f;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.access-role-copy strong {
  font-size: clamp(1.06rem, 1.5vw, 1.28rem);
  line-height: 1.12;
}

.access-role-copy em {
  color: #725d7d;
  font-size: .86rem;
  font-style: normal;
  line-height: 1.42;
}

.access-role-admin .access-role-copy small,
.access-role-admin .access-role-copy em {
  color: rgba(255, 255, 255, .78);
}

.access-role-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #6d32c7;
  font-size: 1.1rem;
  font-weight: 900;
  background: #f4ebfb;
}

.access-role-admin .access-role-arrow {
  color: #4b1b68;
  background: #fff;
}

.access-learner-form {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
}

.access-back-button {
  width: fit-content;
  padding: 0;
  border: 0;
  color: #6d32c7;
  font: inherit;
  font-size: .86rem;
  font-weight: 850;
  background: transparent;
  cursor: pointer;
}

.selected-learner-role {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(109, 50, 199, .13);
  border-radius: 15px;
  color: #4d2864;
  font-weight: 850;
  background: #faf5ff;
}

.selected-learner-role.is-kids {
  color: #174f70;
  border-color: rgba(34, 168, 242, .2);
  background: #eef9ff;
}

.admin-session-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(109, 50, 199, .14);
  border-radius: 16px;
  color: #4a235e;
  background: #fbf7fd;
}

.admin-session-actions .secondary-action {
  width: auto;
}

@media (max-width: 1050px) {
  .access-role-chooser {
    grid-template-columns: 1fr;
  }

  .access-role-card {
    min-height: 118px;
  }
}

@media (max-width: 620px) {
  .access-role-card {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    padding: 18px;
    border-radius: 20px;
  }

  .access-role-arrow {
    display: none;
  }

  .access-role-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 1.4rem;
  }

  .admin-session-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Exercice pratique adulte v2 : un défi guidé, lisible et réellement interactif. */
.adult-module-detail .module-practice-puzzle.practice-game {
  position: relative;
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(74, 25, 105, .16);
  border-radius: 28px;
  background: #f8f5fb;
  box-shadow: 0 26px 70px rgba(42, 18, 79, .14);
}

.adult-module-detail .practice-game-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  align-items: end;
  gap: 30px;
  padding: 32px 34px 28px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 15%, rgba(255, 210, 61, .28), transparent 24%),
    linear-gradient(120deg, #2b123d 0%, #4a1969 55%, #6f2ca0 100%);
}

.adult-module-detail .practice-game-title small {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #331247;
  background: #ffd43d;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.adult-module-detail .practice-game-title h5 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.65rem, 2.8vw, 2.45rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.adult-module-detail .practice-game-title p {
  max-width: 65ch;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: .98rem;
  line-height: 1.55;
}

.adult-module-detail .practice-game-progress {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px);
}

.adult-module-detail .practice-game-progress span {
  color: rgba(255, 255, 255, .78);
  font-size: .83rem;
  font-weight: 800;
}

.adult-module-detail .practice-game-progress strong {
  color: #ffd43d;
  font-size: 1.45rem;
}

.adult-module-detail .practice-game-progress i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}

.adult-module-detail .practice-game-progress b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd43d, #fff0a3);
  box-shadow: 0 0 18px rgba(255, 212, 61, .7);
  transition: width .35s ease;
}

.adult-module-detail .practice-game-instructions {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  margin: 24px 26px 0;
  padding: 15px 17px;
  border: 1px solid #e9deef;
  border-radius: 17px;
  background: #fff;
}

.adult-module-detail .practice-game-instructions > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: #37104d;
  background: #ffd43d;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(255, 201, 37, .24);
}

.adult-module-detail .practice-game-instructions p {
  margin: 0;
  color: #695873;
  font-size: .88rem;
  line-height: 1.45;
}

.adult-module-detail .practice-game-instructions p strong {
  color: #321244;
}

.adult-module-detail .practice-reset {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #d9c8e3;
  border-radius: 999px;
  color: #4a1969;
  background: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
}

.adult-module-detail .practice-reset:hover {
  border-color: #4a1969;
  background: #f8f2fc;
}

.adult-module-detail .practice-game-board {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 20px;
  padding: 22px 26px 26px;
}

.adult-module-detail .practice-game-bank,
.adult-module-detail .practice-game-route {
  min-width: 0;
  padding: 20px;
  border: 1px solid #e8ddec;
  border-radius: 22px;
  background: rgba(255, 255, 255, .86);
}

.adult-module-detail .practice-game-route {
  background:
    linear-gradient(90deg, rgba(255, 212, 61, .07), transparent 45%),
    #fff;
}

.adult-module-detail .practice-board-label {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}

.adult-module-detail .practice-board-label div {
  display: grid;
  gap: 2px;
}

.adult-module-detail .practice-board-label small {
  color: #7c3ca3;
  font-size: .65rem;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.adult-module-detail .practice-board-label strong {
  color: #321244;
  font-size: 1rem;
}

.adult-module-detail .practice-board-label > span {
  color: #89778f;
  font-size: .7rem;
}

.adult-module-detail .practice-game .practice-card-bank,
.adult-module-detail .practice-game .practice-drop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}

.adult-module-detail .practice-game .practice-card-bank {
  min-height: 344px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.adult-module-detail .practice-game .practice-order-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 13px;
  min-height: 104px;
  padding: 15px 16px;
  overflow: visible;
  border: 1px solid #e2d6e8;
  border-left: 4px solid #7b36a5;
  border-radius: 15px;
  color: #321244;
  background: #fff;
  box-shadow: 0 9px 24px rgba(49, 18, 67, .07);
  text-align: left;
}

.adult-module-detail .practice-game .practice-order-card:hover,
.adult-module-detail .practice-game .practice-order-card.selected {
  border-color: #7b36a5;
  border-left-color: #ffd43d;
  box-shadow: 0 15px 30px rgba(79, 27, 198, .15), 0 0 0 4px rgba(123, 54, 165, .08);
  transform: translateY(-2px);
}

.adult-module-detail .practice-game .practice-order-card.selected::after {
  content: "Carte sélectionnée";
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #321244;
  background: #ffd43d;
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .03em;
}

.adult-module-detail .practice-game .practice-card-mark {
  grid-row: 1 / 3;
  display: grid;
  min-height: 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #4a1969, #7935a4);
  font-size: 1rem;
  font-weight: 950;
}

.adult-module-detail .practice-game .practice-order-card small {
  align-self: end;
  color: #8a7493;
  font-size: .61rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.adult-module-detail .practice-game .practice-order-card strong {
  align-self: start;
  padding: 0;
  color: #321244;
  font-size: .79rem;
  line-height: 1.38;
  text-align: left;
}

.adult-module-detail .practice-game .practice-order-card em {
  display: none;
}

.adult-module-detail .practice-game .practice-drop-grid {
  position: relative;
}

.adult-module-detail .practice-game .practice-drop-grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 34px;
  bottom: 34px;
  left: 24px;
  width: 2px;
  background: linear-gradient(#ffd43d, #8a42b5);
}

.adult-module-detail .practice-game .practice-drop-slot {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 104px;
  padding: 12px 14px 12px 0;
  border: 1px dashed #cbb9d5;
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: none;
}

.adult-module-detail .practice-game .practice-drop-slot:hover,
.adult-module-detail .practice-game .practice-drop-slot:focus-visible {
  border-color: #7b36a5;
  box-shadow: 0 0 0 4px rgba(123, 54, 165, .08);
}

.adult-module-detail .practice-game .practice-slot-index {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 0 14px 14px 0;
  color: #351248;
  background: #ffd43d;
  font-size: 1.05rem;
  font-weight: 950;
  box-shadow: 0 7px 16px rgba(255, 199, 24, .25);
}

.adult-module-detail .practice-slot-copy {
  display: grid;
  gap: 3px;
}

.adult-module-detail .practice-slot-copy strong {
  color: #4a1969;
  font-size: .75rem;
  text-transform: uppercase;
}

.adult-module-detail .practice-slot-copy em {
  color: #98879f;
  font-size: .73rem;
  font-style: normal;
}

.adult-module-detail .practice-game .practice-drop-slot .practice-order-card {
  grid-column: 2;
  min-height: 78px;
  margin: 0;
  padding: 11px 12px;
}

.adult-module-detail .practice-game .practice-drop-slot .practice-card-mark {
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 10px;
}

.adult-module-detail .practice-game .practice-drop-slot:has(.practice-order-card) .practice-slot-copy {
  display: none;
}

.adult-module-detail .practice-game .practice-drop-slot.is-correct {
  border-style: solid;
  border-color: #2d9368;
  background: #f2fbf7;
  box-shadow: 0 0 0 4px rgba(45, 147, 104, .09);
}

.adult-module-detail .practice-game .practice-drop-slot.is-correct .practice-slot-index {
  color: #fff;
  background: #2d9368;
}

.adult-module-detail .practice-game .practice-drop-slot.is-wrong {
  border-style: solid;
  border-color: #d76567;
  background: #fff7f7;
}

.adult-module-detail .practice-game .practice-drop-slot.is-wrong .practice-slot-index {
  color: #fff;
  background: #c64e54;
}

.adult-module-detail .practice-game-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 26px;
  border-top: 1px solid #e5d9ea;
  color: #76667e;
  background: #fff;
}

.adult-module-detail .practice-game-footer p {
  margin: 0;
  font-size: .77rem;
  line-height: 1.45;
}

.adult-module-detail .practice-game-footer p strong {
  display: inline-block;
  margin-right: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #4a1969;
  background: #fff1b5;
  font-size: .66rem;
  text-transform: uppercase;
}

.adult-module-detail .practice-game-footer > span {
  flex: 0 0 auto;
  color: #4a1969;
  font-size: .76rem;
  font-weight: 800;
}

.adult-module-detail .practice-game.is-success .practice-game-hero {
  background:
    radial-gradient(circle at 88% 15%, rgba(255, 212, 61, .3), transparent 24%),
    linear-gradient(120deg, #173d35, #246d58 58%, #2d9368);
}

.adult-module-detail .practice-game.is-success .practice-game-title small {
  color: #173d35;
}

.adult-module-detail .practice-game.is-error {
  box-shadow: 0 26px 70px rgba(143, 47, 53, .14);
}

.adult-module-detail .guided-practice-feedback:not(:empty) {
  margin-top: 2px;
  padding: 15px 17px;
  border: 1px solid #dfd2e6;
  border-radius: 14px;
  color: #4a1969;
  background: #faf7fc;
  font-weight: 800;
}

.adult-module-detail .practice-game.is-success + .guided-practice-feedback {
  border-color: #a9ddc6;
  color: #1c674c;
  background: #f2fbf7;
}

@media (max-width: 940px) {
  .adult-module-detail .practice-game-hero,
  .adult-module-detail .practice-game-board {
    grid-template-columns: 1fr;
  }

  .adult-module-detail .practice-game .practice-card-bank {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .adult-module-detail .practice-game-hero {
    gap: 20px;
    padding: 25px 20px 23px;
  }

  .adult-module-detail .practice-game-instructions {
    grid-template-columns: 38px minmax(0, 1fr);
    margin: 16px 14px 0;
    padding: 13px;
  }

  .adult-module-detail .practice-game-instructions > span {
    width: 38px;
    height: 38px;
  }

  .adult-module-detail .practice-reset {
    grid-column: 1 / -1;
    width: 100%;
  }

  .adult-module-detail .practice-game-board {
    gap: 14px;
    padding: 16px 14px 18px;
  }

  .adult-module-detail .practice-game-bank,
  .adult-module-detail .practice-game-route {
    padding: 15px;
    border-radius: 18px;
  }

  .adult-module-detail .practice-board-label {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .adult-module-detail .practice-game-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 15px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .adult-module-detail .practice-game-progress b,
  .adult-module-detail .practice-game .practice-order-card {
    transition: none;
  }
}

/* Accès apprenants protégés par un code créé dans l’administration. */
.learner-code-help {
  margin: -4px 0 4px !important;
  color: #75627e !important;
  font-size: .82rem !important;
  line-height: 1.45 !important;
}

.learner-access-admin {
  margin-bottom: 24px;
  border: 1px solid rgba(109, 50, 199, .16);
  background: linear-gradient(145deg, #fff, #fbf6ff);
}

.learner-access-fields {
  grid-template-columns: minmax(180px, .8fr) minmax(210px, .9fr) minmax(300px, 1.3fr) !important;
}

.learner-code-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.learner-code-input-row .secondary-action {
  width: auto;
  min-width: 100px;
  margin: 0;
}

.learner-code-status.success {
  padding: 13px 15px;
  border: 1px solid #b9dfc9;
  border-radius: 13px;
  color: #14532d;
  font-weight: 850;
  background: #eefbf3;
}

.learner-table-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 8px 0 14px;
}

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

.learner-table-heading > p {
  max-width: 560px;
  color: #76627f;
  font-size: .86rem;
  line-height: 1.45;
}

.learner-access-cell {
  display: grid;
  gap: 8px;
  min-width: 150px;
}

.learner-access-badge {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
}

.learner-access-badge.is-active {
  color: #166534;
  background: #dcfce7;
}

.learner-access-badge.is-missing {
  color: #92400e;
  background: #fef3c7;
}

.learner-access-button {
  width: fit-content !important;
  min-height: 36px !important;
  padding: 8px 11px !important;
  font-size: .76rem !important;
}

@media (max-width: 980px) {
  .learner-access-fields {
    grid-template-columns: 1fr !important;
  }

  .learner-table-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .learner-code-input-row {
    grid-template-columns: 1fr;
  }

  .learner-code-input-row .secondary-action {
    width: 100%;
  }
}

/* Correctif vitrine fidele au site depose */
body:not(.session-started) {
  min-height: 100vh !important;
  background: linear-gradient(135deg, #f4f1fb, #f8f5ff, #f7f2f8) !important;
}

body:not(.session-started) .topbar,
body:not(.session-started) #mobileMenuToggle,
body:not(.session-started) #internalNavigation {
  display: none !important;
}

body:not(.session-started) main {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.session-started) .session-card.vitrine-home {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.session-started) .session-card.vitrine-home::before,
body:not(.session-started) .session-card.vitrine-home::after,
body:not(.session-started) .vitrine-nav,
body:not(.session-started) .vitrine-hero,
body:not(.session-started) .vitrine-section,
body:not(.session-started) .vitrine-footer {
  display: none !important;
}

body:not(.session-started) .vitrine-ref-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 80 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  min-height: 76px !important;
  padding: 14px clamp(22px, 3vw, 42px) !important;
  background: rgba(255, 255, 255, .48) !important;
  border-bottom: 1px solid rgba(109, 91, 168, .12) !important;
  box-shadow: 0 10px 34px rgba(61, 37, 89, .08) !important;
  backdrop-filter: blur(14px) !important;
}

body:not(.session-started) .vitrine-ref-brands {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}

body:not(.session-started) .vitrine-ref-brand {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 54px !important;
  padding: 8px 16px !important;
  border-radius: 15px !important;
  line-height: 1.05 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(26, 31, 78, .18) !important;
}

body:not(.session-started) .vitrine-ref-brand span {
  color: rgba(255,255,255,.82) !important;
  font-size: .58rem !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

body:not(.session-started) .vitrine-ref-brand strong {
  color: #fff !important;
  font-size: 1.26rem !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body:not(.session-started) .vitrine-ref-brand-rfc {
  background: linear-gradient(135deg, #171b55, #243897) !important;
}

body:not(.session-started) .vitrine-ref-brand-platform {
  background: linear-gradient(135deg, #8e79ff, #6d5ba8) !important;
}

body:not(.session-started) .vitrine-ref-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(12px, 2vw, 30px) !important;
  min-width: 0 !important;
}

body:not(.session-started) .vitrine-ref-nav a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  color: #fff !important;
  border-bottom: 0 !important;
  background: rgba(255,255,255,.16) !important;
  text-decoration: none !important;
  font-size: .96rem !important;
  font-weight: 800 !important;
  transition: transform .22s ease, background .22s ease !important;
}

body:not(.session-started) .vitrine-ref-nav a:hover {
  background: rgba(255,255,255,.28) !important;
  transform: translateY(-2px) !important;
}

body:not(.session-started) .vitrine-ref-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px) !important;
  align-items: center !important;
  gap: 34px !important;
  min-height: 100vh !important;
  padding: 120px clamp(28px, 5.5vw, 90px) 160px !important;
  overflow: hidden !important;
  background: #4b3189 !important;
}

body:not(.session-started) .vitrine-ref-visual-card {
  position: relative !important;
  z-index: 2 !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 22px !important;
  min-height: 470px !important;
  padding: 34px !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  border-radius: 32px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,250,239,.78)),
    radial-gradient(circle at 20% 15%, rgba(240,200,120,.45), transparent 38%) !important;
  box-shadow: 0 28px 70px rgba(24, 13, 44, .22) !important;
  backdrop-filter: blur(16px) !important;
}

body:not(.session-started) .vitrine-ref-visual-badge {
  width: fit-content !important;
  padding: 9px 15px !important;
  border-radius: 999px !important;
  color: #5a2a83 !important;
  background: rgba(240, 200, 120, .34) !important;
  font-size: .8rem !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

body:not(.session-started) .vitrine-ref-visual-card h3 {
  margin: 0 !important;
  color: #2c1143 !important;
  font-size: clamp(1.75rem, 2.2vw, 2.45rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

body:not(.session-started) .vitrine-ref-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    linear-gradient(rgba(40, 19, 74, .28), rgba(18, 11, 34, .46)),
    var(--vitrine-hero-image, url("assets/vitrine-rfc-background.png")) center / cover no-repeat !important;
  transform: scale(1.02) !important;
  animation: vitrineRefZoom 18s ease-in-out infinite alternate !important;
}

body:not(.session-started) .vitrine-ref-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 78% 16%, rgba(240, 200, 120, .35), transparent 25%),
    linear-gradient(90deg, rgba(70, 43, 130, .88) 0%, rgba(99, 76, 160, .62) 50%, rgba(59, 33, 99, .35) 100%) !important;
}

body:not(.session-started) .vitrine-ref-content,
body:not(.session-started) .vitrine-ref-form,
body:not(.session-started) .vitrine-ref-cards,
body:not(.session-started) #sessionSummary {
  position: relative !important;
  z-index: 2 !important;
}

body:not(.session-started) .vitrine-ref-content {
  max-width: 680px !important;
  color: #fff !important;
}

body:not(.session-started) .vitrine-ref-subtitle {
  margin: 0 0 14px !important;
  color: rgba(255,255,255,.88) !important;
  font-size: .95rem !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

body:not(.session-started) .vitrine-ref-content h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(4rem, 6.6vw, 6.8rem) !important;
  line-height: .94 !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
  text-shadow: 0 8px 30px rgba(27, 12, 48, .28) !important;
}

body:not(.session-started) .vitrine-ref-description {
  max-width: 610px !important;
  margin: 28px 0 34px !important;
  color: rgba(255,255,255,.90) !important;
  font-size: clamp(1.1rem, 1.45vw, 1.35rem) !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
}

body:not(.session-started) .vitrine-ref-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 58px !important;
  padding: 0 34px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(90deg, #9b8cff, #f0c878) !important;
  box-shadow: 0 18px 38px rgba(25, 14, 44, .24) !important;
  text-decoration: none !important;
  font-weight: 850 !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

body:not(.session-started) .vitrine-ref-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 48px rgba(25, 14, 44, .32) !important;
}

body:not(.session-started) .vitrine-ref-form {
  align-self: end !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 34px !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 28px 70px rgba(24, 13, 44, .24) !important;
  backdrop-filter: blur(16px) !important;
}

body:not(.session-started) .vitrine-ref-login-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px) !important;
  gap: clamp(26px, 5vw, 70px) !important;
  align-items: center !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 92px clamp(22px, 4vw, 60px) 105px !important;
}

body:not(.session-started) .vitrine-ref-login-copy {
  padding: clamp(30px, 5vw, 56px) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,250,239,.72)),
    radial-gradient(circle at 18% 20%, rgba(155,140,255,.18), transparent 34%) !important;
  border: 1px solid rgba(109, 91, 168, .10) !important;
  box-shadow: 0 18px 52px rgba(109, 91, 168, .11) !important;
}

body:not(.session-started) .vitrine-ref-login-copy h3 {
  margin: 0 0 14px !important;
  color: #2c1143 !important;
  font-size: clamp(2.2rem, 4vw, 3.8rem) !important;
  line-height: 1.02 !important;
}

body:not(.session-started) .vitrine-ref-login-copy p:not(.vitrine-ref-section-kicker) {
  max-width: 620px !important;
  margin: 0 !important;
  color: #6e5f7e !important;
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
  font-weight: 650 !important;
}

body:not(.session-started) .vitrine-ref-login-section .vitrine-ref-form {
  align-self: center !important;
}

body:not(.session-started) .vitrine-ref-form::before,
body:not(.session-started) .vitrine-ref-form::after {
  display: none !important;
}

body:not(.session-started) .vitrine-ref-form-kicker {
  display: inline-flex !important;
  margin: 0 0 12px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  color: #6d5ba8 !important;
  background: #f3edff !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

body:not(.session-started) .vitrine-ref-form h3 {
  margin: 0 0 10px !important;
  color: #2c1143 !important;
  font-size: 1.75rem !important;
  line-height: 1.1 !important;
}

body:not(.session-started) .vitrine-ref-form > p:not(.session-error):not(.vitrine-ref-form-kicker) {
  margin: 0 0 20px !important;
  color: #7c708d !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
}

body:not(.session-started) .vitrine-ref-form label {
  display: grid !important;
  gap: 8px !important;
  margin-top: 14px !important;
  color: #32104d !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
}

body:not(.session-started) .vitrine-ref-form input,
body:not(.session-started) .vitrine-ref-form select {
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border: 2px solid #e5d6ef !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: #32104d !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

body:not(.session-started) .vitrine-ref-form .primary-action {
  width: 100% !important;
  min-height: 60px !important;
  margin-top: 20px !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: #fff !important;
  background: linear-gradient(90deg, #9b8cff, #6d5ba8) !important;
  box-shadow: 0 16px 30px rgba(109, 91, 168, .32) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

body:not(.session-started) .vitrine-ref-cards {
  position: absolute !important;
  right: clamp(26px, 5vw, 80px) !important;
  bottom: 44px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 200px) !important;
  gap: 18px !important;
}

body:not(.session-started) .vitrine-ref-cards article {
  min-height: 132px !important;
  padding: 18px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 22px !important;
  color: #fff !important;
  background: rgba(255,255,255,.13) !important;
  box-shadow: 0 16px 38px rgba(22, 11, 39, .16) !important;
  backdrop-filter: blur(14px) !important;
}

body:not(.session-started) .vitrine-ref-cards h3 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: 1.12rem !important;
}

body:not(.session-started) .vitrine-ref-cards p {
  margin: 0 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: .86rem !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

body:not(.session-started) .vitrine-ref-platform {
  display: block !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 100px 60px !important;
  text-align: center !important;
}

body:not(.session-started) .vitrine-ref-section-kicker {
  margin: 0 0 10px !important;
  color: #9b8cff !important;
  font-size: .9rem !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

body:not(.session-started) .vitrine-ref-platform h3 {
  max-width: 800px !important;
  margin: 0 auto 14px !important;
  color: #6d5ba8 !important;
  font-size: clamp(2.4rem, 4vw, 3.7rem) !important;
  line-height: 1.08 !important;
}

body:not(.session-started) .vitrine-ref-lead {
  max-width: 680px !important;
  margin: 0 auto 55px !important;
  color: #666 !important;
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
  font-weight: 550 !important;
}

body:not(.session-started) .vitrine-ref-platform-cards {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px !important;
  margin-bottom: 54px !important;
}

body:not(.session-started) .vitrine-ref-platform-cards article {
  min-height: 235px !important;
  padding: 32px 26px !important;
  border: 1px solid rgba(109, 91, 168, .10) !important;
  border-radius: 24px !important;
  background: white !important;
  box-shadow: 0 8px 30px rgba(109, 91, 168, .10) !important;
  text-align: left !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

body:not(.session-started) .vitrine-ref-platform-cards article:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 45px rgba(109, 91, 168, .18) !important;
}

body:not(.session-started) .vitrine-ref-card-icon {
  margin-bottom: 16px !important;
  font-size: 2.8rem !important;
  line-height: 1 !important;
}

body:not(.session-started) .vitrine-ref-platform-cards h4 {
  margin: 0 0 10px !important;
  color: #333 !important;
  font-size: 1.2rem !important;
  line-height: 1.2 !important;
}

body:not(.session-started) .vitrine-ref-platform-cards p {
  margin: 0 !important;
  color: #777 !important;
  font-size: .92rem !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
}

body:not(.session-started) .vitrine-ref-subheading {
  margin: 50px 0 20px !important;
  color: #6d5ba8 !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
}

body:not(.session-started) .vitrine-ref-subjects {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 18px !important;
}

body:not(.session-started) .vitrine-ref-subjects span {
  display: grid !important;
  place-items: center !important;
  min-height: 92px !important;
  padding: 16px !important;
  border-radius: 18px !important;
  color: #fff !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--subject) 82%, white), var(--subject)) !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--subject) 28%, transparent) !important;
  font-size: .95rem !important;
  font-weight: 850 !important;
  text-align: center !important;
}

body:not(.session-started) .vitrine-ref-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 30px !important;
  margin-top: 56px !important;
  padding: 52px 45px !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #6d5ba8, #9b8cff) !important;
  text-align: left !important;
}

body:not(.session-started) .vitrine-ref-cta h3 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: clamp(1.8rem, 3vw, 2.3rem) !important;
}

body:not(.session-started) .vitrine-ref-cta p {
  margin: 0 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 1rem !important;
}

body:not(.session-started) .vitrine-ref-cta a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 56px !important;
  padding: 0 34px !important;
  border-radius: 999px !important;
  color: #6d5ba8 !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.13) !important;
  text-decoration: none !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

body:not(.session-started) .vitrine-ref-footer {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 30px 60px 42px !important;
  border-top: 1px solid rgba(109, 91, 168, .10) !important;
  background: rgba(255,255,255,.62) !important;
}

body:not(.session-started) .vitrine-ref-footer span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #666 !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  text-align: center !important;
}

body:not(.session-started) .vitrine-ref-footer span::before {
  content: "✓" !important;
  color: #6d5ba8 !important;
  font-weight: 950 !important;
}

@keyframes vitrineRefZoom {
  0% { transform: scale(1.02); }
  100% { transform: scale(1.09); }
}

@media (max-width: 1120px) {
  body:not(.session-started) .vitrine-ref-header {
    position: sticky !important;
    top: 0 !important;
    flex-wrap: wrap !important;
    background: rgba(91, 58, 147, .92) !important;
  }

  body:not(.session-started) .vitrine-ref-nav {
    width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }

  body:not(.session-started) .vitrine-ref-hero {
    grid-template-columns: 1fr !important;
    padding-top: 52px !important;
    padding-bottom: 44px !important;
  }

  body:not(.session-started) .vitrine-ref-visual-card {
    min-height: auto !important;
  }

  body:not(.session-started) .vitrine-ref-login-section {
    grid-template-columns: 1fr !important;
    padding-top: 70px !important;
  }

  body:not(.session-started) .vitrine-ref-cards {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-column: 1 / -1 !important;
  }

  body:not(.session-started) .vitrine-ref-platform-cards,
  body:not(.session-started) .vitrine-ref-subjects,
  body:not(.session-started) .vitrine-ref-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body:not(.session-started) .vitrine-ref-header {
    padding: 12px 14px !important;
  }

  body:not(.session-started) .vitrine-ref-brands {
    width: 100% !important;
  }

  body:not(.session-started) .vitrine-ref-brand {
    flex: 1 !important;
    min-height: 48px !important;
    padding: 8px 12px !important;
  }

  body:not(.session-started) .vitrine-ref-brand strong {
    font-size: 1rem !important;
  }

  body:not(.session-started) .vitrine-ref-nav a {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    font-size: .86rem !important;
  }

  body:not(.session-started) .vitrine-ref-hero {
    min-height: auto !important;
    padding: 34px 18px 28px !important;
  }

  body:not(.session-started) .vitrine-ref-content h2 {
    font-size: clamp(3rem, 17vw, 4.2rem) !important;
  }

  body:not(.session-started) .vitrine-ref-description {
    font-size: 1rem !important;
  }

  body:not(.session-started) .vitrine-ref-form {
    padding: 24px !important;
    border-radius: 24px !important;
  }

  body:not(.session-started) .vitrine-ref-visual-card,
  body:not(.session-started) .vitrine-ref-login-copy {
    padding: 24px !important;
    border-radius: 24px !important;
  }

  body:not(.session-started) .vitrine-ref-login-section {
    padding: 52px 18px 70px !important;
  }

  body:not(.session-started) .vitrine-ref-cards,
  body:not(.session-started) .vitrine-ref-platform-cards,
  body:not(.session-started) .vitrine-ref-subjects,
  body:not(.session-started) .vitrine-ref-footer {
    grid-template-columns: 1fr !important;
  }

  body:not(.session-started) .vitrine-ref-platform {
    padding: 64px 20px !important;
  }

  body:not(.session-started) .vitrine-ref-cta {
    align-items: stretch !important;
    flex-direction: column !important;
    padding: 34px 24px !important;
    text-align: center !important;
  }
}

.vitrine-admin {
  display: grid;
  gap: 22px;
}

.vitrine-admin[hidden] {
  display: none !important;
}

.vitrine-admin .admin-section-heading {
  margin-bottom: 0;
}

.vitrine-admin-block {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(109, 50, 199, .14);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(250,246,255,.88));
  box-shadow: 0 16px 36px rgba(68, 33, 105, .08);
}

.vitrine-admin-block h4 {
  margin: 0 0 16px;
  color: #37145f;
  font-size: 1.05rem;
  font-weight: 950;
}

.vitrine-admin-help {
  margin: -6px 0 18px;
  color: #6d5a7d;
  font-size: .94rem;
  line-height: 1.55;
}

.vitrine-admin-help strong {
  color: #4b1678;
}

.vitrine-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.vitrine-admin-platform-fields,
.vitrine-admin-subject-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vitrine-admin label {
  min-width: 0;
}

.vitrine-admin textarea {
  min-height: 92px;
  resize: vertical;
}

.vitrine-admin-image-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 18px;
  align-items: stretch;
  margin-top: 14px;
}

.vitrine-admin-image-preview {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border: 1px solid rgba(109, 50, 199, .16);
  border-radius: 22px;
  background: #f7f0ff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.74);
}

.vitrine-admin-image-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
}

.vitrine-admin-logo-preview img {
  padding: 28px;
  object-fit: contain;
  background: linear-gradient(135deg, #fff, #f7efff);
}

.vitrine-admin-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.vitrine-admin-visual-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(109, 50, 199, .12);
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 14px 30px rgba(68, 33, 105, .07);
}

.vitrine-admin-visual-card .vitrine-admin-image-preview {
  min-height: 150px;
  border-radius: 18px;
}

.vitrine-admin-visual-card .vitrine-admin-image-preview img {
  min-height: 150px;
}

/* Page d'accueil : version connexion uniquement */
body:not(.session-started) .vitrine-ref-header,
body:not(.session-started) .vitrine-ref-btn,
body:not(.session-started) .vitrine-ref-cards,
body:not(.session-started) .vitrine-ref-platform,
body:not(.session-started) .vitrine-ref-footer {
  display: none !important;
}

body:not(.session-started) .vitrine-home {
  min-height: calc(100vh - 118px) !important;
  padding: clamp(18px, 3vw, 40px) !important;
}

body:not(.session-started) .vitrine-ref-hero {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px) !important;
  gap: clamp(28px, 5vw, 70px) !important;
  min-height: calc(100vh - 180px) !important;
  max-width: 1220px !important;
  margin: 0 auto !important;
  padding: clamp(34px, 5vw, 72px) !important;
  border: 1px solid rgba(109, 50, 199, .16) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 84% 16%, rgba(255, 210, 132, .20), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(250,244,255,.88)) !important;
  box-shadow: 0 28px 80px rgba(55, 20, 95, .16) !important;
}

body:not(.session-started) .vitrine-ref-hero-bg {
  inset: auto clamp(30px, 4vw, 70px) clamp(28px, 4vw, 70px) auto !important;
  width: min(46%, 520px) !important;
  height: min(52%, 430px) !important;
  border-radius: 32px !important;
  background:
    linear-gradient(rgba(40, 19, 74, .10), rgba(18, 11, 34, .14)),
    var(--vitrine-hero-image, url("assets/vitrine-rfc-background.png")) center / cover no-repeat !important;
  box-shadow: 0 22px 60px rgba(55, 20, 95, .18) !important;
  animation: vitrineRefZoom 18s ease-in-out infinite alternate !important;
}

body:not(.session-started) .vitrine-ref-overlay {
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.80) 50%, rgba(255,247,237,.38) 100%),
    radial-gradient(circle at 18% 22%, rgba(150, 84, 255, .12), transparent 28%) !important;
}

body:not(.session-started) .vitrine-ref-content {
  max-width: 620px !important;
  color: #34114f !important;
}

body:not(.session-started) .vitrine-ref-subtitle {
  display: inline-flex !important;
  width: fit-content !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  color: #6d32c7 !important;
  background: #f1e7ff !important;
}

body:not(.session-started) .vitrine-ref-content h2 {
  color: #2c0d45 !important;
  font-size: clamp(3rem, 5.8vw, 5.4rem) !important;
  line-height: .98 !important;
  text-shadow: none !important;
}

body:not(.session-started) .vitrine-ref-description {
  color: #6f5d7d !important;
  max-width: 560px !important;
}

body:not(.session-started) .vitrine-ref-form {
  align-self: center !important;
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(109, 50, 199, .16) !important;
  box-shadow: 0 24px 60px rgba(55, 20, 95, .14) !important;
}

body:not(.session-started) .vitrine-ref-form .primary-action {
  background: linear-gradient(135deg, #5b1c85, #8d3fc2) !important;
}

.admin-workspace-nav {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
}

.admin-workspace-nav button {
  flex: 1 1 150px !important;
}

@media (max-width: 920px) {
  body:not(.session-started) .vitrine-ref-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 28px !important;
  }

  body:not(.session-started) .vitrine-ref-hero-bg {
    position: relative !important;
    inset: auto !important;
    order: 2 !important;
    width: 100% !important;
    height: 240px !important;
    grid-row: auto !important;
  }

  body:not(.session-started) .vitrine-ref-form {
    order: 3 !important;
  }
}

.vitrine-admin-image-preview span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #37145f;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 18px rgba(55, 20, 95, .13);
  font-size: .82rem;
  font-weight: 900;
}

@media (max-width: 980px) {
  .vitrine-admin-grid,
  .vitrine-admin-platform-fields,
  .vitrine-admin-subject-fields,
  .vitrine-admin-image-row {
    grid-template-columns: 1fr;
  }
}

body:not(.session-started) {
  background:
    radial-gradient(circle at 18% 8%, rgba(234, 215, 246, 0.72), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(169, 106, 208, 0.22), transparent 26%),
    linear-gradient(135deg, #fff8ff, #f7effd 44%, #fbf3ff);
}

body:not(.session-started) .session-card {
  background:
    radial-gradient(circle at 70% 26%, rgba(234, 215, 246, 0.52), transparent 20%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(251, 243, 255, 0.94));
}

body:not(.session-started) .session-card::after {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.65), transparent 35%),
    linear-gradient(135deg, #ead7f6, #7433a3);
  box-shadow: 0 24px 34px rgba(116, 51, 163, 0.22);
}

body:not(.session-started) .landing-pathways article {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(251, 243, 255, 0.94));
}

body:not(.session-started) .landing-pathways article span,
body:not(.session-started) .landing-pathways article:nth-child(2) span {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(135deg, #a96ad0, #7433a3);
  box-shadow: 0 16px 28px rgba(116, 51, 163, 0.22);
}

.pathway-adult.session-started {
  --paper: #fbf3ff;
  --ink: #241238;
  --muted: #70627e;
  --line: #e7d8f1;
  --mauve-light: #ead7f6;
  --mauve: #a96ad0;
  --mauve-strong: #7433a3;
  --mauve-dark: #3b145f;
  --accent: #8d45ba;
  --accent-dark: #3b145f;
  background:
    radial-gradient(circle at 18% 8%, rgba(234, 215, 246, 0.6), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(116, 51, 163, 0.18), transparent 26%),
    linear-gradient(135deg, #fff8ff, #f7effd 48%, #fbf3ff);
}

.pathway-adult.session-started .topbar {
  background:
    linear-gradient(180deg, #3b145f, #4f1b78 68%, #7433a3),
    #3b145f;
  box-shadow: 24px 0 54px rgba(59, 20, 95, 0.24);
}

.pathway-adult.session-started .topbar::after {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)),
    rgba(234, 215, 246, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 34px rgba(59, 20, 95, 0.2);
}

.pathway-adult.session-started .step-tab.active {
  color: #3b145f;
  background: linear-gradient(135deg, #fff, #ead7f6);
  box-shadow: 0 18px 34px rgba(59, 20, 95, 0.24);
}

.pathway-adult.session-started .step-tab.active::before,
.pathway-adult.session-started .adult-quick-grid span,
.pathway-adult.session-started .adult-module-icon,
.pathway-adult.session-started .adult-calendar-item time {
  color: #fff;
  background: linear-gradient(135deg, #a96ad0, #7433a3);
  box-shadow: 0 14px 24px rgba(116, 51, 163, 0.24);
}

.pathway-adult.session-started .adult-welcome-card {
  background:
    radial-gradient(circle at 78% 24%, rgba(234, 215, 246, 0.72), transparent 22%),
    radial-gradient(circle at 92% 72%, rgba(169, 106, 208, 0.24), transparent 24%),
    linear-gradient(135deg, #fff, #fff8ff 42%, #f2e4fa);
  box-shadow: 0 28px 66px rgba(59, 20, 95, 0.18);
}

.pathway-adult.session-started .adult-welcome-card h3,
.pathway-adult.session-started .adult-card h4,
.pathway-adult.session-started .adult-progress-ring strong,
.pathway-adult.session-started .adult-reminder-card button:hover strong {
  color: #3b145f;
}

.pathway-adult.session-started .adult-pill {
  color: #3b145f;
  background: linear-gradient(135deg, #ead7f6, #fff8ff);
  box-shadow: 0 12px 24px rgba(116, 51, 163, 0.18);
}

.pathway-adult.session-started .adult-person {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(145deg, #a96ad0, #3b145f);
  box-shadow: 0 30px 54px rgba(59, 20, 95, 0.22);
}

.pathway-adult.session-started .adult-person::before {
  background: radial-gradient(circle at 36% 38%, rgba(255, 255, 255, 0.42), transparent 14%), #d9a4ef;
  box-shadow: 0 -20px 0 8px #2a0f45;
}

.pathway-adult.session-started .adult-laptop {
  background: linear-gradient(145deg, #fff, #d9c2ec);
  box-shadow: 0 12px 0 #2a0f45, 0 22px 28px rgba(59, 20, 95, 0.2);
}

.pathway-adult.session-started .adult-plant {
  background: #3b145f;
}

.pathway-adult.session-started .adult-plant::before {
  background:
    radial-gradient(circle at 25% 45%, #a96ad0 0 18px, transparent 19px),
    radial-gradient(circle at 65% 20%, #ead7f6 0 18px, transparent 19px),
    radial-gradient(circle at 62% 70%, #7433a3 0 20px, transparent 21px);
}

.pathway-adult.session-started .adult-card,
.pathway-adult.session-started .adult-quick-grid button,
.pathway-adult.session-started .adult-module-preview,
.pathway-adult.session-started .adult-calendar-item {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(251, 243, 255, 0.94));
  box-shadow: 0 22px 52px rgba(59, 20, 95, 0.12);
}

.pathway-adult.session-started .adult-progress-ring {
  background:
    radial-gradient(circle, #fff 0 55%, transparent 56%),
    conic-gradient(#a96ad0 calc(var(--progress) * 1%), #7433a3 0 72%, #efe3f7 0);
  box-shadow: 0 20px 34px rgba(116, 51, 163, 0.18);
}

.pathway-adult.session-started .adult-course-thumb {
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.48), transparent 18%),
    linear-gradient(145deg, #a96ad0, #3b145f);
}

/* Accent de caractère : jaune chaud, lisible et plus doux que les dégradés forts. */
.primary-action,
.lesson-next-action,
.pathway-adult.session-started .kids-welcome-card .primary-action,
.pathway-kids.session-started .kids-welcome-card .primary-action {
  background: linear-gradient(135deg, var(--mauve-strong), var(--mauve-dark));
  box-shadow: 0 18px 38px rgba(116, 51, 163, 0.2);
}

.primary-action:hover,
.lesson-next-action:hover {
  filter: saturate(1.08);
  transform: translateY(-2px);
}

.secondary-action:hover,
.module-card-actions .secondary-action:hover {
  border-color: rgba(18, 184, 200, 0.45);
  color: var(--contrast-dark);
  background: var(--contrast-soft);
}

.progress-bar,
.adult-inline-progress span,
.pathway-adult.session-started .adult-inline-progress span,
.pathway-kids.session-started .adult-inline-progress span,
.elearning-progress span.active {
  background: linear-gradient(90deg, var(--contrast), var(--mauve-strong));
}

.pathway-adult.session-started .adult-progress-ring,
.adult-progress-ring {
  background:
    radial-gradient(circle, #fff 0 55%, transparent 56%),
    conic-gradient(var(--contrast) calc(var(--progress) * 1%), var(--mauve-strong) 0 72%, #efe3f7 0);
}

.pathway-adult.session-started .step-tab.active::before,
.pathway-kids.session-started .step-tab.active::before,
.pathway-adult.session-started .adult-quick-grid span,
.pathway-kids.session-started .adult-quick-grid span,
.pathway-adult.session-started .adult-module-icon,
.pathway-kids.session-started .adult-module-icon,
.pathway-adult.session-started .adult-calendar-item time,
.pathway-kids.session-started .adult-calendar-item time,
.lesson-reading-steps b {
  color: var(--mauve-dark);
  background: linear-gradient(135deg, var(--contrast-warm), var(--contrast));
  box-shadow: 0 14px 28px rgba(246, 196, 83, 0.24);
}

.module-section-title {
  border-left-color: var(--contrast);
}

.module-card span,
.lesson-reading-label,
.elearning-page-heading span {
  color: var(--contrast-dark);
  background: var(--contrast-soft);
}

.module-card:hover,
.adult-module-preview:hover,
.pathway-kids .adult-module-preview:hover {
  border-color: rgba(18, 184, 200, 0.28);
  box-shadow: 0 26px 58px rgba(18, 184, 200, 0.16), 0 18px 40px rgba(59, 20, 95, 0.1);
}

.pathway-adult.session-started .adult-welcome-card,
.pathway-kids.session-started .adult-welcome-card {
  background:
    radial-gradient(circle at 76% 22%, rgba(255, 224, 138, 0.34), transparent 22%),
    radial-gradient(circle at 91% 68%, rgba(169, 106, 208, 0.16), transparent 24%),
    linear-gradient(135deg, #fff, #fffaf0 42%, #f5e8fb);
}

.pathway-adult.session-started .adult-pill,
.pathway-kids.session-started .adult-pill,
.module-visibility-status {
  border: 1px solid rgba(18, 184, 200, 0.2);
  color: var(--contrast-dark);
  background: var(--contrast-soft);
}

/* Leçon des modules : l'image devient un vrai support pédagogique,
   plus grande et lisible sans rognage. */
.elearning-lesson {
  display: grid;
  gap: 18px;
}

.elearning-progress {
  display: flex;
  gap: 8px;
}

.elearning-progress span {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #eadff2;
}

.elearning-progress span.active {
  background: linear-gradient(135deg, #7433a3, #a96ad0);
}

.elearning-page {
  display: grid;
  gap: 18px;
}

.elearning-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.elearning-page-heading small {
  display: block;
  margin-bottom: 4px;
  color: #8a5ca5;
  font-weight: 900;
  text-transform: uppercase;
}

.elearning-page-heading h5 {
  margin: 0;
  color: var(--mauve-dark);
  font-size: 1.35rem;
}

.elearning-page-heading span {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--mauve-dark);
  background: #f3e8ff;
  font-weight: 900;
}

.lesson-reading-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lesson-reading-steps span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(116, 51, 163, 0.14);
  border-radius: 16px;
  color: #4b176f;
  background: #fff;
  box-shadow: 0 10px 24px rgba(59, 20, 95, 0.07);
  font-weight: 900;
}

.lesson-reading-steps b {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #7433a3, #a96ad0);
}

.guided-lesson-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(420px, 1.14fr);
  gap: 26px;
  align-items: stretch;
}

.guided-lesson-reading-card {
  min-height: 420px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  color: var(--ink);
  background: linear-gradient(145deg, #fff, #fbf6ff);
  box-shadow: 0 18px 42px rgba(59, 20, 95, 0.08);
}

.lesson-reading-label {
  width: fit-content;
  margin: 0 0 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #7433a3;
  background: #f3e8ff;
  font-weight: 900;
}

.guided-lesson-text {
  line-height: 1.75;
  font-size: 1.04rem;
}

.guided-lesson-text p {
  margin: 0 0 14px;
}

.guided-lesson-text p:last-child,
.guided-lesson-text ul:last-child {
  margin-bottom: 0;
}

.guided-lesson-text ul {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.guided-lesson-text li {
  position: relative;
  padding-left: 26px;
}

.guided-lesson-text li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #16856b;
  font-weight: 900;
}

.guided-lesson-visual {
  display: grid;
  place-items: center;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: clamp(420px, 34vw, 620px);
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(116, 51, 163, 0.18);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 22px 56px rgba(59, 20, 95, 0.14);
  overflow: hidden;
}

.guided-lesson-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: clamp(400px, 32vw, 590px);
  object-fit: contain;
  object-position: center;
}

.guided-lesson-visual figcaption {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  color: #5e3b72;
  background: #f7f0fb;
  text-align: center;
  font-weight: 900;
}

.guided-lesson-visual-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 360px;
  border: 2px dashed rgba(116, 51, 163, 0.28);
  border-radius: 20px;
  color: var(--mauve-dark);
  background: #fbf6ff;
  font-size: 4rem;
}

.elearning-page footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-top: 4px;
}

.lesson-next-action {
  min-width: min(320px, 100%);
  min-height: 52px;
  font-size: 1rem;
  box-shadow: 0 18px 36px rgba(116, 51, 163, 0.24);
}

@media (max-width: 880px) {
  .lesson-reading-steps {
    grid-template-columns: 1fr;
  }

  .guided-lesson-layout {
    grid-template-columns: 1fr;
  }

  .guided-lesson-reading-card {
    min-height: 0;
  }

  .guided-lesson-visual {
    min-height: 320px;
  }

  .guided-lesson-visual img {
    max-height: 420px;
  }

  body:not(.session-started) .session-card {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 28px;
  }

  body:not(.session-started) .session-visual {
    grid-column: 1;
    min-height: 240px;
    border-width: 6px;
  }

  body:not(.session-started) .session-form {
    padding: 16px;
  }

  body:not(.session-started) .landing-pathways article {
    grid-template-columns: 1fr;
  }

  body:not(.session-started) .landing-pathways article span {
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  body:not(.session-started) .session-card {
    width: min(100%, calc(100vw - 20px));
    padding: 14px;
    border-radius: 22px;
  }

  body:not(.session-started) .session-intro h2 {
    font-size: 1.8rem;
  }

  body:not(.session-started) .session-visual {
    min-height: 200px;
    border-radius: 22px;
  }

  body:not(.session-started) .landing-benefits {
    grid-template-columns: 1fr;
  }
}

/* Couche finale de contraste visuel. */
body:not(.session-started),
.pathway-adult.session-started,
.pathway-kids.session-started {
  background:
    radial-gradient(circle at 86% 10%, rgba(255, 224, 138, 0.22), transparent 24%),
    radial-gradient(circle at 12% 10%, rgba(234, 215, 246, 0.42), transparent 28%),
    linear-gradient(135deg, #fffaf5, #f8f0fd 50%, #fff8e8) !important;
}

.pathway-adult.session-started .topbar,
.pathway-kids.session-started .topbar {
  background:
    radial-gradient(circle at 88% 12%, rgba(246, 196, 83, 0.2), transparent 24%),
    linear-gradient(180deg, #351054, #4b176f 62%, #7a2f87) !important;
}

.primary-action,
.lesson-next-action {
  background: linear-gradient(135deg, var(--mauve-strong), var(--mauve-dark)) !important;
  box-shadow: 0 18px 38px rgba(116, 51, 163, 0.22);
}

.progress-bar,
.adult-inline-progress span,
.pathway-adult.session-started .adult-inline-progress span,
.pathway-kids.session-started .adult-inline-progress span,
.elearning-progress span.active {
  background: linear-gradient(90deg, var(--contrast), var(--mauve-strong)) !important;
}

.pathway-adult.session-started .adult-module-icon,
.pathway-kids.session-started .adult-module-icon,
.pathway-adult.session-started .adult-quick-grid span,
.pathway-kids.session-started .adult-quick-grid span,
.pathway-adult.session-started .adult-calendar-item time,
.pathway-kids.session-started .adult-calendar-item time,
.lesson-reading-steps b {
  color: var(--mauve-dark) !important;
  background: linear-gradient(135deg, var(--contrast-warm), var(--contrast)) !important;
}

.module-section-title {
  border-left-color: var(--contrast) !important;
}

/* Quiz plus ludique : on remplace l'effet formulaire par des cartes de choix. */
.quiz,
.visual-assessment,
.module-quiz-list {
  display: grid;
  gap: 24px;
}

.quiz-step,
.visual-exercise,
.module-quiz-list li {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 26px;
  border: 1px solid rgba(236, 72, 153, 0.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 8%, rgba(246, 196, 83, 0.12), transparent 22%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(255, 250, 239, 0.88));
  box-shadow: 0 22px 56px rgba(59, 20, 95, 0.12);
  overflow: hidden;
}

.quiz-step::before,
.visual-exercise::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 126px;
  height: 126px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(39, 199, 184, 0.2), rgba(236, 72, 153, 0.08) 58%, transparent 60%);
  pointer-events: none;
}

.quiz-step legend,
.visual-exercise legend {
  width: fit-content;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--mauve-dark);
  background: #fff6da;
  box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.5), 0 14px 30px rgba(59, 20, 95, 0.08);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.3;
}

.quiz-step > p,
.visual-exercise > p {
  margin: 0;
  padding: 14px 16px;
  border-left: 5px solid var(--contrast);
  border-radius: 18px;
  color: #40214f;
  background: rgba(255, 255, 255, 0.72);
  font-weight: 850;
}

.quiz-step > label,
.visual-exercise > label,
.module-quiz-list label {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 14px 16px;
  border: 2px solid rgba(116, 51, 163, 0.22);
  border-radius: 20px;
  color: #311441;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 10px 22px rgba(59, 20, 95, 0.08),
    inset 0 0 0 1px rgba(234, 215, 246, 0.55);
  cursor: pointer;
  font-weight: 900;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.quiz-step > label:hover,
.visual-exercise > label:hover,
.module-quiz-list label:hover {
  transform: translateY(-3px);
  border-color: rgba(116, 51, 163, 0.62);
  box-shadow:
    0 20px 42px rgba(59, 20, 95, 0.18),
    0 0 0 5px rgba(234, 215, 246, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.88);
}

.quiz-step > label::before,
.visual-exercise > label::before,
.module-quiz-list label::before {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 14px;
  color: var(--mauve-dark);
  background: linear-gradient(135deg, var(--contrast-warm), var(--contrast));
  box-shadow: 0 10px 20px rgba(246, 196, 83, 0.18);
  font-weight: 950;
}

.quiz-step > label:nth-of-type(1)::before,
.visual-exercise > label:nth-of-type(1)::before,
.module-quiz-list label:nth-of-type(1)::before {
  content: "A";
}

.quiz-step > label:nth-of-type(2)::before,
.visual-exercise > label:nth-of-type(2)::before,
.module-quiz-list label:nth-of-type(2)::before {
  content: "B";
}

.quiz-step > label:nth-of-type(3)::before,
.visual-exercise > label:nth-of-type(3)::before,
.module-quiz-list label:nth-of-type(3)::before {
  content: "C";
}

.quiz-step input[type="radio"],
.visual-exercise input[type="radio"],
.module-quiz-list input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.quiz-step > label:has(input[type="radio"]:checked),
.visual-exercise > label:has(input[type="radio"]:checked),
.module-quiz-list label:has(input[type="radio"]:checked) {
  border-color: rgba(116, 51, 163, 0.85);
  color: #2f123d;
  background:
    linear-gradient(135deg, rgba(255, 252, 244, 0.98), rgba(250, 241, 255, 0.98));
  box-shadow:
    0 24px 46px rgba(59, 20, 95, 0.22),
    0 0 0 6px rgba(234, 215, 246, 0.82),
    inset 0 0 0 1px rgba(255, 255, 255, 0.92);
}

.quiz-step > label:has(input[type="radio"]:checked)::after,
.visual-exercise > label:has(input[type="radio"]:checked)::after,
.module-quiz-list label:has(input[type="radio"]:checked)::after {
  content: "✓";
  position: absolute;
  right: 14px;
  top: 50%;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #3a154f;
  background: linear-gradient(135deg, #ffe08a, #f6c453);
  box-shadow: 0 8px 16px rgba(138, 90, 0, 0.22);
  transform: translateY(-50%);
  font-weight: 950;
}

.quiz > .primary-action,
.visual-assessment > .primary-action {
  justify-self: center;
  min-width: min(360px, 100%);
  min-height: 58px;
  border-radius: 20px;
  font-size: 1.02rem;
}

.feedback {
  border-radius: 18px;
}

.module-card,
.adult-card,
.adult-module-preview,
.catalog-panel,
.admin-form,
.guided-lesson-reading-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 232, 0.78)) !important;
}

.module-card:nth-child(3n + 1) .module-card-image.placeholder,
.adult-module-preview:nth-child(3n + 1),
.premium-module-card:nth-child(3n + 1) .premium-module-visual {
  background: linear-gradient(145deg, #fff2c4, #f6c453) !important;
}

.module-card:nth-child(3n + 2) .module-card-image.placeholder,
.adult-module-preview:nth-child(3n + 2),
.premium-module-card:nth-child(3n + 2) .premium-module-visual {
  background: linear-gradient(145deg, #f7effd, #ead7f6) !important;
}

.module-card:nth-child(3n) .module-card-image.placeholder,
.adult-module-preview:nth-child(3n),
.premium-module-card:nth-child(3n) .premium-module-visual {
  background: linear-gradient(145deg, #fff6da, #d9b8ed) !important;
}

.lesson-reading-label,
.elearning-page-heading span,
.module-card span,
.pathway-adult.session-started .adult-pill,
.pathway-kids.session-started .adult-pill {
  color: var(--contrast-dark) !important;
  background: linear-gradient(135deg, #fff9e8, #fff1c2) !important;
}

.quiz-step legend,
.visual-exercise legend,
.module-card strong,
.adult-card h4,
.adult-module-preview strong,
.premium-module-card strong,
.elearning-page-heading h5,
.guided-stage-heading h4 {
  color: var(--mauve-dark) !important;
}

.quiz-step legend,
.visual-exercise legend {
  background: #fff6da !important;
  box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.5), 0 10px 24px rgba(59, 20, 95, 0.08) !important;
}

/* Priorité finale : aucune édition d'image hors dashboard formateur déverrouillé. */
body:not(.admin-unlocked) label[data-image-card] {
  cursor: default !important;
  pointer-events: none !important;
}

body:not(.admin-unlocked) [data-image-input] {
  display: none !important;
}

body:not(.admin-unlocked) .exercise-image-card.filled span,
body:not(.admin-unlocked) .exercise-image-card.filled:hover span,
body:not(.admin-unlocked) .exercise-image-card.filled:focus-within span {
  display: none !important;
}

/* Navigation interne et garde-fous UX. */
.internal-navigation[hidden] {
  display: none;
}

.session-started .internal-navigation {
  position: sticky;
  top: 10px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(1240px, calc(100% - 290px));
  min-height: 48px;
  margin: 10px 24px 8px 274px;
  padding: 7px 10px;
  border: 1px solid rgba(116, 51, 163, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 28px rgba(59, 20, 95, 0.1);
  backdrop-filter: blur(14px);
}

.internal-navigation button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #e2d3ed;
  border-radius: 8px;
  color: #4b176f;
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}

.internal-navigation button:disabled {
  opacity: 0.4;
  cursor: default;
}

.internal-navigation span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #4b176f;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mobileChangeLearner {
  display: inline-flex;
  align-items: center;
}

.module-meta {
  color: #76588c;
  font-weight: 800;
}

.module-video {
  margin: 4px 0 18px;
}

.visibility-control {
  display: flex;
  align-items: center;
  align-self: end;
  min-height: 48px;
  gap: 10px;
}

.visibility-control input {
  width: 20px;
  height: 20px;
}

/* Les apprenants consultent les images. Seul l'espace formateur peut les remplacer. */
body:not(.admin-unlocked) [data-image-card] {
  cursor: default;
  pointer-events: none;
}

body:not(.admin-unlocked) [data-image-input] {
  display: none !important;
}

body:not(.admin-unlocked) .exercise-image-card.filled:hover span,
body:not(.admin-unlocked) .exercise-image-card.filled:focus-within span {
  display: none;
}

.chatbot-launcher {
  isolation: isolate;
  animation: assistantFloat 3.6s ease-in-out infinite;
}

@keyframes assistantFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Protection globale contre les textes qui débordent des cartes. */
.panel *,
.module-card *,
.module-detail *,
.premium-adult-dashboard *,
.kid-dashboard-shell * {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 880px) {
  .session-started .internal-navigation {
    top: 8px;
    width: calc(100% - 20px);
    margin: 8px auto;
    padding-right: 52px;
  }

  .internal-navigation span {
    font-size: 0.85rem;
  }

  #mobileChangeLearner {
    display: inline-flex;
    align-items: center;
  }

  .session-started .chatbot-launcher::before {
    display: none;
  }
}

@media (max-width: 560px) {
  .session-started .internal-navigation {
    gap: 6px;
    padding-left: 6px;
  }

  .internal-navigation button {
    padding: 0 9px;
    font-size: 0.75rem;
  }

  .internal-navigation span {
    display: none;
  }

  #mobileChangeLearner {
    margin-left: auto;
  }
}

.pathway-adult.session-started .kids-learning-dashboard,
.pathway-kids.session-started .kids-learning-dashboard {
  display: grid;
  gap: 24px;
}

.pathway-adult.session-started .kids-welcome-card,
.pathway-kids.session-started .kids-welcome-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  border: 0;
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.36), transparent 14%),
    radial-gradient(circle at 82% 72%, rgba(234, 215, 246, 0.34), transparent 24%),
    linear-gradient(135deg, #7b3ff2, #7433a3 48%, #3b145f);
  box-shadow: 0 30px 76px rgba(59, 20, 95, 0.28);
}

.pathway-adult.session-started .kids-welcome-card::before,
.pathway-kids.session-started .kids-welcome-card::before {
  content: "";
  position: absolute;
  inset: auto -70px -110px 28%;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
}

.pathway-adult.session-started .kids-welcome-card > *,
.pathway-kids.session-started .kids-welcome-card > * {
  position: relative;
  z-index: 1;
}

.pathway-adult.session-started .kids-welcome-card h3,
.pathway-kids.session-started .kids-welcome-card h3 {
  color: #fff;
  font-size: clamp(2.2rem, 4.2vw, 3.45rem);
}

.pathway-adult.session-started .kids-welcome-card p,
.pathway-kids.session-started .kids-welcome-card p {
  color: rgba(255, 255, 255, 0.9);
}

.pathway-adult.session-started .kids-welcome-card .adult-pill,
.pathway-kids.session-started .kids-welcome-card .adult-pill,
.pathway-kids.session-started .kids-welcome-card .kids-pill {
  color: #3b145f;
  background: linear-gradient(135deg, #fff, #ead7f6);
  box-shadow: 0 14px 28px rgba(59, 20, 95, 0.18);
}

.pathway-adult.session-started .kids-welcome-card .primary-action,
.pathway-kids.session-started .kids-welcome-card .primary-action {
  color: #3b145f;
  background: #fff;
  box-shadow: 0 18px 32px rgba(32, 20, 95, 0.22);
}

.pathway-adult.session-started .kids-welcome-card .secondary-action,
.pathway-kids.session-started .kids-welcome-card .secondary-action {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
}

.pathway-adult.session-started .kids-hero-scene,
.pathway-kids.session-started .kids-hero-scene {
  min-height: 240px;
}

.pathway-adult.session-started .kids-robot-face,
.pathway-kids.session-started .kids-robot-face {
  width: 174px;
  height: 160px;
  border: 9px solid rgba(255, 255, 255, 0.84);
  border-radius: 44px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.7), transparent 14%),
    linear-gradient(145deg, #d6a8f0, #7433a3);
  box-shadow: 0 30px 54px rgba(32, 20, 95, 0.3), inset -14px -18px 28px rgba(59, 20, 95, 0.14);
}

.pathway-adult.session-started .kids-robot-face::before,
.pathway-adult.session-started .kids-robot-face::after,
.pathway-kids.session-started .kids-robot-face::before,
.pathway-kids.session-started .kids-robot-face::after {
  background: #3b145f;
  box-shadow: inset 0 0 0 7px #fff, 0 4px 0 rgba(59, 20, 95, 0.16);
}

.pathway-adult.session-started .kids-robot-face i,
.pathway-adult.session-started .kids-robot-face i::before,
.pathway-kids.session-started .kids-robot-face i,
.pathway-kids.session-started .kids-robot-face i::before {
  border-color: #3b145f;
}

.pathway-adult.session-started .kids-robot-face i::before,
.pathway-adult.session-started .floating-star,
.pathway-adult.session-started .floating-rocket::after,
.pathway-kids.session-started .kids-robot-face i::before,
.pathway-kids.session-started .floating-star,
.pathway-kids.session-started .floating-rocket::after {
  background: #ead7f6;
}

.pathway-adult.session-started .floating-rocket,
.pathway-kids.session-started .floating-rocket {
  background: linear-gradient(135deg, #fff, #ead7f6);
}

.pathway-adult.session-started .floating-rocket::before,
.pathway-kids.session-started .floating-rocket::before {
  background: #a96ad0;
}

.pathway-adult.session-started .adult-card,
.pathway-kids.session-started .adult-card {
  border: 0;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(251, 243, 255, 0.94));
  box-shadow: 0 22px 52px rgba(59, 20, 95, 0.12);
}

.pathway-adult.session-started .adult-module-preview,
.pathway-kids.session-started .adult-module-preview {
  min-height: 152px;
  border: 0;
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(145deg, #a96ad0, #7433a3);
  box-shadow: 0 20px 40px rgba(59, 20, 95, 0.18);
}

.pathway-adult.session-started .adult-module-preview:nth-child(2n),
.pathway-kids.session-started .adult-module-preview:nth-child(2n) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(145deg, #c58bea, #6d4cc2);
}

.pathway-adult.session-started .adult-module-preview:nth-child(3n),
.pathway-kids.session-started .adult-module-preview:nth-child(3n) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(145deg, #8d45ba, #3b145f);
}

.pathway-adult.session-started .adult-module-preview strong,
.pathway-adult.session-started .adult-module-preview small,
.pathway-kids.session-started .adult-module-preview strong,
.pathway-kids.session-started .adult-module-preview small {
  color: #fff;
}

.pathway-adult.session-started .adult-module-icon,
.pathway-kids.session-started .adult-module-icon {
  color: #3b145f;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 24px rgba(32, 20, 95, 0.16);
}

.pathway-adult.session-started .adult-module-preview i,
.pathway-kids.session-started .adult-module-preview i {
  background: rgba(255, 255, 255, 0.34);
}

.pathway-adult.session-started .adult-module-preview i b,
.pathway-kids.session-started .adult-module-preview i b,
.pathway-adult.session-started .adult-inline-progress span,
.pathway-kids.session-started .adult-inline-progress span {
  background: linear-gradient(90deg, #fff, #ead7f6);
}

@media (max-width: 880px) {
  .pathway-adult.session-started .kids-welcome-card,
  .pathway-kids.session-started .kids-welcome-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .pathway-adult.session-started .kids-hero-scene,
  .pathway-kids.session-started .kids-hero-scene {
    order: -1;
  }
}

.pathway-adult.session-started .kids-learning-dashboard,
.pathway-kids.session-started .kids-learning-dashboard {
  display: grid;
  gap: 24px;
}

.pathway-adult.session-started .kids-welcome-card,
.pathway-kids.session-started .kids-welcome-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  border: 0;
  border-radius: 34px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.36), transparent 14%),
    radial-gradient(circle at 82% 72%, rgba(234, 215, 246, 0.34), transparent 24%),
    linear-gradient(135deg, #7b3ff2, #7433a3 48%, #3b145f);
  box-shadow: 0 30px 76px rgba(59, 20, 95, 0.28);
}

.pathway-adult.session-started .kids-welcome-card h3,
.pathway-kids.session-started .kids-welcome-card h3 {
  color: #fff;
}

.pathway-adult.session-started .kids-welcome-card p,
.pathway-kids.session-started .kids-welcome-card p {
  color: rgba(255, 255, 255, 0.9);
}

.pathway-adult.session-started .kids-welcome-card .adult-pill,
.pathway-kids.session-started .kids-welcome-card .adult-pill,
.pathway-kids.session-started .kids-welcome-card .kids-pill {
  color: #3b145f;
  background: linear-gradient(135deg, #fff, #ead7f6);
}

.pathway-adult.session-started .kids-welcome-card .primary-action,
.pathway-kids.session-started .kids-welcome-card .primary-action {
  color: #3b145f;
  background: #fff;
  box-shadow: 0 18px 32px rgba(32, 20, 95, 0.22);
}

.pathway-adult.session-started .kids-welcome-card .secondary-action,
.pathway-kids.session-started .kids-welcome-card .secondary-action {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
}

.pathway-adult.session-started .kids-robot-face,
.pathway-kids.session-started .kids-robot-face {
  width: 174px;
  height: 160px;
  border: 9px solid rgba(255, 255, 255, 0.84);
  border-radius: 44px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.7), transparent 14%),
    linear-gradient(145deg, #d6a8f0, #7433a3);
  box-shadow: 0 30px 54px rgba(32, 20, 95, 0.3), inset -14px -18px 28px rgba(59, 20, 95, 0.14);
}

.pathway-adult.session-started .kids-robot-face::before,
.pathway-adult.session-started .kids-robot-face::after,
.pathway-kids.session-started .kids-robot-face::before,
.pathway-kids.session-started .kids-robot-face::after {
  background: #3b145f;
  box-shadow: inset 0 0 0 7px #fff, 0 4px 0 rgba(59, 20, 95, 0.16);
}

.pathway-adult.session-started .kids-robot-face i,
.pathway-adult.session-started .kids-robot-face i::before,
.pathway-kids.session-started .kids-robot-face i,
.pathway-kids.session-started .kids-robot-face i::before {
  border-color: #3b145f;
}

.pathway-adult.session-started .kids-robot-face i::before,
.pathway-adult.session-started .floating-star,
.pathway-adult.session-started .floating-rocket::after,
.pathway-kids.session-started .kids-robot-face i::before,
.pathway-kids.session-started .floating-star,
.pathway-kids.session-started .floating-rocket::after {
  background: #ead7f6;
}

.pathway-adult.session-started .floating-rocket,
.pathway-kids.session-started .floating-rocket {
  background: linear-gradient(135deg, #fff, #ead7f6);
}

.pathway-adult.session-started .floating-rocket::before,
.pathway-kids.session-started .floating-rocket::before {
  background: #a96ad0;
}

.pathway-adult.session-started .adult-card,
.pathway-kids.session-started .adult-card {
  border: 0;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(251, 243, 255, 0.94));
  box-shadow: 0 22px 52px rgba(59, 20, 95, 0.12);
}

.pathway-adult.session-started .adult-module-preview,
.pathway-kids.session-started .adult-module-preview {
  min-height: 152px;
  border: 0;
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(145deg, #a96ad0, #7433a3);
  box-shadow: 0 20px 40px rgba(59, 20, 95, 0.18);
}

.pathway-adult.session-started .adult-module-preview:nth-child(2n),
.pathway-kids.session-started .adult-module-preview:nth-child(2n) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(145deg, #c58bea, #6d4cc2);
}

.pathway-adult.session-started .adult-module-preview:nth-child(3n),
.pathway-kids.session-started .adult-module-preview:nth-child(3n) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(145deg, #8d45ba, #3b145f);
}

.pathway-adult.session-started .adult-module-preview strong,
.pathway-adult.session-started .adult-module-preview small,
.pathway-kids.session-started .adult-module-preview strong,
.pathway-kids.session-started .adult-module-preview small {
  color: #fff;
}

.pathway-adult.session-started .adult-module-icon,
.pathway-kids.session-started .adult-module-icon {
  color: #3b145f;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 24px rgba(32, 20, 95, 0.16);
}

@media (max-width: 880px) {
  .pathway-adult.session-started .kids-welcome-card,
  .pathway-kids.session-started .kids-welcome-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .pathway-adult.session-started .kids-hero-scene,
  .pathway-kids.session-started .kids-hero-scene {
    order: -1;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.95), transparent 20%),
    linear-gradient(135deg, rgba(247, 234, 216, 0.95), transparent 34%),
    linear-gradient(315deg, rgba(59, 20, 95, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(234, 215, 246, 0.22), transparent 48%),
    var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 32px clamp(20px, 5vw, 64px) 20px;
}

.brand-title {
  display: flex;
  gap: 22px;
  align-items: center;
}

.brand-logo {
  width: clamp(86px, 10vw, 126px);
  aspect-ratio: 1;
  border-radius: 18px;
  object-fit: contain;
  background: #fff;
  box-shadow: var(--glow);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  max-width: 760px;
  font-size: clamp(2rem, 4vw, 4.25rem);
  line-height: 1.02;
  background: linear-gradient(120deg, var(--mauve-dark), var(--mauve-strong), #1f0d35);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  font-size: clamp(1.7rem, 3vw, 3rem);
}

p {
  line-height: 1.65;
}

.progress-card {
  min-width: 180px;
  padding: 16px;
  border: 1px solid rgba(116, 51, 163, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow);
}

#progressLabel {
  display: block;
  margin-bottom: 10px;
  font-weight: 800;
}

.progress-card small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
}

.progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #efe3d4;
}

.progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mauve-light), var(--mauve), var(--mauve-dark));
  transition: width 0.45s ease;
}

main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 48px;
}

.session-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(300px, 1fr) minmax(240px, 0.8fr);
  gap: 24px;
  align-items: center;
  margin: 12px 0 18px;
  padding: 28px;
  border: 1px solid rgba(116, 51, 163, 0.2);
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(255, 248, 238, 0.96), rgba(247, 234, 216, 0.78)),
    linear-gradient(135deg, rgba(169, 106, 208, 0.14), rgba(59, 20, 95, 0.1));
  box-shadow: var(--glow);
}

/* L'accueil de session ne doit jamais rester au-dessus des espaces apprenants. */
body.session-started .session-card {
  display: none !important;
}

body:not(.session-started) {
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 216, 117, 0.32), transparent 26%),
    radial-gradient(circle at 84% 14%, rgba(38, 184, 255, 0.24), transparent 25%),
    linear-gradient(135deg, #fff8e8, #f3f4ff 48%, #e9fff8);
}

body:not(.session-started) .topbar {
  padding-bottom: 8px;
}

body:not(.session-started) .session-card {
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 0.82fr);
  padding: clamp(26px, 5vw, 54px);
  border: 0;
  border-radius: 38px;
  background:
    radial-gradient(circle at 70% 26%, rgba(255, 216, 117, 0.24), transparent 20%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 246, 228, 0.92));
  box-shadow: 0 32px 82px rgba(59, 20, 95, 0.16);
}

body:not(.session-started) .session-card::after {
  content: "";
  position: absolute;
  right: 18%;
  top: 12%;
  width: 74px;
  height: 74px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.65), transparent 35%),
    linear-gradient(135deg, #ffd875, #ff8f4d);
  box-shadow: 0 24px 34px rgba(255, 143, 77, 0.22);
  transform: rotate(12deg);
  animation: starPulse 3.4s ease-in-out infinite;
}

body:not(.session-started) .session-form {
  padding: 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 48px rgba(42, 36, 107, 0.12);
}

body:not(.session-started) .session-visual {
  grid-column: 2;
  min-height: 330px;
  border: 10px solid rgba(255, 255, 255, 0.76);
  border-radius: 34px;
  box-shadow: 0 30px 58px rgba(42, 36, 107, 0.18);
}

body:not(.session-started) .learning-path-animation {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  margin-top: -14px;
}

body:not(.session-started) .landing-pathways {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

body:not(.session-started) .landing-pathways article {
  border: 0;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 244, 225, 0.9));
  box-shadow: 0 22px 46px rgba(42, 36, 107, 0.11);
}

body:not(.session-started) .landing-pathways article span {
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(135deg, #ff8f4d, #5b64e8);
  box-shadow: 0 16px 28px rgba(91, 100, 232, 0.22);
}

body:not(.session-started) .landing-pathways article:nth-child(2) span {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(135deg, #26b8ff, #7a4cf4);
}

.session-intro {
  display: grid;
  gap: 14px;
}

.session-intro h2 {
  max-width: 620px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.05;
}

.session-intro p {
  max-width: 580px;
  color: var(--muted);
  font-size: 1.03rem;
  font-weight: 700;
}

.landing-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.landing-benefits span {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--mauve-dark);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(59, 20, 95, 0.08);
}

.learning-path-animation {
  position: relative;
  min-height: 282px;
  overflow: hidden;
  border: 1px solid rgba(116, 51, 163, 0.13);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 78%, rgba(255, 197, 104, 0.48), transparent 18%),
    radial-gradient(circle at 36% 58%, rgba(160, 101, 209, 0.32), transparent 22%),
    radial-gradient(circle at 68% 54%, rgba(49, 159, 165, 0.28), transparent 26%),
    radial-gradient(circle at 89% 48%, rgba(246, 196, 83, 0.34), transparent 24%),
    linear-gradient(180deg, #3a3538 0%, #494043 34%, #5b4a4a 58%, #fff3de 59%, #fff8ed 100%);
  box-shadow: 0 24px 52px rgba(59, 20, 95, 0.11);
  pointer-events: none;
}

.learning-path-animation::before {
  content: "";
  position: absolute;
  inset: -18% -8%;
  background:
    radial-gradient(ellipse at 12% 74%, rgba(155, 79, 197, 0.34), transparent 22%),
    radial-gradient(ellipse at 72% 70%, rgba(74, 154, 65, 0.25), transparent 24%),
    radial-gradient(ellipse at 90% 72%, rgba(139, 70, 172, 0.38), transparent 18%),
    linear-gradient(90deg, rgba(30, 28, 31, 0.58), transparent 16%, transparent 78%, rgba(30, 28, 31, 0.48));
  opacity: .82;
}

.learning-path-animation::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -10%;
  bottom: 18px;
  height: 112px;
  border-radius: 55% 45% 0 0 / 62% 62% 0 0;
  background:
    radial-gradient(ellipse at 15% 64%, rgba(151, 91, 184, .36), transparent 18%),
    radial-gradient(ellipse at 82% 44%, rgba(80, 142, 55, .36), transparent 18%),
    linear-gradient(10deg, transparent 0 18%, #fff0ca 19% 44%, #ffe3a8 45% 55%, #fff7df 56% 75%, transparent 76%);
  transform: rotate(-2deg);
  box-shadow: inset 0 10px 0 rgba(255,255,255,.38);
}

.learning-scene-cloud,
.learning-scene-plant,
.learning-scene-sparkle {
  position: absolute;
  z-index: 1;
}

.learning-scene-cloud {
  width: 86px;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 55%, rgba(255,255,255,.32) 0 18px, transparent 19px),
    radial-gradient(circle at 44% 38%, rgba(255,255,255,.28) 0 22px, transparent 23px),
    radial-gradient(circle at 74% 54%, rgba(255,255,255,.24) 0 18px, transparent 19px);
  filter: blur(.2px);
  opacity: .7;
}

.cloud-one {
  left: 8%;
  top: 38%;
}

.cloud-two {
  left: 72%;
  top: 31%;
  transform: scale(.8);
}

.learning-scene-plant {
  bottom: 54px;
  width: 78px;
  height: 34px;
  background:
    radial-gradient(ellipse at 18% 88%, #8c5c3d 0 9px, transparent 10px),
    radial-gradient(ellipse at 44% 86%, #9a6a42 0 12px, transparent 13px),
    radial-gradient(ellipse at 72% 88%, #744e35 0 8px, transparent 9px),
    radial-gradient(ellipse at 22% 34%, #5ea85d 0 9px, transparent 10px),
    radial-gradient(ellipse at 50% 22%, #72bd65 0 11px, transparent 12px),
    radial-gradient(ellipse at 75% 34%, #4f9a55 0 9px, transparent 10px);
}

.plant-one {
  left: 42%;
}

.plant-two {
  right: 5%;
  transform: scale(1.16);
}

.learning-scene-sparkle {
  width: 20px;
  height: 20px;
  background: #ffd778;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  filter: drop-shadow(0 0 12px rgba(255, 215, 120, .62));
  animation: signGlow 5s ease-in-out infinite;
}

.sparkle-one {
  right: 15%;
  top: 24%;
}

.sparkle-two {
  right: 8%;
  top: 35%;
  transform: scale(.62);
}

.learning-path-line {
  position: absolute;
  z-index: 2;
  left: 2%;
  right: -3%;
  bottom: 38px;
  height: 72px;
  border-radius: 58% 42% 44% 56% / 80% 80% 20% 20%;
  background:
    radial-gradient(ellipse at 18% 70%, rgba(170, 119, 66, .28), transparent 6%),
    radial-gradient(ellipse at 42% 62%, rgba(170, 119, 66, .22), transparent 5%),
    radial-gradient(ellipse at 65% 72%, rgba(170, 119, 66, .22), transparent 5%),
    linear-gradient(12deg, transparent 0 9%, #fff4d4 10% 33%, #ffe7b2 34% 52%, #fff7dc 53% 72%, transparent 73%);
  transform: rotate(-2deg);
  box-shadow: inset 0 8px 0 rgba(255,255,255,.48), 0 12px 22px rgba(59, 20, 95, 0.09);
}

.learning-walker {
  position: absolute;
  z-index: 6;
  left: 22%;
  bottom: 64px;
  width: 90px;
  height: 142px;
  --walker-scale: 1;
  animation: learnerWalk 9s ease-in-out infinite;
}

.walker-shadow {
  position: absolute;
  left: 5px;
  bottom: -8px;
  width: 80px;
  height: 16px;
  border-radius: 999px;
  background: rgba(40, 23, 57, 0.24);
  filter: blur(1px);
}

.walker-head {
  position: absolute;
  z-index: 3;
  left: 31px;
  top: 3px;
  width: 38px;
  height: 43px;
  border-radius: 48% 48% 46% 46%;
  background:
    radial-gradient(circle at 36% 42%, #35104f 0 2px, transparent 3px),
    radial-gradient(circle at 62% 42%, #35104f 0 2px, transparent 3px),
    linear-gradient(145deg, #ffd7b8, #f0a978);
  box-shadow: inset -5px -4px 0 rgba(90, 35, 127, 0.12), 0 8px 14px rgba(59, 20, 95, 0.12);
}

.walker-hair {
  position: absolute;
  z-index: 4;
  left: 25px;
  top: 0;
  width: 50px;
  height: 34px;
  border-radius: 50% 50% 42% 42%;
  background:
    radial-gradient(circle at 78% 64%, transparent 0 9px, #2a0f45 10px),
    linear-gradient(145deg, #35104f, #160723);
  clip-path: ellipse(52% 42% at 50% 46%);
}

.walker-smile {
  position: absolute;
  z-index: 5;
  left: 45px;
  top: 30px;
  width: 13px;
  height: 6px;
  border-bottom: 2px solid rgba(80, 28, 56, 0.72);
  border-radius: 0 0 999px 999px;
}

.walker-body {
  position: absolute;
  z-index: 2;
  left: 29px;
  top: 49px;
  width: 45px;
  height: 58px;
  border-radius: 20px 20px 16px 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(145deg, #8d45ba, #4b176f);
  box-shadow: 0 15px 24px rgba(83, 31, 121, 0.22);
}

.walker-arm {
  position: absolute;
  z-index: 3;
  top: 58px;
  width: 9px;
  height: 38px;
  border-radius: 999px;
  background: #f4b083;
  transform-origin: top center;
}

.walker-arm.one {
  left: 23px;
  transform: rotate(22deg);
  animation: walkerArmOne 1.1s ease-in-out infinite;
}

.walker-arm.two {
  left: 70px;
  transform: rotate(-28deg);
  animation: walkerArmTwo 1.1s ease-in-out infinite;
}

.walker-bag {
  position: absolute;
  z-index: 1;
  left: 11px;
  top: 65px;
  width: 29px;
  height: 36px;
  border-radius: 14px;
  background: linear-gradient(145deg, #7b4ab3, #35104f);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 10px 16px rgba(59,20,95,.12);
}

.walker-leg {
  position: absolute;
  z-index: 1;
  top: 103px;
  width: 10px;
  height: 39px;
  border-radius: 999px;
  background: #35104f;
  transform-origin: top center;
}

.walker-leg.one {
  left: 38px;
  animation: walkerLegOne 0.9s ease-in-out infinite;
}

.walker-leg.two {
  left: 56px;
  animation: walkerLegTwo 0.9s ease-in-out infinite;
}

.learning-path-signs {
  position: absolute;
  z-index: 4;
  left: 4%;
  right: 4%;
  bottom: 98px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.learning-path-signs span {
  position: relative;
  display: grid;
  min-height: 68px;
  place-items: center;
  padding: 11px 7px 9px;
  border: 2px solid rgba(255,255,255,.54);
  border-radius: 13px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255,255,255,.2), transparent 36%),
    var(--sign-color);
  box-shadow: 0 16px 28px rgba(20, 16, 28, 0.23), inset 0 2px 0 rgba(255,255,255,.28);
  font-size: clamp(0.56rem, .78vw, 0.74rem);
  font-weight: 950;
  text-align: center;
  animation: signGlow 9s ease-in-out infinite;
  animation-delay: var(--delay);
}

.learning-path-signs span i {
  display: grid;
  width: 30px;
  height: 22px;
  place-items: center;
  margin-bottom: 1px;
  border: 2px solid rgba(255,255,255,.74);
  border-radius: 8px;
  color: rgba(255,255,255,.96);
  font-style: normal;
  font-size: .78rem;
  line-height: 1;
}

.learning-path-signs span::after {
  content: "";
  position: absolute;
  bottom: -43px;
  left: 50%;
  width: 9px;
  height: 43px;
  border-radius: 3px;
  background: linear-gradient(180deg, #a66c32, #6f431f);
  transform: translateX(-50%);
}

@keyframes learnerWalk {
  0%, 8% { left: 15%; transform: translateY(4px) scale(var(--walker-scale)); }
  20% { left: 25%; transform: translateY(-1px) scale(var(--walker-scale)); }
  36% { left: 38%; transform: translateY(3px) scale(var(--walker-scale)); }
  52% { left: 51%; transform: translateY(-2px) scale(var(--walker-scale)); }
  68% { left: 64%; transform: translateY(2px) scale(var(--walker-scale)); }
  84%, 100% { left: 77%; transform: translateY(-1px) scale(var(--walker-scale)); }
}

@keyframes walkerLegOne {
  0%, 100% { transform: rotate(18deg); }
  50% { transform: rotate(-20deg); }
}

@keyframes walkerLegTwo {
  0%, 100% { transform: rotate(-20deg); }
  50% { transform: rotate(18deg); }
}

@keyframes walkerArmOne {
  0%, 100% { transform: rotate(22deg); }
  50% { transform: rotate(-8deg); }
}

@keyframes walkerArmTwo {
  0%, 100% { transform: rotate(-28deg); }
  50% { transform: rotate(4deg); }
}

@keyframes signGlow {
  0%, 12%, 100% {
    filter: saturate(0.88);
    transform: translateY(0);
  }
  18%, 27% {
    filter: saturate(1.03) brightness(1.04);
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(59, 20, 95, 0.16), 0 0 0 5px rgba(255, 224, 138, 0.18);
  }
}

.landing-pathways {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.landing-pathways article {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(116, 51, 163, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 36px rgba(59, 20, 95, 0.1);
}

.landing-pathways article span {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--mauve), var(--mauve-dark));
  font-weight: 900;
}

.landing-pathways article:nth-child(2) span {
  background: linear-gradient(135deg, #22a8f2, #7b3ff2);
}

.landing-pathways strong {
  color: var(--mauve-dark);
  font-size: 1.08rem;
}

.landing-pathways p {
  margin: 0;
  color: var(--muted);
}

body.session-started .landing-pathways {
  display: none;
}

body:not(.session-started) .landing-journey-preview {
  grid-column: 1 / -1;
  grid-row: 4;
}

body:not(.session-started) .landing-confidence {
  grid-row: 5;
}

.session-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(116, 51, 163, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 51, 163, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.session-card > * {
  position: relative;
  z-index: 1;
}

.session-card h2 {
  font-size: clamp(1.4rem, 2vw, 2.2rem);
}

.session-card p {
  margin-bottom: 0;
}

.session-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
}

.session-form label {
  display: grid;
  gap: 6px;
  color: var(--navy);
  font-weight: 800;
}

.session-error {
  min-height: 20px;
  margin: 0;
  color: #a1264f;
  font-size: 0.85rem;
  font-weight: 800;
}

.dashboard-fallback {
  display: grid;
  gap: 16px;
  padding: clamp(24px, 5vw, 48px);
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, #3b145f, #7c3aed 62%, #a96ad0);
  box-shadow: 0 24px 58px rgba(59, 20, 95, 0.22);
}

.dashboard-fallback h2,
.dashboard-fallback p {
  margin: 0;
  color: #fff;
}

.dashboard-fallback > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dashboard-fallback button {
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  color: #3b145f;
  background: #fff;
  cursor: pointer;
  font-weight: 900;
}

.session-form input,
.session-form select {
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
}

.select-shell {
  position: relative;
  display: block;
}

.select-shell::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--mauve-dark);
  border-bottom: 2px solid var(--mauve-dark);
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.session-form select {
  min-height: 54px;
  appearance: none;
  padding: 0 46px 0 16px;
  border: 2px solid rgba(116, 51, 163, 0.16);
  color: var(--mauve-dark);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 238, 0.94));
  box-shadow: 0 12px 24px rgba(59, 20, 95, 0.08);
  cursor: pointer;
  font-weight: 800;
}

.session-form select:focus,
.session-form input:focus {
  outline: 3px solid rgba(169, 106, 208, 0.22);
  border-color: var(--mauve);
}

.session-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

.session-summary strong {
  color: var(--accent-dark);
  font-size: 1.1rem;
}

.session-summary span {
  color: var(--muted);
}

.session-visual {
  align-self: stretch;
  min-height: 210px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  overflow: hidden;
  background: var(--mauve-light);
  box-shadow: 0 18px 44px rgba(59, 20, 95, 0.18);
}

.session-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.secondary-action {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--navy);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}

.danger-action {
  border-color: rgba(190, 62, 62, 0.32);
  color: #8d2f2f;
  background: #fff7f3;
}

.steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 18px;
}

.step-tab {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 24px rgba(59, 20, 95, 0.08);
  cursor: pointer;
  font-weight: 800;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(59, 20, 95, 0.14);
}

.step-tab.active {
  color: #fff;
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--mauve-light), var(--mauve-strong), var(--mauve-dark));
}

.panel {
  display: none;
  min-height: 540px;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid rgba(116, 51, 163, 0.16);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255, 248, 238, 0.96), rgba(255, 255, 255, 0.92));
  box-shadow: var(--glow);
}

.panel.active {
  display: block;
  animation: panelIn 0.35s ease both;
}

.pathway-kids {
  --paper: #fbf8ff;
  --beige: #ffe8a8;
  --beige-soft: #fff9ea;
  --mauve-light: #ecdcff;
  --mauve: #7b3ff2;
  --mauve-strong: #22a8f2;
  --mauve-dark: #20145f;
  --accent: #ff5f98;
  --accent-dark: #20145f;
  --shadow: 0 22px 60px rgba(36, 64, 111, 0.18);
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 207, 74, 0.28), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(34, 168, 242, 0.22), transparent 30%),
    linear-gradient(135deg, #fbf8ff, #f0f7ff 48%, #fff8ea);
}

.pathway-kids .panel,
.pathway-kids .session-card,
.pathway-kids .module-card,
.pathway-kids .progress-tile {
  border-radius: 30px;
}

.pathway-kids .step-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #7b3ff2, #ff5f98, #ffcf4a);
  box-shadow: 0 16px 32px rgba(123, 63, 242, 0.28);
}

body:not(.session-started) .steps,
body:not(.session-started) .panel {
  display: none;
}

body.session-started [data-panel="1"]:not(.diagnostic-open) > .panel-copy,
body.session-started [data-panel="1"]:not(.diagnostic-open) > .diagnostic-roadmap,
body.session-started [data-panel="1"]:not(.diagnostic-open) #officeDiagnostic,
body.session-started [data-panel="1"]:not(.diagnostic-open) #stepMessage {
  display: none;
}

body.session-started [data-panel="1"].diagnostic-open [data-adult-dashboard],
body.session-started [data-panel="1"].diagnostic-open [data-kids-hero] {
  display: none;
}

body.session-started [data-panel="1"].diagnostic-open > .panel-copy {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
  padding: 24px;
  border: 1px solid rgba(7, 24, 81, 0.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(7, 24, 81, 0.08);
}

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

.diagnostic-roadmap > div {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(111, 45, 154, 0.15);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
}

.diagnostic-roadmap span {
  grid-row: 1 / 3;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #9b77b5;
  font-weight: 900;
}

.diagnostic-roadmap strong,
.diagnostic-roadmap small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.diagnostic-roadmap small {
  color: #765d86;
}

.diagnostic-roadmap > div.active {
  border-color: #7c3aed;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.13);
}

.diagnostic-roadmap > div.active span {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.diagnostic-roadmap > div.completed span {
  color: #3a154f;
  background: linear-gradient(135deg, #ffe08a, #f6c453);
  box-shadow: 0 10px 22px rgba(138, 90, 0, 0.22);
}

@media (max-width: 720px) {
  .diagnostic-roadmap {
    grid-template-columns: 1fr;
  }
}

.dashboard-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.pathway-adult.session-started {
  --paper: #f6f8ff;
  --ink: #071851;
  --muted: #647095;
  --line: #dfe6f5;
  --mauve-light: #e8efff;
  --mauve: #293bd4;
  --mauve-strong: #102b8f;
  --mauve-dark: #071851;
  --accent: #12a8a3;
  --accent-dark: #071851;
  --shadow: 0 18px 46px rgba(7, 24, 81, 0.12);
  background: #f6f8ff;
}

.pathway-adult.session-started .topbar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: block;
  width: 250px;
  padding: 28px 16px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(12, 45, 143, 0.96), rgba(3, 18, 66, 1)),
    #071851;
  box-shadow: 18px 0 44px rgba(7, 24, 81, 0.2);
}

.pathway-adult.session-started .brand-title {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.pathway-adult.session-started .brand-logo {
  width: 94px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
}

.pathway-adult.session-started .topbar .eyebrow {
  color: rgba(255, 255, 255, 0.68);
}

.pathway-adult.session-started h1 {
  max-width: 190px;
  color: #fff;
  background: none;
  font-size: 1.25rem;
  line-height: 1.18;
}

.pathway-adult.session-started .progress-card {
  display: none;
}

.pathway-adult.session-started .steps {
  position: fixed;
  left: 16px;
  top: 210px;
  z-index: 31;
  display: grid;
  width: 218px;
  max-height: calc(100vh - 245px);
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
  overflow-y: auto;
}

.pathway-adult.session-started .step-tab {
  justify-content: start;
  min-height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.88);
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.pathway-adult.session-started .step-tab::before {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}

.pathway-adult.session-started .step-tab:nth-child(1)::before { content: "⌂"; }
.pathway-adult.session-started .step-tab:nth-child(2)::before { content: "✎"; }
.pathway-adult.session-started .step-tab:nth-child(3)::before { content: "?"; }
.pathway-adult.session-started .step-tab:nth-child(4)::before { content: "▣"; }
.pathway-adult.session-started .step-tab:nth-child(5)::before { content: "⌂"; }
.pathway-adult.session-started .step-tab:nth-child(6)::before { content: "□"; }
.pathway-adult.session-started .step-tab:nth-child(7)::before { content: "↗"; }
.pathway-adult.session-started .step-tab:nth-child(8)::before { content: "⚙"; }

.pathway-adult.session-started .step-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #3157ec, #263fc7);
  box-shadow: 0 16px 28px rgba(17, 45, 145, 0.34);
}

.pathway-adult.session-started main {
  width: min(1240px, calc(100% - 290px));
  margin: 0 24px 54px 274px;
}

.pathway-adult.session-started .session-card {
  display: flex;
  justify-content: flex-end;
  min-height: 78px;
  margin: 0 0 18px;
  padding: 16px 22px;
  border: 0;
  border-radius: 0 0 24px 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(7, 24, 81, 0.08);
}

.pathway-adult.session-started .session-card > div:first-child,
.pathway-adult.session-started .session-visual {
  display: none;
}

.pathway-adult.session-started .session-summary {
  width: 100%;
  justify-content: flex-end;
}

.pathway-adult.session-started .panel {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pathway-adult.session-started .panel > .panel-copy {
  display: none;
}

.pathway-adult.session-started [data-panel="1"].diagnostic-open > .panel-copy {
  display: grid;
}

.adult-learning-dashboard {
  display: grid;
  gap: 22px;
  margin-bottom: 24px;
}

.adult-welcome-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
  gap: 24px;
  align-items: center;
  min-height: 250px;
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  border-radius: 0 0 32px 32px;
  background:
    radial-gradient(circle at 78% 28%, rgba(37, 59, 212, 0.12), transparent 24%),
    linear-gradient(135deg, #fff, #f3f5ff);
}

.adult-welcome-card h3 {
  margin: 0 0 12px;
  color: #071851;
  font-size: clamp(2rem, 4vw, 3.1rem);
}

.adult-welcome-card p {
  max-width: 560px;
  margin: 0;
  color: #526084;
  font-size: 1.04rem;
  font-weight: 700;
}

.adult-pill {
  display: inline-block;
  width: fit-content;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #102b8f;
  background: #e8efff;
  font-weight: 900;
}

.adult-illustration {
  position: relative;
  min-height: 220px;
}

.adult-person {
  position: absolute;
  right: 84px;
  bottom: 28px;
  width: 132px;
  height: 168px;
  border-radius: 68px 68px 34px 34px;
  background: linear-gradient(145deg, #293bd4, #6b50df);
  box-shadow: 0 24px 48px rgba(7, 24, 81, 0.18);
}

.adult-person::before {
  content: "";
  position: absolute;
  left: 32px;
  top: -38px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #ffbd8d;
  box-shadow: 0 -18px 0 8px #071851;
}

.adult-laptop {
  position: absolute;
  right: 116px;
  bottom: 20px;
  width: 170px;
  height: 82px;
  border-radius: 12px 12px 6px 6px;
  background: linear-gradient(145deg, #cfd6e8, #fff);
  box-shadow: 0 10px 0 #071851;
}

.adult-plant {
  position: absolute;
  right: 4px;
  bottom: 24px;
  width: 52px;
  height: 100px;
  border-radius: 0 0 16px 16px;
  background: #102b8f;
}

.adult-plant::before {
  content: "";
  position: absolute;
  left: -28px;
  top: -62px;
  width: 96px;
  height: 82px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 45%, #12a8a3 0 18px, transparent 19px),
    radial-gradient(circle at 65% 20%, #69c6b8 0 18px, transparent 19px),
    radial-gradient(circle at 62% 70%, #32b88d 0 20px, transparent 21px);
}

.adult-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.78fr);
  gap: 22px;
}

.adult-card {
  padding: 24px;
  border: 1px solid rgba(7, 24, 81, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 38px rgba(7, 24, 81, 0.08);
}

.adult-card h4 {
  margin: 0 0 16px;
  color: #071851;
  font-size: 1.16rem;
}

.adult-resume-card,
.adult-quick-card,
.adult-modules-preview {
  grid-column: 1;
}

.adult-progress-card,
.adult-reminder-card,
.adult-calendar-card {
  grid-column: 2;
}

.adult-progress-card {
  text-align: center;
}

.adult-resume-content {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid #e3e8f5;
  border-radius: 18px;
  background: #fff;
}

.adult-course-thumb {
  display: grid;
  place-items: center;
  min-height: 126px;
  border-radius: 14px;
  background: linear-gradient(145deg, #263fc7, #12a8a3);
}

.adult-course-thumb span {
  width: 88px;
  height: 60px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 0 rgba(7, 24, 81, 0.28);
}

.adult-resume-content strong {
  color: #071851;
  font-size: 1.1rem;
}

.adult-resume-content p {
  margin: 8px 0 12px;
  color: #526084;
}

.adult-inline-progress {
  height: 8px;
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ebf5;
}

.adult-inline-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #12a8a3, #293bd4);
}

.adult-progress-ring {
  display: grid;
  place-items: center;
  width: 156px;
  height: 156px;
  margin: 10px auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 56%, transparent 57%),
    conic-gradient(#12a8a3 calc(var(--progress) * 1%), #293bd4 0 68%, #edf1f8 0);
}

.adult-progress-ring strong {
  color: #071851;
  font-size: 2rem;
}

.adult-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.adult-stats-row span {
  display: grid;
  gap: 4px;
  color: #526084;
  font-size: 0.78rem;
}

.adult-stats-row b {
  color: #102b8f;
  font-size: 1.35rem;
}

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

.adult-quick-grid button,
.adult-module-preview,
.adult-section-head button {
  border: 0;
  cursor: pointer;
  font-weight: 900;
}

.adult-quick-grid button {
  display: grid;
  gap: 10px;
  min-height: 124px;
  padding: 18px;
  border-radius: 16px;
  color: #071851;
  background: linear-gradient(145deg, #eef1ff, #fff);
  box-shadow: inset 0 0 0 1px rgba(7, 24, 81, 0.05);
}

.adult-quick-grid button:nth-child(2) { background: linear-gradient(145deg, #e7f8f7, #fff); }
.adult-quick-grid button:nth-child(3) { background: linear-gradient(145deg, #fff5dc, #fff); }
.adult-quick-grid button:nth-child(4) { background: linear-gradient(145deg, #eaf1ff, #fff); }

.adult-quick-grid span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #fff;
  background: #293bd4;
  font-size: 1.3rem;
}

.adult-reminder-card ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adult-reminder-card li {
  padding-bottom: 14px;
  border-bottom: 1px solid #edf1f8;
}

.adult-reminder-card li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.adult-reminder-card button {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 10px;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.adult-reminder-card button:hover strong {
  color: #293bd4;
}

.adult-reminder-card li span {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #102b8f;
  background: #eef1ff;
}

.adult-reminder-card strong,
.adult-reminder-card small {
  grid-column: 2;
}

.adult-reminder-card small {
  color: #526084;
}

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

.adult-calendar-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(145deg, #f7f9ff, #fff);
  box-shadow: inset 0 0 0 1px rgba(7, 24, 81, 0.05);
}

.adult-calendar-item time {
  display: grid;
  place-items: center;
  min-height: 58px;
  border-radius: 16px;
  color: #102b8f;
  background: #eef1ff;
  font-weight: 900;
}

.adult-calendar-item time b {
  font-size: 1.35rem;
  line-height: 1;
}

.adult-calendar-item time span {
  color: #526084;
  font-size: 0.74rem;
  text-transform: uppercase;
}

/* Dashboard adulte epure, aligne sur l'esprit vitrine RFC06. */
body.pathway-adult.session-started .adult-learning-dashboard.premium-adult-dashboard {
  display: grid !important;
  gap: clamp(28px, 2.4vw, 42px) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 42px !important;
  padding: clamp(22px, 3.2vw, 46px) !important;
  color: #2c0f42 !important;
}

body.pathway-adult.session-started .adult-pro-topbar {
  position: relative !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 680px) minmax(0, 1fr) !important;
  gap: clamp(18px, 2vw, 30px) !important;
  align-items: center !important;
  padding: clamp(16px, 1.5vw, 22px) !important;
  border: 1px solid rgba(90, 38, 134, .12) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 18px 48px rgba(55, 18, 82, .08) !important;
  backdrop-filter: blur(18px) !important;
}

body.pathway-adult.session-started .adult-pro-search {
  display: grid !important;
  grid-template-columns: 34px 1fr !important;
  align-items: center !important;
  min-height: 62px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(113, 52, 156, .16) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8) !important;
}

body.pathway-adult.session-started .adult-pro-search span {
  color: #6d2bb5 !important;
  font-size: 1.65rem !important;
  line-height: 1 !important;
}

body.pathway-adult.session-started .adult-pro-search input {
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  color: #2c0f42 !important;
  background: transparent !important;
  font: 800 1rem/1.2 inherit !important;
}

body.pathway-adult.session-started .adult-pro-actions {
  position: relative !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.pathway-adult.session-started .adult-pro-icon-button,
body.pathway-adult.session-started .adult-pro-profile {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  border: 1px solid rgba(113, 52, 156, .14) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #36134e !important;
  box-shadow: 0 12px 26px rgba(55, 18, 82, .07) !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

body.pathway-adult.session-started .adult-pro-icon-button:hover,
body.pathway-adult.session-started .adult-pro-profile:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 32px rgba(55, 18, 82, .12) !important;
}

body.pathway-adult.session-started .adult-pro-icon-button {
  width: 54px !important;
  padding: 0 !important;
}

body.pathway-adult.session-started .adult-pro-icon-button i {
  font-style: normal !important;
  font-size: 1.42rem !important;
}

body.pathway-adult.session-started .adult-pro-message-button i {
  color: #d99a00 !important;
  font-size: 1.7rem !important;
}

body.pathway-adult.session-started .adult-pro-icon-button span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

body.pathway-adult.session-started .adult-pro-icon-button b {
  position: absolute !important;
  top: -7px !important;
  right: -5px !important;
  display: grid !important;
  min-width: 22px !important;
  height: 22px !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #f2b705 !important;
  color: #2c0f42 !important;
  font-size: .75rem !important;
  font-weight: 950 !important;
}

body.pathway-adult.session-started .adult-pro-profile-wrap {
  position: relative !important;
}

body.pathway-adult.session-started .adult-pro-profile {
  gap: 10px !important;
  min-width: 178px !important;
  padding: 7px 12px 7px 7px !important;
  text-align: left !important;
}

body.pathway-adult.session-started .adult-pro-profile > span {
  display: grid !important;
  width: 40px !important;
  height: 40px !important;
  place-items: center !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #7b2fd1, #f0b429) !important;
  color: #fff !important;
  font-weight: 950 !important;
}

body.pathway-adult.session-started .adult-pro-profile strong,
body.pathway-adult.session-started .adult-pro-profile small {
  display: block !important;
  max-width: 92px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.pathway-adult.session-started .adult-pro-profile strong {
  font-size: .98rem !important;
}

body.pathway-adult.session-started .adult-pro-profile small {
  color: #7b6a86 !important;
  font-size: .72rem !important;
}

body.pathway-adult.session-started .adult-pro-profile-menu,
body.pathway-adult.session-started .adult-pro-alert-panel {
  right: 0 !important;
  top: calc(100% + 10px) !important;
  z-index: 80 !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 50px rgba(55, 18, 82, .18) !important;
}

body.pathway-adult.session-started .adult-pro-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 28vw, 470px) !important;
  gap: clamp(26px, 2.8vw, 44px) !important;
  align-items: start !important;
}

body.pathway-adult.session-started .adult-pro-main,
body.pathway-adult.session-started .adult-pro-side {
  display: grid !important;
  gap: clamp(22px, 2vw, 34px) !important;
  min-width: 0 !important;
}

body.pathway-adult.session-started .adult-pro-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr) !important;
  gap: clamp(28px, 3vw, 48px) !important;
  align-items: stretch !important;
  min-height: clamp(410px, 38vw, 560px) !important;
  padding: clamp(34px, 4.6vw, 64px) !important;
  border: 1px solid rgba(113, 52, 156, .12) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 0 0, rgba(240, 180, 41, .18), transparent 28%),
    linear-gradient(135deg, #fff, #fff8ec 54%, #f5edff) !important;
  box-shadow: 0 24px 64px rgba(55, 18, 82, .10) !important;
  overflow: hidden !important;
}

body.pathway-adult.session-started .adult-pro-hero-copy {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

body.pathway-adult.session-started .adult-pro-kicker,
body.pathway-adult.session-started .adult-pro-guidance span {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  margin-bottom: 14px !important;
  padding: 9px 15px !important;
  border-radius: 999px !important;
  background: rgba(240, 180, 41, .24) !important;
  color: #6b3d00 !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

body.pathway-adult.session-started .adult-pro-hero h2 {
  max-width: 760px !important;
  margin: 0 !important;
  color: #2c0f42 !important;
  font-size: clamp(3rem, 5.2vw, 5.6rem) !important;
  line-height: .96 !important;
  letter-spacing: 0 !important;
}

body.pathway-adult.session-started .adult-pro-hero p {
  max-width: 680px !important;
  margin: 18px 0 0 !important;
  color: #66546f !important;
  font-size: clamp(1.08rem, 1.35vw, 1.28rem) !important;
  font-weight: 750 !important;
  line-height: 1.65 !important;
}

body.pathway-adult.session-started .adult-pro-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 28px !important;
}

body.pathway-adult.session-started .adult-pro-primary,
body.pathway-adult.session-started .adult-pro-secondary,
body.pathway-adult.session-started .adult-pro-focus button,
body.pathway-adult.session-started .adult-pro-card button {
  min-height: 54px !important;
  padding: 0 26px !important;
  border-radius: 18px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}

body.pathway-adult.session-started .adult-pro-primary,
body.pathway-adult.session-started .adult-pro-focus button,
body.pathway-adult.session-started .adult-pro-workshops .adult-pro-card-title button {
  border: 0 !important;
  background: #f2b705 !important;
  color: #2c0f42 !important;
  box-shadow: 0 16px 30px rgba(242, 183, 5, .28) !important;
}

body.pathway-adult.session-started .adult-pro-secondary,
body.pathway-adult.session-started .adult-pro-card-title button {
  border: 1px solid rgba(113, 52, 156, .16) !important;
  background: #fff !important;
  color: #55207b !important;
}

body.pathway-adult.session-started .adult-pro-primary:hover,
body.pathway-adult.session-started .adult-pro-secondary:hover,
body.pathway-adult.session-started .adult-pro-focus button:hover,
body.pathway-adult.session-started .adult-pro-card button:hover {
  transform: translateY(-2px) !important;
}

body.pathway-adult.session-started .adult-pro-hero-media {
  min-height: 100% !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  box-shadow: 0 22px 52px rgba(55, 18, 82, .14) !important;
}

body.pathway-adult.session-started .adult-pro-hero-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

body.pathway-adult.session-started .adult-pro-focus {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;
}

body.pathway-adult.session-started .adult-pro-focus article,
body.pathway-adult.session-started .adult-pro-card,
body.pathway-adult.session-started .adult-pro-guidance {
  border: 1px solid rgba(113, 52, 156, .12) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 18px 46px rgba(55, 18, 82, .08) !important;
}

body.pathway-adult.session-started .adult-pro-focus article {
  display: grid !important;
  gap: 16px !important;
  min-height: clamp(230px, 16vw, 300px) !important;
  align-content: start !important;
  padding: clamp(26px, 2.4vw, 38px) !important;
}

body.pathway-adult.session-started .adult-pro-focus article > span {
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  place-items: center !important;
  border-radius: 18px !important;
  background: #f5e9ff !important;
  color: #7b2fd1 !important;
  font-weight: 950 !important;
}

body.pathway-adult.session-started .adult-pro-focus h3,
body.pathway-adult.session-started .adult-pro-card h3,
body.pathway-adult.session-started .adult-pro-guidance h3 {
  margin: 0 !important;
  color: #2c0f42 !important;
  font-size: clamp(1.22rem, 1.25vw, 1.45rem) !important;
  line-height: 1.18 !important;
}

body.pathway-adult.session-started .adult-pro-focus p,
body.pathway-adult.session-started .adult-pro-guidance p,
body.pathway-adult.session-started .adult-pro-card small,
body.pathway-adult.session-started .adult-pro-card span {
  margin: 0 !important;
  color: #715f7a !important;
  font-weight: 720 !important;
  line-height: 1.5 !important;
}

body.pathway-adult.session-started .adult-pro-guidance {
  display: grid !important;
  grid-template-columns: minmax(220px, .42fr) 1fr !important;
  gap: clamp(24px, 2.4vw, 38px) !important;
  align-items: center !important;
  min-height: 150px !important;
  padding: clamp(28px, 2.6vw, 42px) !important;
  background:
    linear-gradient(135deg, rgba(255, 248, 236, .95), rgba(255, 255, 255, .94)) !important;
}

body.pathway-adult.session-started .adult-pro-side {
  position: sticky !important;
  top: 18px !important;
}

body.pathway-adult.session-started .adult-pro-card {
  padding: clamp(26px, 2.5vw, 38px) !important;
}

body.pathway-adult.session-started .adult-pro-card-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

body.pathway-adult.session-started .adult-pro-card-title button {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: .84rem !important;
}

body.pathway-adult.session-started .adult-pro-ring {
  display: grid !important;
  width: clamp(170px, 13vw, 220px) !important;
  height: clamp(170px, 13vw, 220px) !important;
  margin: 14px auto 24px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, #fff 0 57%, transparent 58%),
    conic-gradient(#7b2fd1 calc(var(--adult-progress) * 1%), #f2b705 0 calc((var(--adult-progress) + 8) * 1%), #efe5f7 0) !important;
}

body.pathway-adult.session-started .adult-pro-ring strong {
  color: #2c0f42 !important;
  font-size: clamp(2.1rem, 2.3vw, 3rem) !important;
  line-height: .9 !important;
}

body.pathway-adult.session-started .adult-pro-ring small {
  margin-top: -50px !important;
  color: #715f7a !important;
  font-size: .78rem !important;
}

body.pathway-adult.session-started .adult-pro-level {
  display: grid !important;
  gap: 4px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  background: #f8f1ff !important;
  text-align: center !important;
}

body.pathway-adult.session-started .adult-pro-level strong {
  color: #2c0f42 !important;
}

body.pathway-adult.session-started .adult-pro-mini-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

body.pathway-adult.session-started .adult-pro-mini-stats span {
  display: grid !important;
  gap: 4px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: #fff8ec !important;
  text-align: center !important;
}

body.pathway-adult.session-started .adult-pro-mini-stats b {
  color: #6d2bb5 !important;
  font-size: 1.35rem !important;
}

body.pathway-adult.session-started .adult-pro-workshop-list {
  display: grid !important;
  gap: 10px !important;
}

body.pathway-adult.session-started .adult-pro-workshop {
  display: grid !important;
  grid-template-columns: 68px 1fr !important;
  gap: 16px !important;
  align-items: center !important;
  width: 100% !important;
  padding: 14px !important;
  border: 1px solid rgba(113, 52, 156, .10) !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

body.pathway-adult.session-started .adult-pro-workshop time {
  display: grid !important;
  min-height: 68px !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: #f4eaff !important;
  color: #6d2bb5 !important;
  font-weight: 950 !important;
}

body.pathway-adult.session-started .adult-pro-workshop time b {
  font-size: 1.55rem !important;
  line-height: .9 !important;
}

body.pathway-adult.session-started .adult-pro-workshop time small {
  color: #8a7696 !important;
  font-size: .7rem !important;
  text-transform: uppercase !important;
}

body.pathway-adult.session-started .adult-pro-workshop strong {
  display: block !important;
  color: #2c0f42 !important;
}

body.pathway-adult.session-started .adult-pro-contact {
  display: grid !important;
  gap: 12px !important;
}

body.pathway-adult.session-started .adult-pro-contact > button {
  display: grid !important;
  grid-template-columns: 58px 1fr !important;
  gap: 16px !important;
  align-items: center !important;
  width: 100% !important;
  padding: 16px !important;
  border: 1px solid rgba(113, 52, 156, .10) !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: inherit !important;
  text-align: left !important;
}

body.pathway-adult.session-started .adult-pro-contact > button > span {
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: rgba(242, 183, 5, .20) !important;
  color: #b87900 !important;
  font-size: 1.3rem !important;
}

body.pathway-adult.session-started .adult-pro-contact strong {
  display: block !important;
  color: #2c0f42 !important;
}

@media (max-width: 1120px) {
  body.pathway-adult.session-started .adult-pro-layout {
    grid-template-columns: 1fr !important;
  }

  body.pathway-adult.session-started .adult-pro-side {
    position: static !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body.pathway-adult.session-started .adult-pro-topbar,
  body.pathway-adult.session-started .adult-pro-hero,
  body.pathway-adult.session-started .adult-pro-guidance {
    grid-template-columns: 1fr !important;
  }

  body.pathway-adult.session-started .adult-pro-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  body.pathway-adult.session-started .adult-pro-focus,
  body.pathway-adult.session-started .adult-pro-side {
    grid-template-columns: 1fr !important;
  }

  body.pathway-adult.session-started .adult-pro-hero-media {
    min-height: 220px !important;
  }
}

@media (max-width: 560px) {
  body.pathway-adult.session-started .adult-learning-dashboard.premium-adult-dashboard {
    padding: 12px !important;
  }

  body.pathway-adult.session-started .adult-pro-topbar {
    padding: 12px !important;
    border-radius: 22px !important;
  }

  body.pathway-adult.session-started .adult-pro-profile {
    min-width: 0 !important;
    width: 100% !important;
  }

  body.pathway-adult.session-started .adult-pro-profile strong,
  body.pathway-adult.session-started .adult-pro-profile small {
    max-width: 160px !important;
  }

  body.pathway-adult.session-started .adult-pro-hero,
  body.pathway-adult.session-started .adult-pro-focus article,
  body.pathway-adult.session-started .adult-pro-card,
  body.pathway-adult.session-started .adult-pro-guidance {
    border-radius: 22px !important;
  }

  body.pathway-adult.session-started .adult-pro-hero h2 {
    font-size: clamp(2.25rem, 13vw, 3.2rem) !important;
  }
}

.adult-calendar-item strong,
.adult-calendar-item small {
  display: block;
}

.adult-calendar-item small {
  margin-top: 4px;
  color: #526084;
}

.adult-modules-preview {
  display: grid;
  gap: 18px;
  align-content: start;
}

.adult-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.adult-section-head h4 {
  margin: 0;
}

.adult-section-head button {
  color: #102b8f;
  background: transparent;
}

.adult-module-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(118px, 1fr));
  gap: 12px;
}

.adult-module-preview {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 136px;
  padding: 14px;
  border-radius: 16px;
  color: #071851;
  background: linear-gradient(145deg, #f2f5ff, #fff);
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(7, 24, 81, 0.05);
}

.adult-module-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #293bd4, #12a8a3);
  font-size: 1.45rem;
}

.adult-module-preview small {
  color: #526084;
}

.adult-module-preview i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ebf5;
}

.adult-module-preview i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #12a8a3, #293bd4);
}

.pathway-adult.session-started .quiz-step,
.pathway-adult.session-started .visual-exercise,
.pathway-adult.session-started .module-detail,
.pathway-adult.session-started .lesson-text,
.pathway-adult.session-started .progress-tile {
  border: 1px solid rgba(7, 24, 81, 0.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(7, 24, 81, 0.08);
}

.kids-adventure-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr) minmax(220px, 0.65fr);
  gap: 18px;
  align-items: stretch;
  min-height: 250px;
  margin: 0 0 24px;
  padding: clamp(20px, 4vw, 32px);
  overflow: hidden;
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.24), transparent 16%),
    linear-gradient(135deg, #7b3ff2, #6f45f5 45%, #2e35a8);
  box-shadow: 0 28px 60px rgba(32, 20, 95, 0.24);
}

.kids-adventure-hero::before {
  content: "";
  position: absolute;
  inset: auto -40px -80px 35%;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.kids-hero-copy,
.kids-hero-scene,
.kids-hero-stats {
  position: relative;
  z-index: 1;
}

.kids-hero-copy {
  display: grid;
  align-content: center;
  gap: 14px;
}

.kids-pill {
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  color: #20145f;
  background: #ffcf4a;
  font-size: 0.82rem;
  font-weight: 900;
}

.kids-hero-copy h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 3rem);
}

.kids-hero-copy p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 800;
}

.kids-hero-action {
  width: fit-content;
  color: #20145f;
  background: #fff;
  box-shadow: 0 18px 32px rgba(32, 20, 95, 0.24);
}

.kids-hero-scene {
  display: grid;
  place-items: center;
  min-height: 210px;
}

.kids-robot-face {
  position: relative;
  width: 148px;
  height: 138px;
  border: 8px solid rgba(255, 255, 255, 0.72);
  border-radius: 36px;
  background: linear-gradient(145deg, #37c0ff, #20d7b5);
  box-shadow: 0 24px 42px rgba(16, 26, 78, 0.24);
  animation: robotFloat 3.4s ease-in-out infinite;
}

.kids-robot-face::before,
.kids-robot-face::after {
  content: "";
  position: absolute;
  top: 46px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #20145f;
  box-shadow: inset 0 0 0 6px #fff;
}

.kids-robot-face::before {
  left: 35px;
}

.kids-robot-face::after {
  right: 35px;
}

.kids-robot-face i {
  position: absolute;
  left: 45px;
  bottom: 30px;
  width: 58px;
  height: 24px;
  border: 5px solid #20145f;
  border-top: 0;
  border-radius: 0 0 40px 40px;
}

.kids-robot-face i::before {
  content: "";
  position: absolute;
  left: 23px;
  top: -104px;
  width: 12px;
  height: 44px;
  border-radius: 999px;
  background: #ffcf4a;
}

.floating-star {
  position: absolute;
  width: 34px;
  height: 34px;
  clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 34%);
  background: #ffcf4a;
  filter: drop-shadow(0 10px 16px rgba(32, 20, 95, 0.22));
  animation: starPulse 2.8s ease-in-out infinite;
}

.star-one {
  left: 8%;
  top: 18%;
}

.star-two {
  right: 12%;
  bottom: 18%;
  animation-delay: 0.8s;
}

.floating-rocket {
  position: absolute;
  right: 18%;
  top: 20%;
  width: 54px;
  height: 54px;
  border-radius: 50% 50% 50% 12px;
  background: linear-gradient(135deg, #fff, #dff7ff);
  transform: rotate(45deg);
  animation: rocketPath 3.8s ease-in-out infinite;
}

.floating-rocket::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: #22a8f2;
}

.floating-rocket::after {
  content: "";
  position: absolute;
  left: -12px;
  bottom: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffcf4a;
}

.kids-hero-stats {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(32, 20, 95, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.kids-hero-stats span,
.kids-hero-stats small {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 900;
}

.kids-hero-stats strong {
  color: #fff;
  font-size: 2.3rem;
}

.pathway-kids .quiz-step,
.pathway-kids .visual-exercise {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 249, 234, 0.9));
  box-shadow: 0 22px 48px rgba(32, 20, 95, 0.12);
}

.pathway-kids .quiz-step legend,
.pathway-kids .visual-exercise legend {
  color: #20145f;
  font-size: 1.25rem;
}

.pathway-kids .quiz-step > label,
.pathway-kids .visual-exercise > label,
.pathway-kids .module-quiz-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 16px;
  border: 2px solid rgba(123, 63, 242, 0.12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(32, 20, 95, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pathway-kids .quiz-step > label:hover,
.pathway-kids .visual-exercise > label:hover,
.pathway-kids .module-quiz-list label:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 95, 152, 0.44);
  box-shadow: 0 18px 34px rgba(32, 20, 95, 0.14);
}

.pathway-kids input[type="radio"],
.pathway-kids input[type="checkbox"] {
  accent-color: #7b3ff2;
}

.pathway-kids .module-section-title {
  width: fit-content;
  padding: 10px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #7b3ff2, #ff5f98);
}

.pathway-kids .module-card {
  border: 0;
  color: #fff;
  background: linear-gradient(145deg, #22a8f2, #7b3ff2);
  box-shadow: 0 22px 44px rgba(32, 20, 95, 0.2);
}

.pathway-kids .module-card:nth-child(2n) {
  background: linear-gradient(145deg, #20d7b5, #22a8f2);
}

.pathway-kids .module-card:nth-child(3n) {
  background: linear-gradient(145deg, #ff5f98, #ff9d3d);
}

.pathway-kids .module-card strong,
.pathway-kids .module-card small,
.pathway-kids .module-card p,
.pathway-kids .module-card em,
.pathway-kids .module-card span {
  color: #fff;
}

.pathway-kids .module-card-image.placeholder {
  color: #20145f;
  background: rgba(255, 255, 255, 0.78);
}

.pathway-adult.session-started {
  --paper: #fff7ef;
  --ink: #1d2448;
  --muted: #6d6b86;
  --line: #eadfd8;
  --mauve-light: #fff0dc;
  --mauve: #ff8f4d;
  --mauve-strong: #5b64e8;
  --mauve-dark: #2a246b;
  --accent: #10b7ad;
  --accent-dark: #2a246b;
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 198, 88, 0.28), transparent 26%),
    radial-gradient(circle at 18% 18%, rgba(91, 100, 232, 0.16), transparent 24%),
    linear-gradient(135deg, #fff8ef, #f3f4ff 48%, #eafcff);
}

.pathway-adult.session-started .topbar {
  width: 264px;
  padding: 26px 18px;
  background:
    linear-gradient(180deg, rgba(62, 55, 183, 0.98), rgba(17, 159, 172, 0.95) 72%, rgba(255, 143, 77, 0.96)),
    #2a246b;
  box-shadow: 24px 0 54px rgba(42, 36, 107, 0.22);
}

.pathway-adult.session-started .topbar::after {
  content: "Besoin d'aide ?";
  display: grid;
  align-content: center;
  min-height: 118px;
  margin-top: 24px;
  padding: 18px;
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 34px rgba(19, 45, 104, 0.18);
  font-weight: 900;
}

.pathway-adult.session-started .brand-logo {
  border-radius: 28px;
  box-shadow: 0 20px 42px rgba(42, 36, 107, 0.2);
}

.pathway-adult.session-started .steps {
  left: 18px;
  width: 228px;
}

.pathway-adult.session-started .step-tab {
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.92);
  transition: transform 0.2s ease, background 0.2s ease;
}

.pathway-adult.session-started .step-tab:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.12);
}

.pathway-adult.session-started .step-tab.active {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 244, 225, 0.94));
  color: #2a246b;
  box-shadow: 0 18px 34px rgba(42, 36, 107, 0.22);
}

.pathway-adult.session-started .step-tab.active::before {
  color: #fff;
  background: linear-gradient(135deg, #ff8f4d, #5b64e8);
}

.pathway-adult.session-started main {
  width: min(1240px, calc(100% - 306px));
  margin-left: 288px;
}

.adult-welcome-card {
  min-height: 290px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 198, 88, 0.35), transparent 20%),
    radial-gradient(circle at 90% 70%, rgba(16, 183, 173, 0.24), transparent 24%),
    linear-gradient(135deg, #fff, #fff3df 45%, #eff6ff);
  box-shadow: 0 26px 64px rgba(42, 36, 107, 0.12);
}

.adult-welcome-card h3 {
  color: #2a246b;
}

.adult-pill {
  color: #87421d;
  background: linear-gradient(135deg, #ffe1aa, #fff4dc);
  box-shadow: 0 12px 24px rgba(255, 143, 77, 0.18);
}

.adult-person {
  right: 86px;
  width: 148px;
  height: 178px;
  border-radius: 78px 78px 36px 36px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(145deg, #5b64e8, #2a246b);
  box-shadow: 0 30px 54px rgba(42, 36, 107, 0.22);
}

.adult-person::before {
  left: 36px;
  top: -42px;
  width: 82px;
  height: 82px;
  background:
    radial-gradient(circle at 36% 38%, rgba(255, 255, 255, 0.42), transparent 14%),
    #ffbf8f;
  box-shadow: 0 -20px 0 8px #25204f;
}

.adult-laptop {
  width: 186px;
  background: linear-gradient(145deg, #f7f8ff, #c8d2eb);
  box-shadow: 0 12px 0 #25204f, 0 22px 28px rgba(42, 36, 107, 0.2);
}

.adult-card {
  border: 0;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 244, 0.94));
  box-shadow: 0 22px 52px rgba(42, 36, 107, 0.1);
}

.adult-quick-grid button,
.adult-module-preview,
.adult-calendar-item {
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 239, 214, 0.82));
  box-shadow: inset 0 0 0 1px rgba(42, 36, 107, 0.05), 0 16px 30px rgba(42, 36, 107, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.adult-quick-grid button:hover,
.adult-module-preview:hover,
.adult-calendar-item:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(42, 36, 107, 0.06), 0 22px 38px rgba(42, 36, 107, 0.14);
}

.adult-quick-grid span,
.adult-module-icon,
.adult-calendar-item time {
  background: linear-gradient(135deg, #ff8f4d, #5b64e8);
  box-shadow: 0 14px 24px rgba(91, 100, 232, 0.22);
}

.adult-progress-ring {
  background:
    radial-gradient(circle, #fff 0 55%, transparent 56%),
    conic-gradient(#10b7ad calc(var(--progress) * 1%), #ff8f4d 0 72%, #edf1f8 0);
  box-shadow: 0 20px 34px rgba(16, 183, 173, 0.18);
}

.pathway-kids {
  --paper: #fff8e8;
  --beige: #ffd875;
  --beige-soft: #fff4d7;
  --mauve-light: #efe6ff;
  --mauve: #7a4cf4;
  --mauve-strong: #26b8ff;
  --mauve-dark: #25115f;
  --accent: #ff6c9d;
  --accent-dark: #25115f;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 216, 117, 0.36), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(38, 184, 255, 0.28), transparent 26%),
    linear-gradient(135deg, #fff8e8, #eff6ff 42%, #f8edff);
}

.kids-adventure-hero {
  min-height: 310px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, 0.32), transparent 14%),
    radial-gradient(circle at 82% 70%, rgba(255, 216, 117, 0.24), transparent 20%),
    linear-gradient(135deg, #7a4cf4, #4d6dff 45%, #20c0d8);
  box-shadow: 0 32px 72px rgba(37, 17, 95, 0.26);
}

.kids-hero-copy h3 {
  text-shadow: 0 4px 18px rgba(37, 17, 95, 0.22);
}

.kids-pill {
  color: #5d3100;
  background: linear-gradient(135deg, #ffd875, #fff3bf);
  box-shadow: 0 12px 24px rgba(255, 216, 117, 0.26);
}

.kids-robot-face {
  width: 172px;
  height: 158px;
  border: 9px solid rgba(255, 255, 255, 0.82);
  border-radius: 44px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.7), transparent 14%),
    linear-gradient(145deg, #58dcff, #18c9ac);
  box-shadow: 0 32px 54px rgba(37, 17, 95, 0.28), inset -14px -18px 28px rgba(37, 17, 95, 0.12);
}

.kids-robot-face::before,
.kids-robot-face::after {
  top: 52px;
  width: 26px;
  height: 26px;
  background: #25115f;
  box-shadow: inset 0 0 0 7px #fff, 0 4px 0 rgba(37, 17, 95, 0.16);
}

.kids-robot-face i {
  left: 52px;
  bottom: 34px;
  width: 64px;
  height: 28px;
  border-color: #25115f;
}

.kids-mission-board .learning-mission-card,
.pathway-kids .module-card {
  border: 0;
  border-radius: 32px;
  box-shadow: 0 26px 48px rgba(37, 17, 95, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.kids-mission-board .learning-mission-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(145deg, #7a4cf4, #b657ff);
}

.kids-mission-board .learning-mission-card:nth-child(2) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(145deg, #26b8ff, #18c9ac);
}

.kids-mission-board .learning-mission-card:nth-child(3) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(145deg, #ff6c9d, #ffb23f);
}

.pathway-kids .quiz-step,
.pathway-kids .visual-exercise,
.pathway-kids .progress-tile {
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 221, 0.9));
  box-shadow: 0 24px 52px rgba(37, 17, 95, 0.14);
}

.pathway-kids .quiz-step > label,
.pathway-kids .visual-exercise > label,
.pathway-kids .module-quiz-list label {
  border: 0;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #fff5dc);
  box-shadow: 0 16px 28px rgba(37, 17, 95, 0.1);
}

.pathway-kids .module-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 28%),
    linear-gradient(145deg, #26b8ff, #7a4cf4);
}

.pathway-kids {
  --paper: #fbf3ff;
  --beige: #ead7f6;
  --beige-soft: #fff8ff;
  --mauve-light: #ead7f6;
  --mauve: #a96ad0;
  --mauve-strong: #7433a3;
  --mauve-dark: #3b145f;
  --accent: #8d45ba;
  --accent-dark: #3b145f;
  background:
    radial-gradient(circle at 18% 8%, rgba(234, 215, 246, 0.72), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(169, 106, 208, 0.22), transparent 26%),
    linear-gradient(135deg, #fff8ff, #f7effd 44%, #fbf3ff);
}

.pathway-kids .kids-learning-dashboard {
  gap: 22px;
}

.pathway-kids .kids-welcome-card {
  min-height: 290px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 76% 24%, rgba(234, 215, 246, 0.72), transparent 22%),
    radial-gradient(circle at 92% 72%, rgba(169, 106, 208, 0.24), transparent 24%),
    linear-gradient(135deg, #fff, #fff8ff 42%, #f2e4fa);
  box-shadow: 0 28px 66px rgba(59, 20, 95, 0.18);
}

.pathway-kids .kids-welcome-card h3 {
  color: #3b145f;
}

.pathway-kids .adult-pill,
.pathway-kids .kids-pill {
  color: #3b145f;
  background: linear-gradient(135deg, #ead7f6, #fff8ff);
  box-shadow: 0 12px 24px rgba(116, 51, 163, 0.18);
}

.pathway-kids .adult-card,
.pathway-kids .adult-quick-grid button,
.pathway-kids .adult-module-preview,
.pathway-kids .adult-calendar-item {
  border: 0;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(251, 243, 255, 0.94));
  box-shadow: 0 22px 52px rgba(59, 20, 95, 0.12);
}

.pathway-kids .adult-quick-grid button:hover,
.pathway-kids .adult-module-preview:hover,
.pathway-kids .adult-calendar-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 58px rgba(59, 20, 95, 0.18);
}

.pathway-kids .adult-quick-grid span,
.pathway-kids .adult-module-icon,
.pathway-kids .adult-calendar-item time,
.pathway-kids .mission-step {
  color: #fff;
  background: linear-gradient(135deg, #a96ad0, #7433a3);
  box-shadow: 0 14px 24px rgba(116, 51, 163, 0.24);
}

.pathway-kids .adult-progress-ring {
  background:
    radial-gradient(circle, #fff 0 55%, transparent 56%),
    conic-gradient(#a96ad0 calc(var(--progress) * 1%), #7433a3 0 72%, #efe3f7 0);
  box-shadow: 0 20px 34px rgba(116, 51, 163, 0.2);
}

.pathway-kids .kids-course-thumb,
.pathway-kids .adult-course-thumb {
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.48), transparent 18%),
    linear-gradient(145deg, #a96ad0, #3b145f);
  box-shadow: 0 18px 34px rgba(59, 20, 95, 0.18);
}

.pathway-kids .kids-hero-scene {
  min-height: 230px;
}

.pathway-kids .kids-robot-face {
  width: 172px;
  height: 158px;
  border: 9px solid rgba(255, 255, 255, 0.84);
  border-radius: 44px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.7), transparent 14%),
    linear-gradient(145deg, #c58bea, #7433a3);
  box-shadow: 0 30px 54px rgba(59, 20, 95, 0.26), inset -14px -18px 28px rgba(59, 20, 95, 0.14);
}

.pathway-kids .kids-robot-face::before,
.pathway-kids .kids-robot-face::after {
  background: #3b145f;
  box-shadow: inset 0 0 0 7px #fff, 0 4px 0 rgba(59, 20, 95, 0.16);
}

.pathway-kids .kids-robot-face i,
.pathway-kids .kids-robot-face i::before {
  border-color: #3b145f;
}

.pathway-kids .kids-robot-face i::before,
.pathway-kids .floating-star,
.pathway-kids .floating-rocket::after {
  background: #ead7f6;
}

.pathway-kids .floating-rocket {
  background: linear-gradient(135deg, #fff, #ead7f6);
}

.pathway-kids .floating-rocket::before {
  background: #a96ad0;
}

.pathway-kids .kids-mission-board .learning-mission-card,
.pathway-kids .module-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(145deg, #a96ad0, #7433a3);
}

.pathway-kids .kids-mission-board .learning-mission-card:nth-child(2),
.pathway-kids .module-card:nth-child(2n) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(145deg, #c58bea, #8d45ba);
}

.pathway-kids .kids-mission-board .learning-mission-card:nth-child(3),
.pathway-kids .module-card:nth-child(3n) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(145deg, #8d45ba, #3b145f);
}

.pathway-kids .quiz-step,
.pathway-kids .visual-exercise,
.pathway-kids .progress-tile {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(251, 243, 255, 0.94));
  box-shadow: 0 24px 52px rgba(59, 20, 95, 0.14);
}

.pathway-kids .quiz-step > label,
.pathway-kids .visual-exercise > label,
.pathway-kids .module-quiz-list label {
  background: linear-gradient(145deg, #fff, #fbf3ff);
  box-shadow: 0 16px 28px rgba(59, 20, 95, 0.1);
}
.pathway-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pathway-card {
  display: grid;
  gap: 10px;
  min-height: 150px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, var(--beige-soft));
  box-shadow: 0 16px 38px rgba(59, 20, 95, 0.09);
}

.pathway-card strong {
  color: var(--mauve-dark);
  font-size: 1.15rem;
}

.pathway-card p {
  margin: 0;
  color: var(--muted);
}

.activity-video {
  position: relative;
  width: min(920px, 100%);
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid rgba(7, 24, 81, 0.08);
  border-radius: 22px;
  background: #071851;
  box-shadow: 0 18px 42px rgba(7, 24, 81, 0.14);
  aspect-ratio: 16 / 9;
}

.activity-video iframe,
.activity-video video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #160d20;
  object-fit: contain;
}

.module-practice-puzzle {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid #ded0e8;
  border-radius: 20px;
  background: linear-gradient(145deg, #fcf9ff, #f4ecfa);
}

.practice-puzzle-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.practice-puzzle-heading small {
  color: #8e4eb4;
  font-weight: 900;
  text-transform: uppercase;
}

.practice-puzzle-heading h5 {
  margin: 3px 0 0;
  color: #3d145a;
  font-size: 1.2rem;
}

.practice-reset {
  min-height: 42px;
  flex: 0 0 auto;
}

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

.practice-card-bank {
  min-height: 150px;
  padding: 14px;
  border: 2px dashed #cfb4df;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.practice-order-card {
  display: grid;
  min-width: 0;
  min-height: 210px;
  padding: 0;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 16px;
  color: #3d145a;
  background: #fff;
  box-shadow: 0 12px 28px rgba(73, 25, 104, 0.13);
  cursor: grab;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.practice-order-card:hover,
.practice-order-card.selected {
  border-color: #9d4ed0;
  box-shadow: 0 18px 34px rgba(116, 51, 163, 0.22);
  transform: translateY(-3px);
}

.practice-order-card.dragging {
  opacity: 0.55;
  cursor: grabbing;
}

.practice-order-card img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: #f7f2fa;
}

.practice-order-card > span {
  display: grid;
  min-height: 88px;
  place-items: center;
  font-size: 2.4rem;
  background: linear-gradient(135deg, #eee3f8, #fce8f2);
}

.practice-order-card strong {
  padding: 12px;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: left;
}

.practice-drop-slot {
  display: grid;
  min-width: 0;
  min-height: 190px;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 2px dashed #b98fd1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
}

.practice-drop-slot:focus-visible {
  outline: 4px solid rgba(124, 58, 237, 0.25);
  outline-offset: 2px;
}

.practice-drop-slot > span {
  color: #6f2a99;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.practice-drop-slot > em {
  color: #8c7898;
  font-size: 0.76rem;
  font-style: normal;
}

.practice-drop-slot .practice-order-card {
  min-height: 208px;
  margin-top: 4px;
}

.guided-practice-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.guided-practice-actions [hidden] {
  display: none !important;
}

.guided-practice-actions button:disabled {
  cursor: default;
  opacity: 0.78;
}

.pathway-kids .module-practice-puzzle {
  border-color: rgba(124, 58, 237, 0.2);
  border-radius: 26px;
  background: linear-gradient(145deg, #ede9fe, #fce7f3);
}

.pathway-kids .practice-drop-slot {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
}

.video-local-fallback {
  display: grid;
  grid-template-columns: minmax(240px, 0.95fr) minmax(280px, 1.05fr);
  align-items: center;
  aspect-ratio: auto;
  min-height: 330px;
  padding: 28px;
  color: #fff;
  background: linear-gradient(135deg, #241236, #4c1d70);
}

.video-local-fallback img {
  width: 100%;
  max-height: 310px;
  object-fit: cover;
  border-radius: 16px;
}

.video-local-fallback > div {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 24px;
}

.video-local-fallback span {
  color: #e4c9f5;
  font-weight: 900;
  text-transform: uppercase;
}

.video-local-fallback strong {
  font-size: 1.45rem;
  line-height: 1.25;
}

.video-local-fallback p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

.video-local-fallback a {
  width: fit-content;
  padding: 12px 17px;
  border-radius: 12px;
  color: #3b145f;
  background: #fff;
  font-weight: 900;
  text-decoration: none;
}

@media (max-width: 700px) {
  .video-local-fallback {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 16px;
  }

  .video-local-fallback > div {
    padding: 14px 4px 4px;
  }
}

.learning-mission-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.learning-mission-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(116, 51, 163, 0.16);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, var(--beige-soft));
  box-shadow: 0 18px 42px rgba(59, 20, 95, 0.1);
}

.kids-mission-board .learning-mission-card {
  border: 0;
  color: #fff;
  background: linear-gradient(145deg, #6d3df2, #a85cff);
}

.kids-mission-board .learning-mission-card:nth-child(2) {
  background: linear-gradient(145deg, #2ba6d9, #37c0ff);
}

.kids-mission-board .learning-mission-card:nth-child(3) {
  background: linear-gradient(145deg, #ff7a59, #ffcf4a);
}

.mission-step {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--mauve-dark);
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  font-weight: 900;
}

.learning-mission-card h3,
.learning-mission-card p {
  margin: 0;
}

.kids-mission-board .learning-mission-card p,
.kids-mission-board .learning-mission-card h3 {
  color: #fff;
}

.mission-check {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--mauve-dark);
  background: rgba(255, 255, 255, 0.88);
  font-weight: 900;
}

.pathway-kids [data-panel="8"] .panel-copy,
.pathway-kids #adminProtectedArea {
  border-radius: 28px;
}

.pathway-kids #adminProtectedArea {
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(109, 61, 242, 0.12), rgba(255, 207, 74, 0.12)),
    #fff;
}

.pathway-kids .admin-actions {
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(135deg, #6d3df2, #3f2fb3);
}

.pathway-kids .admin-actions .secondary-action,
.pathway-kids .admin-actions .primary-action {
  background: #fff;
  color: #3f2fb3;
}

.panel-copy {
  max-width: 760px;
  margin-bottom: 28px;
}

.panel-copy.centered {
  margin-inline: auto;
  text-align: center;
}

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

.validation-grid label,
.quiz label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.validation-step {
  position: relative;
  display: grid !important;
  gap: 12px;
  min-height: 218px;
  padding: 24px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 234, 216, 0.9)) !important;
  box-shadow: 0 18px 42px rgba(59, 20, 95, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.validation-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 54px rgba(59, 20, 95, 0.16);
}

.validation-step input {
  position: absolute;
  right: 18px;
  top: 18px;
}

.validation-step span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--mauve), var(--mauve-dark));
  font-weight: 900;
}

.validation-step strong {
  color: var(--mauve-dark);
  font-size: 1.12rem;
}

.validation-step small {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.primary-action {
  min-height: 44px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--mauve), var(--mauve-dark));
  cursor: pointer;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(59, 20, 95, 0.22);
}

.primary-action {
  padding: 0 22px;
}

.primary-action:hover {
  background: linear-gradient(135deg, var(--mauve-strong), var(--mauve-dark));
}

.feedback {
  min-height: 28px;
  color: var(--accent-dark);
  font-weight: 800;
}

.badge-toast {
  position: fixed;
  z-index: 20;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: 320px;
  padding: 16px 18px;
  border: 1px solid rgba(116, 51, 163, 0.28);
  border-radius: 22px;
  color: var(--mauve-dark);
  background: linear-gradient(135deg, #fff, var(--beige));
  box-shadow: var(--glow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.92);
}

.badge-toast span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--mauve), var(--mauve-dark));
  font-size: 1.5rem;
}

.badge-toast.show {
  animation: badgePop 2.3s ease both;
}

.media-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: stretch;
}

.lesson-block,
.summary-lesson {
  display: grid;
  gap: 22px;
}

.visual-assessment {
  display: grid;
  gap: 18px;
}

.visual-exercise {
  gap: 14px;
}

.exercise-image-grid {
  display: grid;
  gap: 12px;
}

.exercise-image-grid.two-images {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exercise-image-grid.three-images {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.question-helper-images,
.navigation-images {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.question-helper-images .exercise-image-card,
.navigation-images .exercise-image-card {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: clamp(240px, 18vw, 340px);
  aspect-ratio: 4 / 3;
  border-radius: 18px;
}

.navigation-images {
  margin-bottom: 20px;
}

.exercise-image-card {
  position: relative;
  display: grid;
  align-items: end;
  justify-items: center;
  min-height: 260px;
  border: 2px dashed rgba(116, 51, 163, 0.34);
  border-radius: 24px;
  color: var(--mauve-dark);
  background:
    linear-gradient(135deg, rgba(255, 248, 238, 0.94), rgba(234, 215, 246, 0.6)),
    linear-gradient(90deg, rgba(116, 51, 163, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(116, 51, 163, 0.08) 1px, transparent 1px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain, 30px 30px, 30px 30px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(59, 20, 95, 0.1);
}

.exercise-image-card.compact {
  min-height: 210px;
}

.exercise-image-card input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.exercise-image-card span {
  position: relative;
  z-index: 1;
  max-width: 260px;
  margin: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--mauve-dark);
  background: rgba(255, 255, 255, 0.88);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(59, 20, 95, 0.08);
  opacity: 0.9;
}

.exercise-image-card.filled {
  border-style: solid;
  background-color: #fff;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.exercise-image-card.filled span {
  display: none;
}

.exercise-image-card.filled:hover span,
.exercise-image-card.filled:focus-within span {
  display: none;
}

.visual-scene,
.visual-sequence,
.visual-icons,
.nav-visual {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, var(--beige-soft));
}

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

.screen-card,
.keyboard-card,
.mouse-card,
.visual-sequence span,
.visual-icon {
  display: grid;
  place-items: center;
  min-height: 76px;
  border-radius: 16px;
  color: var(--mauve-dark);
  background: #fff;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(59, 20, 95, 0.09);
}

.wrong {
  outline: 3px solid rgba(116, 51, 163, 0.28);
}

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

.nav-visual {
  min-height: 116px;
  place-items: center;
}

.browser-visual {
  grid-template-columns: 1fr;
}

.browser-visual span {
  width: 80%;
  height: 20px;
  border-radius: 999px;
  background: var(--beige-deep);
}

.search-visual {
  grid-template-columns: 1fr 54px;
}

.search-visual strong {
  width: 100%;
  padding: 14px;
  border-radius: 999px;
  background: #fff;
}

.search-visual span {
  width: 42px;
  height: 42px;
  border: 8px solid var(--mauve);
  border-radius: 50%;
}

.result-visual {
  grid-template-columns: 1fr 1fr;
}

.good-result,
.bad-result {
  width: 100%;
  height: 58px;
  border-radius: 16px;
  background: #fff;
}

.good-result {
  border: 3px solid var(--mauve);
}

.bad-result {
  border: 3px dashed var(--beige-deep);
}

.lock-visual,
.warning-visual {
  grid-template-columns: 120px 1fr;
}

.lock-visual strong,
.warning-visual strong {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--mauve), var(--mauve-dark));
}

.lesson-text {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(145deg, #fff, var(--beige-soft));
  box-shadow: 0 16px 38px rgba(59, 20, 95, 0.09);
}

.lesson-text h3 {
  margin: 0 0 10px;
  color: var(--accent-dark);
  font-size: 1.35rem;
  letter-spacing: 0;
}

.lesson-text p {
  margin: 0 0 10px;
}

.lesson-text p:last-child {
  margin-bottom: 0;
}

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

.image-slot {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 160px;
  border: 2px dashed rgba(116, 51, 163, 0.35);
  border-radius: 22px;
  color: var(--accent-dark);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(247, 234, 216, 0.9));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  font-weight: 800;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(59, 20, 95, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-slot:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(59, 20, 95, 0.16);
}

.image-slot input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.image-slot.filled {
  color: #fff;
  border-style: solid;
  text-shadow: 0 2px 8px rgba(23, 26, 61, 0.45);
}

.quiz {
  display: grid;
  gap: 16px;
}

.quiz-step {
  position: relative;
  padding-top: 24px;
}

.quiz-step p {
  margin: 0;
  color: var(--muted);
}

fieldset {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

legend {
  padding: 0 8px;
  font-weight: 800;
}

.quiz.locked {
  opacity: 0.72;
}

.success-animation {
  display: none;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 18px;
  border-radius: 18px;
  color: var(--success);
  background: rgba(116, 51, 163, 0.1);
}

.success-animation.show {
  display: flex;
  animation: successPulse 0.9s ease both;
}

.success-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  background: var(--success);
  font-size: 1.6rem;
  font-weight: 900;
}

.next-modules {
  margin-top: 28px;
}

.module-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.module-toolbar.compact {
  align-items: start;
}

.module-toolbar label {
  display: grid;
  gap: 6px;
  min-width: min(280px, 100%);
  color: var(--mauve-dark);
  font-size: 0.9rem;
  font-weight: 900;
}

.module-toolbar select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
}

.next-modules h3,
.admin-form h3,
.catalog-panel h3,
.table-wrap h3 {
  margin: 0 0 14px;
  color: var(--mauve-dark);
  font-size: 1.25rem;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

#recommendedModules.module-grid,
#moduleCatalog.module-grid {
  grid-template-columns: 1fr;
}

.module-section {
  display: grid;
  gap: 12px;
}

.module-section-title {
  margin: 0;
  padding: 10px 14px;
  border-left: 6px solid var(--accent);
  border-radius: 14px;
  color: var(--mauve-dark);
  background: rgba(255, 248, 238, 0.88);
}

.empty-state {
  margin: 0;
  padding: 18px;
  border: 1px dashed rgba(116, 51, 163, 0.28);
  border-radius: 18px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
}

.module-card {
  display: grid;
  grid-template-rows: 112px auto auto minmax(0, 1fr) auto auto auto;
  gap: 8px;
  min-height: 380px;
  max-height: 380px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  color: var(--ink);
  background: linear-gradient(145deg, #fff, var(--beige-soft));
  text-align: left;
  box-shadow: 0 16px 38px rgba(59, 20, 95, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.module-card-image {
  width: 100%;
  height: 112px;
  min-height: 112px;
  border: 1px solid rgba(116, 51, 163, 0.16);
  border-radius: 18px;
  object-fit: contain;
  background: #fff;
}

.module-card-image.placeholder {
  display: grid;
  place-items: center;
  color: var(--mauve-dark);
  background:
    linear-gradient(135deg, rgba(255, 248, 238, 0.95), rgba(234, 215, 246, 0.65));
  font-size: 0.9rem;
  font-weight: 900;
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 54px rgba(59, 20, 95, 0.16);
}

.module-choice {
  cursor: pointer;
}

.module-choice.selected {
  border-color: var(--mauve-dark);
  background: linear-gradient(135deg, var(--beige), var(--mauve-light));
}

.module-card span {
  color: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
}

.module-card strong {
  color: var(--mauve-dark);
  font-size: 1.15rem;
}

.module-card small,
.module-card em {
  color: var(--muted);
  font-style: normal;
}

.module-card p {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.module-card-goal {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid rgba(116, 51, 163, 0.16);
  border-radius: 14px;
  background: rgba(255, 246, 218, 0.82);
}

.module-card-goal span {
  color: var(--contrast-dark);
  font-size: 0.68rem;
  letter-spacing: 0;
}

.module-card-goal b {
  display: -webkit-box;
  overflow: hidden;
  color: var(--mauve-dark);
  font-size: 0.84rem;
  font-weight: 900;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.module-card em {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.module-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.module-card-actions .secondary-action,
.module-card-actions .delete-module {
  min-height: 34px;
  padding: 0 12px;
}

/* Les cartes du catalogue administrateur doivent toujours laisser visibles
   les commandes de gestion, même lorsque leur contenu est long. */
#moduleCatalog .module-card {
  grid-template-rows: 112px repeat(4, auto) minmax(48px, auto) auto auto;
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: visible;
}

#moduleCatalog .module-card-actions {
  align-self: end;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

#moduleCatalog .module-card-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 120px;
  min-height: 42px;
  visibility: visible;
  opacity: 1;
}

#moduleCatalog .module-card-actions .delete-module {
  border-color: rgba(177, 48, 72, 0.35);
  color: #9c2942;
  background: #fff4f6;
}

.selected-module-detail {
  margin-top: 24px;
}

.module-detail {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, var(--beige-soft));
  box-shadow: 0 18px 44px rgba(59, 20, 95, 0.1);
}

.module-detail h3,
.module-quiz-list h4 {
  margin: 0;
  color: var(--mauve-dark);
}

.module-detail p {
  margin: 0;
}

.module-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.module-media-grid img {
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

.module-media-grid img {
  width: 100%;
  height: clamp(280px, 28vw, 440px);
  object-fit: contain;
  padding: 0;
  background: #fff;
}

.module-media-grid figure {
  min-height: clamp(320px, 32vw, 500px);
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(116, 51, 163, .16);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(59, 20, 95, .12);
}

.module-media-grid figcaption {
  margin-top: 10px;
  color: var(--mauve-dark);
  font-weight: 900;
  text-align: center;
}

.module-media-grid span {
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--muted);
  font-weight: 800;
}

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

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.admin-dashboard {
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) 0.95fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 28px;
}

.admin-form,
.catalog-panel {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 44px rgba(59, 20, 95, 0.1);
}

.admin-form {
  display: grid;
  gap: 16px;
}

.password-admin {
  margin-bottom: 22px;
}

.password-admin .secondary-action {
  width: fit-content;
}

.catalog-panel {
  position: sticky;
  top: 18px;
  max-height: 760px;
  overflow: hidden;
}

.catalog-panel > .module-grid {
  max-height: 660px;
  overflow-y: auto;
  padding-right: 6px;
  grid-template-columns: 1fr;
}

.catalog-panel > .module-grid::-webkit-scrollbar {
  width: 8px;
}

.catalog-panel > .module-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(116, 51, 163, 0.28);
}

.creator-section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, var(--beige-soft));
}

.content-editor {
  margin-bottom: 24px;
}

.admin-login {
  max-width: 520px;
  margin-bottom: 24px;
}

.content-editor > p {
  margin: 0;
  color: var(--muted);
}

.content-editor-fields {
  display: grid;
  gap: 16px;
  max-height: 760px;
  overflow-y: auto;
  padding-right: 6px;
}

.editor-group {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, var(--beige-soft));
}

.editor-group h4,
.editor-group summary,
.editor-question h5 {
  margin: 0;
  color: var(--mauve-dark);
}

.editor-group summary {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 900;
}

.editor-question {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(116, 51, 163, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
}

.editor-question > label:first-child {
  grid-column: 1 / -1;
}

.editor-image-strip {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(116, 51, 163, 0.24);
  border-radius: 16px;
  background: rgba(255, 248, 238, 0.76);
}

.editor-image-strip > strong {
  color: var(--mauve-dark);
}

.editor-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

.editor-image-grid.single-editor-image {
  grid-template-columns: minmax(220px, 360px);
}

.editor-image-control {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.editor-image-card {
  grid-column: auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 150px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}

.editor-file-label {
  display: grid;
  gap: 6px;
  color: var(--mauve-dark);
  font-size: 0.85rem;
  font-weight: 900;
}

.editor-file-input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
}

.editor-url-input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--ink);
  background: #fff;
}

.upload-status {
  min-height: 18px;
  color: var(--muted);
  font-weight: 800;
}

.image-admin-panel {
  margin-bottom: 24px;
}

.image-admin-panel > p {
  margin: 0;
  color: var(--muted);
}

.admin-image-manager {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-height: 760px;
  overflow-y: auto;
  padding-right: 6px;
}

.admin-image-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, var(--beige-soft));
}

.admin-image-card img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  border: 1px solid rgba(116, 51, 163, 0.16);
  border-radius: 14px;
  background: #fff;
}

.admin-image-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 128px;
  border: 1px dashed rgba(116, 51, 163, 0.28);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255, 248, 238, 0.78);
  font-weight: 900;
}

.admin-image-card strong,
.admin-image-card small {
  display: block;
}

.admin-image-card small {
  color: var(--muted);
}

.admin-image-card label.secondary-action {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
}

.admin-image-card input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.creator-section h4 {
  margin: 0;
  color: var(--mauve-dark);
  font-size: 1rem;
}

.creator-help {
  margin: 0;
  color: #6f5482;
  font-size: 0.88rem;
  line-height: 1.45;
}

.admin-save-notice {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(34, 139, 94, 0.22);
  border-radius: 14px;
  color: #245c48;
  background: #effaf5;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.5;
}

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

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

.practice-editor-grid textarea {
  min-height: 132px;
}

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

.practice-preview-grid figure {
  display: grid;
  gap: 6px;
  margin: 0;
}

.practice-preview-grid figcaption {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.creator-image-placeholder {
  display: grid;
  min-height: 92px;
  place-items: center;
  padding: 10px;
  border: 2px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
}

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

.quiz-builder label:first-child {
  grid-column: 1 / -1;
}

.module-goal-field small,
.quiz-builder-counter {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.quiz-builder-counter {
  width: fit-content;
  margin: 12px 0;
  padding: 8px 12px;
  border: 1px solid rgba(116, 51, 163, 0.18);
  border-radius: 999px;
  color: var(--mauve-dark);
  background: var(--contrast-soft);
}

.quiz-question-list {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
}

.quiz-question-list p {
  margin: 0;
  color: var(--muted);
}

.quiz-draft-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.quiz-draft-card:hover {
  border-color: rgba(116, 51, 163, 0.35);
  box-shadow: 0 14px 28px rgba(59, 20, 95, 0.1);
}

.quiz-draft-card strong {
  color: var(--mauve-dark);
}

.quiz-draft-card span,
.quiz-draft-card small {
  color: var(--muted);
}

.quiz-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.quiz-draft-actions button,
.remove-draft-question {
  width: fit-content;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(116, 51, 163, 0.28);
  border-radius: 12px;
  color: var(--mauve-dark);
  background: var(--beige-soft);
  cursor: pointer;
  font-weight: 800;
}

.quiz-draft-actions button:hover {
  border-color: rgba(116, 51, 163, 0.55);
  background: var(--contrast-soft);
}

.quiz-draft-actions .remove-draft-question {
  color: #8a2750;
  border-color: rgba(138, 39, 80, 0.22);
}

.admin-form label,
.upload-card {
  display: grid;
  gap: 6px;
  color: var(--mauve-dark);
  font-weight: 800;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
}

.admin-form textarea {
  min-height: 110px;
  resize: vertical;
}

.wide-field {
  grid-column: 1 / -1;
}

.upload-card {
  position: relative;
  min-height: 132px;
  place-items: center;
  border: 2px dashed rgba(116, 51, 163, 0.35);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(247, 234, 216, 0.92));
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.upload-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(59, 20, 95, 0.13);
}

.upload-card input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-card span {
  color: var(--muted);
  font-weight: 700;
}

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

.creator-preview-grid img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.delete-module {
  width: fit-content;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(116, 51, 163, 0.35);
  border-radius: 14px;
  color: var(--mauve-dark);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}

.empty-catalog-message {
  margin: 0;
  padding: 24px;
  border: 1px dashed rgba(116, 51, 163, 0.3);
  border-radius: 16px;
  color: var(--muted);
  background: var(--beige-soft);
  text-align: center;
  font-weight: 800;
}

.module-visibility-status {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  color: #7b3a14;
  background: #fff0d5;
  font-weight: 900;
}

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

.progress-dashboard {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1.1fr;
  gap: 14px;
}

.progress-tile {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 190px;
  padding: 22px;
  border: 1px solid rgba(116, 51, 163, 0.18);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, var(--beige-soft));
  box-shadow: 0 18px 42px rgba(59, 20, 95, 0.1);
}

.progress-tile span {
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
}

.progress-tile strong {
  color: var(--mauve-dark);
  font-size: clamp(1.45rem, 2.5vw, 2.4rem);
}

.progress-tile p {
  margin: 0;
  color: var(--muted);
}

.progress-track.mini {
  height: 14px;
  margin-top: 4px;
}

.earned-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.earned-badge {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: 0.9rem;
  font-weight: 900;
}

.earned-badge b {
  color: var(--beige-deep);
}

.earned-badge small {
  grid-column: 2;
  color: inherit;
  font-size: 0.72rem;
  opacity: 0.76;
}

.earned-badge.acquired {
  color: #23624a;
  border-color: rgba(35, 98, 74, 0.28);
  background: linear-gradient(135deg, #ecfff6, #d6f4e6);
}

.earned-badge.partial {
  color: #7a4b12;
  border-color: rgba(192, 133, 42, 0.34);
  background: linear-gradient(135deg, #fff5dc, #f8dfaa);
}

.earned-badge.missing {
  color: #9b3042;
  border-color: rgba(155, 48, 66, 0.3);
  background: linear-gradient(135deg, #fff0f2, #f7d4dc);
}

.earned-badge.pending {
  color: var(--muted);
  background: #fff;
}

.earned-badge.acquired b,
.earned-badge.partial b,
.earned-badge.missing b {
  color: currentColor;
}

/* Badges adultes : cartes de compétences sobres, lisibles et valorisantes. */
.pathway-adult [data-panel="7"] .progress-badges-tile {
  position: relative;
  overflow: hidden;
  align-content: start;
  background:
    radial-gradient(circle at 94% 8%, rgba(184, 126, 224, 0.16), transparent 30%),
    linear-gradient(145deg, #ffffff, #faf6fd);
}

.pathway-adult [data-panel="7"] .progress-badges-tile::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -72px;
  top: -78px;
  border: 24px solid rgba(116, 51, 163, 0.06);
  border-radius: 50%;
}

.pathway-adult [data-panel="7"] .progress-badges-tile > span,
.pathway-adult [data-panel="7"] .progress-badges-tile > strong,
.pathway-adult [data-panel="7"] .earned-badges {
  position: relative;
  z-index: 1;
}

.pathway-adult [data-panel="7"] .progress-badges-tile > span {
  color: #6f5b7b;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.pathway-adult [data-panel="7"] .progress-badges-tile > strong {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(116, 51, 163, 0.12);
  border-radius: 10px;
  color: #5a237f;
  background: #f4eafa;
  font-size: 1.18rem;
}

.pathway-adult [data-panel="7"] .earned-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pathway-adult [data-panel="7"] .earned-badge {
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 3px 12px;
  min-height: 82px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid #eadff1;
  border-radius: 16px;
  color: #4a3457;
  background: #ffffff;
  box-shadow: 0 9px 24px rgba(70, 29, 98, 0.07);
  font-size: 0.82rem;
  text-align: left;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.pathway-adult [data-panel="7"] .earned-badge:hover {
  transform: translateY(-3px);
  border-color: #d8bde7;
  box-shadow: 0 15px 30px rgba(70, 29, 98, 0.12);
}

.pathway-adult [data-panel="7"] .earned-badge b {
  grid-row: 1 / 3;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  align-self: center;
  border: 4px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(145deg, #7a35aa, #a95bd1);
  box-shadow: 0 8px 18px rgba(90, 35, 127, 0.22);
  font-size: 1.05rem;
}

.pathway-adult [data-panel="7"] .earned-badge > span {
  align-self: end;
  min-width: 0;
  color: #351444;
  font-size: 0.84rem;
  line-height: 1.2;
  text-transform: none;
  overflow-wrap: anywhere;
}

.pathway-adult [data-panel="7"] .earned-badge small {
  grid-column: 2;
  align-self: start;
  color: #786683;
  font-size: 0.69rem;
  font-weight: 750;
  line-height: 1.3;
  opacity: 1;
  overflow-wrap: anywhere;
}

.pathway-adult [data-panel="7"] .earned-badge.acquired {
  border-color: rgba(27, 133, 100, 0.22);
  background: linear-gradient(145deg, #ffffff, #effbf7);
}

.pathway-adult [data-panel="7"] .earned-badge.acquired b {
  background: linear-gradient(145deg, #16856b, #43b894);
}

.pathway-adult [data-panel="7"] .earned-badge.partial {
  border-color: rgba(195, 137, 42, 0.25);
  background: linear-gradient(145deg, #ffffff, #fff8e9);
}

.pathway-adult [data-panel="7"] .earned-badge.partial b {
  background: linear-gradient(145deg, #b87919, #e3ae4e);
}

.pathway-adult [data-panel="7"] .earned-badge.missing {
  border-color: rgba(169, 66, 91, 0.2);
  background: linear-gradient(145deg, #ffffff, #fff3f6);
}

.pathway-adult [data-panel="7"] .earned-badge.missing b {
  background: linear-gradient(145deg, #a9425b, #d8738b);
}

.pathway-adult [data-panel="7"] .earned-badge.pending {
  border-color: #e8e1eb;
  color: #796d80;
  background: linear-gradient(145deg, #ffffff, #f8f6f9);
}

.pathway-adult [data-panel="7"] .earned-badge.pending b {
  color: #725d7f;
  background: linear-gradient(145deg, #e9e1ed, #d9cddd);
  box-shadow: none;
}

/* Les trophées du parcours enfant reprennent le langage visuel du niveau spatial. */
.pathway-kids [data-panel="7"] .progress-badges-tile {
  position: relative;
  overflow: hidden;
  color: #fff;
  border: 0;
  background: linear-gradient(145deg, #4c1d95, #7c3aed 58%, #2563eb);
}

.pathway-kids [data-panel="7"] .progress-badges-tile::after {
  content: "✦";
  position: absolute;
  right: 22px;
  top: 12px;
  color: #facc15;
  font-size: 2rem;
  opacity: 0.9;
}

.pathway-kids [data-panel="7"] .progress-badges-tile > span,
.pathway-kids [data-panel="7"] .progress-badges-tile > strong {
  position: relative;
  z-index: 1;
  color: #fff;
}

.pathway-kids [data-panel="7"] .progress-badges-tile > strong {
  display: block;
  margin: 8px 0 18px;
  font-size: 2.8rem;
}

.pathway-kids [data-panel="7"] .earned-badges {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
}

.pathway-kids [data-panel="7"] .earned-badge {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 164px;
  padding: 14px 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 22px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  text-align: center;
  backdrop-filter: blur(10px);
}

.pathway-kids [data-panel="7"] .earned-badge b {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 6px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #ec4899, #7c3aed);
  box-shadow: 0 12px 28px rgba(30, 15, 80, 0.28);
  font-size: 2rem;
}

.pathway-kids [data-panel="7"] .earned-badge > span {
  color: #fff;
  font-size: 0.82rem;
}

.pathway-kids [data-panel="7"] .earned-badge small {
  grid-column: 1;
  color: rgba(255, 255, 255, 0.82);
}

.pathway-kids [data-panel="7"] .earned-badge.pending,
.pathway-kids [data-panel="7"] .earned-badge.missing {
  opacity: 0.62;
  filter: saturate(0.55);
}

.pathway-kids [data-panel="7"] .earned-badge.acquired b {
  background: linear-gradient(145deg, #22d3ee, #3b82f6);
}

.pathway-kids [data-panel="7"] .earned-badge.partial b {
  background: linear-gradient(145deg, #facc15, #fb923c);
}

@media (max-width: 760px) {
  .practice-puzzle-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .practice-card-bank,
  .practice-drop-grid,
  .pathway-adult [data-panel="7"] .earned-badges,
  .pathway-kids [data-panel="7"] .earned-badges {
    grid-template-columns: 1fr;
  }

  .practice-card-bank {
    min-height: 0;
  }

  .practice-drop-slot {
    min-height: 120px;
  }

  .guided-practice-actions,
  .guided-practice-actions button {
    width: 100%;
  }
}

/* Bas de page dédié à la page Ateliers */
body:not(.session-started):has(#vitrineAteliers:target) .vitrine-ref-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr) !important;
  align-items: center !important;
  gap: 32px !important;
  width: min(calc(100% - 64px), 1420px) !important;
  margin: 8px auto 38px !important;
  padding: clamp(26px, 3vw, 42px) !important;
  border: 0 !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 88% 0, rgba(255, 210, 68, .22), transparent 34%),
    linear-gradient(135deg, #35104d 0%, #632187 100%) !important;
  color: #fff !important;
  box-shadow: 0 24px 60px rgba(52, 16, 77, .20) !important;
}

body:not(.session-started):has(#vitrineAteliers:target) .vitrine-footer-identity {
  display: grid !important;
  gap: 7px !important;
}

body:not(.session-started):has(#vitrineAteliers:target) .vitrine-ref-footer strong {
  color: #fff !important;
  font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
}

body:not(.session-started):has(#vitrineAteliers:target) .vitrine-ref-footer p {
  margin: 0 !important;
  color: rgba(255, 255, 255, .92) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

body:not(.session-started):has(#vitrineAteliers:target) .vitrine-ref-footer small {
  color: rgba(255, 255, 255, .72) !important;
  font-size: .9rem !important;
}

body:not(.session-started):has(#vitrineAteliers:target) .vitrine-ref-footer nav {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body:not(.session-started):has(#vitrineAteliers:target) .vitrine-ref-footer nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .10) !important;
  color: #fff !important;
  text-align: center !important;
  text-decoration: none !important;
  font-size: .87rem !important;
  font-weight: 850 !important;
  transition: transform .18s ease, background .18s ease !important;
}

body:not(.session-started):has(#vitrineAteliers:target) .vitrine-ref-footer nav a:hover {
  transform: translateY(-2px) !important;
  background: #ffd244 !important;
  color: #35104d !important;
}

@media (max-width: 760px) {
  body:not(.session-started):has(#vitrineAteliers:target) .vitrine-ref-footer {
    grid-template-columns: 1fr !important;
    width: calc(100% - 24px) !important;
    margin: 6px auto 22px !important;
    padding: 24px 18px !important;
    border-radius: 24px !important;
  }

  body:not(.session-started):has(#vitrineAteliers:target) .vitrine-ref-footer nav {
    grid-template-columns: 1fr !important;
  }
}

.badge-toast.acquired span {
  background: linear-gradient(135deg, #4ab47f, #23624a);
}

.badge-toast.partial span {
  background: linear-gradient(135deg, #f0c366, #a46b1b);
}

.badge-toast.missing span {
  background: linear-gradient(135deg, #e7788b, #9b3042);
}

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

.advice-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, var(--beige-soft));
  box-shadow: 0 14px 30px rgba(59, 20, 95, 0.09);
}

.advice-card h3 {
  margin: 0;
  color: var(--mauve-dark);
}

.advice-card p {
  margin: 0;
  color: var(--muted);
}

.summary-card {
  display: grid;
  align-items: center;
  min-height: 96px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink);
  background: linear-gradient(135deg, #fff, var(--beige-soft));
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(59, 20, 95, 0.09);
}

.journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 260px;
  margin: 32px 0;
}

.journey-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark), var(--gold), var(--blue));
}

.journey-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 128px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(24, 33, 31, 0.1);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.journey-node::after {
  content: attr(data-label);
  max-width: 120px;
  text-align: center;
  font-weight: 800;
}

.journey-node.active {
  border-color: var(--accent);
  background: var(--beige-soft);
  transform: translateY(-12px) scale(1.04);
}

.table-wrap {
  overflow-x: auto;
}

.learner-results {
  display: grid;
  gap: 6px;
  min-width: 190px;
}

.learner-result {
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border-left: 4px solid #8b5cf6;
  border-radius: 4px;
  background: #f5f1ff;
}

.learner-result small {
  color: #554d67;
}

.learner-result.acquired {
  border-color: #16856b;
  background: #eaf8f3;
}

.learner-result.partial {
  border-color: #b7791f;
  background: #fff7e5;
}

.learner-result.missing {
  border-color: #c2415d;
  background: #fff0f3;
}

.learner-result.pending {
  border-color: #a69ab8;
  color: #655d70;
}

.pathway-adult.session-started .topbar::after,
.pathway-kids.session-started .topbar::after {
  display: none;
}

.chatbot-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 8px 16px 8px 8px;
  border: 0;
  border-radius: 26px;
  color: #fff;
  background: #4b176f;
  box-shadow: 0 16px 36px rgba(59, 20, 95, 0.3);
  cursor: pointer;
}

.chatbot-launcher img {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92);
}

.chatbot-panel {
  position: fixed;
  right: 22px;
  bottom: 86px;
  z-index: 121;
  width: min(390px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 110px));
  overflow: hidden;
  border: 1px solid #e3d6ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(42, 20, 58, 0.28);
}

.chatbot-panel[hidden] {
  display: none;
}

.chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  color: #fff;
  background: linear-gradient(135deg, #32104e, #71389a);
}

.chatbot-header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chatbot-header div div {
  display: grid;
}

.chatbot-header small {
  color: #eadcf2;
}

.chatbot-header button {
  width: 36px;
  height: 36px;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 1.7rem;
  cursor: pointer;
}

.chatbot-avatar {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.88);
}

.chatbot-messages {
  display: grid;
  gap: 10px;
  min-height: 220px;
  max-height: 330px;
  padding: 15px;
  overflow-y: auto;
  background: #faf7fc;
}

.chatbot-message {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.chatbot-message.user {
  justify-items: end;
}

.chatbot-message p {
  max-width: 88%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  color: #34263d;
  background: #fff;
  box-shadow: 0 5px 14px rgba(60, 35, 75, 0.08);
}

.chatbot-message.user p {
  color: #fff;
  background: #71389a;
}

.chatbot-message button,
.chatbot-suggestions button {
  border: 1px solid #cbb2dc;
  border-radius: 18px;
  padding: 7px 11px;
  color: #4b176f;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.chatbot-suggestions {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  border-top: 1px solid #eee5f3;
}

.chatbot-suggestions button {
  flex: 0 0 auto;
}

.chatbot-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #eee5f3;
}

.chatbot-form input {
  min-width: 0;
  border: 1px solid #d7c9df;
  border-radius: 6px;
  padding: 11px;
}

.chatbot-form button {
  border: 0;
  border-radius: 6px;
  padding: 0 14px;
  color: #fff;
  background: #4b176f;
  font-weight: 800;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .chatbot-launcher {
    right: 12px;
    bottom: 12px;
  }

  .chatbot-launcher strong {
    display: none;
  }

  .chatbot-launcher {
    padding: 8px;
  }

  .chatbot-panel {
    right: 8px;
    bottom: 72px;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 84px);
  }

  .chatbot-messages {
    max-height: calc(100vh - 310px);
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

th,
td {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  color: var(--navy);
  background: var(--beige-soft);
}

.delete-row {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(116, 51, 163, 0.35);
  border-radius: 14px;
  color: var(--mauve-dark);
  background: var(--beige-soft);
  cursor: pointer;
  font-weight: 800;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes successPulse {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  55% {
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes badgePop {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.92) rotate(-2deg);
  }
  18% {
    opacity: 1;
    transform: translateY(0) scale(1.04) rotate(1deg);
  }
  32% {
    transform: translateY(0) scale(1) rotate(0);
  }
  82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
}

@keyframes robotFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-12px) rotate(2deg);
  }
}

@keyframes starPulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.92) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.14) rotate(12deg);
  }
}

@keyframes rocketPath {
  0%,
  100% {
    transform: translate(0, 0) rotate(45deg);
  }
  50% {
    transform: translate(18px, -18px) rotate(45deg);
  }
}

@media (max-width: 880px) {
  .topbar,
  .media-layout,
  .session-card,
  .session-form,
  .adult-welcome-card,
  .adult-dashboard-grid,
  .adult-resume-content,
  .adult-quick-grid,
  .adult-module-preview-grid,
  .landing-pathways,
  .kids-adventure-hero {
    grid-template-columns: 1fr;
  }

  .topbar {
    display: grid;
  }

  .pathway-adult.session-started .topbar,
  .pathway-adult.session-started .steps {
    position: static;
    width: auto;
    max-height: none;
  }

  .pathway-adult.session-started .topbar {
    padding: 24px 18px;
    border-radius: 0 0 24px 24px;
  }

  .pathway-adult.session-started .steps {
    margin: 16px 0;
  }

  .pathway-adult.session-started main {
    width: min(100% - 24px, 1180px);
    margin: 0 auto 48px;
  }

  .pathway-adult.session-started .session-card {
    border-radius: 22px;
  }

  .adult-welcome-card {
    border-radius: 24px;
  }

  .adult-illustration {
    min-height: 180px;
  }

  .adult-progress-card,
  .adult-reminder-card,
  .adult-resume-card,
  .adult-quick-card {
    grid-column: auto;
  }

  .module-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .steps,
  .validation-grid,
  .image-slots,
  .exercise-image-grid.two-images,
  .exercise-image-grid.three-images,
  .question-helper-images,
  .navigation-images,
  .summary-grid,
  .progress-dashboard,
  .advice-grid,
  .admin-image-manager,
  .pathway-card-grid,
  .learning-mission-board,
  .module-grid,
  .module-media-grid,
  .creator-row,
  .practice-editor-grid,
  .practice-preview-grid,
  .editor-question,
  .quiz-builder,
  .creator-preview-grid,
  .admin-dashboard {
    grid-template-columns: 1fr;
  }

  .error-scene,
  .visual-sequence,
  .visual-icons,
  .result-visual,
  .lock-visual,
  .warning-visual {
    grid-template-columns: 1fr;
  }

  .question-helper-images .exercise-image-card,
  .navigation-images .exercise-image-card,
  .exercise-image-card,
  .exercise-image-card.compact {
    width: 100%;
    height: auto;
    min-height: 260px;
    aspect-ratio: 4 / 3;
  }

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

  .kids-adventure-hero {
    min-height: auto;
  }

  .kids-hero-scene {
    min-height: 180px;
    order: -1;
  }

  .kids-hero-action {
    width: 100%;
  }

  .journey-line {
    left: 50%;
    right: auto;
    top: 8%;
    bottom: 8%;
    width: 6px;
    height: auto;
  }
}

body:not(.session-started) {
  background:
    radial-gradient(circle at 18% 8%, rgba(234, 215, 246, 0.72), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(169, 106, 208, 0.22), transparent 26%),
    linear-gradient(135deg, #fff8ff, #f7effd 44%, #fbf3ff);
}

body:not(.session-started) .session-card {
  background:
    radial-gradient(circle at 70% 26%, rgba(234, 215, 246, 0.52), transparent 20%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(251, 243, 255, 0.94));
}

body:not(.session-started) .session-card::after {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.65), transparent 35%),
    linear-gradient(135deg, #ead7f6, #7433a3);
  box-shadow: 0 24px 34px rgba(116, 51, 163, 0.22);
}

body:not(.session-started) .landing-pathways article {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(251, 243, 255, 0.94));
}

body:not(.session-started) .landing-pathways article span,
body:not(.session-started) .landing-pathways article:nth-child(2) span {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(135deg, #a96ad0, #7433a3);
  box-shadow: 0 16px 28px rgba(116, 51, 163, 0.22);
}

.pathway-adult.session-started {
  --paper: #fbf3ff;
  --ink: #241238;
  --muted: #70627e;
  --line: #e7d8f1;
  --mauve-light: #ead7f6;
  --mauve: #a96ad0;
  --mauve-strong: #7433a3;
  --mauve-dark: #3b145f;
  --accent: #8d45ba;
  --accent-dark: #3b145f;
  background:
    radial-gradient(circle at 18% 8%, rgba(234, 215, 246, 0.6), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(116, 51, 163, 0.18), transparent 26%),
    linear-gradient(135deg, #fff8ff, #f7effd 48%, #fbf3ff);
}

.pathway-adult.session-started .topbar {
  background:
    linear-gradient(180deg, #3b145f, #4f1b78 68%, #7433a3),
    #3b145f;
  box-shadow: 24px 0 54px rgba(59, 20, 95, 0.24);
}

.pathway-adult.session-started .topbar::after {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)),
    rgba(234, 215, 246, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 34px rgba(59, 20, 95, 0.2);
}

.pathway-adult.session-started .step-tab.active {
  color: #3b145f;
  background: linear-gradient(135deg, #fff, #ead7f6);
  box-shadow: 0 18px 34px rgba(59, 20, 95, 0.24);
}

.pathway-adult.session-started .step-tab.active::before,
.pathway-adult.session-started .adult-quick-grid span,
.pathway-adult.session-started .adult-module-icon,
.pathway-adult.session-started .adult-calendar-item time {
  color: #fff;
  background: linear-gradient(135deg, #a96ad0, #7433a3);
  box-shadow: 0 14px 24px rgba(116, 51, 163, 0.24);
}

.pathway-adult.session-started .adult-welcome-card {
  background:
    radial-gradient(circle at 78% 24%, rgba(234, 215, 246, 0.72), transparent 22%),
    radial-gradient(circle at 92% 72%, rgba(169, 106, 208, 0.24), transparent 24%),
    linear-gradient(135deg, #fff, #fff8ff 42%, #f2e4fa);
  box-shadow: 0 28px 66px rgba(59, 20, 95, 0.18);
}

.pathway-adult.session-started .adult-welcome-card h3,
.pathway-adult.session-started .adult-card h4,
.pathway-adult.session-started .adult-progress-ring strong,
.pathway-adult.session-started .adult-reminder-card button:hover strong {
  color: #3b145f;
}

.pathway-adult.session-started .adult-pill {
  color: #3b145f;
  background: linear-gradient(135deg, #ead7f6, #fff8ff);
  box-shadow: 0 12px 24px rgba(116, 51, 163, 0.18);
}

.pathway-adult.session-started .adult-person {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(145deg, #a96ad0, #3b145f);
  box-shadow: 0 30px 54px rgba(59, 20, 95, 0.22);
}

.pathway-adult.session-started .adult-person::before {
  background: radial-gradient(circle at 36% 38%, rgba(255, 255, 255, 0.42), transparent 14%), #d9a4ef;
  box-shadow: 0 -20px 0 8px #2a0f45;
}

.pathway-adult.session-started .adult-laptop {
  background: linear-gradient(145deg, #fff, #d9c2ec);
  box-shadow: 0 12px 0 #2a0f45, 0 22px 28px rgba(59, 20, 95, 0.2);
}

.pathway-adult.session-started .adult-plant {
  background: #3b145f;
}

.pathway-adult.session-started .adult-plant::before {
  background:
    radial-gradient(circle at 25% 45%, #a96ad0 0 18px, transparent 19px),
    radial-gradient(circle at 65% 20%, #ead7f6 0 18px, transparent 19px),
    radial-gradient(circle at 62% 70%, #7433a3 0 20px, transparent 21px);
}

.pathway-adult.session-started .adult-card,
.pathway-adult.session-started .adult-quick-grid button,
.pathway-adult.session-started .adult-module-preview,
.pathway-adult.session-started .adult-calendar-item {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(251, 243, 255, 0.94));
  box-shadow: 0 22px 52px rgba(59, 20, 95, 0.12);
}

.pathway-adult.session-started .adult-progress-ring {
  background:
    radial-gradient(circle, #fff 0 55%, transparent 56%),
    conic-gradient(#a96ad0 calc(var(--progress) * 1%), #7433a3 0 72%, #efe3f7 0);
  box-shadow: 0 20px 34px rgba(116, 51, 163, 0.18);
}

.pathway-adult.session-started .adult-course-thumb {
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.48), transparent 18%),
    linear-gradient(145deg, #a96ad0, #3b145f);
}

@media (max-width: 880px) {
  body:not(.session-started) .session-card {
    grid-template-columns: 1fr;
    padding: 20px;
    border-radius: 28px;
  }

  body:not(.session-started) .session-visual {
    grid-column: 1;
    min-height: 240px;
    border-width: 6px;
  }

  body:not(.session-started) .learning-path-animation {
    grid-column: 1;
    grid-row: auto;
    min-height: 315px;
  }

  body:not(.session-started) .learning-path-signs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    left: 6%;
    right: 6%;
    bottom: 100px;
  }

  body:not(.session-started) .learning-path-signs span {
    min-height: 54px;
    font-size: .66rem;
  }

  body:not(.session-started) .learning-walker {
    --walker-scale: .82;
  }

  body:not(.session-started) .session-form {
    padding: 16px;
  }

  body:not(.session-started) .landing-pathways {
    grid-column: 1;
    grid-row: auto;
  }

  body:not(.session-started) .landing-pathways article {
    grid-template-columns: 1fr;
  }

  body:not(.session-started) .landing-pathways article span {
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  body:not(.session-started) .session-card {
    width: min(100%, calc(100vw - 20px));
    padding: 14px;
    border-radius: 22px;
  }

  body:not(.session-started) .session-intro h2 {
    font-size: 1.8rem;
  }

  body:not(.session-started) .session-visual {
    min-height: 200px;
    border-radius: 22px;
  }

  body:not(.session-started) .learning-path-animation {
    min-height: 330px;
    border-radius: 22px;
  }

  body:not(.session-started) .learning-path-signs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    bottom: 104px;
    gap: 8px;
  }

  body:not(.session-started) .learning-path-signs span {
    min-height: 46px;
    padding: 8px 6px;
  }

  body:not(.session-started) .learning-path-signs span i {
    width: 24px;
    height: 18px;
    font-size: .66rem;
  }

  body:not(.session-started) .learning-path-line {
    bottom: 28px;
  }

  body:not(.session-started) .learning-walker {
    bottom: 42px;
    --walker-scale: 0.58;
    transform-origin: bottom left;
  }

  body:not(.session-started) .landing-benefits {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-walker,
  .walker-arm,
  .walker-leg,
  .learning-path-signs span {
    animation: none !important;
  }

  .learning-path-signs span {
    filter: saturate(1.05);
  }
}

/* Accueil : scene de parcours plus haute et personnage plus humain sur bureau */
@media (min-width: 981px) {
  body:not(.session-started) .session-card {
    grid-template-rows: auto auto auto auto auto;
    min-height: auto;
  }

  body:not(.session-started) .session-intro,
  body:not(.session-started) .session-visual {
    align-self: end;
  }

  body:not(.session-started) .session-form {
    align-self: start;
  }

  body:not(.session-started) .learning-path-animation {
    margin-top: -26px;
    min-height: 345px;
  }
}

.learning-path-animation {
  min-height: 340px;
}

.learning-path-animation::after {
  bottom: 10px;
  height: 126px;
}

.learning-path-line {
  bottom: 32px;
  height: 82px;
}

.learning-path-signs {
  bottom: 112px;
}

.learning-walker {
  bottom: 70px;
  width: 104px;
  height: 164px;
}

.walker-shadow {
  left: 6px;
  width: 92px;
  height: 18px;
  background: rgba(40, 23, 57, 0.24);
}

.walker-head {
  left: 43px;
  top: 7px;
  width: 39px;
  height: 46px;
  border-radius: 47% 44% 48% 45%;
  background:
    radial-gradient(circle at 40% 43%, #35104f 0 2px, transparent 3px),
    radial-gradient(circle at 66% 42%, #35104f 0 2px, transparent 3px),
    linear-gradient(145deg, #ffd7b8, #f0a978);
}

.walker-head::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 21px;
  width: 8px;
  height: 6px;
  border-radius: 50%;
  background: #eca06f;
  box-shadow: -10px 11px 0 -3px rgba(210, 74, 97, .34);
}

.walker-hair {
  left: 34px;
  top: 0;
  width: 54px;
  height: 39px;
  border-radius: 50% 52% 42% 48%;
  background:
    radial-gradient(circle at 24% 74%, #22102f 0 13px, transparent 14px),
    radial-gradient(circle at 76% 68%, transparent 0 8px, #251036 9px),
    linear-gradient(145deg, #4b176f, #1d0b2a);
  clip-path: polygon(7% 48%, 20% 16%, 55% 3%, 88% 20%, 96% 58%, 70% 48%, 50% 38%, 32% 54%, 20% 68%);
}

.walker-smile {
  left: 55px;
  top: 35px;
  width: 14px;
  height: 7px;
}

.walker-body {
  left: 38px;
  top: 55px;
  width: 44px;
  height: 68px;
  border-radius: 20px 20px 12px 14px;
}

.walker-body::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  width: 15px;
  height: 64px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #fff8f1, #e8dff0);
}

.walker-body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.18) 39% 45%, transparent 46%),
    linear-gradient(90deg, rgba(45,14,75,.18), transparent 46%, rgba(45,14,75,.2));
}

.walker-arm {
  top: 66px;
  width: 10px;
  height: 44px;
}

.walker-arm.one {
  left: 32px;
}

.walker-arm.two {
  left: 78px;
}

.walker-bag {
  left: 15px;
  top: 72px;
  width: 32px;
  height: 43px;
  border-radius: 15px;
}

.walker-bag::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: -11px;
  height: 18px;
  border: 4px solid rgba(53, 16, 79, .82);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.walker-leg {
  top: 119px;
  width: 11px;
  height: 44px;
  background: linear-gradient(180deg, #185d8d, #17416e);
}

.walker-leg::after {
  content: "";
  position: absolute;
  left: -8px;
  bottom: -4px;
  width: 26px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(145deg, #fff, #e9e4f0);
  box-shadow: 0 4px 8px rgba(30, 14, 45, .18);
}

.walker-leg.one {
  left: 48px;
}

.walker-leg.two {
  left: 67px;
}

@keyframes learnerWalk {
  0%, 8% { left: 13%; transform: translateY(5px) scale(var(--walker-scale)); }
  20% { left: 24%; transform: translateY(-1px) scale(var(--walker-scale)); }
  36% { left: 37%; transform: translateY(3px) scale(var(--walker-scale)); }
  52% { left: 50%; transform: translateY(-2px) scale(var(--walker-scale)); }
  68% { left: 63%; transform: translateY(2px) scale(var(--walker-scale)); }
  84%, 100% { left: 76%; transform: translateY(-1px) scale(var(--walker-scale)); }
}

/* Accueil : visuel de parcours type illustration, positionne dans le vide de gauche */
body:not(.session-started) .learning-path-animation {
  background:
    linear-gradient(90deg, rgba(22, 18, 24, .18), transparent 20%, transparent 80%, rgba(22, 18, 24, .18)),
    url("assets/parcours-apprentissage.png") center / cover no-repeat;
}

body:not(.session-started) .learning-path-animation::before,
body:not(.session-started) .learning-path-line,
body:not(.session-started) .learning-scene-cloud,
body:not(.session-started) .learning-scene-plant,
body:not(.session-started) .learning-scene-sparkle,
body:not(.session-started) .learning-path-signs {
  display: none;
}

body:not(.session-started) .learning-path-animation::after {
  content: "";
  display: block;
  position: absolute;
  left: 13%;
  bottom: 54px;
  width: 104px;
  height: 42px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(255, 231, 170, .86), rgba(255, 199, 93, .28) 48%, transparent 72%);
  filter: blur(.2px);
  opacity: .78;
  transform: rotate(-6deg);
  animation: pathSceneMove 8.8s ease-in-out infinite;
}

body:not(.session-started) .learning-walker {
  display: block;
  z-index: 8;
  left: 12%;
  bottom: 62px;
  width: 94px;
  height: 154px;
  --walker-scale: .86;
  filter: drop-shadow(0 14px 18px rgba(20, 12, 30, .28));
  animation: pathHumanWalk 9s ease-in-out infinite;
}

body:not(.session-started) .walker-shadow {
  display: block;
  left: 8px;
  bottom: -7px;
  width: 78px;
  height: 15px;
  background: rgba(42, 18, 58, .28);
}

body:not(.session-started) .walker-head {
  display: block;
  left: 40px;
  top: 8px;
  width: 36px;
  height: 42px;
  border-radius: 48% 45% 47% 44%;
  background:
    radial-gradient(circle at 40% 43%, #2b103d 0 2px, transparent 3px),
    radial-gradient(circle at 65% 42%, #2b103d 0 2px, transparent 3px),
    linear-gradient(145deg, #ffd8ba, #ec9f6f);
}

body:not(.session-started) .walker-hair {
  display: block;
  left: 31px;
  top: 0;
  width: 52px;
  height: 38px;
  background:
    radial-gradient(circle at 25% 70%, #23102f 0 14px, transparent 15px),
    linear-gradient(145deg, #4d176d, #18091f);
  clip-path: polygon(8% 52%, 24% 15%, 60% 2%, 91% 22%, 96% 58%, 72% 47%, 48% 39%, 30% 57%, 19% 72%);
}

body:not(.session-started) .walker-smile {
  display: block;
  left: 52px;
  top: 36px;
}

body:not(.session-started) .walker-body {
  display: block;
  left: 34px;
  top: 56px;
  width: 42px;
  height: 64px;
  border-radius: 20px 20px 13px 15px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.26), transparent 35%),
    linear-gradient(145deg, #7d3bb2, #41115f);
}

body:not(.session-started) .walker-body::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  width: 14px;
  height: 61px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #fff7ee, #e9deef);
}

body:not(.session-started) .walker-body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(36, 9, 58, .2), transparent 47%, rgba(36, 9, 58, .18));
}

body:not(.session-started) .walker-arm {
  display: block;
  top: 66px;
  width: 10px;
  height: 42px;
  background: #f1ab7a;
}

body:not(.session-started) .walker-arm.one {
  left: 28px;
  animation: pathArmOne .9s ease-in-out infinite;
}

body:not(.session-started) .walker-arm.two {
  left: 75px;
  animation: pathArmTwo .9s ease-in-out infinite;
}

body:not(.session-started) .walker-bag {
  display: block;
  left: 10px;
  top: 72px;
  width: 31px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(145deg, #6f32b6, #301044);
}

body:not(.session-started) .walker-bag::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: -10px;
  height: 16px;
  border: 4px solid rgba(48, 16, 68, .85);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

body:not(.session-started) .walker-leg {
  display: block;
  top: 116px;
  width: 10px;
  height: 38px;
  background: linear-gradient(180deg, #1f6f9f, #17416e);
}

body:not(.session-started) .walker-leg::after {
  content: "";
  position: absolute;
  left: -8px;
  bottom: -4px;
  width: 26px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(145deg, #fff, #e9e4f0);
  box-shadow: 0 4px 8px rgba(30, 14, 45, .18);
}

body:not(.session-started) .walker-leg.one {
  left: 44px;
  animation: pathLegOne .9s ease-in-out infinite;
}

body:not(.session-started) .walker-leg.two {
  left: 63px;
  animation: pathLegTwo .9s ease-in-out infinite;
}

@keyframes pathSceneMove {
  0%, 10% {
    left: 12%;
    opacity: .36;
    transform: translateY(4px) rotate(-6deg) scale(.78);
  }
  24% {
    left: 24%;
    opacity: .82;
    transform: translateY(0) rotate(-4deg) scale(.9);
  }
  40% {
    left: 38%;
    opacity: .76;
    transform: translateY(-4px) rotate(-2deg) scale(1);
  }
  56% {
    left: 51%;
    opacity: .86;
    transform: translateY(-8px) rotate(0deg) scale(.95);
  }
  72% {
    left: 65%;
    opacity: .78;
    transform: translateY(-12px) rotate(3deg) scale(.86);
  }
  88%, 100% {
    left: 80%;
    opacity: .36;
    transform: translateY(-16px) rotate(5deg) scale(.72);
  }
}

@media (min-width: 981px) {
  body:not(.session-started) .landing-pathways {
    grid-row: 2;
    z-index: 4;
  }

  body:not(.session-started) .learning-path-animation {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 108px;
    min-height: 318px;
    border-radius: 22px;
    z-index: 2;
  }

  body:not(.session-started) .landing-journey-preview {
    grid-row: 3;
    margin-top: 18px;
    z-index: 1;
  }

  body:not(.session-started) .landing-confidence {
    grid-row: 4;
  }
}

@keyframes pathHumanWalk {
  0%, 10% { left: 11%; transform: translateY(8px) scale(var(--walker-scale)); }
  24% { left: 24%; transform: translateY(3px) scale(var(--walker-scale)); }
  40% { left: 38%; transform: translateY(-2px) scale(var(--walker-scale)); }
  56% { left: 52%; transform: translateY(-7px) scale(var(--walker-scale)); }
  72% { left: 66%; transform: translateY(-10px) scale(var(--walker-scale)); }
  88%, 100% { left: 79%; transform: translateY(-14px) scale(var(--walker-scale)); }
}

@keyframes pathLegOne {
  0%, 100% { transform: rotate(22deg); }
  50% { transform: rotate(-18deg); }
}

@keyframes pathLegTwo {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(22deg); }
}

@keyframes pathArmOne {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(20deg); }
}

@keyframes pathArmTwo {
  0%, 100% { transform: rotate(18deg); }
  50% { transform: rotate(-18deg); }
}

/* Accueil : version nettoyee, sans double personnage ni chevauchement des etapes */
body:not(.session-started) .learning-walker {
  display: none !important;
}

body:not(.session-started) .learning-path-animation {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(22, 18, 24, .16), transparent 18%, transparent 82%, rgba(22, 18, 24, .16)),
    url("assets/parcours-apprentissage.png") center / cover no-repeat;
  animation: pathIllustrationBreath 10s ease-in-out infinite;
}

body:not(.session-started) .learning-path-animation::before,
body:not(.session-started) .learning-path-line,
body:not(.session-started) .learning-scene-cloud,
body:not(.session-started) .learning-scene-plant,
body:not(.session-started) .learning-scene-sparkle,
body:not(.session-started) .learning-path-signs {
  display: none !important;
}

body:not(.session-started) .learning-path-animation::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  left: 10%;
  bottom: 50px;
  width: 118px;
  height: 46px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(255, 235, 176, .9), rgba(255, 202, 94, .32) 50%, transparent 74%);
  filter: blur(.4px);
  opacity: .72;
  mix-blend-mode: screen;
  animation: pathSceneMove 8.8s ease-in-out infinite;
}

@media (min-width: 981px) {
  body:not(.session-started) .landing-pathways {
    grid-column: 1;
    grid-row: 2;
    z-index: 3;
  }

  body:not(.session-started) .learning-path-animation {
    grid-column: 1;
    grid-row: 3;
    margin-top: 14px;
    min-height: 318px;
    z-index: 2;
  }

  body:not(.session-started) .landing-journey-preview {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 18px;
    z-index: 1;
  }

  body:not(.session-started) .landing-confidence {
    grid-row: 5;
  }
}

@keyframes pathIllustrationBreath {
  0%, 100% {
    background-position: center;
    filter: saturate(.98) contrast(1);
  }
  50% {
    background-position: 52% center;
    filter: saturate(1.05) contrast(1.02);
  }
}

@media (max-width: 980px) {
  body:not(.session-started) .learning-path-animation {
    min-height: 280px;
    background-position: center;
  }
}

@media (max-width: 560px) {
  body:not(.session-started) .learning-path-animation {
    min-height: 220px;
    background-position: 42% center;
  }

  body:not(.session-started) .learning-path-animation::after {
    bottom: 34px;
    width: 76px;
    height: 30px;
  }
}

/* Modules enfants : rendu AtelierKids, plus visuel et moins formulaire */
.module-detail.kid-module-detail {
  --kid-module-accent: #16a34a;
  --kid-module-accent-dark: #166534;
  --kid-module-soft: #eefcf3;
  display: grid;
  gap: 24px;
  padding: 0;
  border: 0;
  background:
    radial-gradient(circle at 14% 8%, rgba(34, 211, 238, .16), transparent 30%),
    radial-gradient(circle at 84% 4%, rgba(124, 58, 237, .12), transparent 24%),
    linear-gradient(180deg, #f8fbff, #ffffff 46%, #f7f8ff);
  box-shadow: none;
  font-family: "Nunito Sans", "Inter", system-ui, sans-serif;
}

.module-detail.kid-module-detail .kid-module-topbar {
  display: grid;
  grid-template-columns: minmax(220px, auto) 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 72px;
  padding: 16px 18px;
  border: 1px solid rgba(83, 104, 158, .12);
  border-radius: 26px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 45px rgba(30, 64, 175, .08);
}

.kid-module-detail .kid-module-brand,
.kid-module-detail .kid-module-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kid-module-detail .kid-module-brand > span {
  display: grid;
  place-items: center;
  width: 62px;
  height: 48px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #101b5c, #3b0764);
  font-size: .82rem;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
}

.kid-module-detail .kid-module-brand strong,
.kid-module-detail .kid-module-user strong {
  display: block;
  color: #111b45;
  font-size: 1.08rem;
  font-weight: 950;
}

.kid-module-detail .kid-module-brand small,
.kid-module-detail .kid-module-user small {
  display: block;
  color: #64708e;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.kid-module-detail .kid-module-mini-nav {
  justify-self: center;
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: #f3f1ff;
}

.kid-module-detail .kid-module-mini-nav span {
  padding: 10px 16px;
  border-radius: 999px;
  color: #18214a;
  background: rgba(255, 255, 255, .72);
  font-weight: 900;
  white-space: nowrap;
}

.kid-module-detail .kid-module-user > span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: var(--kid-module-soft);
  box-shadow: 0 12px 28px rgba(124, 58, 237, .16);
  font-size: 1.35rem;
}

.kid-module-detail .guided-module-header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(240px, .46fr);
  gap: 18px;
  align-items: center;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(83, 104, 158, .12);
  border-radius: 30px;
  color: #101b45;
  background:
    radial-gradient(circle at 86% 20%, rgba(255, 255, 255, .9), transparent 18%),
    linear-gradient(135deg, #ffffff, #f7fbff);
  box-shadow: 0 22px 52px rgba(30, 64, 175, .08);
}

.kid-module-detail .kid-module-title-icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 24px;
  background: var(--kid-module-gradient);
  box-shadow: 0 16px 34px rgba(124, 58, 237, .22);
  font-size: 2.35rem;
}

.kid-module-detail .guided-module-header .eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--kid-module-accent);
  font-size: .82rem;
  font-weight: 950;
}

.kid-module-detail .guided-module-header h3 {
  margin-top: 8px;
  color: var(--kid-module-accent-dark);
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.02;
  font-weight: 950;
}

.kid-module-detail .module-meta {
  color: #52607e;
  font-weight: 850;
}

.kid-module-detail .guided-module-goal {
  min-height: 112px;
  padding: 18px;
  border: 0;
  border-radius: 22px;
  background: var(--kid-module-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
}

.kid-module-detail .guided-module-goal small {
  color: var(--kid-module-accent-dark);
  font-weight: 950;
}

.kid-module-detail .guided-module-goal strong {
  display: -webkit-box;
  overflow: hidden;
  color: #101b45;
  line-height: 1.35;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.kid-module-detail .guided-module-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(83, 104, 158, .12);
  border-radius: 28px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 45px rgba(30, 64, 175, .08);
}

.kid-module-detail .guided-module-steps button {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 10px 12px;
  border: 0;
  border-radius: 20px;
  color: #25305b;
  background: transparent;
}

.kid-module-detail .guided-module-steps button:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  width: 8px;
  height: 3px;
  border-radius: 999px;
  background: rgba(124, 58, 237, .28);
}

.kid-module-detail .guided-module-steps span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid #d8def0;
  border-radius: 999px;
  color: #17224f;
  background: #fff;
  font-size: 1rem;
  font-weight: 950;
}

.kid-module-detail .guided-module-steps strong {
  overflow: hidden;
  font-size: .92rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kid-module-detail .guided-module-steps button.active {
  color: var(--kid-module-accent-dark);
  background: var(--kid-module-soft);
}

.kid-module-detail .guided-module-steps button.active span,
.kid-module-detail .guided-module-steps button.completed span {
  border-color: transparent;
  color: #fff;
  background: var(--kid-module-gradient);
  box-shadow: 0 12px 24px rgba(124, 58, 237, .22);
}

.kid-module-detail .guided-module-stage {
  padding: 28px;
  border: 1px solid rgba(83, 104, 158, .12);
  border-radius: 30px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 22px 58px rgba(30, 64, 175, .1);
}

.kid-module-detail .guided-stage-heading {
  align-items: center;
  margin-bottom: 18px;
}

.kid-module-detail .guided-stage-heading > span {
  width: 48px;
  height: 48px;
  color: #fff;
  background: var(--kid-module-gradient);
  box-shadow: 0 14px 26px rgba(124, 58, 237, .22);
}

.kid-module-detail .guided-stage-heading small {
  color: var(--kid-module-accent);
  font-size: .86rem;
  font-weight: 950;
}

.kid-module-detail .guided-stage-heading h4 {
  color: #101b45;
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  font-weight: 950;
}

.kid-module-detail .elearning-lesson {
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

.kid-module-detail .elearning-progress {
  justify-content: center;
  gap: 10px;
}

.kid-module-detail .elearning-progress span {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #d8def0;
}

.kid-module-detail .elearning-progress span.active {
  width: 34px;
  background: var(--kid-module-accent);
}

.kid-module-detail .elearning-page {
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

.kid-module-detail .elearning-page-heading {
  padding: 0;
  border: 0;
  background: transparent;
}

.kid-module-detail .elearning-page-heading small {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 10px;
  color: #fff;
  background: var(--kid-module-accent);
  font-weight: 950;
}

.kid-module-detail .elearning-page-heading h5 {
  margin-top: 8px;
  color: var(--kid-module-accent);
  font-size: clamp(1.7rem, 2.4vw, 2.5rem);
  line-height: 1.05;
  font-weight: 950;
}

.kid-module-detail .elearning-page-heading span {
  color: var(--kid-module-accent-dark);
  background: var(--kid-module-soft);
}

.kid-module-detail .lesson-reading-steps {
  display: none;
}

.kid-module-detail .guided-lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(340px, 1.14fr);
  gap: 24px;
  align-items: stretch;
}

.kid-module-detail .guided-lesson-reading-card {
  min-height: 430px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.kid-module-detail .lesson-reading-label {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--kid-module-accent-dark);
  background: var(--kid-module-soft);
  font-weight: 950;
}

.kid-module-detail .guided-lesson-text {
  display: grid;
  gap: 12px;
  color: #162044;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
}

.kid-module-detail .guided-lesson-text p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.kid-module-detail .guided-lesson-visual {
  display: grid;
  place-items: center;
  min-height: 430px;
  margin: 0;
  padding: 18px;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, .96), transparent 24%),
    linear-gradient(135deg, var(--kid-module-soft), #f8fbff);
  box-shadow: inset 0 0 0 1px rgba(83, 104, 158, .12);
}

.kid-module-detail .guided-lesson-visual img {
  width: 100%;
  height: 100%;
  max-height: 430px;
  object-fit: contain;
  border: 0;
  border-radius: 18px;
  background: transparent;
}

.kid-module-detail .guided-lesson-visual figcaption {
  align-self: end;
  color: #53607f;
  font-weight: 850;
}

.kid-module-detail .module-video {
  border-radius: 24px;
  box-shadow: 0 16px 36px rgba(30, 64, 175, .1);
}

.kid-module-detail .module-media-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kid-module-detail .module-media-grid figure {
  min-height: 360px;
  border-color: rgba(83, 104, 158, .13);
  background: #fff;
  box-shadow: 0 18px 44px rgba(30, 64, 175, .09);
}

.kid-module-detail .module-media-grid img {
  height: clamp(320px, 32vw, 460px);
  object-fit: contain;
  border: 0;
}

.kid-module-detail .module-practice-puzzle {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.kid-module-detail .practice-puzzle-heading {
  padding: 18px;
  border-radius: 22px;
  background: var(--kid-module-soft);
}

.kid-module-detail .practice-puzzle-heading small {
  color: var(--kid-module-accent-dark);
}

.kid-module-detail .practice-puzzle-heading h5 {
  color: #101b45;
  font-size: 1.4rem;
  font-weight: 950;
}

.kid-module-detail .practice-card-bank,
.kid-module-detail .practice-drop-grid {
  gap: 14px;
}

.kid-module-detail .practice-order-card,
.kid-module-detail .practice-drop-slot {
  border: 2px solid rgba(83, 104, 158, .14);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(30, 64, 175, .07);
}

.kid-module-detail .practice-order-card:hover,
.kid-module-detail .practice-drop-slot:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--kid-module-accent), white 50%);
  box-shadow: 0 18px 38px rgba(30, 64, 175, .12);
}

.kid-module-detail .module-quiz-list {
  gap: 16px;
}

.kid-module-detail .module-quiz-list fieldset {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(83, 104, 158, .12);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(30, 64, 175, .08);
}

.kid-module-detail .module-quiz-list legend {
  padding: 0 0 8px;
  color: #101b45;
  font-size: 1.08rem;
  font-weight: 950;
}

.kid-module-detail .module-quiz-list label {
  min-height: 54px;
  padding: 14px 16px;
  border: 2px solid #e7ecf7;
  border-radius: 16px;
  color: #17224f;
  background: #fff;
  box-shadow: none;
  font-weight: 850;
}

.kid-module-detail .module-quiz-list label:hover {
  border-color: color-mix(in srgb, var(--kid-module-accent), white 45%);
  background: var(--kid-module-soft);
}

.kid-module-detail .module-quiz-list label:has(input[type="radio"]:checked) {
  border-color: var(--kid-module-accent);
  background: var(--kid-module-soft);
  box-shadow: 0 12px 28px rgba(30, 64, 175, .08);
}

.kid-module-detail .guided-module-success {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  min-height: 320px;
  padding: 34px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .94), transparent 18%),
    var(--kid-module-soft);
}

.kid-module-detail .guided-module-success > span {
  order: 2;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  color: #fff;
  background: var(--kid-module-gradient);
  box-shadow: 0 24px 50px rgba(124, 58, 237, .26);
  font-size: 5rem;
}

.kid-module-detail .guided-module-success h4 {
  color: var(--kid-module-accent-dark);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  font-weight: 950;
}

.kid-module-detail .guided-module-success p {
  margin-top: 12px;
  color: #1d274d;
  font-size: 1.1rem;
  font-weight: 800;
}

.kid-module-detail footer {
  gap: 12px;
}

.kid-module-detail .primary-action {
  min-height: 52px;
  border-radius: 14px;
  background: var(--kid-module-gradient);
  box-shadow: 0 14px 30px rgba(124, 58, 237, .2);
  font-weight: 950;
}

.kid-module-detail .secondary-action {
  min-height: 48px;
  border: 2px solid #e3e8f5;
  border-radius: 14px;
  color: #18214a;
  background: #fff;
  font-weight: 950;
}

.kid-module-detail .kid-module-pathbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(83, 104, 158, .12);
  border-radius: 26px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 45px rgba(30, 64, 175, .08);
}

.kid-module-detail .kid-module-pathbar button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  min-height: 72px;
  padding: 12px;
  border: 0;
  border-radius: 18px;
  color: #101b45;
  background: transparent;
  text-align: left;
}

.kid-module-detail .kid-module-pathbar button:hover,
.kid-module-detail .kid-module-pathbar button.active {
  background: var(--kid-module-soft);
}

.kid-module-detail .kid-module-pathbar span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e5ebf7;
  font-size: 1.55rem;
}

.kid-module-detail .kid-module-pathbar strong {
  overflow: hidden;
  color: #101b45;
  font-size: .98rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kid-module-detail .kid-module-pathbar small {
  color: #64708e;
  font-weight: 850;
}

@media (max-width: 1100px) {
  .kid-module-detail .kid-module-topbar,
  .kid-module-detail .guided-module-header {
    grid-template-columns: 1fr;
  }

  .kid-module-detail .kid-module-mini-nav {
    justify-self: stretch;
    overflow-x: auto;
  }

  .kid-module-detail .guided-module-steps,
  .kid-module-detail .kid-module-pathbar {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .kid-module-detail .guided-module-steps button,
  .kid-module-detail .kid-module-pathbar button {
    flex: 0 0 170px;
    scroll-snap-align: start;
  }

  .kid-module-detail .guided-lesson-layout,
  .kid-module-detail .module-media-grid,
  .kid-module-detail .guided-module-success {
    grid-template-columns: 1fr;
  }

  .kid-module-detail .guided-lesson-reading-card,
  .kid-module-detail .guided-lesson-visual {
    min-height: 0;
  }

  .kid-module-detail .guided-lesson-visual {
    min-height: 320px;
  }

  .kid-module-detail .guided-module-success > span {
    order: 0;
    width: 120px;
    height: 120px;
    font-size: 3.8rem;
  }
}

@media (max-width: 680px) {
  .kid-module-detail .guided-module-stage {
    padding: 18px;
    border-radius: 24px;
  }

  .kid-module-detail .guided-module-header h3,
  .kid-module-detail .guided-stage-heading h4,
  .kid-module-detail .elearning-page-heading h5 {
    overflow-wrap: anywhere;
  }

  .kid-module-detail .guided-lesson-visual {
    min-height: 250px;
    padding: 10px;
  }

  .kid-module-detail .module-media-grid figure {
    min-height: 280px;
  }

  .kid-module-detail .module-media-grid img {
    height: 250px;
  }
}

/* Integration maquette Modules enfant - version AtelierKids */
.module-detail.kid-module-detail {
  --kid-page-bg: #f8f5ff;
  --kid-ink: #101747;
  --kid-muted: #64708e;
  --kid-line: rgba(92, 73, 171, .16);
  --kid-shadow-soft: 0 18px 48px rgba(44, 23, 79, .10);
  --kid-shadow-lift: 0 24px 62px rgba(44, 23, 79, .16);
  max-width: 1480px;
  margin-inline: auto;
  gap: 22px;
  padding: 18px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 14% 4%, rgba(124, 58, 237, .13), transparent 26%),
    radial-gradient(circle at 92% 10%, rgba(34, 211, 238, .10), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, var(--kid-page-bg) 100%);
}

.module-detail.kid-module-detail .kid-module-topbar {
  grid-template-columns: minmax(260px, auto) 1fr auto;
  min-height: 78px;
  padding: 14px 18px;
  border-radius: 28px;
  border-color: rgba(92, 73, 171, .12);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 36px rgba(44, 23, 79, .08);
}

.module-detail.kid-module-detail .kid-module-brand > span {
  width: 72px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1e1b4b, #6d28d9);
  letter-spacing: .02em;
}

.module-detail.kid-module-detail .kid-module-brand strong {
  color: var(--kid-ink);
  font-size: 1.12rem;
}

.module-detail.kid-module-detail .kid-module-mini-nav {
  justify-self: center;
  padding: 7px;
  border: 1px solid rgba(92, 73, 171, .10);
  background: #f4f1ff;
}

.module-detail.kid-module-detail .kid-module-mini-nav span {
  min-height: 42px;
  padding: 11px 18px;
  color: #23204f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

.module-detail.kid-module-detail .kid-module-mini-nav span:nth-child(2) {
  color: #4c1d95;
  background: #fff;
  box-shadow: 0 8px 24px rgba(44, 23, 79, .08);
}

.module-detail.kid-module-detail .kid-module-user {
  padding: 7px 12px 7px 7px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(92, 73, 171, .10);
}

.module-detail.kid-module-detail .kid-module-user > span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border-color: #eef2ff;
}

.module-detail.kid-module-detail .guided-module-header {
  grid-template-columns: 82px minmax(0, 1fr) minmax(260px, 380px);
  padding: 22px;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.86)),
    radial-gradient(circle at right, var(--kid-module-soft), transparent 45%);
  box-shadow: var(--kid-shadow-soft);
}

.module-detail.kid-module-detail .kid-module-title-icon {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(80, 47, 154, .18);
}

.module-detail.kid-module-detail .guided-module-header h3 {
  max-width: 780px;
  color: var(--kid-ink);
  font-size: clamp(2rem, 4vw, 3.65rem);
  line-height: .98;
}

.module-detail.kid-module-detail .guided-module-header .eyebrow {
  color: #fff;
  background: var(--kid-module-gradient);
}

.module-detail.kid-module-detail .guided-module-goal {
  min-height: 0;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.58)),
    var(--kid-module-soft);
}

.module-detail.kid-module-detail .guided-module-steps {
  position: relative;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  padding: 18px 22px;
  border-radius: 30px;
}

.module-detail.kid-module-detail .guided-module-steps::before {
  content: "";
  position: absolute;
  left: 56px;
  right: 56px;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kid-module-accent), rgba(92, 73, 171, .18));
  transform: translateY(-50%);
}

.module-detail.kid-module-detail .guided-module-steps button {
  isolation: isolate;
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 72px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  box-shadow: inset 0 0 0 1px rgba(92, 73, 171, .08);
}

.module-detail.kid-module-detail .guided-module-steps button:not(:last-child)::after {
  display: none;
}

.module-detail.kid-module-detail .guided-module-steps span {
  width: 52px;
  height: 52px;
  border: 3px solid #fff;
  box-shadow: 0 10px 22px rgba(44, 23, 79, .12);
}

.module-detail.kid-module-detail .guided-module-steps button.active {
  background: #fff;
  box-shadow: 0 14px 30px rgba(44, 23, 79, .12);
}

.module-detail.kid-module-detail .guided-module-stage {
  position: relative;
  gap: 22px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 32px;
  border-color: rgba(92, 73, 171, .12);
  background: rgba(255,255,255,.96);
  box-shadow: var(--kid-shadow-soft);
}

.module-detail.kid-module-detail .guided-module-stage:hover {
  box-shadow: var(--kid-shadow-lift);
}

.module-detail.kid-module-detail .guided-stage-heading {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 4px;
}

.module-detail.kid-module-detail .guided-stage-heading > span {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: var(--kid-module-gradient);
}

.module-detail.kid-module-detail .guided-stage-heading small {
  display: inline-flex;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--kid-module-accent-dark);
  background: var(--kid-module-soft);
}

.module-detail.kid-module-detail .guided-stage-heading h4 {
  margin-top: 7px;
  color: var(--kid-ink);
  font-size: clamp(1.9rem, 3vw, 2.8rem);
}

.module-detail.kid-module-detail .elearning-lesson {
  padding: 0;
}

.module-detail.kid-module-detail .elearning-progress {
  display: flex;
  justify-content: center;
  order: 2;
  margin-top: -8px;
}

.module-detail.kid-module-detail .elearning-progress span {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
}

.module-detail.kid-module-detail .elearning-page {
  min-height: 520px;
  padding: 0;
}

.module-detail.kid-module-detail .elearning-page-heading {
  align-items: flex-start;
}

.module-detail.kid-module-detail .elearning-page-heading small {
  border-radius: 10px;
}

.module-detail.kid-module-detail .elearning-page-heading h5 {
  color: var(--kid-module-accent-dark);
}

.module-detail.kid-module-detail .guided-lesson-layout {
  grid-template-columns: minmax(320px, .82fr) minmax(360px, 1.18fr);
  gap: 26px;
  min-height: 430px;
}

.module-detail.kid-module-detail .guided-lesson-reading-card {
  align-self: stretch;
  min-height: 100%;
  padding: 22px;
  border: 1px solid var(--kid-line);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)),
    var(--kid-module-soft);
  box-shadow: 0 12px 32px rgba(44, 23, 79, .07);
}

.module-detail.kid-module-detail .guided-lesson-text {
  max-height: none;
  color: #17224f;
  font-size: 1.05rem;
  font-weight: 750;
}

.module-detail.kid-module-detail .guided-lesson-visual {
  min-height: clamp(440px, 38vw, 620px);
  border: 1px solid var(--kid-line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 16% 16%, rgba(255,255,255,.95), transparent 22%),
    linear-gradient(135deg, var(--kid-module-soft), #ffffff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 14px 34px rgba(44,23,79,.08);
}

.module-detail.kid-module-detail .guided-lesson-visual img {
  max-height: clamp(400px, 34vw, 570px);
  object-fit: contain;
  image-rendering: auto;
}

.module-detail.kid-module-detail .guided-lesson-visual figcaption {
  background: rgba(255,255,255,.82);
}

.module-detail.kid-module-detail .module-media-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.module-detail.kid-module-detail .module-media-grid figure {
  min-height: clamp(380px, 34vw, 520px);
  border-radius: 28px;
  border-color: var(--kid-line);
  box-shadow: 0 16px 40px rgba(44, 23, 79, .09);
}

.module-detail.kid-module-detail .module-media-grid img {
  height: clamp(340px, 30vw, 470px);
  padding: 10px;
  object-fit: contain;
  background: #fff;
}

.module-detail.kid-module-detail .module-practice-puzzle {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--kid-line);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.82)),
    var(--kid-module-soft);
  box-shadow: 0 16px 40px rgba(44, 23, 79, .08);
}

.module-detail.kid-module-detail .practice-puzzle-heading {
  border: 1px solid rgba(255,255,255,.72);
  background: #fff;
}

.module-detail.kid-module-detail .practice-card-bank,
.module-detail.kid-module-detail .practice-drop-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-detail.kid-module-detail .practice-order-card {
  min-height: 190px;
  align-content: center;
}

.module-detail.kid-module-detail .practice-order-card img {
  width: 100%;
  height: 112px;
  object-fit: contain;
}

.module-detail.kid-module-detail .practice-drop-slot {
  min-height: 160px;
}

.module-detail.kid-module-detail .module-quiz-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.module-detail.kid-module-detail .module-quiz-list > p {
  grid-column: 1 / -1;
}

.module-detail.kid-module-detail .module-quiz-list fieldset {
  position: relative;
  min-height: 260px;
  padding: 22px 22px 22px 76px;
  overflow: hidden;
  border: 1px solid var(--kid-line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(44, 23, 79, .08);
}

.module-detail.kid-module-detail .module-quiz-list fieldset::before {
  content: "?";
  position: absolute;
  left: 20px;
  top: 22px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--kid-module-gradient);
  font-weight: 950;
}

.module-detail.kid-module-detail .module-quiz-list fieldset::after {
  content: "🤖";
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border-radius: 24px;
  background: var(--kid-module-soft);
  font-size: 2rem;
}

.module-detail.kid-module-detail .module-quiz-list legend {
  float: left;
  width: 100%;
  margin-bottom: 12px;
  color: var(--kid-ink);
  line-height: 1.35;
}

.module-detail.kid-module-detail .module-quiz-list label {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 84px);
  min-height: 48px;
  margin-top: 8px;
}

.module-detail.kid-module-detail .guided-module-success {
  min-height: 360px;
  border: 1px solid rgba(92, 73, 171, .12);
  background:
    radial-gradient(circle at 86% 30%, rgba(255,255,255,.92), transparent 22%),
    linear-gradient(135deg, var(--kid-module-soft), #ffffff);
}

.module-detail.kid-module-detail .guided-module-success::after {
  content: "🎉";
  justify-self: end;
  align-self: end;
  font-size: clamp(3rem, 8vw, 6rem);
  filter: drop-shadow(0 18px 30px rgba(44, 23, 79, .14));
}

.module-detail.kid-module-detail .kid-module-pathbar {
  position: sticky;
  bottom: 14px;
  z-index: 4;
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(44, 23, 79, .14);
}

.module-detail.kid-module-detail .kid-module-pathbar button {
  min-height: 80px;
  border-radius: 22px;
}

.module-detail.kid-module-detail .kid-module-pathbar button.active,
.module-detail.kid-module-detail .kid-module-pathbar button:hover {
  background: #fff;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kid-module-accent), white 55%);
}

@media (max-width: 1180px) {
  .module-detail.kid-module-detail .kid-module-topbar,
  .module-detail.kid-module-detail .guided-module-header {
    grid-template-columns: 1fr;
  }

  .module-detail.kid-module-detail .guided-module-steps::before {
    display: none;
  }

  .module-detail.kid-module-detail .guided-lesson-layout,
  .module-detail.kid-module-detail .module-quiz-list,
  .module-detail.kid-module-detail .practice-card-bank,
  .module-detail.kid-module-detail .practice-drop-grid {
    grid-template-columns: 1fr;
  }

  .module-detail.kid-module-detail .module-quiz-list label {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .module-detail.kid-module-detail {
    padding: 10px;
    border-radius: 24px;
  }

  .module-detail.kid-module-detail .kid-module-mini-nav {
    justify-content: flex-start;
  }

  .module-detail.kid-module-detail .guided-module-header,
  .module-detail.kid-module-detail .guided-module-stage {
    border-radius: 24px;
  }

  .module-detail.kid-module-detail .guided-module-steps button {
    flex-basis: 190px;
  }

  .module-detail.kid-module-detail .elearning-page {
    min-height: 0;
  }

  .module-detail.kid-module-detail .guided-lesson-reading-card {
    padding: 16px;
  }

  .module-detail.kid-module-detail .guided-lesson-visual {
    min-height: 300px;
  }

  .module-detail.kid-module-detail .module-media-grid {
    grid-template-columns: 1fr;
  }

  .module-detail.kid-module-detail .module-media-grid figure {
    min-height: 320px;
  }

  .module-detail.kid-module-detail .module-media-grid img {
    height: 280px;
  }

  .module-detail.kid-module-detail .module-quiz-list fieldset {
    padding: 18px;
  }

  .module-detail.kid-module-detail .module-quiz-list fieldset::before,
  .module-detail.kid-module-detail .module-quiz-list fieldset::after {
    display: none;
  }
}

/* Integration maquette Modules adultes - version Atelier numerique */
.module-detail.adult-module-detail {
  --adult-bg: #f6f7fb;
  --adult-panel: #ffffff;
  --adult-soft: #f8fafc;
  --adult-line: #e2e8f0;
  --adult-text: #0b1244;
  --adult-muted: #64748b;
  --adult-violet: #4f1bc6;
  --adult-violet-dark: #35106f;
  --adult-orange: #ff6b2c;
  --adult-green: #14845f;
  --adult-shadow: 0 18px 48px rgba(15, 23, 42, .08);
  --adult-shadow-lift: 0 28px 70px rgba(53, 16, 111, .14);
  max-width: 1500px;
  margin-inline: auto;
  padding: 22px;
  overflow: visible;
  border: 0;
  border-radius: 34px;
  background:
    linear-gradient(rgba(246, 247, 251, .96), rgba(246, 247, 251, .98)),
    radial-gradient(circle at 12% 0%, rgba(79, 27, 198, .10), transparent 28%),
    radial-gradient(circle at 96% 14%, rgba(255, 107, 44, .10), transparent 24%);
  box-shadow: none;
  color: var(--adult-text);
}

.adult-module-detail .adult-module-topbar {
  display: grid;
  grid-template-columns: minmax(270px, auto) 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 76px;
  padding: 14px 18px;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 26px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .05);
}

.adult-module-brand,
.adult-module-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.adult-module-brand > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--adult-violet), var(--adult-orange));
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  box-shadow: 0 16px 34px rgba(79, 27, 198, .18);
}

.adult-module-brand strong {
  display: block;
  color: var(--adult-text);
  font-size: 1.42rem;
  line-height: 1.05;
  font-weight: 950;
}

.adult-module-brand small,
.adult-module-user {
  color: var(--adult-muted);
  font-size: .84rem;
  font-weight: 850;
}

.adult-module-mini-nav {
  justify-self: center;
  display: flex;
  gap: 8px;
  padding: 7px;
  border-radius: 18px;
  background: #f3f0ff;
}

.adult-module-mini-nav span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 14px;
  color: #18214a;
  font-weight: 900;
  white-space: nowrap;
}

.adult-module-mini-nav .active {
  color: var(--adult-violet);
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.adult-module-user {
  justify-content: flex-end;
  padding: 8px 12px;
  border: 1px solid var(--adult-line);
  border-radius: 999px;
  background: #fff;
  color: var(--adult-text);
}

.adult-module-user > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: var(--adult-violet);
  background: #f3f0ff;
}

.adult-module-detail .guided-module-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 22px;
  align-items: stretch;
  margin-top: 20px;
  padding: 32px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 30px;
  color: var(--adult-text);
  background: #fff;
  box-shadow: var(--adult-shadow);
}

.adult-module-detail .guided-module-header .eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  color: #fff;
  background: var(--adult-violet);
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.adult-module-detail .guided-module-header h3 {
  color: var(--adult-text);
  font-size: clamp(2.2rem, 4vw, 3.7rem);
  line-height: 1.02;
  font-weight: 950;
}

.adult-module-detail .module-meta {
  color: var(--adult-muted);
  font-weight: 850;
}

.adult-module-detail .guided-module-goal {
  display: grid;
  align-content: center;
  gap: 12px;
  max-width: none;
  min-height: 170px;
  padding: 24px;
  border: 0;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--adult-violet), #9f2c88 52%, var(--adult-orange));
  box-shadow: 0 18px 40px rgba(79, 27, 198, .18);
}

.adult-module-detail .guided-module-goal small {
  color: rgba(255,255,255,.82);
  font-size: .82rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.adult-module-detail .guided-module-goal strong {
  color: #fff;
  font-size: 1.08rem;
  line-height: 1.45;
}

.adult-module-detail .guided-module-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 14px;
  margin-top: 18px;
  padding: 20px 24px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--adult-shadow);
}

.adult-module-detail .guided-module-steps::before {
  content: "";
  position: absolute;
  left: 64px;
  right: 64px;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--adult-green), var(--adult-violet), rgba(226,232,240,.95));
  transform: translateY(-50%);
}

.adult-module-detail .guided-module-steps button {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 78px;
  padding: 10px;
  border: 0;
  border-radius: 18px;
  color: var(--adult-text);
  background: rgba(255,255,255,.88);
  text-align: center;
}

.adult-module-detail .guided-module-steps span {
  width: 42px;
  height: 42px;
  border: 2px solid #d8dcef;
  color: var(--adult-text);
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

.adult-module-detail .guided-module-steps strong {
  color: inherit;
  font-size: .88rem;
  font-weight: 900;
}

.adult-module-detail .guided-module-steps button.active {
  color: var(--adult-violet);
  background: #f4f1ff;
}

.adult-module-detail .guided-module-steps button.active span {
  border-color: transparent;
  color: #fff;
  background: var(--adult-violet);
}

.adult-module-detail .guided-module-steps button.completed span {
  border-color: transparent;
  color: #fff;
  background: var(--adult-green);
  box-shadow: 0 12px 28px rgba(20,132,95,.18);
}

.adult-module-detail .guided-module-stage {
  grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  gap: 26px;
  align-items: start;
  margin-top: 18px;
  padding: 34px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--adult-shadow);
}

.adult-module-detail .guided-stage-heading {
  grid-column: 1;
  align-items: center;
}

.adult-module-detail .guided-stage-heading > span {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--adult-violet);
  box-shadow: 0 12px 28px rgba(79, 27, 198, .18);
}

.adult-module-detail .guided-stage-heading small {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 7px;
  padding: 7px 11px;
  border-radius: 8px;
  color: #fff;
  background: var(--adult-violet);
  font-weight: 950;
  text-transform: uppercase;
}

.adult-module-detail .guided-stage-heading h4 {
  color: var(--adult-text);
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  line-height: 1;
  font-weight: 950;
}

.adult-module-detail .adult-module-side {
  grid-column: 2;
  grid-row: 1 / span 20;
  position: sticky;
  top: 18px;
  display: grid;
  gap: 16px;
}

.adult-side-card {
  padding: 20px;
  border: 1px solid var(--adult-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}

.adult-side-card h5 {
  margin: 0 0 12px;
  font-size: 1.08rem;
  color: inherit;
}

.adult-side-card p {
  margin: 0;
  color: inherit;
  line-height: 1.6;
}

.adult-side-card ul {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.adult-side-card li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-weight: 850;
}

.adult-side-card li::before {
  content: "✓";
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  color: var(--adult-green);
  background: #ecfdf5;
  font-size: .78rem;
}

.adult-side-gradient {
  color: #fff;
  background: linear-gradient(135deg, var(--adult-violet), #8d2f91 54%, var(--adult-orange));
}

.adult-side-gradient li::before {
  color: var(--adult-violet);
  background: #fff;
}

.adult-side-note {
  background: linear-gradient(135deg, #fff7ed, #fff);
}

.adult-side-note strong,
.adult-side-resources strong {
  display: block;
  margin-bottom: 8px;
  color: var(--adult-text);
  font-size: 1rem;
}

.adult-side-resources {
  display: grid;
  gap: 8px;
}

.adult-side-resources span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #eef2f7;
  color: var(--adult-text);
  font-weight: 850;
}

.adult-side-resources span::after {
  content: "›";
  color: var(--adult-violet);
  font-weight: 950;
}

.adult-module-detail .elearning-lesson,
.adult-module-detail .module-media-grid,
.adult-module-detail .module-practice-puzzle,
.adult-module-detail .module-quiz-list,
.adult-module-detail .module-video,
.adult-module-detail .module-download-card,
.adult-module-detail .feedback,
.adult-module-detail .guided-module-stage > p,
.adult-module-detail .guided-module-stage > footer,
.adult-module-detail .guided-module-success {
  grid-column: 1;
}

.adult-module-detail .elearning-progress {
  height: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.adult-module-detail .elearning-progress span {
  height: 10px;
  background: #edf0f7;
}

.adult-module-detail .elearning-progress span::after {
  background: linear-gradient(90deg, var(--adult-violet), var(--adult-orange));
}

.adult-module-detail .elearning-page-heading h5 {
  color: var(--adult-text);
  font-size: 1.8rem;
}

.adult-module-detail .elearning-page-heading small,
.adult-module-detail .elearning-page-heading span {
  color: var(--adult-violet);
  background: #f4f1ff;
}

.adult-module-detail .lesson-reading-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.adult-module-detail .lesson-reading-steps span {
  border-color: var(--adult-line);
  color: var(--adult-text);
  background: #fff;
}

.adult-module-detail .lesson-reading-steps b {
  background: var(--adult-violet);
}

.adult-module-detail .guided-lesson-layout {
  grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr);
  gap: 26px;
}

.adult-module-detail .guided-lesson-reading-card {
  border-color: var(--adult-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .05);
}

.adult-module-detail .lesson-reading-label {
  color: var(--adult-violet);
  background: #f4f1ff;
}

.adult-module-detail .guided-lesson-text {
  color: var(--adult-text);
  font-size: 1.02rem;
  line-height: 1.8;
}

.adult-module-detail .guided-lesson-visual {
  min-height: clamp(380px, 32vw, 560px);
  border-color: var(--adult-line);
  border-radius: 24px;
  background: linear-gradient(135deg, #f8fafc, #fff);
  box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
}

.adult-module-detail .guided-lesson-visual img {
  max-height: clamp(350px, 29vw, 520px);
  object-fit: contain;
}

.adult-module-detail .module-media-grid figure,
.adult-module-detail .module-practice-puzzle,
.adult-module-detail .module-quiz-list fieldset {
  border-color: var(--adult-line);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .05);
}

.adult-module-detail .module-media-grid img {
  background: #fff;
  object-fit: contain;
}

.adult-module-detail .module-practice-puzzle {
  padding: 22px;
  background: linear-gradient(135deg, #f8fafc, #fff);
}

.adult-module-detail .practice-puzzle-heading {
  border-bottom: 1px solid #eef2f7;
  padding-bottom: 16px;
}

.adult-module-detail .practice-puzzle-heading h5 {
  color: var(--adult-text);
}

.adult-module-detail .practice-order-card,
.adult-module-detail .practice-drop-slot {
  border-color: var(--adult-line);
  border-radius: 16px;
  background: #fff;
}

.adult-module-detail .practice-order-card:hover,
.adult-module-detail .practice-order-card.selected,
.adult-module-detail .practice-drop-slot:hover {
  border-color: rgba(79, 27, 198, .34);
  box-shadow: 0 16px 32px rgba(79, 27, 198, .10);
}

.adult-module-detail .module-quiz-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.adult-module-detail .module-quiz-list fieldset {
  position: relative;
  min-height: 230px;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 16%, rgba(79, 27, 198, .08), transparent 22%),
    #fff;
}

.adult-module-detail .module-quiz-list legend {
  color: var(--adult-text);
  font-size: 1rem;
  line-height: 1.4;
}

.adult-module-detail .module-quiz-list label {
  min-height: 48px;
  margin-top: 9px;
  border: 1px solid var(--adult-line);
  border-radius: 12px;
  background: #fff;
  color: var(--adult-text);
  box-shadow: none;
}

.adult-module-detail .module-quiz-list label:hover {
  border-color: rgba(79, 27, 198, .34);
  box-shadow: 0 10px 24px rgba(79, 27, 198, .08);
}

.adult-module-detail .module-quiz-list label:has(input[type="radio"]:checked) {
  border-color: var(--adult-violet);
  background: #f4f1ff;
  box-shadow: 0 0 0 4px rgba(79, 27, 198, .08);
}

.adult-module-detail .primary-action {
  min-height: 48px;
  border-radius: 10px;
  background: var(--adult-violet);
  box-shadow: 0 12px 28px rgba(79, 27, 198, .16);
}

.adult-module-detail .primary-action:hover {
  background: var(--adult-violet-dark);
}

.adult-module-detail .secondary-action {
  min-height: 46px;
  border-radius: 10px;
  border-color: var(--adult-line);
  color: var(--adult-text);
  background: #fff;
}

.adult-module-detail .guided-module-success {
  min-height: 240px;
  border-radius: 24px;
  background: linear-gradient(135deg, #ecfdf5, #fff, #f4f1ff);
}

.adult-module-detail .guided-module-success > span {
  background: linear-gradient(135deg, var(--adult-green), var(--adult-violet));
}

@media (max-width: 1180px) {
  .adult-module-detail .adult-module-topbar,
  .adult-module-detail .guided-module-header,
  .adult-module-detail .guided-module-stage {
    grid-template-columns: 1fr;
  }

  .adult-module-detail .adult-module-mini-nav,
  .adult-module-detail .guided-module-steps {
    overflow-x: auto;
  }

  .adult-module-detail .adult-module-side,
  .adult-module-detail .elearning-lesson,
  .adult-module-detail .module-media-grid,
  .adult-module-detail .module-practice-puzzle,
  .adult-module-detail .module-quiz-list,
  .adult-module-detail .module-video,
  .adult-module-detail .module-download-card,
  .adult-module-detail .feedback,
  .adult-module-detail .guided-module-stage > p,
  .adult-module-detail .guided-module-stage > footer,
  .adult-module-detail .guided-module-success,
  .adult-module-detail .guided-stage-heading {
    grid-column: 1;
  }

  .adult-module-detail .adult-module-side {
    position: static;
    grid-row: auto;
  }

  .adult-module-detail .guided-module-steps::before {
    display: none;
  }
}

@media (max-width: 760px) {
  .module-detail.adult-module-detail {
    padding: 10px;
    border-radius: 24px;
  }

  .adult-module-detail .guided-module-header,
  .adult-module-detail .guided-module-stage {
    padding: 20px;
    border-radius: 24px;
  }

  .adult-module-detail .guided-module-steps {
    display: flex;
  }

  .adult-module-detail .guided-module-steps button {
    flex: 0 0 160px;
  }

  .adult-module-detail .guided-lesson-layout,
  .adult-module-detail .lesson-reading-steps,
  .adult-module-detail .module-quiz-list,
  .adult-module-detail .module-media-grid {
    grid-template-columns: 1fr;
  }

  .adult-module-detail .guided-module-header h3,
  .adult-module-detail .guided-stage-heading h4 {
    overflow-wrap: anywhere;
  }
}

/* Cartes modules harmonisees avec les univers adulte / enfant */
.premium-module-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 18px;
}

.premium-module-card {
  position: relative;
  display: grid;
  grid-template-rows: 126px 1fr;
  min-height: 310px;
  overflow: hidden;
  border: 1px solid rgba(79, 27, 198, .12);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(42, 18, 79, .10);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.premium-module-card:hover {
  transform: translateY(-7px);
  border-color: rgba(79, 27, 198, .26);
  box-shadow: 0 28px 62px rgba(42, 18, 79, .18);
}

.premium-module-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 126px;
  border: 0;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.55), transparent 28%),
    linear-gradient(135deg, #8b5cf6, #4f1bc6);
  cursor: pointer;
  overflow: hidden;
}

.premium-module-card.cyan .premium-module-visual,
.premium-module-card.blue .premium-module-visual {
  background: linear-gradient(135deg, #7dd3fc, #3b82f6);
}

.premium-module-card.teal .premium-module-visual {
  background: linear-gradient(135deg, #99f6e4, #14b8a6);
}

.premium-module-card.pink .premium-module-visual {
  background: linear-gradient(135deg, #f9a8d4, #ec4899);
}

.premium-module-card.orange .premium-module-visual {
  background: linear-gradient(135deg, #fed7aa, #fb923c);
}

.premium-module-card .premium-module-visual::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -42px;
  width: 116px;
  height: 116px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
}

.premium-module-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.premium-module-visual span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  color: #3b0764;
  font-size: 2rem;
  box-shadow: 0 16px 34px rgba(28, 16, 68, .18);
}

.premium-module-copy {
  display: grid;
  grid-template-rows: auto auto auto auto 44px;
  gap: 8px;
  padding: 16px;
}

.premium-module-copy h4 {
  margin: 0;
  color: #12072f;
  font-size: 1rem;
  line-height: 1.18;
  font-weight: 950;
}

.premium-module-copy small,
.premium-module-copy p {
  margin: 0;
  color: #5b5271;
  font-weight: 750;
}

.premium-module-copy button {
  align-self: end;
  min-height: 42px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #4f1bc6, #8b5cf6);
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(79, 27, 198, .24);
}

.premium-module-copy button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(79, 27, 198, .32);
}

.premium-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #ebe7f5;
}

.premium-progress i {
  display: block;
  width: var(--module-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #facc15, #fb923c, #8b5cf6);
}

.module-card {
  position: relative;
  isolation: isolate;
}

.module-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .9;
  pointer-events: none;
}

.module-card.pathway-adult {
  grid-template-rows: 138px auto auto minmax(44px, 1fr) auto auto auto;
  min-height: 430px;
  max-height: none;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
}

.module-card.pathway-adult::before {
  background:
    linear-gradient(180deg, rgba(79, 27, 198, .06), transparent 44%),
    radial-gradient(circle at 92% 8%, rgba(255, 107, 44, .12), transparent 28%);
}

.module-card.pathway-adult .module-card-image {
  height: 138px;
  min-height: 138px;
  border: 0;
  border-radius: 18px;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

.module-card.pathway-adult .module-card-image.placeholder {
  color: #4f1bc6;
  background:
    linear-gradient(135deg, rgba(79, 27, 198, .10), rgba(255, 107, 44, .13)),
    #fff;
}

.module-card.pathway-adult span:first-of-type {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  color: #4f1bc6;
  background: #f1edff;
  font-size: .72rem;
  line-height: 1;
}

.module-card.pathway-adult strong {
  color: #0b1244;
  font-size: 1.2rem;
  line-height: 1.15;
}

.module-card.pathway-adult .module-card-goal {
  border-color: rgba(79, 27, 198, .14);
  background: linear-gradient(135deg, #f8fafc, #fff7ed);
}

.module-card.pathway-adult em {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  color: #0f513f;
  background: #dcfce7;
  font-weight: 900;
}

.module-card.pathway-kids {
  grid-template-rows: 150px auto auto minmax(42px, 1fr) auto auto auto;
  min-height: 450px;
  max-height: none;
  border: 2px solid rgba(124, 58, 237, .14);
  border-radius: 30px;
  background:
    radial-gradient(circle at 86% 12%, rgba(250, 204, 21, .22), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(245, 240, 255, .95));
  box-shadow: 0 22px 52px rgba(88, 28, 135, .14);
}

.module-card.pathway-kids::before {
  background:
    radial-gradient(circle at 14% 18%, rgba(34, 211, 238, .18), transparent 24%),
    radial-gradient(circle at 92% 92%, rgba(236, 72, 153, .18), transparent 24%);
}

.module-card.pathway-kids:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 30px 68px rgba(88, 28, 135, .22);
}

.module-card.pathway-kids .module-card-image {
  height: 150px;
  min-height: 150px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, #7c3aed, #3b82f6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}

.module-card.pathway-kids .module-card-image.placeholder {
  color: #fff;
  text-shadow: 0 2px 12px rgba(25, 16, 68, .18);
  background:
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.36), transparent 22%),
    linear-gradient(135deg, #7c3aed, #ec4899);
}

.module-card.pathway-kids.theme-robotique .module-card-image.placeholder {
  background: linear-gradient(135deg, #22d3ee, #7c3aed);
}

.module-card.pathway-kids.theme-numerique .module-card-image.placeholder {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.module-card.pathway-kids span:first-of-type {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 999px;
  color: #581c87;
  background: #ede9fe;
  font-size: .72rem;
}

.module-card.pathway-kids span:first-of-type::before {
  content: "🚀";
  margin-right: 6px;
}

.module-card.pathway-kids strong {
  color: #251044;
  font-size: 1.22rem;
  line-height: 1.12;
  font-weight: 950;
}

.module-card.pathway-kids .module-card-goal {
  border-color: rgba(124, 58, 237, .15);
  background: linear-gradient(135deg, #fff7ed, #ede9fe);
}

.module-card.pathway-kids em {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  color: #7c2d12;
  background: #fef3c7;
  font-weight: 950;
}

.module-card.pathway-kids em::before {
  content: "🏆";
  margin-right: 6px;
}

.module-card.pathway-adult.module-choice.selected,
.module-card.pathway-kids.module-choice.selected {
  border-color: #facc15;
  box-shadow:
    0 0 0 4px rgba(250, 204, 21, .22),
    0 24px 60px rgba(88, 28, 135, .18);
}

#moduleCatalog .module-card.pathway-adult,
#moduleCatalog .module-card.pathway-kids {
  min-height: 0;
}

@media (max-width: 1280px) {
  .premium-module-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

@media (max-width: 760px) {
  .premium-module-grid,
  .module-grid {
    grid-template-columns: 1fr;
  }

  .premium-module-card {
    grid-template-rows: 150px 1fr;
  }

  .module-card.pathway-adult,
  .module-card.pathway-kids {
    min-height: 0;
  }
}

/* Finition coherente cartes modules <-> pages de lecon */
.premium-module-card,
.module-card.pathway-adult,
.module-card.pathway-kids {
  transform-origin: center;
}

.premium-module-card {
  border-radius: 26px;
  border-color: rgba(79, 27, 198, .13);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(79, 27, 198, .22), rgba(255, 107, 44, .20)) border-box;
}

.premium-module-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(79, 27, 198, .04), transparent 48%),
    radial-gradient(circle at 90% 0%, rgba(255, 107, 44, .13), transparent 26%);
}

.premium-module-visual {
  min-height: 134px;
  margin: 12px 12px 0;
  width: calc(100% - 24px);
  border-radius: 20px;
  background:
    radial-gradient(circle at 76% 14%, rgba(255,255,255,.65), transparent 24%),
    linear-gradient(135deg, #f4f0ff, #ffffff 46%, #fff3e9);
  box-shadow: inset 0 0 0 1px rgba(79, 27, 198, .12);
}

.premium-module-card.cyan .premium-module-visual,
.premium-module-card.blue .premium-module-visual,
.premium-module-card.teal .premium-module-visual,
.premium-module-card.pink .premium-module-visual,
.premium-module-card.orange .premium-module-visual {
  background:
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.72), transparent 25%),
    linear-gradient(135deg, #f6f1ff 0%, #ffffff 46%, #fff0df 100%);
}

.premium-module-visual img {
  object-fit: contain;
  padding: 10px;
}

.premium-module-visual span {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  color: #4f1bc6;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,240,255,.94));
  box-shadow: 0 18px 34px rgba(79, 27, 198, .18);
}

.premium-module-copy {
  position: relative;
  z-index: 1;
  padding: 18px;
}

.premium-module-copy h4 {
  color: #11164b;
}

.premium-module-copy small {
  color: #4f1bc6;
}

.premium-module-copy button {
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #4f1bc6, #7c3aed);
}

.premium-module-card.orange .premium-module-copy button,
.premium-module-card.pink .premium-module-copy button {
  background: linear-gradient(135deg, #4f1bc6, #ff6b2c);
}

.module-card.pathway-adult {
  padding: 18px;
  border: 1px solid #e4e8f1;
  border-radius: 28px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(79, 27, 198, .22), rgba(255, 107, 44, .18)) border-box;
  box-shadow: 0 20px 52px rgba(15, 23, 42, .08);
}

.module-card.pathway-adult::after {
  content: "Atelier numerique";
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 2;
  padding: 7px 11px;
  border-radius: 999px;
  color: #4f1bc6;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(79, 27, 198, .12);
  font-size: .72rem;
  font-weight: 950;
}

.module-card.pathway-adult:hover {
  border-color: rgba(79, 27, 198, .34);
  box-shadow: 0 30px 72px rgba(53, 16, 111, .15);
}

.module-card.pathway-adult .module-card-image {
  height: 154px;
  min-height: 154px;
  padding: 10px;
  border-radius: 22px;
  object-fit: contain;
  background:
    radial-gradient(circle at 86% 14%, rgba(255, 107, 44, .16), transparent 24%),
    linear-gradient(135deg, #f8fafc, #fff 52%, #fff7ed);
}

.module-card.pathway-adult .module-card-image.placeholder {
  color: #11164b;
  background:
    linear-gradient(135deg, rgba(79, 27, 198, .12), rgba(255, 107, 44, .12)),
    #fff;
}

.module-card.pathway-adult span:first-of-type {
  margin-top: 2px;
  color: #fff;
  background: linear-gradient(135deg, #4f1bc6, #7c3aed);
  box-shadow: 0 8px 18px rgba(79, 27, 198, .18);
}

.module-card.pathway-adult strong {
  font-size: 1.26rem;
  color: #091241;
}

.module-card.pathway-adult small {
  color: #64748b;
}

.module-card.pathway-adult p {
  color: #1f2a54;
  font-weight: 700;
}

.module-card.pathway-adult .module-card-goal {
  padding: 13px;
  border-radius: 18px;
  border-color: rgba(255, 107, 44, .18);
  background:
    linear-gradient(135deg, rgba(255, 247, 237, .96), rgba(248, 250, 252, .96));
}

.module-card.pathway-adult .module-card-goal span {
  color: #b45309;
}

.module-card.pathway-adult .module-card-goal b {
  color: #11164b;
}

.module-card.pathway-adult em {
  color: #14532d;
  background: #ecfdf3;
}

.module-card.pathway-kids {
  padding: 18px;
  border-radius: 32px;
  border: 2px solid rgba(124, 58, 237, .18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(250,247,255,.98)) padding-box,
    linear-gradient(135deg, rgba(124,58,237,.50), rgba(236,72,153,.35), rgba(34,211,238,.32)) border-box;
  box-shadow: 0 22px 56px rgba(88, 28, 135, .16);
}

.module-card.pathway-kids::after {
  content: "Mission";
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 2;
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  box-shadow: 0 10px 24px rgba(124, 58, 237, .24);
  font-size: .72rem;
  font-weight: 950;
}

.module-card.pathway-kids::before {
  background:
    radial-gradient(circle at 16% 18%, rgba(34, 211, 238, .20), transparent 23%),
    radial-gradient(circle at 92% 12%, rgba(250, 204, 21, .24), transparent 20%),
    radial-gradient(circle at 84% 92%, rgba(236, 72, 153, .18), transparent 26%);
}

.module-card.pathway-kids .module-card-image {
  height: 168px;
  min-height: 168px;
  padding: 10px;
  border-radius: 26px;
  object-fit: contain;
  background:
    radial-gradient(circle at 75% 18%, rgba(255,255,255,.46), transparent 24%),
    linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
}

.module-card.pathway-kids.theme-robotique .module-card-image {
  background:
    radial-gradient(circle at 80% 16%, rgba(255,255,255,.45), transparent 24%),
    linear-gradient(135deg, #22d3ee 0%, #7c3aed 100%);
}

.module-card.pathway-kids.theme-numerique .module-card-image {
  background:
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.45), transparent 24%),
    linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
}

.module-card.pathway-kids .module-card-image.placeholder {
  color: #fff;
  background:
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.42), transparent 22%),
    linear-gradient(135deg, #7c3aed, #3b82f6);
}

.module-card.pathway-kids span:first-of-type {
  color: #fff;
  background: linear-gradient(135deg, #3b0764, #7c3aed);
  box-shadow: 0 8px 20px rgba(124, 58, 237, .20);
}

.module-card.pathway-kids strong {
  color: #251044;
  font-size: 1.3rem;
}

.module-card.pathway-kids small {
  color: #5f5274;
  font-weight: 800;
}

.module-card.pathway-kids p {
  color: #352057;
  font-weight: 800;
}

.module-card.pathway-kids .module-card-goal {
  padding: 13px;
  border-radius: 20px;
  border-color: rgba(124, 58, 237, .16);
  background:
    linear-gradient(135deg, rgba(237,233,254,.96), rgba(255,247,237,.96));
}

.module-card.pathway-kids .module-card-goal span {
  color: #7c3aed;
}

.module-card.pathway-kids .module-card-goal b {
  color: #251044;
}

.module-card.pathway-kids em {
  color: #581c87;
  background: #fff7d6;
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .32);
}

/* Cartes enfants type AtelierKids, proches de l'exemple fourni */
.pathway-kids .module-section .module-grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
}

.module-card.pathway-kids.is-learner-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46%;
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: 12px;
  min-height: 300px;
  padding: 26px 22px 24px;
  overflow: hidden;
  border: 1px solid rgba(92, 73, 171, .16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.72), transparent 30%),
    linear-gradient(135deg, #f8f5ff 0%, #ffffff 56%, #eef7ff 100%);
  box-shadow: 0 18px 42px rgba(44, 23, 79, .10);
}

.module-section:nth-of-type(2n) .module-card.pathway-kids.is-learner-card {
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.74), transparent 30%),
    linear-gradient(135deg, #fff7ed 0%, #ffffff 54%, #fff1f7 100%);
}

.module-section:nth-of-type(3n) .module-card.pathway-kids.is-learner-card {
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.74), transparent 30%),
    linear-gradient(135deg, #ecfeff 0%, #ffffff 54%, #f0fdf4 100%);
}

.module-card.pathway-kids.is-learner-card:hover {
  transform: translateY(-6px);
  border-color: rgba(92, 73, 171, .28);
  box-shadow: 0 28px 62px rgba(44, 23, 79, .16);
}

.module-card.pathway-kids.is-learner-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
  background:
    radial-gradient(circle at 93% 14%, rgba(124, 58, 237, .08), transparent 18%),
    radial-gradient(circle at 66% 78%, rgba(34, 211, 238, .10), transparent 22%);
}

.module-card.pathway-kids.is-learner-card::after {
  display: none;
}

.module-card.pathway-kids.is-learner-card > * {
  position: relative;
  z-index: 1;
}

.module-card.pathway-kids.is-learner-card .module-card-image {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: end;
  justify-self: end;
  width: 116%;
  height: 230px;
  min-height: 230px;
  margin: 22px -18px -10px 0;
  padding: 0;
  border-radius: 0;
  border: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 18px 24px rgba(44, 23, 79, .16));
}

.module-card.pathway-kids.is-learner-card .module-card-image.placeholder {
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
  min-height: 136px;
  margin: auto 2px 28px 0;
  border-radius: 36px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.84), transparent 28%),
    linear-gradient(135deg, #7c3aed, #3b82f6);
}

.module-card.pathway-kids.is-learner-card .kid-card-illustration-icon {
  font-size: 4.3rem;
  line-height: 1;
  filter: drop-shadow(0 10px 16px rgba(44, 23, 79, .18));
}

.module-card.pathway-kids.is-learner-card > span:first-of-type {
  grid-column: 1;
  width: max-content;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(124, 58, 237, .18);
}

.module-card.pathway-kids.is-learner-card.theme-robotique > span:first-of-type {
  background: linear-gradient(135deg, #059669, #16a34a);
}

.module-card.pathway-kids.is-learner-card.theme-numerique:nth-child(2n) > span:first-of-type {
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

.module-card.pathway-kids.is-learner-card > span:first-of-type::before {
  display: none;
}

.module-card.pathway-kids.is-learner-card strong {
  grid-column: 1;
  max-width: 10ch;
  margin: 0;
  color: #11164b;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: 0;
}

.module-card.pathway-kids.is-learner-card > small:first-of-type {
  grid-column: 1;
  margin-top: 4px;
  color: #4f46e5;
  font-size: .82rem;
  font-weight: 900;
}

.module-card.pathway-kids.is-learner-card p {
  grid-column: 1;
  max-width: 18ch;
  margin: 10px 0 0;
  color: #172554;
  font-size: .96rem;
  line-height: 1.55;
  font-weight: 760;
  -webkit-line-clamp: 4;
}

.module-card.pathway-kids.is-learner-card .module-card-goal,
.module-card.pathway-kids.is-learner-card > small:not(:first-of-type),
.module-card.pathway-kids.is-learner-card > em {
  display: none;
}

.kid-module-card-progress {
  grid-column: 1 / -1;
  align-self: end;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-right: 54px;
}

.kid-module-card-progress small {
  color: #172554;
  font-size: .72rem;
  font-weight: 850;
}

.kid-module-card-progress strong {
  max-width: none;
  color: #4f46e5;
  font-size: 1.2rem;
  line-height: 1;
}

.kid-module-card-progress i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(92, 73, 171, .12);
}

.kid-module-card-progress i::before {
  content: "";
  display: block;
  width: var(--kid-card-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #3b82f6);
}

.module-card.pathway-kids.is-learner-card.theme-robotique .kid-module-card-progress strong {
  color: #059669;
}

.module-card.pathway-kids.is-learner-card.theme-robotique .kid-module-card-progress i::before {
  background: linear-gradient(90deg, #059669, #22c55e);
}

.kid-module-card-arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: grid !important;
  place-items: center;
  width: 48px !important;
  height: 48px;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  box-shadow: 0 14px 26px rgba(124, 58, 237, .28);
  font-size: 1.45rem !important;
  font-weight: 950;
}

.module-card.pathway-kids.is-learner-card.theme-robotique .kid-module-card-arrow {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
}

.module-section:nth-of-type(2n) .module-card.pathway-kids.is-learner-card .kid-module-card-arrow {
  background: linear-gradient(135deg, #ec4899, #f97316) !important;
}

@media (min-width: 1180px) {
  .pathway-kids .module-section .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1500px) {
  .pathway-kids .module-section .module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .module-card.pathway-kids.is-learner-card {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 22px;
  }

  .module-card.pathway-kids.is-learner-card .module-card-image {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    width: 100%;
    height: 210px;
    min-height: 210px;
    margin: 8px 0 0;
  }

  .module-card.pathway-kids.is-learner-card strong,
  .module-card.pathway-kids.is-learner-card p {
    max-width: none;
  }
}

/* Version proche de la maquette fournie : page "Mes modules" enfant */
.pathway-kids #recommendedModules.module-grid {
  display: block;
}

.kid-modules-page {
  display: grid;
  gap: 22px;
}

.kid-modules-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 2px;
}

.kid-modules-heading h3 {
  position: relative;
  margin: 0;
  color: #081153;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
}

.kid-modules-heading h3::after {
  content: "";
  display: block;
  width: 76px;
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #f59e0b);
}

.kid-modules-heading p {
  margin: 10px 0 0;
  color: #101747;
  font-size: 1rem;
  font-weight: 750;
}

.kid-modules-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.kid-modules-stats span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 178px;
  padding: 16px 22px;
  border: 1px solid rgba(92, 73, 171, .15);
  border-radius: 18px;
  color: #101747;
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 32px rgba(44, 23, 79, .08);
  font-size: 1.25rem;
}

.kid-modules-stats b {
  font-size: 1rem;
  line-height: 1.15;
}

.kid-module-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card {
  display: grid;
  grid-template-columns: 48% 52%;
  grid-template-rows: auto auto 1fr auto;
  min-height: 330px;
  padding: 26px;
  border: 1px solid rgba(91, 105, 160, .22);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.68)),
    linear-gradient(145deg, #f5f1ff 0%, #ffffff 50%, #eef5ff 100%);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card::before {
  background:
    radial-gradient(circle at 82% 19%, rgba(124,58,237,.10), transparent 22%),
    radial-gradient(circle at 70% 70%, rgba(59,130,246,.10), transparent 28%);
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card::after {
  content: "›";
  display: grid;
  place-items: center;
  position: absolute;
  right: 24px;
  bottom: 22px;
  z-index: 4;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  box-shadow: 0 14px 28px rgba(124, 58, 237, .28);
  font-size: 2rem;
  font-weight: 900;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 56px rgba(15, 23, 42, .13);
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card > span:first-of-type {
  grid-column: 1 / -1;
  align-self: start;
  justify-self: start;
  margin: 0 0 14px;
  padding: 9px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  font-size: .78rem;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: none;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card strong {
  grid-column: 1;
  max-width: 9ch;
  color: #11164b;
  font-size: clamp(1.45rem, 1.9vw, 2rem);
  line-height: 1.13;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card > small:first-of-type {
  display: none;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card p {
  grid-column: 1;
  max-width: 20ch;
  margin-top: 14px;
  color: #081153;
  font-size: .98rem;
  line-height: 1.62;
  font-weight: 740;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card .module-card-image {
  grid-column: 2;
  grid-row: 2 / 5;
  align-self: end;
  justify-self: end;
  width: 128%;
  height: 236px;
  min-height: 236px;
  margin: 0 -34px -8px 0;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(44, 23, 79, .14));
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card .module-card-image.placeholder {
  width: 168px;
  height: 168px;
  min-height: 168px;
  margin: auto -8px 28px 0;
  border-radius: 999px;
  background: transparent;
  filter: drop-shadow(0 18px 22px rgba(44, 23, 79, .14));
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card .kid-card-illustration-icon {
  font-size: 6.6rem;
}

.kid-module-showcase-grid .kid-module-card-progress {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  align-self: end;
  gap: 5px;
  width: calc(100% - 68px);
  margin-top: 18px;
  padding: 0;
}

.kid-module-showcase-grid .kid-module-card-progress small {
  color: #081153;
  font-size: .75rem;
}

.kid-module-showcase-grid .kid-module-card-progress strong {
  color: #4f46e5;
  font-size: 1.2rem;
}

.kid-module-showcase-grid .kid-module-card-progress i {
  width: 128px;
  height: 7px;
  background: rgba(91, 105, 160, .14);
}

.kid-module-showcase-grid .kid-module-card-arrow {
  display: none !important;
}

.kid-module-showcase-grid .module-card.pathway-kids.theme-robotique.is-learner-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.66)),
    linear-gradient(145deg, #effdf4 0%, #ffffff 50%, #eafaf0 100%);
}

.kid-module-showcase-grid .module-card.pathway-kids.theme-robotique.is-learner-card > span:first-of-type,
.kid-module-showcase-grid .module-card.pathway-kids.theme-robotique.is-learner-card::after {
  background: linear-gradient(135deg, #059669, #22c55e);
}

.kid-module-showcase-grid .module-card.pathway-kids.theme-robotique.is-learner-card strong,
.kid-module-showcase-grid .module-card.pathway-kids.theme-robotique.is-learner-card .kid-module-card-progress strong {
  color: #078047;
}

.kid-module-showcase-grid .module-card.pathway-kids.theme-robotique.is-learner-card .kid-module-card-progress i::before {
  background: linear-gradient(90deg, #059669, #22c55e);
}

.kid-module-showcase-grid .module-card.pathway-kids.theme-numerique.is-learner-card:nth-child(2n) {
  background:
    linear-gradient(135deg, rgba(255,255,255,.91), rgba(255,255,255,.68)),
    linear-gradient(145deg, #eff6ff 0%, #ffffff 50%, #eef7ff 100%);
}

.kid-module-showcase-grid .module-card.pathway-kids.theme-numerique.is-learner-card:nth-child(2n) > span:first-of-type,
.kid-module-showcase-grid .module-card.pathway-kids.theme-numerique.is-learner-card:nth-child(2n)::after {
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

.kid-module-showcase-grid .module-card.pathway-kids.theme-numerique.is-learner-card:nth-child(2n) strong,
.kid-module-showcase-grid .module-card.pathway-kids.theme-numerique.is-learner-card:nth-child(2n) .kid-module-card-progress strong {
  color: #075fd7;
}

.kid-module-showcase-grid .module-card.pathway-kids.theme-numerique.is-learner-card:nth-child(2n) .kid-module-card-progress i::before {
  background: linear-gradient(90deg, #2563eb, #0ea5e9);
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(4n) {
  background:
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.70)),
    linear-gradient(145deg, #fff7ed 0%, #ffffff 50%, #fff7dc 100%);
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(4n) > span:first-of-type,
.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(4n)::after {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(4n) strong,
.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(4n) .kid-module-card-progress strong {
  color: #d97706;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(4n) .kid-module-card-progress i::before {
  background: linear-gradient(90deg, #f59e0b, #f97316);
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(5n) {
  background:
    linear-gradient(135deg, rgba(255,255,255,.91), rgba(255,255,255,.70)),
    linear-gradient(145deg, #fdf2f8 0%, #ffffff 50%, #fff1f7 100%);
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(5n) > span:first-of-type,
.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(5n)::after {
  background: linear-gradient(135deg, #db2777, #ec4899);
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(5n) strong,
.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(5n) .kid-module-card-progress strong {
  color: #db2777;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(5n) .kid-module-card-progress i::before {
  background: linear-gradient(90deg, #db2777, #ec4899);
}

.kid-module-reward-strip {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 26px;
  border-radius: 16px;
  color: #1d12a7;
  background: linear-gradient(135deg, #f1edff, #fff7ed);
  box-shadow: 0 12px 28px rgba(44, 23, 79, .08);
  font-weight: 900;
}

.kid-module-reward-strip span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(92, 73, 171, .12);
}

@media (max-width: 1280px) {
  .kid-module-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .kid-modules-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .kid-module-showcase-grid {
    grid-template-columns: 1fr;
  }
}

/* Adult module cards - premium module gallery */
.adult-modules-page {
  display: grid;
  gap: 28px;
}

.adult-modules-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.adult-modules-heading h3 {
  position: relative;
  margin: 0 0 10px;
  color: #080d45;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
}

.adult-modules-heading h3::after {
  content: "";
  display: block;
  width: 92px;
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, rgba(124,58,237,.12));
}

.adult-modules-heading p {
  margin: 0;
  color: #20275f;
  font-size: 1.05rem;
  font-weight: 650;
}

.adult-modules-stats {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.adult-modules-stats span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 24px;
  border: 1px solid rgba(87, 73, 185, .14);
  border-radius: 18px;
  color: #10144c;
  background: #fff;
  box-shadow: 0 16px 34px rgba(29, 33, 94, .08);
  font-weight: 850;
}

.adult-modules-stats span:first-child {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  box-shadow: 0 18px 36px rgba(124, 58, 237, .22);
}

.adult-module-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: 24px;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card {
  --adult-card-accent: #6d28d9;
  --adult-card-accent-2: #8b5cf6;
  --adult-card-soft: #f5f0ff;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(118px, 1fr);
  grid-template-rows: auto auto minmax(78px, 1fr) auto;
  gap: 10px 8px;
  min-height: 332px;
  max-height: none;
  padding: 24px;
  border: 1px solid rgba(87, 73, 185, .16);
  border-radius: 24px;
  color: #080d45;
  background:
    radial-gradient(circle at 78% 28%, rgba(255,255,255,.72), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.76)),
    var(--adult-card-soft);
  box-shadow: 0 18px 42px rgba(31, 32, 90, .08);
  overflow: hidden;
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card::before {
  content: "";
  position: absolute;
  inset: auto -40px -62px auto;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--adult-card-accent) 13%, transparent);
  pointer-events: none;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card::after {
  content: none;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--adult-card-accent) 34%, #fff);
  box-shadow: 0 28px 62px rgba(31, 32, 90, .14);
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card > span:first-of-type {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0 0 4px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--adult-card-accent), var(--adult-card-accent-2));
  box-shadow: 0 10px 20px color-mix(in srgb, var(--adult-card-accent) 24%, transparent);
  font-size: .78rem;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card strong {
  grid-column: 1;
  color: var(--adult-card-accent);
  font-size: clamp(1.38rem, 1.55vw, 1.9rem);
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: 0;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card > small {
  display: none;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card p {
  grid-column: 1;
  margin: 8px 0 0;
  color: #081153;
  font-size: .94rem;
  line-height: 1.58;
  font-weight: 690;
  overflow-wrap: anywhere;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card .module-card-image {
  grid-column: 2;
  grid-row: 2 / 5;
  align-self: center;
  justify-self: end;
  width: 128%;
  height: 210px;
  min-height: 210px;
  margin: 8px -30px 28px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 20px 20px rgba(24, 26, 88, .14));
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card .module-card-image.placeholder {
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  min-height: 168px;
  margin: auto -8px 50px 0;
  border-radius: 32px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.92), transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, var(--adult-card-accent) 16%, #fff), rgba(255,255,255,.74));
}

.adult-card-illustration-icon {
  display: grid;
  place-items: center;
  font-size: 5.8rem;
  line-height: 1;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card .module-card-goal,
.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card em {
  display: none;
}

.adult-module-card-progress {
  grid-column: 1 / -1;
  align-self: end;
  display: grid;
  grid-template-columns: auto minmax(90px, 132px);
  grid-template-areas:
    "label label"
    "percent bar";
  align-items: center;
  gap: 5px 12px;
  width: calc(100% - 58px);
  margin-top: 14px;
  position: relative;
  z-index: 2;
}

.adult-module-card-progress small {
  grid-area: label;
  display: block !important;
  color: var(--adult-card-accent);
  font-size: .74rem;
  font-weight: 850;
}

.adult-module-card-progress strong {
  grid-area: percent;
  color: var(--adult-card-accent);
  font-size: 1.22rem !important;
  line-height: 1 !important;
}

.adult-module-card-progress i {
  grid-area: bar;
  display: block;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--adult-card-accent) 13%, #eef2ff);
  overflow: hidden;
}

.adult-module-card-progress i::before {
  content: "";
  display: block;
  width: var(--adult-card-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--adult-card-accent), var(--adult-card-accent-2));
}

.adult-module-card-arrow {
  position: absolute;
  right: 24px;
  bottom: 26px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--adult-card-accent), var(--adult-card-accent-2));
  box-shadow: 0 16px 26px color-mix(in srgb, var(--adult-card-accent) 28%, transparent);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card:nth-child(2) {
  --adult-card-accent: #1473e6;
  --adult-card-accent-2: #38bdf8;
  --adult-card-soft: #eff7ff;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card:nth-child(3) {
  --adult-card-accent: #059669;
  --adult-card-accent-2: #22c55e;
  --adult-card-soft: #f1fbf2;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card:nth-child(4) {
  --adult-card-accent: #f97316;
  --adult-card-accent-2: #f59e0b;
  --adult-card-soft: #fff7e8;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card:nth-child(5) {
  --adult-card-accent: #db2777;
  --adult-card-accent-2: #f472b6;
  --adult-card-soft: #fff2f8;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card:nth-child(6) {
  --adult-card-accent: #0f9f9a;
  --adult-card-accent-2: #2dd4bf;
  --adult-card-soft: #effdfb;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card:nth-child(7) {
  --adult-card-accent: #2563eb;
  --adult-card-accent-2: #60a5fa;
  --adult-card-soft: #f1f7ff;
}

.adult-module-showcase-grid .module-card.pathway-adult.is-learner-card:nth-child(8) {
  --adult-card-accent: #7c3aed;
  --adult-card-accent-2: #a855f7;
  --adult-card-soft: #f7f1ff;
}

.adult-module-reward-strip {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  padding: 12px 26px;
  border-radius: 18px;
  color: #32136b;
  background: linear-gradient(135deg, #f5f0ff, #fff8ed);
  box-shadow: 0 14px 32px rgba(44, 23, 79, .08);
  font-weight: 900;
}

.adult-module-reward-strip span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(92, 73, 171, .12);
}

@media (max-width: 1500px) {
  .adult-module-showcase-grid {
    grid-template-columns: repeat(3, minmax(230px, 1fr));
  }
}

@media (max-width: 1120px) {
  .adult-module-showcase-grid {
    grid-template-columns: repeat(2, minmax(230px, 1fr));
  }

  .adult-modules-heading {
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .adult-module-showcase-grid {
    grid-template-columns: 1fr;
  }

  .adult-module-showcase-grid .module-card.pathway-adult.is-learner-card {
    min-height: 312px;
    padding: 20px;
  }

  .adult-module-showcase-grid .module-card.pathway-adult.is-learner-card .module-card-image {
    width: 118%;
    height: 178px;
    min-height: 178px;
    margin-right: -24px;
  }

  .adult-module-reward-strip {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* Kids dashboard cleanup + module cards matching the provided visual */
.kid-home-actions {
  padding: 24px;
}

.kid-home-action-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.kid-home-action {
  display: grid;
  gap: 8px;
  min-height: 138px;
  padding: 18px;
  border: 1px solid rgba(124, 58, 237, .14);
  border-radius: 24px;
  color: #1b1453;
  background:
    radial-gradient(circle at 84% 20%, rgba(255,255,255,.82), transparent 24%),
    linear-gradient(145deg, #ffffff, #f4efff);
  box-shadow: 0 14px 28px rgba(44, 23, 79, .08);
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}

.kid-home-action:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(44, 23, 79, .13);
}

.kid-home-action span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  font-size: 1.35rem;
}

.kid-home-action strong {
  color: #180a46;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 950;
}

.kid-home-action small {
  color: #625476;
  font-size: .82rem;
  line-height: 1.35;
  font-weight: 780;
}

.kid-home-action.modules span { background: linear-gradient(135deg, #7c3aed, #3b82f6); }
.kid-home-action.challenge span { background: linear-gradient(135deg, #22d3ee, #3b82f6); }
.kid-home-action.quiz span { background: linear-gradient(135deg, #22c55e, #10b981); }
.kid-home-action.level span { background: linear-gradient(135deg, #facc15, #fb923c); }

.kid-module-showcase-grid {
  grid-template-columns: repeat(4, minmax(245px, 1fr));
  gap: 24px;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card {
  --kid-card-accent: #6d28d9;
  --kid-card-accent-2: #8b5cf6;
  --kid-card-soft: #f4f0ff;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(120px, 1fr);
  grid-template-rows: auto auto minmax(78px, 1fr) auto;
  gap: 10px 6px;
  min-height: 330px;
  max-height: none;
  padding: 24px;
  border: 1px solid rgba(91, 105, 160, .20);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 26%, rgba(255,255,255,.74), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.66)),
    var(--kid-card-soft);
  box-shadow: 0 17px 38px rgba(15, 23, 42, .08);
  overflow: hidden;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card::before {
  content: "";
  position: absolute;
  inset: auto -34px -58px auto;
  width: 168px;
  height: 168px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kid-card-accent) 12%, transparent);
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card::after {
  content: "→";
  right: 20px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  color: #fff;
  background: linear-gradient(135deg, var(--kid-card-accent), var(--kid-card-accent-2));
  box-shadow: 0 16px 28px color-mix(in srgb, var(--kid-card-accent) 28%, transparent);
  font-size: 1.85rem;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card > span:first-of-type {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  background: linear-gradient(135deg, var(--kid-card-accent), var(--kid-card-accent-2));
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card strong {
  grid-column: 1;
  max-width: none;
  color: var(--kid-card-accent);
  font-size: clamp(1.32rem, 1.45vw, 1.76rem);
  line-height: 1.16;
  font-weight: 950;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card p {
  grid-column: 1;
  max-width: 23ch;
  margin-top: 8px;
  color: #07104a;
  font-size: .93rem;
  line-height: 1.55;
  font-weight: 720;
  overflow-wrap: normal;
  word-break: normal;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card .module-card-image {
  grid-column: 2;
  grid-row: 2 / 5;
  align-self: end;
  justify-self: end;
  width: 138%;
  height: 230px;
  min-height: 230px;
  margin: 0 -36px 22px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 20px 22px rgba(24, 26, 88, .16));
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card .module-card-image.placeholder {
  width: 166px;
  height: 166px;
  min-height: 166px;
  margin: auto -8px 52px 0;
  border-radius: 999px;
  background: transparent;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card .kid-card-illustration-icon {
  font-size: 6.9rem;
}

.kid-module-showcase-grid .kid-module-card-progress {
  width: calc(100% - 62px);
  margin-top: 16px;
}

.kid-module-showcase-grid .kid-module-card-progress small {
  color: #081153;
  font-weight: 820;
}

.kid-module-showcase-grid .kid-module-card-progress strong {
  color: var(--kid-card-accent);
  font-size: 1.18rem;
}

.kid-module-showcase-grid .kid-module-card-progress i {
  width: 124px;
  background: color-mix(in srgb, var(--kid-card-accent) 13%, #e9edf8);
}

.kid-module-showcase-grid .kid-module-card-progress i::before {
  background: linear-gradient(90deg, var(--kid-card-accent), var(--kid-card-accent-2));
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(2) {
  --kid-card-accent: #1473e6;
  --kid-card-accent-2: #38bdf8;
  --kid-card-soft: #eff7ff;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(3) {
  --kid-card-accent: #059669;
  --kid-card-accent-2: #22c55e;
  --kid-card-soft: #f0fbf2;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(4) {
  --kid-card-accent: #f59e0b;
  --kid-card-accent-2: #fb923c;
  --kid-card-soft: #fff8e7;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(5) {
  --kid-card-accent: #db2777;
  --kid-card-accent-2: #ec4899;
  --kid-card-soft: #fff2f8;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(6) {
  --kid-card-accent: #0f9f9a;
  --kid-card-accent-2: #2dd4bf;
  --kid-card-soft: #effdfb;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(7) {
  --kid-card-accent: #2563eb;
  --kid-card-accent-2: #60a5fa;
  --kid-card-soft: #f1f7ff;
}

.kid-module-showcase-grid .module-card.pathway-kids.is-learner-card:nth-child(8) {
  --kid-card-accent: #7c3aed;
  --kid-card-accent-2: #a855f7;
  --kid-card-soft: #f7f1ff;
}

.kid-module-reward-strip {
  max-width: 780px;
  width: fit-content;
}

@media (max-width: 1500px) {
  .kid-module-showcase-grid {
    grid-template-columns: repeat(3, minmax(245px, 1fr));
  }

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

@media (max-width: 1080px) {
  .kid-module-showcase-grid {
    grid-template-columns: repeat(2, minmax(245px, 1fr));
  }

  .kid-home-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .kid-module-showcase-grid,
  .kid-home-action-grid {
    grid-template-columns: 1fr;
  }

  .kid-module-showcase-grid .module-card.pathway-kids.is-learner-card {
    min-height: 314px;
    padding: 20px;
  }

  .kid-module-showcase-grid .module-card.pathway-kids.is-learner-card .module-card-image {
    width: 120%;
    height: 178px;
    min-height: 178px;
    margin-right: -24px;
  }
}

/* Nouvelle page Lecon enfant : pleine largeur, lisible et accessible */
.module-detail.kid-module-detail.kid-lesson-page {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: clamp(14px, 2vw, 26px);
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 6%, rgba(124, 58, 237, .10), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
  overflow: visible;
}

.kid-lesson-page .kid-module-topbar.kid-lesson-topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  overflow: visible;
}

.kid-lesson-topbar-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.kid-lesson-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: #6b5b7b;
  font-size: .92rem;
  font-weight: 850;
}

.kid-lesson-breadcrumb strong {
  color: #3b0764;
  font-weight: 950;
}

.kid-lesson-topbar-progress {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: center;
  color: #4b176f;
  font-size: .84rem;
  font-weight: 900;
}

.kid-lesson-topbar-progress i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #eee5f5;
}

.kid-lesson-topbar-progress i::before {
  content: "";
  display: block;
  width: var(--kid-lesson-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #f59e0b);
}

.kid-lesson-icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(124, 58, 237, .14);
  border-radius: 15px;
  color: #4b176f;
  background: #fff;
  box-shadow: 0 10px 22px rgba(76, 29, 149, .08);
  cursor: pointer;
  font-weight: 950;
}

.kid-lesson-page .kid-module-user {
  gap: 8px;
}

.kid-lesson-page .kid-lesson-module-header {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(124, 58, 237, .13);
  border-radius: 30px;
  background: linear-gradient(135deg, #ffffff, #f8f3ff);
  box-shadow: 0 18px 42px rgba(59, 7, 100, .08);
  overflow: visible;
}

.kid-lesson-page .kid-lesson-module-header h3 {
  margin: 8px 0 4px;
  color: #251044;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.04;
  font-weight: 950;
}

.kid-lesson-page .kid-lesson-module-header .eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 8px 13px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  font-size: .84rem;
  font-weight: 950;
}

.kid-lesson-page .guided-module-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 0;
  align-items: center;
  padding: 18px;
  overflow: visible;
  border: 1px solid rgba(124, 58, 237, .13);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(59, 7, 100, .07);
}

.kid-lesson-page .guided-module-steps::before {
  display: none;
}

.kid-lesson-page .guided-module-steps button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 88px;
  padding: 10px;
  border: 0;
  border-radius: 18px;
  color: #4c3a5c;
  background: transparent;
  cursor: pointer;
  font-weight: 900;
}

.kid-lesson-page .guided-module-steps button::after {
  content: "";
  position: absolute;
  left: calc(50% + 26px);
  right: calc(-50% + 26px);
  top: 31px;
  height: 3px;
  border-radius: 999px;
  background: #e6dff0;
}

.kid-lesson-page .guided-module-steps button:last-child::after {
  display: none;
}

.kid-lesson-page .guided-module-steps span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 2px solid #ded2ea;
  border-radius: 999px;
  color: #4b176f;
  background: #fff;
  font-weight: 950;
}

.kid-lesson-page .guided-module-steps strong {
  max-width: 100%;
  color: inherit;
  font-size: .92rem;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.kid-lesson-page .guided-module-steps button.active span,
.kid-lesson-page .guided-module-steps button[aria-current="step"] span {
  border-color: #7c3aed;
  color: #fff;
  background: #7c3aed;
  box-shadow: 0 12px 24px rgba(124, 58, 237, .24);
}

.kid-lesson-page .guided-module-steps button.completed span {
  border-color: #f6c453;
  color: #3b2500;
  background: #facc15;
}

.kid-lesson-page .guided-module-stage {
  padding: clamp(20px, 3vw, 34px);
  overflow: visible;
  border: 1px solid rgba(124, 58, 237, .12);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(59, 7, 100, .08);
}

.kid-lesson-intro {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.kid-lesson-intro span {
  display: inline-flex;
  width: fit-content;
  padding: 8px 13px;
  border-radius: 999px;
  color: #fff;
  background: #7c3aed;
  font-size: .86rem;
  font-weight: 950;
}

.kid-lesson-intro h4 {
  margin: 10px 0 8px;
  color: #251044;
  font-size: clamp(2.15rem, 4vw, 3.65rem);
  line-height: 1.02;
  font-weight: 950;
}

.kid-lesson-intro p {
  max-width: 860px;
  margin: 0;
  color: #5f4d70;
  font-size: 1.12rem;
  line-height: 1.65;
  font-weight: 750;
}

.kid-lesson-intro strong {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-radius: 16px;
  color: #4b176f;
  background: #f7effc;
  font-size: 1rem;
  font-weight: 950;
}

.kid-lesson-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.kid-lesson-tabs button {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid rgba(124, 58, 237, .13);
  border-radius: 16px;
  color: #4b176f;
  background: #fff;
  cursor: pointer;
  font-weight: 950;
}

.kid-lesson-tabs button.active,
.kid-lesson-tabs button[aria-selected="true"] {
  border-color: #7c3aed;
  color: #fff;
  background: #7c3aed;
  box-shadow: 0 12px 24px rgba(124, 58, 237, .22);
}

.kid-lesson-page button:focus-visible,
.kid-lesson-page [role="tab"]:focus-visible {
  outline: 4px solid rgba(250, 204, 21, .82);
  outline-offset: 3px;
}

.kid-lesson-content,
.kid-lesson-panel,
.kid-lesson-main-card,
.kid-lesson-reading-card,
.kid-lesson-text {
  overflow: visible;
}

.kid-lesson-page .kid-lesson-content {
  display: grid;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

.kid-lesson-page .elearning-progress {
  order: -1;
  justify-content: flex-start;
  gap: 9px;
}

.kid-lesson-page .elearning-progress span {
  width: 42px;
  height: 7px;
  border-radius: 999px;
  background: #e9dff2;
}

.kid-lesson-page .elearning-progress span.active,
.kid-lesson-page .elearning-progress span.completed {
  background: #7c3aed;
}

.kid-lesson-panel {
  display: grid;
  gap: 18px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.kid-lesson-main-card {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, .9fr);
  gap: clamp(22px, 3vw, 34px);
  align-items: start;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(124, 58, 237, .12);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(59, 7, 100, .08);
}

.kid-lesson-reading-card {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.kid-lesson-text {
  display: grid;
  gap: 20px;
  max-width: 920px;
  color: #251044;
  font-size: 1.13rem;
  line-height: 1.72;
  font-weight: 700;
}

.kid-lesson-text section {
  display: grid;
  gap: 12px;
}

.kid-lesson-text h5 {
  margin: 0;
  color: #3b0764;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: 1.18;
  font-weight: 950;
}

.kid-lesson-text p {
  margin: 0;
  color: #332044;
  font: inherit;
}

.kid-lesson-text ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kid-lesson-text li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 14px;
  color: #302040;
  background: #fbf7ff;
  font-weight: 800;
}

.kid-lesson-text li::before {
  content: "✓";
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #3b2500;
  background: #facc15;
  font-weight: 950;
}

.kid-lesson-visual {
  display: grid;
  gap: 10px;
  place-items: center;
  align-self: stretch;
  min-height: 360px;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(245, 158, 11, .20);
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 12%, rgba(250, 204, 21, .20), transparent 26%),
    linear-gradient(135deg, #fff7ed, #f7f0ff);
}

.kid-lesson-visual img {
  width: 100%;
  height: auto;
  max-height: 430px;
  object-fit: contain;
  border-radius: 18px;
}

.kid-lesson-visual figcaption {
  color: #6c5a76;
  font-size: .88rem;
  font-weight: 850;
  text-align: center;
}

.scratch-lesson-visual {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 320px;
}

.scratch-screen {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: min(420px, 100%);
  padding: 24px;
  border: 10px solid #3b0764;
  border-radius: 28px;
  background: linear-gradient(135deg, #ede9fe, #ffffff);
  box-shadow: 0 18px 36px rgba(59, 7, 100, .16);
}

.scratch-cat {
  display: grid;
  place-items: center;
  min-height: 180px;
  border-radius: 22px;
  background: #fff;
  font-size: 5.8rem;
}

.scratch-code-blocks {
  display: grid;
  align-content: center;
  gap: 10px;
}

.scratch-code-blocks i {
  padding: 10px 12px;
  border-radius: 12px;
  color: #fff;
  background: #7c3aed;
  font-style: normal;
  font-weight: 900;
}

.scratch-code-blocks i:nth-child(2) {
  background: #f59e0b;
}

.scratch-code-blocks i:nth-child(3) {
  background: #22c55e;
}

.scratch-keyboard {
  width: min(320px, 80%);
  height: 18px;
  margin-top: 12px;
  border-radius: 0 0 22px 22px;
  background: #3b0764;
}

.kid-lesson-keypoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(245, 158, 11, .24);
  border-radius: 22px;
  background: #fff8e7;
}

.kid-lesson-keypoints p {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  color: #3a2a16;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 850;
}

.kid-lesson-keypoints span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  color: #3b2500;
  background: #facc15;
  font-weight: 950;
}

.kid-lesson-navigation {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.kid-lesson-navigation .primary-action,
.kid-lesson-navigation .secondary-action {
  min-height: 54px;
  padding: 0 22px;
  border-radius: 16px;
  font-size: 1rem;
}

.kid-lesson-navigation .secondary-action:disabled {
  opacity: .52;
  cursor: not-allowed;
}

.kid-lesson-page .module-video,
.kid-lesson-page .module-download-card {
  max-width: 100%;
  margin-top: 18px;
}

@media (max-width: 1180px) {
  .kid-lesson-page .kid-module-topbar.kid-lesson-topbar,
  .kid-lesson-page .kid-lesson-module-header,
  .kid-lesson-main-card {
    grid-template-columns: 1fr;
  }

  .kid-lesson-page .guided-module-steps {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .kid-lesson-page .guided-module-steps button {
    flex: 0 0 150px;
    scroll-snap-align: start;
  }

  .kid-lesson-page .guided-module-steps button::after {
    display: none;
  }

  .kid-lesson-text,
  .kid-lesson-visual {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .module-detail.kid-module-detail.kid-lesson-page {
    padding: 10px;
    border-radius: 22px;
  }

  .kid-lesson-topbar-progress {
    grid-template-columns: 1fr;
  }

  .kid-lesson-page .kid-module-user {
    flex-wrap: wrap;
  }

  .kid-lesson-intro {
    display: grid;
  }

  .kid-lesson-intro strong {
    justify-self: start;
  }

  .kid-lesson-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .kid-lesson-main-card {
    padding: 18px;
    border-radius: 22px;
  }

  .kid-lesson-text {
    font-size: 1.06rem;
    line-height: 1.68;
  }

  .kid-lesson-text ul,
  .kid-lesson-keypoints {
    grid-template-columns: 1fr;
  }

  .kid-lesson-visual {
    min-height: 260px;
    padding: 12px;
  }

  .scratch-screen {
    grid-template-columns: 1fr;
  }

  .kid-lesson-navigation {
    display: grid;
  }

  .kid-lesson-navigation .primary-action,
  .kid-lesson-navigation .secondary-action {
    width: 100%;
  }
}

/* Nouvelle page Lecon adulte : lecture pleine largeur, sobre et ergonomique */
.module-detail.adult-module-detail.adult-lesson-page {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: clamp(16px, 2vw, 28px);
  overflow: visible;
  background:
    radial-gradient(circle at 10% 0%, rgba(79, 27, 198, .10), transparent 30%),
    radial-gradient(circle at 96% 8%, rgba(245, 158, 11, .12), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f9f7ff 100%);
}

.adult-lesson-page .guided-module-header {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  gap: 22px;
  align-items: stretch;
  border-radius: 30px;
}

.adult-lesson-page .guided-module-header h3 {
  max-width: 980px;
}

.adult-lesson-page .guided-module-steps {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  overflow: visible;
}

.adult-lesson-page .guided-module-steps strong {
  white-space: normal;
}

.adult-lesson-page .guided-module-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  min-height: auto;
  overflow: visible;
}

.adult-lesson-page .adult-module-side {
  display: none;
}

.adult-lesson-intro {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-start;
}

.adult-lesson-intro span {
  display: inline-flex;
  width: fit-content;
  padding: 8px 13px;
  border-radius: 10px;
  color: #fff;
  background: var(--adult-violet);
  font-size: .86rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.adult-lesson-intro h4 {
  margin: 12px 0 8px;
  color: var(--adult-text);
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 1.02;
  font-weight: 950;
}

.adult-lesson-intro p {
  max-width: 940px;
  margin: 0;
  color: #4b5670;
  font-size: 1.12rem;
  line-height: 1.7;
  font-weight: 750;
}

.adult-lesson-intro strong {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-radius: 16px;
  color: var(--adult-violet);
  background: #f4f1ff;
  font-size: 1rem;
  font-weight: 950;
}

.adult-lesson-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.adult-lesson-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid rgba(79, 27, 198, .13);
  border-radius: 14px;
  color: var(--adult-violet);
  background: #fff;
  cursor: pointer;
  font-weight: 950;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.adult-lesson-tabs button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(79, 27, 198, .10);
}

.adult-lesson-tabs button.active,
.adult-lesson-tabs button[aria-selected="true"] {
  border-color: var(--adult-violet);
  color: #fff;
  background: var(--adult-violet);
  box-shadow: 0 14px 28px rgba(79, 27, 198, .20);
}

.adult-lesson-page button:focus-visible,
.adult-lesson-page [role="tab"]:focus-visible {
  outline: 4px solid rgba(245, 158, 11, .72);
  outline-offset: 3px;
}

.adult-lesson-content,
.adult-lesson-panel,
.adult-lesson-main-card,
.adult-lesson-reading-card,
.adult-lesson-text {
  overflow: visible;
}

.adult-lesson-page .adult-lesson-content {
  display: grid;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

.adult-lesson-page .elearning-progress {
  justify-content: flex-start;
  gap: 10px;
  height: auto;
}

.adult-lesson-page .elearning-progress span {
  width: 48px;
  height: 8px;
  border-radius: 999px;
  background: #e9e4f2;
}

.adult-lesson-page .elearning-progress span.active,
.adult-lesson-page .elearning-progress span.completed {
  background: linear-gradient(90deg, var(--adult-violet), var(--adult-orange));
}

.adult-lesson-page .elearning-progress span::after {
  display: none;
}

.adult-lesson-panel {
  display: grid;
  gap: 18px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.adult-lesson-main-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 38px);
  align-items: stretch;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(226, 232, 240, .96);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .07);
}

.adult-lesson-reading-card {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.adult-lesson-text {
  display: grid;
  gap: 20px;
  max-width: 980px;
  color: var(--adult-text);
  font-size: 1.11rem;
  line-height: 1.78;
  font-weight: 650;
}

.adult-lesson-text p {
  margin: 0;
  color: #1f2a4c;
}

.adult-lesson-text strong {
  color: var(--adult-text);
}

.adult-lesson-text ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adult-lesson-text li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 13px;
  border-radius: 14px;
  color: #1f2a4c;
  background: #f8f5ff;
  font-weight: 800;
}

.adult-lesson-text li::before {
  content: "✓";
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #3b2500;
  background: #facc15;
  font-weight: 950;
}

.adult-lesson-visual {
  position: relative;
  display: grid;
  gap: 12px;
  place-items: center;
  align-self: stretch;
  min-height: clamp(420px, 40vw, 640px);
  margin: 0;
  padding: 0;
  border: 1px solid rgba(226, 232, 240, .96);
  border-radius: 24px;
  background:
    radial-gradient(circle at 22% 12%, rgba(245, 158, 11, .18), transparent 24%),
    linear-gradient(135deg, #f8fafc, #fff7ed);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
  overflow: hidden;
}

.adult-lesson-visual img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.adult-lesson-visual figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.adult-lesson-visual:not(:has(img)) {
  padding: 18px;
}

.adult-lesson-visual:not(:has(img)) figcaption {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  white-space: normal;
  color: var(--adult-muted);
  font-size: .9rem;
  font-weight: 850;
  text-align: center;
}

.adult-lesson-visual-fallback {
  position: relative;
  display: grid;
  width: min(420px, 100%);
  min-height: 300px;
  place-items: center;
  border-radius: 28px;
  background:
    radial-gradient(circle at 72% 18%, rgba(245, 158, 11, .22), transparent 25%),
    linear-gradient(135deg, #f4f1ff, #ffffff);
}

.adult-lesson-folder,
.adult-lesson-document,
.adult-lesson-cursor {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 22px;
  box-shadow: 0 18px 34px rgba(15, 23, 42, .10);
}

.adult-lesson-folder {
  width: 158px;
  height: 128px;
  left: 18%;
  bottom: 20%;
  background: #fff7ed;
  font-size: 5rem;
}

.adult-lesson-document {
  width: 116px;
  height: 142px;
  right: 18%;
  top: 17%;
  background: #fff;
  font-size: 4.2rem;
}

.adult-lesson-cursor {
  width: 62px;
  height: 62px;
  right: 23%;
  bottom: 20%;
  color: #fff;
  background: var(--adult-violet);
  font-size: 2rem;
}

.adult-lesson-keypoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(245, 158, 11, .24);
  border-radius: 22px;
  background: #fff8e7;
}

.adult-lesson-keypoints p {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  color: #3a2a16;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 850;
}

.adult-lesson-keypoints span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  color: #3b2500;
  background: #facc15;
  font-weight: 950;
}

.adult-lesson-navigation {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.adult-lesson-navigation .primary-action,
.adult-lesson-navigation .secondary-action {
  min-height: 54px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 1rem;
}

.adult-lesson-navigation .secondary-action:disabled {
  opacity: .52;
  cursor: not-allowed;
}

.adult-lesson-page .module-video,
.adult-lesson-page .module-download-card {
  max-width: 100%;
  margin-top: 18px;
}

@media (max-width: 1180px) {
  .adult-lesson-page .adult-module-topbar,
  .adult-lesson-page .guided-module-header,
  .adult-lesson-main-card {
    grid-template-columns: 1fr;
  }

  .adult-lesson-page .guided-module-steps {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .adult-lesson-page .guided-module-steps::before {
    display: none;
  }

  .adult-lesson-page .guided-module-steps button {
    flex: 0 0 150px;
    scroll-snap-align: start;
  }
}

@media (max-width: 760px) {
  .module-detail.adult-module-detail.adult-lesson-page {
    padding: 10px;
    border-radius: 22px;
  }

  .adult-lesson-intro {
    display: grid;
  }

  .adult-lesson-intro strong {
    justify-self: start;
  }

  .adult-lesson-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .adult-lesson-main-card {
    padding: 18px;
    border-radius: 22px;
  }

  .adult-lesson-text {
    font-size: 1.04rem;
  }

  .adult-lesson-visual {
    min-height: 280px;
  }

  .adult-lesson-keypoints {
    grid-template-columns: 1fr;
  }

  .adult-lesson-navigation {
    display: grid;
  }

  .adult-lesson-navigation .primary-action,
  .adult-lesson-navigation .secondary-action {
    width: 100%;
  }
}

/* Pages module/leçon : menu gauche replié pour laisser respirer le contenu. */
.mobile-menu-toggle {
  display: none;
}

body.session-started.module-detail-open .mobile-menu-toggle {
  position: fixed;
  top: 22px;
  left: 20px;
  z-index: 120;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #351054);
  box-shadow: 0 18px 38px rgba(53, 16, 84, 0.24);
  cursor: pointer;
}

body.session-started.module-detail-open .mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 3px;
  margin: 2px 0;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

body.session-started.module-detail-open.mobile-menu-open .mobile-menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.session-started.module-detail-open.mobile-menu-open .mobile-menu-toggle span:nth-child(2) {
  opacity: 0;
}

body.session-started.module-detail-open.mobile-menu-open .mobile-menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

body.session-started.module-detail-open .topbar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 110 !important;
  display: block !important;
  width: 82px !important;
  padding: 88px 10px 18px !important;
  overflow: hidden;
  border-radius: 0 !important;
  transition: width 0.26s ease, transform 0.26s ease, padding 0.26s ease;
}

body.session-started.module-detail-open .topbar::after,
body.session-started.module-detail-open .topbar .brand-title > div,
body.session-started.module-detail-open .topbar .progress-card {
  display: none !important;
}

body.session-started.module-detail-open .topbar .brand-title {
  justify-items: center !important;
}

body.session-started.module-detail-open .topbar .brand-logo {
  width: 54px !important;
  border-radius: 18px !important;
}

body.session-started.module-detail-open .steps {
  position: fixed !important;
  top: 184px !important;
  left: 14px !important;
  z-index: 115 !important;
  display: grid !important;
  width: 260px !important;
  max-height: calc(100vh - 210px) !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-112%);
  transition: transform 0.26s ease, opacity 0.2s ease;
}

body.session-started.module-detail-open.mobile-menu-open .topbar {
  width: min(310px, calc(100vw - 24px)) !important;
  padding: 26px 18px !important;
  overflow: visible;
  box-shadow: 24px 0 60px rgba(53, 16, 84, 0.32) !important;
}

body.session-started.module-detail-open.mobile-menu-open .topbar .brand-title > div {
  display: block !important;
}

body.session-started.module-detail-open.mobile-menu-open .topbar .brand-logo {
  width: 86px !important;
}

body.session-started.module-detail-open.mobile-menu-open .steps {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

body.session-started.module-detail-open main {
  width: min(1540px, calc(100% - 116px)) !important;
  margin: 0 22px 54px 96px !important;
}

body.session-started.module-detail-open .module-detail {
  max-width: none;
}

@media (max-width: 880px) {
  body.session-started.module-detail-open .mobile-menu-toggle {
    top: 14px;
    left: 14px;
  }

  body.session-started.module-detail-open .topbar {
    width: min(310px, calc(100vw - 24px)) !important;
    padding: 74px 18px 22px !important;
    transform: translateX(-112%);
  }

  body.session-started.module-detail-open.mobile-menu-open .topbar {
    transform: translateX(0);
  }

  body.session-started.module-detail-open .topbar .brand-title > div {
    display: block !important;
  }

  body.session-started.module-detail-open .topbar .brand-logo {
    width: 78px !important;
  }

  body.session-started.module-detail-open .steps {
    top: 190px !important;
    left: 18px !important;
    width: min(270px, calc(100vw - 48px)) !important;
    max-height: calc(100vh - 220px) !important;
  }

body.session-started.module-detail-open main {
    width: min(100% - 20px, 1180px) !important;
    margin: 72px auto 44px !important;
  }
}

/* Dashboard enfant : version base de mission plus visuelle et plus propre. */
body.pathway-kids.session-started .kid-space-dashboard.kid-dashboard-v2 {
  --kid-v2-ink: #251044;
  --kid-v2-muted: #6f5d87;
  --kid-v2-purple: #7c3aed;
  --kid-v2-pink: #ec4899;
  --kid-v2-blue: #3b82f6;
  --kid-v2-cyan: #22d3ee;
  --kid-v2-yellow: #facc15;
  --kid-v2-green: #22c55e;
  width: min(100%, 1480px);
  margin: 0 auto 44px;
  padding: 0;
  color: var(--kid-v2-ink);
  font-family: "Nunito Sans", "Inter", system-ui, sans-serif;
}

body.pathway-kids.session-started .kid-dashboard-v2,
body.pathway-kids.session-started .kid-dashboard-v2 * {
  box-sizing: border-box;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 24px;
  padding: 0;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-search {
  width: min(520px, 100%);
  min-height: 58px;
  padding: 0 20px;
  border: 2px solid rgba(124, 58, 237, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(88, 28, 135, 0.08);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-search span {
  color: var(--kid-v2-purple);
  font-size: 28px;
  font-weight: 900;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-search input {
  font-size: 16px;
  font-weight: 800;
  color: var(--kid-v2-ink);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-icon-button {
  min-width: 58px;
  height: 58px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 36px rgba(88, 28, 135, 0.11);
  color: var(--kid-v2-ink);
  font-weight: 950;
  cursor: pointer;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-icon-button:hover,
body.pathway-kids.session-started .kid-dashboard-v2 button:hover {
  transform: translateY(-3px);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-profile {
  min-height: 58px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 36px rgba(88, 28, 135, 0.11);
  color: var(--kid-v2-ink);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #dbeafe, #fde68a);
  font-size: 24px;
}

body.pathway-kids.session-started .kid-v2-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

body.pathway-kids.session-started .kid-v2-hero {
  position: relative;
  min-height: 390px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 24px;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 78% 22%, rgba(34, 211, 238, 0.45), transparent 34%),
    radial-gradient(circle at 42% 120%, rgba(236, 72, 153, 0.38), transparent 40%),
    linear-gradient(135deg, #581c87 0%, #7c3aed 48%, #2563eb 100%);
  box-shadow: 0 28px 70px rgba(88, 28, 135, 0.24);
  color: white;
}

body.pathway-kids.session-started .kid-v2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, #000, transparent 82%);
  pointer-events: none;
}

body.pathway-kids.session-started .kid-v2-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px;
}

body.pathway-kids.session-started .kid-v2-status-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

body.pathway-kids.session-started .kid-v2-status-row span,
body.pathway-kids.session-started .kid-v2-kicker {
  width: max-content;
  max-width: 100%;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
}

body.pathway-kids.session-started .kid-v2-kicker {
  background: rgba(250, 204, 21, 0.24);
  color: #fff7c2;
}

body.pathway-kids.session-started .kid-v2-hero h1 {
  max-width: 690px;
  margin: 14px 0 16px;
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
}

body.pathway-kids.session-started .kid-v2-hero p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 800;
}

body.pathway-kids.session-started .kid-v2-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

body.pathway-kids.session-started .kid-v2-hero .btn-kid-primary,
body.pathway-kids.session-started .kid-v2-hero .btn-kid-secondary {
  min-height: 54px;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-v2-hero .btn-kid-primary {
  background: linear-gradient(135deg, #facc15, #fb923c);
  color: #3b0764;
  box-shadow: 0 18px 36px rgba(250, 204, 21, 0.25);
}

body.pathway-kids.session-started .kid-v2-hero .btn-kid-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.42);
}

body.pathway-kids.session-started .kid-v2-daily {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(560px, 100%);
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(37, 16, 68, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

body.pathway-kids.session-started .kid-v2-daily span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 24px;
}

body.pathway-kids.session-started .kid-v2-daily small {
  display: block;
  color: #fde68a;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

body.pathway-kids.session-started .kid-v2-daily strong,
body.pathway-kids.session-started .kid-v2-daily b {
  color: #fff;
  overflow-wrap: anywhere;
}

body.pathway-kids.session-started .kid-v2-scene {
  position: relative;
  z-index: 2;
  min-height: 390px;
}

body.pathway-kids.session-started .kid-v2-robot {
  position: absolute;
  right: 44px;
  bottom: 30px;
  width: 185px;
  height: 185px;
  border: 11px solid rgba(255, 255, 255, 0.92);
  border-radius: 42px;
  background: linear-gradient(145deg, #6d28d9, #312e81);
  box-shadow: 0 28px 55px rgba(37, 16, 68, 0.35);
}

body.pathway-kids.session-started .kid-v2-robot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -58px;
  width: 10px;
  height: 50px;
  border-radius: 999px;
  background: #facc15;
  transform: translateX(-50%);
}

body.pathway-kids.session-started .kid-v2-robot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -73px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #facc15;
  transform: translateX(-50%);
  box-shadow: 0 0 32px rgba(250, 204, 21, 0.8);
}

body.pathway-kids.session-started .kid-v2-robot i,
body.pathway-kids.session-started .kid-v2-robot span {
  position: absolute;
  top: 66px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.65);
}

body.pathway-kids.session-started .kid-v2-robot i {
  left: 47px;
}

body.pathway-kids.session-started .kid-v2-robot span {
  right: 47px;
}

body.pathway-kids.session-started .kid-v2-robot b {
  position: absolute;
  left: 50%;
  bottom: 45px;
  width: 54px;
  height: 25px;
  border-bottom: 8px solid #fff;
  border-radius: 0 0 50px 50px;
  transform: translateX(-50%);
}

body.pathway-kids.session-started .kid-v2-orbit,
body.pathway-kids.session-started .kid-v2-tag {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 36px rgba(37, 16, 68, 0.18);
}

body.pathway-kids.session-started .kid-v2-orbit {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.35);
  font-size: 28px;
  animation: floatRobot 4.2s ease-in-out infinite;
}

body.pathway-kids.session-started .kid-v2-orbit.orbit-a {
  right: 320px;
  top: 96px;
}

body.pathway-kids.session-started .kid-v2-orbit.orbit-b {
  right: 74px;
  top: 78px;
  animation-delay: -1.2s;
}

body.pathway-kids.session-started .kid-v2-orbit.orbit-c {
  right: 184px;
  bottom: 50px;
  animation-delay: -2s;
}

body.pathway-kids.session-started .kid-v2-tag {
  height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  transform: rotate(-7deg);
}

body.pathway-kids.session-started .kid-v2-tag.tag-a {
  right: 260px;
  top: 188px;
  background: #ec4899;
}

body.pathway-kids.session-started .kid-v2-tag.tag-b {
  right: 38px;
  top: 142px;
  background: #fb923c;
  transform: rotate(8deg);
}

body.pathway-kids.session-started .kid-v2-side {
  display: grid;
  gap: 18px;
}

body.pathway-kids.session-started .kid-v2-card,
body.pathway-kids.session-started .kid-v2-action,
body.pathway-kids.session-started .kid-v2-route-card {
  border: 2px solid rgba(124, 58, 237, 0.1);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 45px rgba(88, 28, 135, 0.12);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

body.pathway-kids.session-started .kid-v2-card {
  padding: 22px;
}

body.pathway-kids.session-started .kid-v2-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

body.pathway-kids.session-started .kid-v2-card-title h2,
body.pathway-kids.session-started .kid-v2-route-card h2 {
  margin: 0;
  color: var(--kid-v2-ink);
  font-size: 23px;
  line-height: 1.2;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-v2-card-title span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 14px;
  background: #fef3c7;
  font-size: 23px;
}

body.pathway-kids.session-started .kid-v2-level-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  background: #e0f2fe;
}

body.pathway-kids.session-started .kid-v2-level-row > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  background: #bfdbfe;
  font-size: 31px;
}

body.pathway-kids.session-started .kid-v2-level-row small,
body.pathway-kids.session-started .kid-v2-score-line small,
body.pathway-kids.session-started .kid-v2-date small,
body.pathway-kids.session-started .kid-v2-goal-list small {
  color: var(--kid-v2-muted);
  font-size: 12px;
  font-weight: 900;
}

body.pathway-kids.session-started .kid-v2-level-row strong {
  display: block;
  color: var(--kid-v2-ink);
  font-size: 16px;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-v2-score-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 9px;
  color: var(--kid-v2-purple);
  font-size: 15px;
}

body.pathway-kids.session-started .kid-v2-progress {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #efe7fb;
}

body.pathway-kids.session-started .kid-v2-progress i {
  display: block;
  width: var(--kid-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #ec4899, #fb923c);
  animation: progressFill 0.9s ease both;
}

body.pathway-kids.session-started .kid-v2-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}

body.pathway-kids.session-started .kid-v2-stats span {
  padding: 12px 8px;
  border-radius: 16px;
  background: #faf5ff;
  text-align: center;
}

body.pathway-kids.session-started .kid-v2-stats b,
body.pathway-kids.session-started .kid-v2-stats small {
  display: block;
}

body.pathway-kids.session-started .kid-v2-card button,
body.pathway-kids.session-started .kid-v2-action {
  min-height: 50px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

body.pathway-kids.session-started .kid-v2-card > button {
  width: 100%;
  border-radius: 17px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-v2-goal-list {
  display: grid;
  gap: 10px;
}

body.pathway-kids.session-started .kid-v2-goal-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #fbf8ff;
  color: var(--kid-v2-ink);
  text-align: left;
}

body.pathway-kids.session-started .kid-v2-goal-list button span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 12px;
  background: #ede9fe;
  color: var(--kid-v2-purple);
  font-weight: 950;
}

body.pathway-kids.session-started .kid-v2-goal-list button.is-done span {
  background: #dcfce7;
  color: #15803d;
}

body.pathway-kids.session-started .kid-v2-goal-list strong {
  overflow-wrap: anywhere;
}

body.pathway-kids.session-started .kid-v2-date {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

body.pathway-kids.session-started .kid-v2-date time {
  display: grid;
  width: 62px;
  height: 70px;
  place-items: center;
  border-radius: 18px;
  background: #ede9fe;
  color: var(--kid-v2-purple);
  text-align: center;
}

body.pathway-kids.session-started .kid-v2-date time b {
  font-size: 24px;
  line-height: 1;
}

body.pathway-kids.session-started .kid-v2-workshop p {
  color: var(--kid-v2-muted);
  font-weight: 800;
  line-height: 1.5;
}

body.pathway-kids.session-started .kid-v2-action-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

body.pathway-kids.session-started .kid-v2-action {
  display: grid;
  gap: 9px;
  min-height: 158px;
  padding: 22px;
  text-align: left;
  color: var(--kid-v2-ink);
}

body.pathway-kids.session-started .kid-v2-action span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 16px 34px rgba(88, 28, 135, 0.16);
}

body.pathway-kids.session-started .kid-v2-action strong {
  color: var(--kid-v2-ink);
  font-size: 19px;
  line-height: 1.15;
  font-weight: 950;
  overflow-wrap: anywhere;
}

body.pathway-kids.session-started .kid-v2-action small {
  color: var(--kid-v2-muted);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 850;
}

body.pathway-kids.session-started .kid-v2-action.diagnostic {
  background: linear-gradient(145deg, #fff, #f5f3ff);
}

body.pathway-kids.session-started .kid-v2-action.diagnostic span {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

body.pathway-kids.session-started .kid-v2-action.missions {
  background: linear-gradient(145deg, #f0f9ff, #fff);
}

body.pathway-kids.session-started .kid-v2-action.missions span {
  background: linear-gradient(135deg, #3b82f6, #22d3ee);
}

body.pathway-kids.session-started .kid-v2-action.visual {
  background: linear-gradient(145deg, #fff7ed, #fff);
}

body.pathway-kids.session-started .kid-v2-action.visual span {
  background: linear-gradient(135deg, #fb923c, #facc15);
}

body.pathway-kids.session-started .kid-v2-action.quiz {
  background: linear-gradient(145deg, #ecfeff, #fff);
}

body.pathway-kids.session-started .kid-v2-action.quiz span {
  background: linear-gradient(135deg, #14b8a6, #22c55e);
}

body.pathway-kids.session-started .kid-v2-action.trophies {
  background: linear-gradient(145deg, #fdf2f8, #fff);
}

body.pathway-kids.session-started .kid-v2-action.trophies span {
  background: linear-gradient(135deg, #ec4899, #7c3aed);
}

body.pathway-kids.session-started .kid-v2-route-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(240px, 0.34fr) 1fr;
  gap: 20px;
  align-items: center;
  padding: 26px;
  background:
    linear-gradient(90deg, rgba(34, 211, 238, 0.1), rgba(236, 72, 153, 0.08)),
    rgba(255, 255, 255, 0.92);
}

body.pathway-kids.session-started .kid-v2-route {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
}

body.pathway-kids.session-started .kid-v2-route button {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--kid-v2-ink);
  font-weight: 950;
  cursor: pointer;
}

body.pathway-kids.session-started .kid-v2-route button span {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 20px;
  background: #f5f3ff;
  border: 4px solid #fff;
  box-shadow: 0 14px 30px rgba(88, 28, 135, 0.13);
  font-size: 28px;
}

body.pathway-kids.session-started .kid-v2-route button.done span {
  background: #dcfce7;
}

body.pathway-kids.session-started .kid-v2-route button.current span {
  background: #dbeafe;
  box-shadow: 0 0 0 5px rgba(236, 72, 153, 0.15), 0 14px 30px rgba(88, 28, 135, 0.15);
}

body.pathway-kids.session-started .kid-v2-route i {
  height: 7px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #22d3ee 0 12px, transparent 12px 22px);
  opacity: 0.85;
}

@media (max-width: 1280px) {
  body.pathway-kids.session-started .kid-v2-shell {
    grid-template-columns: 1fr;
  }

  body.pathway-kids.session-started .kid-v2-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.pathway-kids.session-started .kid-v2-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-header {
    align-items: stretch;
    flex-direction: column;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-header-actions {
    justify-content: flex-start;
  }

  body.pathway-kids.session-started .kid-v2-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  body.pathway-kids.session-started .kid-v2-hero-copy {
    padding: 30px 24px;
  }

  body.pathway-kids.session-started .kid-v2-scene {
    min-height: 240px;
  }

  body.pathway-kids.session-started .kid-v2-robot {
    right: 32px;
    bottom: 24px;
    width: 142px;
    height: 142px;
    border-radius: 34px;
  }

  body.pathway-kids.session-started .kid-v2-robot i,
  body.pathway-kids.session-started .kid-v2-robot span {
    top: 48px;
  }

  body.pathway-kids.session-started .kid-v2-robot i {
    left: 34px;
  }

  body.pathway-kids.session-started .kid-v2-robot span {
    right: 34px;
  }

  body.pathway-kids.session-started .kid-v2-robot b {
    bottom: 34px;
  }

  body.pathway-kids.session-started .kid-v2-side,
  body.pathway-kids.session-started .kid-v2-action-grid,
  body.pathway-kids.session-started .kid-v2-route-card {
    grid-template-columns: 1fr;
  }

  body.pathway-kids.session-started .kid-v2-route {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  body.pathway-kids.session-started .kid-v2-route i {
    width: 7px;
    height: 28px;
    margin-left: 28px;
    background: repeating-linear-gradient(180deg, #22d3ee 0 10px, transparent 10px 18px);
  }
}

@media (max-width: 560px) {
  body.pathway-kids.session-started .kid-space-dashboard.kid-dashboard-v2 {
    margin-bottom: 26px;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-icon-button {
    min-width: 50px;
    height: 50px;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-profile {
    width: 100%;
    justify-content: flex-start;
  }

  body.pathway-kids.session-started .kid-v2-hero {
    border-radius: 26px;
  }

  body.pathway-kids.session-started .kid-v2-hero h1 {
    font-size: 34px;
  }

  body.pathway-kids.session-started .kid-v2-daily {
    grid-template-columns: auto 1fr;
  }

  body.pathway-kids.session-started .kid-v2-daily b {
    grid-column: 2;
  }
}

/* Dashboard enfant : hero plus léger, moins envahissant. */
body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-shell {
  grid-template-columns: minmax(0, 1fr) 340px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero {
  min-height: 285px;
  grid-template-columns: minmax(0, 1fr) 300px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 14%, rgba(250, 204, 21, 0.38), transparent 24%),
    radial-gradient(circle at 78% 80%, rgba(34, 211, 238, 0.28), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8f4ff 46%, #eef7ff 100%);
  border: 2px solid rgba(124, 58, 237, 0.13);
  box-shadow: 0 22px 54px rgba(88, 28, 135, 0.13);
  color: #251044;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero::before {
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.05) 1px, transparent 1px);
  mask-image: linear-gradient(90deg, #000 0%, transparent 74%);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -125px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(34, 211, 238, 0.14));
  pointer-events: none;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero-copy {
  padding: 30px 34px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-status-row {
  margin-bottom: 12px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-status-row span,
body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-kicker {
  background: #fff;
  color: #5b21b6;
  border: 1px solid rgba(124, 58, 237, 0.13);
  box-shadow: 0 10px 24px rgba(88, 28, 135, 0.08);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-kicker {
  color: #9a3412;
  background: #fff7ed;
  border-color: rgba(251, 146, 60, 0.22);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero h1 {
  max-width: 610px;
  margin: 10px 0 10px;
  color: #251044;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  text-shadow: none;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero p {
  max-width: 540px;
  color: #58436f;
  font-size: 16px;
  line-height: 1.5;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero-actions {
  margin-top: 20px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero .btn-kid-primary {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  box-shadow: 0 14px 30px rgba(124, 58, 237, 0.22);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero .btn-kid-secondary {
  background: #fff;
  color: #581c87;
  border-color: rgba(124, 58, 237, 0.18);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-daily {
  width: min(500px, 100%);
  margin-top: 18px;
  background: linear-gradient(135deg, #fff7ed, #fff);
  border: 1px solid rgba(251, 146, 60, 0.18);
  box-shadow: 0 14px 32px rgba(251, 146, 60, 0.09);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-daily span {
  background: linear-gradient(135deg, #fde68a, #fef3c7);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-daily small {
  color: #9a3412;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-daily strong,
body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-daily b {
  color: #251044;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-scene {
  min-height: 285px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot {
  right: 54px;
  bottom: 38px;
  width: 138px;
  height: 138px;
  border-width: 9px;
  border-radius: 34px;
  background: linear-gradient(145deg, #7c3aed, #4c1d95);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot::before {
  top: -44px;
  height: 38px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot::after {
  top: -58px;
  width: 24px;
  height: 24px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot i,
body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot span {
  top: 47px;
  width: 22px;
  height: 22px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot i {
  left: 34px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot span {
  right: 34px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot b {
  bottom: 34px;
  width: 44px;
  height: 20px;
  border-bottom-width: 6px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-orbit {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(124, 58, 237, 0.15);
  font-size: 23px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-orbit.orbit-a {
  right: 205px;
  top: 52px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-orbit.orbit-b {
  right: 30px;
  top: 50px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-orbit.orbit-c {
  right: 190px;
  bottom: 54px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-tag {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-tag.tag-a {
  right: 170px;
  top: 126px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-tag.tag-b {
  right: 22px;
  top: 116px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action-grid {
  gap: 16px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action {
  min-height: 132px;
  padding: 18px;
}

@media (max-width: 1280px) {
  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-scene {
    min-height: 190px;
  }
}

/* Dashboard enfant : version plus homogène, sans bloc décoratif inutile. */
body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-shell {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  align-items: stretch;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero {
  min-height: 250px;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: stretch;
  background:
    linear-gradient(90deg, rgba(124, 58, 237, 0.18), rgba(236, 72, 153, 0.08) 45%, rgba(34, 211, 238, 0.12)),
    #fff;
  border: 2px solid rgba(124, 58, 237, 0.12);
  box-shadow: 0 20px 48px rgba(88, 28, 135, 0.12);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero::before {
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero::after {
  right: -120px;
  bottom: -180px;
  width: 330px;
  height: 330px;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.28), rgba(236, 72, 153, 0.14));
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero-copy {
  padding: 26px 30px;
  justify-content: center;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-status-row {
  margin-bottom: 10px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-status-row span {
  padding: 7px 11px;
  font-size: 12px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero h1 {
  max-width: 570px;
  margin: 8px 0 8px;
  font-size: clamp(27px, 2.45vw, 38px);
  line-height: 1.1;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero p {
  max-width: 560px;
  font-size: 15px;
  line-height: 1.45;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero-actions {
  margin-top: 16px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-skill-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: min(620px, 100%);
  margin-top: 16px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-skill-strip span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 11px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(124, 58, 237, 0.12);
  box-shadow: 0 10px 22px rgba(88, 28, 135, 0.08);
  color: #3b0764;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-skill-strip b {
  display: grid;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  font-size: 11px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-daily {
  display: none;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-scene {
  min-height: 250px;
  background:
    radial-gradient(circle at 54% 62%, rgba(124, 58, 237, 0.1), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(237, 233, 254, 0.55));
  border-left: 1px solid rgba(124, 58, 237, 0.08);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot {
  right: 36px;
  bottom: 28px;
  width: 122px;
  height: 122px;
  border-width: 8px;
  border-radius: 30px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot::before {
  top: -38px;
  height: 32px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot::after {
  top: -50px;
  width: 22px;
  height: 22px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot i,
body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot span {
  top: 40px;
  width: 19px;
  height: 19px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot i {
  left: 29px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot span {
  right: 29px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot b {
  bottom: 29px;
  width: 38px;
  height: 17px;
  border-bottom-width: 5px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-orbit {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 20px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-orbit.orbit-a {
  right: 160px;
  top: 38px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-orbit.orbit-b {
  right: 28px;
  top: 38px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-orbit.orbit-c {
  right: 150px;
  bottom: 40px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-tag {
  display: none;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-side {
  gap: 14px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-card {
  padding: 18px;
  border-radius: 24px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-card-title {
  margin-bottom: 12px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-card-title h2 {
  font-size: 20px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-level-row {
  padding: 11px;
  border-radius: 18px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-stats {
  gap: 7px;
  margin: 12px 0;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-stats span {
  padding: 9px 6px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-goal-list {
  gap: 8px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-goal-list button {
  padding: 9px 10px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action-grid {
  grid-column: 1 / 2;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action {
  min-height: 118px;
  padding: 16px;
  border-radius: 22px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action span {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  font-size: 23px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action strong {
  font-size: 16px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action small {
  font-size: 12px;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-route-card {
  grid-column: 1 / -1;
  margin-top: 2px;
  border-radius: 26px;
}

@media (max-width: 1280px) {
  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-shell {
    grid-template-columns: 1fr;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action-grid {
    grid-column: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-skill-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Dashboard enfant final : proche de la maquette fournie, homogène et sans espace vide. */
body.pathway-kids.session-started {
  --kid-final-ink: #2b1052;
  --kid-final-muted: #735c90;
  --kid-final-purple: #7c3aed;
  --kid-final-violet: #8b5cf6;
  --kid-final-pink: #ec4899;
  --kid-final-orange: #fb923c;
  --kid-final-lilac: #f4efff;
  background:
    radial-gradient(circle at 78% 6%, rgba(236, 72, 153, 0.09), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%) !important;
  color: var(--kid-final-ink);
}

body.pathway-kids.session-started .topbar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 40;
  display: block !important;
  width: 260px !important;
  height: 100vh !important;
  padding: 28px 24px 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden auto !important;
  background:
    radial-gradient(circle at 25% 92%, rgba(255, 255, 255, 0.22), transparent 23%),
    linear-gradient(180deg, #8b5cf6 0%, #6d28d9 54%, #5b21b6 100%) !important;
  box-shadow: 18px 0 48px rgba(88, 28, 135, 0.16) !important;
}

body.pathway-kids.session-started .topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.35) 0 2px, transparent 3px),
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-position: 26px 42px, 0 0, 0 0;
  background-size: 74px 74px, 34px 34px, 34px 34px;
  pointer-events: none;
}

body.pathway-kids.session-started .topbar::after {
  content: "🤖";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  height: 120px;
  display: grid;
  place-items: end center;
  padding-bottom: 18px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at bottom, rgba(196, 181, 253, 0.76), rgba(255,255,255,.16) 56%, transparent 57%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  color: #fff;
  font-size: 54px;
  pointer-events: none;
}

body.pathway-kids.session-started .brand-title {
  position: relative;
  z-index: 2;
  display: grid !important;
  justify-items: start !important;
  gap: 14px !important;
  min-height: 250px !important;
  margin: 0 0 18px !important;
  padding: 16px 18px 20px !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 22px 50px rgba(46, 16, 101, 0.12) !important;
  text-align: left !important;
}

body.pathway-kids.session-started .brand-logo {
  width: 96px !important;
  height: 96px !important;
  margin: 0 auto 6px !important;
  border-radius: 26px !important;
  object-fit: contain !important;
  box-shadow: none !important;
}

body.pathway-kids.session-started .brand-title .eyebrow {
  margin: 0 !important;
  color: #a78bfa !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

body.pathway-kids.session-started .brand-title h1 {
  max-width: 190px !important;
  margin: 0 !important;
  color: #2b1052 !important;
  font-size: 25px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  overflow-wrap: normal !important;
}

body.pathway-kids.session-started .progress-card,
body.pathway-kids.session-started .topbar .session-meta {
  display: none !important;
}

body.pathway-kids.session-started .steps {
  position: relative !important;
  z-index: 2;
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 0 150px !important;
  overflow: visible !important;
}

body.pathway-kids.session-started .step-tab {
  width: 100% !important;
  min-height: 52px !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #4c1d95 !important;
  box-shadow: 0 12px 28px rgba(46, 16, 101, 0.13) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

body.pathway-kids.session-started .step-tab.active {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  color: #fff !important;
  box-shadow: 0 18px 34px rgba(124, 58, 237, 0.28) !important;
}

body.pathway-kids.session-started .step-tab .step-icon {
  display: grid !important;
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 32px !important;
  place-items: center !important;
  border-radius: 13px !important;
  background: rgba(124, 58, 237, 0.13) !important;
}

body.pathway-kids.session-started .step-tab.active .step-icon {
  background: rgba(255, 255, 255, 0.2) !important;
}

body.pathway-kids.session-started #mobileMenuToggle {
  display: none !important;
}

body.pathway-kids.session-started main {
  width: min(100% - 316px, 1440px) !important;
  margin: 0 24px 54px 292px !important;
  padding: 26px 0 0 !important;
}

body.pathway-kids.session-started .breadcrumb-bar,
body.pathway-kids.session-started .session-strip,
body.pathway-kids.session-started .welcome-progress {
  display: none !important;
}

body.pathway-kids.session-started .panel:first-of-type {
  padding-top: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.pathway-kids.session-started .kid-space-dashboard.kid-dashboard-v2 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--kid-final-ink) !important;
  font-family: "Nunito Sans", "Inter", system-ui, sans-serif !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-header {
  min-height: 76px !important;
  margin: 0 0 24px !important;
  padding: 0 0 22px !important;
  border-bottom: 1px solid rgba(124, 58, 237, 0.11) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-search {
  width: min(545px, 100%) !important;
  min-height: 56px !important;
  border: 2px solid rgba(124, 58, 237, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 16px 34px rgba(88, 28, 135, 0.08) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-search span {
  font-size: 30px !important;
  line-height: 1 !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-header-actions {
  gap: 14px !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-square-icon {
  position: relative !important;
  display: grid !important;
  min-width: 56px !important;
  width: 56px !important;
  height: 56px !important;
  place-items: center !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 14px 30px rgba(88, 28, 135, 0.08) !important;
  font-size: 23px !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-square-icon i {
  position: absolute !important;
  top: -5px !important;
  right: -4px !important;
  min-width: 14px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: #ec4899 !important;
  color: #fff !important;
  font-size: 9px !important;
  font-style: normal !important;
  line-height: 14px !important;
  text-align: center !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-profile {
  min-width: 210px !important;
  min-height: 56px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(124, 58, 237, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 14px 30px rgba(88, 28, 135, 0.08) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-avatar {
  width: 46px !important;
  height: 46px !important;
  border: 4px solid #ede9fe !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #dbeafe, #fef3c7) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  grid-template-areas:
    "hero side"
    "steps side"
    "tip side" !important;
  gap: 24px !important;
  align-items: start !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero {
  grid-area: hero !important;
  min-height: 365px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.58fr) minmax(340px, 0.42fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 70% 18%, rgba(124, 58, 237, 0.34), transparent 20%),
    radial-gradient(circle at 92% 5%, rgba(255, 255, 255, 0.75), transparent 22%),
    linear-gradient(135deg, #f2ddff 0%, #ffdff1 43%, #d7c7ff 100%) !important;
  box-shadow: 0 26px 62px rgba(88, 28, 135, 0.16) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 44% 18%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 34%, rgba(250,204,21,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 36%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, 42px 42px, 42px 42px !important;
  mask-image: none !important;
  pointer-events: none !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero::after {
  content: "" !important;
  position: absolute !important;
  right: 28px !important;
  bottom: -135px !important;
  width: 540px !important;
  height: 230px !important;
  border-radius: 50% 50% 0 0 !important;
  background:
    radial-gradient(circle at 23% 30%, rgba(255,255,255,.72) 0 5px, transparent 6px),
    radial-gradient(circle at 58% 18%, rgba(255,255,255,.5) 0 4px, transparent 5px),
    linear-gradient(180deg, rgba(124, 58, 237, 0.18), rgba(124, 58, 237, 0.05)) !important;
  pointer-events: none !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero-copy {
  position: relative !important;
  z-index: 2 !important;
  padding: 34px 38px !important;
  justify-content: center !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: max-content !important;
  margin: 0 0 16px !important;
  padding: 10px 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #fff7df !important;
  color: #a15c00 !important;
  box-shadow: none !important;
  font-size: 15px !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-kicker::before {
  content: "⭐";
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero h1 {
  max-width: 610px !important;
  margin: 0 0 18px !important;
  color: var(--kid-final-ink) !important;
  font-size: clamp(40px, 4.3vw, 58px) !important;
  line-height: 1.04 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  text-wrap: balance !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero h1 span {
  display: inline-block !important;
  background: linear-gradient(135deg, #7c3aed, #ec4899) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-status-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 0 24px !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-status-row span {
  padding: 10px 15px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #5b21b6 !important;
  box-shadow: 0 12px 26px rgba(88, 28, 135, 0.09) !important;
  font-size: 14px !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero p {
  display: none !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero-actions {
  display: flex !important;
  gap: 14px !important;
  margin: 0 !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero .btn-kid-primary,
body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero .btn-kid-secondary {
  min-height: 56px !important;
  padding: 0 25px !important;
  border-radius: 17px !important;
  font-size: 16px !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero .btn-kid-primary {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  color: #fff !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero .btn-kid-secondary {
  background: rgba(255, 255, 255, 0.86) !important;
  color: #5b21b6 !important;
  border: 2px solid rgba(124, 58, 237, 0.2) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-scene {
  position: relative !important;
  z-index: 2 !important;
  min-height: 365px !important;
  border-left: 0 !important;
  background:
    radial-gradient(circle at 55% 26%, rgba(124, 58, 237, 0.18) 0 52px, transparent 54px),
    radial-gradient(circle at 24% 64%, rgba(255,255,255,.42), transparent 25%) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-planet {
  position: absolute !important;
  display: block !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-planet.planet-a {
  right: 168px !important;
  top: 45px !important;
  width: 70px !important;
  height: 70px !important;
  background:
    radial-gradient(circle at 34% 32%, rgba(255,255,255,.34), transparent 18%),
    linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  opacity: .68 !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-planet.planet-b {
  right: 54px !important;
  top: 92px !important;
  width: 92px !important;
  height: 92px !important;
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.3), transparent 20%),
    linear-gradient(135deg, #c4b5fd, #8b5cf6) !important;
  opacity: .52 !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-base {
  position: absolute !important;
  right: 102px !important;
  bottom: 70px !important;
  width: 185px !important;
  height: 88px !important;
  border-radius: 36px 36px 16px 16px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.05)),
    linear-gradient(135deg, #c4b5fd, #8b5cf6) !important;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.36), 0 20px 34px rgba(88, 28, 135, .16) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-base::before {
  content: "";
  position: absolute;
  left: 38px;
  right: 38px;
  top: -46px;
  height: 54px;
  border-radius: 35px 35px 8px 8px;
  background: linear-gradient(135deg, #ede9fe, #a78bfa);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.55);
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-base::after {
  content: "";
  position: absolute;
  left: 72px;
  top: -24px;
  width: 42px;
  height: 22px;
  border-radius: 999px;
  background: #60a5fa;
  box-shadow: 58px 30px 0 -3px #60a5fa, -58px 30px 0 -3px #60a5fa;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-rover {
  position: absolute !important;
  left: 20px !important;
  bottom: 88px !important;
  width: 86px !important;
  height: 42px !important;
  border-radius: 24px 24px 14px 14px !important;
  background: linear-gradient(135deg, #ede9fe, #8b5cf6) !important;
  box-shadow: 0 18px 28px rgba(88, 28, 135, .16) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-rover::before,
body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-rover::after {
  content: "";
  position: absolute;
  bottom: -12px;
  width: 24px;
  height: 24px;
  border: 6px solid #4c1d95;
  border-radius: 50%;
  background: #fff;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-rover::before { left: 7px; }
body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-rover::after { right: 7px; }

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-robot {
  right: 62px !important;
  bottom: 48px !important;
  width: 138px !important;
  height: 138px !important;
  border: 9px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 34px !important;
  background: linear-gradient(145deg, #7c3aed, #2e1065) !important;
  box-shadow: 0 24px 50px rgba(88, 28, 135, 0.25) !important;
  animation: floatRobot 4s ease-in-out infinite !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action-grid {
  grid-area: steps !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action {
  position: relative !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  min-height: 248px !important;
  padding: 24px 22px 28px !important;
  overflow: visible !important;
  border: 1px solid rgba(124, 58, 237, 0.12) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 18px 42px rgba(88, 28, 135, 0.09) !important;
  text-align: center !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -25px;
  top: 118px;
  width: 26px;
  border-top: 3px dotted #a78bfa;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action b {
  position: absolute !important;
  left: 24px !important;
  top: 20px !important;
  display: grid !important;
  width: 52px !important;
  height: 52px !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action span {
  width: 92px !important;
  height: 92px !important;
  margin: 52px auto 16px !important;
  border-radius: 26px !important;
  background: #ede9fe !important;
  color: #7c3aed !important;
  font-size: 48px !important;
  box-shadow: none !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action strong {
  max-width: 170px !important;
  color: var(--kid-final-ink) !important;
  font-size: 20px !important;
  line-height: 1.14 !important;
  font-weight: 950 !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action small {
  max-width: 190px !important;
  color: var(--kid-final-muted) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action i {
  position: absolute !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 22px !important;
  display: block !important;
  height: 7px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #efe7fb !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action i::after {
  content: "";
  display: block;
  width: 46%;
  height: 100%;
  border-radius: inherit;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action.violet b,
body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action.violet i::after {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action.pink b,
body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action.pink i::after {
  background: linear-gradient(135deg, #ec4899, #f472b6) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action.coral b,
body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action.coral i::after {
  background: linear-gradient(135deg, #fb7185, #fb923c) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action.orange b,
body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action.orange i::after {
  background: linear-gradient(135deg, #fb923c, #facc15) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-side {
  grid-area: side !important;
  display: grid !important;
  gap: 18px !important;
  align-content: start !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-card {
  border: 1px solid rgba(124, 58, 237, 0.12) !important;
  border-radius: 25px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 18px 42px rgba(88, 28, 135, 0.09) !important;
  padding: 24px !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-card-title h2 {
  color: var(--kid-final-ink) !important;
  font-size: 24px !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-level-row {
  padding: 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #eef7ff, #f3e8ff) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-score-line {
  margin-top: 17px !important;
  color: #7c3aed !important;
  font-size: 16px !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-stats {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin: 18px 0 !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-stats span {
  padding: 13px 8px !important;
  border: 1px solid rgba(124, 58, 237, 0.09) !important;
  border-radius: 16px !important;
  background: #fff !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-goal-list button {
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  padding: 12px 10px !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-goal-list button + button {
  border-top: 1px solid rgba(124, 58, 237, 0.09) !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-goal-list small {
  min-width: 70px !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(124, 58, 237, 0.13) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #7c3aed !important;
  text-align: center !important;
}

body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-tip {
  grid-area: tip !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: -4px 0 0 !important;
  padding: 14px 22px !important;
  border-radius: 18px !important;
  background: #f5efff !important;
  color: #5b21b6 !important;
  font-weight: 800 !important;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.08) !important;
}

@media (max-width: 1180px) {
  body.pathway-kids.session-started .topbar {
    transform: translateX(-100%) !important;
    transition: transform .25s ease !important;
  }

  body.pathway-kids.session-started.mobile-menu-open .topbar {
    transform: translateX(0) !important;
  }

  body.pathway-kids.session-started #mobileMenuToggle {
    display: inline-grid !important;
    position: fixed !important;
    left: 16px !important;
    top: 16px !important;
    z-index: 70 !important;
  }

  body.pathway-kids.session-started main {
    width: min(100% - 28px, 940px) !important;
    margin: 74px auto 40px !important;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-shell {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "hero"
      "side"
      "steps"
      "tip" !important;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-side {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-header {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-header-actions {
    justify-content: flex-start !important;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-profile {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero-copy {
    padding: 28px 22px !important;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-hero h1 {
    font-size: 34px !important;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-scene {
    min-height: 230px !important;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-side,
  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action-grid {
    grid-template-columns: 1fr !important;
  }

  body.pathway-kids.session-started .kid-dashboard-v2 .kid-v2-action:not(:last-child)::after {
    display: none !important;
  }
}

/* Dashboard enfant RFC06 : version proche du modèle validé, sans superposition. */
body.pathway-kids.session-started {
  --kid-ok-ink: #251044;
  --kid-ok-muted: #725f8c;
  --kid-ok-purple: #7c3aed;
  --kid-ok-dark: #3b0764;
  --kid-ok-pink: #ec4899;
  --kid-ok-soft: #f7f1ff;
  --kid-ok-card: rgba(255, 255, 255, 0.94);
  background:
    radial-gradient(circle at 78% 12%, rgba(236, 72, 153, 0.11), transparent 34%),
    linear-gradient(135deg, #fbf8ff 0%, #f4edff 52%, #fff8ee 100%) !important;
}

body.pathway-kids.session-started .topbar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 45 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 278px !important;
  padding: 28px 20px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 36%),
    linear-gradient(180deg, #8b3cf6 0%, #4c1174 72%, #351054 100%) !important;
  box-shadow: 22px 0 55px rgba(53, 16, 84, 0.17) !important;
}

body.pathway-kids.session-started .topbar::before {
  opacity: 0.18 !important;
}

body.pathway-kids.session-started .topbar .brand-title {
  display: grid !important;
  gap: 18px !important;
  justify-items: start !important;
  margin: 0 0 24px !important;
  padding: 20px 18px 34px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--kid-ok-ink) !important;
}

body.pathway-kids.session-started .topbar .brand-logo {
  width: 102px !important;
  max-width: 102px !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(53, 16, 84, 0.12) !important;
}

body.pathway-kids.session-started .topbar .brand-title > div {
  display: block !important;
  max-width: 100% !important;
}

body.pathway-kids.session-started .topbar .eyebrow {
  margin-bottom: 10px !important;
  color: #9b7ae9 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

body.pathway-kids.session-started .topbar .brand-title h1,
body.pathway-kids.session-started .topbar h1 {
  color: var(--kid-ok-ink) !important;
  font-size: 27px !important;
  line-height: 1.14 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
}

body.pathway-kids.session-started .topbar .session-meta,
body.pathway-kids.session-started .topbar .progress-card {
  display: none !important;
}

body.pathway-kids.session-started .steps {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.pathway-kids.session-started .step-tab {
  width: 100% !important;
  min-height: 52px !important;
  justify-content: flex-start !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: #5b2d8a !important;
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 12px 24px rgba(53, 16, 84, 0.08) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body.pathway-kids.session-started .step-tab[aria-selected="true"],
body.pathway-kids.session-started .step-tab.active {
  color: #fff !important;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  box-shadow: 0 16px 30px rgba(124, 58, 237, 0.24) !important;
}

body.pathway-kids.session-started main {
  width: min(1540px, calc(100% - 326px)) !important;
  margin: 26px 28px 54px 306px !important;
  padding: 0 !important;
}

body.pathway-kids.session-started .panel[data-panel="1"] {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.pathway-kids.session-started .kid-ok-dashboard,
body.pathway-kids.session-started .kid-ok-dashboard * {
  box-sizing: border-box;
  font-family: "Nunito Sans", "Inter", system-ui, sans-serif;
}

body.pathway-kids.session-started .kid-ok-dashboard {
  width: 100%;
  margin: 0 auto 42px;
  color: var(--kid-ok-ink);
}

body.pathway-kids.session-started .kid-ok-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 84px;
  margin: 0 0 22px;
  padding: 0 2px 22px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.1);
}

body.pathway-kids.session-started .kid-ok-search {
  display: flex;
  align-items: center;
  width: min(520px, 100%);
  height: 58px;
  gap: 12px;
  padding: 0 20px;
  border: 2px solid rgba(124, 58, 237, 0.12);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(88, 28, 135, 0.08);
}

body.pathway-kids.session-started .kid-ok-search span {
  color: var(--kid-ok-purple);
  font-size: 28px;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-ok-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--kid-ok-ink);
  font-size: 16px;
  font-weight: 800;
}

body.pathway-kids.session-started .kid-ok-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

body.pathway-kids.session-started .kid-ok-icon {
  position: relative;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 18px;
  color: var(--kid-ok-ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 32px rgba(88, 28, 135, 0.08);
  font-size: 25px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.pathway-kids.session-started .kid-ok-icon:hover,
body.pathway-kids.session-started .kid-ok-step:hover,
body.pathway-kids.session-started .kid-ok-card button:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(88, 28, 135, 0.16);
}

body.pathway-kids.session-started .kid-ok-icon i {
  position: absolute;
  right: 7px;
  top: 7px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #ec4899;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-ok-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 16px 8px 8px;
  border: 1px solid rgba(124, 58, 237, 0.13);
  border-radius: 22px;
  color: var(--kid-ok-ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 32px rgba(88, 28, 135, 0.08);
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
}

body.pathway-kids.session-started .kid-ok-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ede9fe, #dbeafe);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.75);
  font-size: 23px;
}

body.pathway-kids.session-started .kid-ok-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas:
    "hero side"
    "steps side"
    "tip side";
  gap: 24px;
  align-items: start;
}

body.pathway-kids.session-started .kid-ok-hero {
  position: relative;
  grid-area: hero;
  display: grid;
  min-height: 402px;
  grid-template-columns: minmax(0, 1.03fr) minmax(330px, 0.97fr);
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 74% 31%, rgba(255, 255, 255, 0.56), transparent 30%),
    linear-gradient(135deg, #f8d7ff 0%, #ead7ff 38%, #d4c4ff 100%);
  box-shadow: 0 24px 60px rgba(88, 28, 135, 0.15);
}

body.pathway-kids.session-started .kid-ok-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 56% 18%, rgba(255, 255, 255, 0.42) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 24%, rgba(250, 204, 21, 0.68) 0 3px, transparent 4px),
    radial-gradient(circle at 44% 39%, rgba(255, 255, 255, 0.5) 0 2px, transparent 3px);
  pointer-events: none;
}

body.pathway-kids.session-started .kid-ok-hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 42px 18px 38px 42px;
}

body.pathway-kids.session-started .kid-ok-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 11px 18px;
  border-radius: 999px;
  color: #8a4b00;
  background: linear-gradient(135deg, #fff8db, #fff0c2);
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 10px 26px rgba(245, 158, 11, 0.16);
}

body.pathway-kids.session-started .kid-ok-hero h1 {
  max-width: 640px;
  margin: 0 0 20px;
  color: var(--kid-ok-dark);
  font-size: clamp(42px, 4.2vw, 62px);
  line-height: 0.98;
  font-weight: 950;
  letter-spacing: 0;
}

body.pathway-kids.session-started .kid-ok-hero h1 strong {
  display: inline-block;
  margin-top: 4px;
  color: #b245e5;
  font-size: 1.1em;
  line-height: 0.94;
}

body.pathway-kids.session-started .kid-ok-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 28px;
}

body.pathway-kids.session-started .kid-ok-pills span {
  padding: 12px 16px;
  border-radius: 16px;
  color: #5b21b6;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 26px rgba(88, 28, 135, 0.08);
  font-size: 14px;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-ok-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

body.pathway-kids.session-started .kid-ok-primary,
body.pathway-kids.session-started .kid-ok-secondary {
  min-height: 58px;
  padding: 0 24px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.pathway-kids.session-started .kid-ok-primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 18px 34px rgba(124, 58, 237, 0.28);
}

body.pathway-kids.session-started .kid-ok-secondary {
  border: 2px solid rgba(124, 58, 237, 0.16);
  color: #581c87;
  background: rgba(255, 255, 255, 0.92);
}

body.pathway-kids.session-started .kid-ok-hero-art {
  position: relative;
  z-index: 1;
  min-height: 360px;
  overflow: hidden;
}

body.pathway-kids.session-started .kid-ok-hero-art::before {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -52px;
  width: 112%;
  height: 84%;
  border-radius: 55% 0 0 0;
  background:
    linear-gradient(160deg, rgba(123, 80, 226, 0.18), rgba(255, 255, 255, 0.18)),
    linear-gradient(135deg, #c6b7ff, #8b5cf6);
  opacity: 0.68;
}

body.pathway-kids.session-started .kid-ok-hero-art img {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: min(380px, 92%);
  height: 285px;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(53, 16, 84, 0.18));
  animation: floatRobot 4.2s ease-in-out infinite;
}

body.pathway-kids.session-started .kid-ok-moon,
body.pathway-kids.session-started .kid-ok-base,
body.pathway-kids.session-started .kid-ok-rover {
  position: absolute;
  display: block;
  pointer-events: none;
}

body.pathway-kids.session-started .kid-ok-moon {
  top: 42px;
  right: 150px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #d8ccff, #a78bfa);
  opacity: 0.72;
}

body.pathway-kids.session-started .kid-ok-base {
  right: 36px;
  top: 132px;
  width: 210px;
  height: 92px;
  border-radius: 28px 28px 12px 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.16));
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.38);
}

body.pathway-kids.session-started .kid-ok-rover {
  left: 18px;
  bottom: 58px;
  width: 74px;
  height: 36px;
  border-radius: 20px 20px 10px 10px;
  background: linear-gradient(135deg, #ede9fe, #8b5cf6);
}

body.pathway-kids.session-started .kid-ok-side {
  grid-area: side;
  display: grid;
  gap: 18px;
}

body.pathway-kids.session-started .kid-ok-card {
  padding: 24px;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 26px;
  background: var(--kid-ok-card);
  box-shadow: 0 20px 48px rgba(88, 28, 135, 0.11);
}

body.pathway-kids.session-started .kid-ok-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

body.pathway-kids.session-started .kid-ok-card-title h2 {
  margin: 0;
  color: var(--kid-ok-ink);
  font-size: 25px;
  line-height: 1.15;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-ok-card-title span {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 16px;
  background: #fff4cc;
  font-size: 28px;
}

body.pathway-kids.session-started .kid-ok-level-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border-radius: 20px;
  background: linear-gradient(135deg, #eef7ff, #f3e8ff);
}

body.pathway-kids.session-started .kid-ok-level-row > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  background: #bfdbfe;
  font-size: 30px;
}

body.pathway-kids.session-started .kid-ok-level-row small,
body.pathway-kids.session-started .kid-ok-score small,
body.pathway-kids.session-started .kid-ok-stats small,
body.pathway-kids.session-started .kid-ok-goal-list small {
  color: var(--kid-ok-muted);
  font-size: 12px;
  font-weight: 850;
}

body.pathway-kids.session-started .kid-ok-level-row strong {
  display: block;
  color: var(--kid-ok-ink);
  font-size: 16px;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-ok-score {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 9px;
  color: var(--kid-ok-purple);
  font-size: 18px;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-ok-progress {
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: #eee4fb;
}

body.pathway-kids.session-started .kid-ok-progress i,
body.pathway-kids.session-started .kid-ok-step i {
  display: block;
  width: var(--kid-progress, 45%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #ec4899);
}

body.pathway-kids.session-started .kid-ok-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0;
}

body.pathway-kids.session-started .kid-ok-stats span {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 13px 6px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.08);
}

body.pathway-kids.session-started .kid-ok-stats b {
  color: var(--kid-ok-ink);
  font-size: 18px;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-ok-card > button,
body.pathway-kids.session-started .kid-ok-goal-list button {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.pathway-kids.session-started .kid-ok-card > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  gap: 8px;
  border: 0;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  box-shadow: 0 16px 30px rgba(124, 58, 237, 0.23);
  font-size: 16px;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-ok-goal-list {
  display: grid;
  gap: 8px;
}

body.pathway-kids.session-started .kid-ok-goal-list button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px;
  border: 0;
  border-radius: 16px;
  color: var(--kid-ok-ink);
  background: transparent;
  text-align: left;
}

body.pathway-kids.session-started .kid-ok-goal-list button + button {
  border-top: 1px solid rgba(124, 58, 237, 0.09);
  border-radius: 0;
}

body.pathway-kids.session-started .kid-ok-goal-list span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #f1e7ff;
  color: #7c3aed;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-ok-goal-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--kid-ok-ink);
  font-size: 14px;
  line-height: 1.18;
  font-weight: 900;
}

body.pathway-kids.session-started .kid-ok-goal-list small {
  display: inline-grid;
  min-width: 64px;
  min-height: 34px;
  place-items: center;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 13px;
  background: #fff;
  color: #8b5cf6;
}

body.pathway-kids.session-started .kid-ok-goal-list .is-done span {
  color: #fff;
  background: #22c55e;
}

body.pathway-kids.session-started .kid-ok-steps {
  grid-area: steps;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

body.pathway-kids.session-started .kid-ok-step {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 278px;
  padding: 26px 22px 24px;
  border: 1px solid rgba(124, 58, 237, 0.11);
  border-radius: 24px;
  color: var(--kid-ok-ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(88, 28, 135, 0.09);
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.pathway-kids.session-started .kid-ok-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 126px;
  right: -26px;
  width: 28px;
  border-top: 3px dotted #a78bfa;
}

body.pathway-kids.session-started .kid-ok-step b {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 50%;
  color: #fff;
  font-size: 27px;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-ok-step span {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  margin: 0 0 16px;
  border-radius: 24px;
  background: #ede9fe;
  font-size: 42px;
}

body.pathway-kids.session-started .kid-ok-step strong {
  min-height: 25px;
  color: var(--kid-ok-ink);
  font-size: 20px;
  line-height: 1.13;
  font-weight: 950;
}

body.pathway-kids.session-started .kid-ok-step small {
  max-width: 210px;
  margin-top: 8px;
  color: #4c316c;
  font-size: 15px;
  line-height: 1.23;
  font-weight: 800;
}

body.pathway-kids.session-started .kid-ok-step i {
  width: 46%;
  height: 7px;
  margin-top: auto;
  background: linear-gradient(90deg, #a78bfa, #c4b5fd);
}

body.pathway-kids.session-started .kid-ok-step.violet b,
body.pathway-kids.session-started .kid-ok-step.violet i {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
}

body.pathway-kids.session-started .kid-ok-step.pink b,
body.pathway-kids.session-started .kid-ok-step.pink i {
  background: linear-gradient(135deg, #ec4899, #f472b6);
}

body.pathway-kids.session-started .kid-ok-step.coral b,
body.pathway-kids.session-started .kid-ok-step.coral i {
  background: linear-gradient(135deg, #fb7185, #fb923c);
}

body.pathway-kids.session-started .kid-ok-step.orange b,
body.pathway-kids.session-started .kid-ok-step.orange i {
  background: linear-gradient(135deg, #fb923c, #facc15);
}

body.pathway-kids.session-started .kid-ok-tip {
  grid-area: tip;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 0;
  padding: 14px 22px;
  border-radius: 18px;
  color: #5b21b6;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.08);
  font-size: 15px;
  font-weight: 800;
}

@media (max-width: 1280px) {
  body.pathway-kids.session-started main {
    width: min(100% - 316px, 1180px) !important;
    margin-left: 294px !important;
  }

  body.pathway-kids.session-started .kid-ok-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "side"
      "steps"
      "tip";
  }

  body.pathway-kids.session-started .kid-ok-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  body.pathway-kids.session-started .topbar {
    transform: translateX(-110%) !important;
    transition: transform 0.25s ease !important;
  }

  body.pathway-kids.session-started.mobile-menu-open .topbar {
    transform: translateX(0) !important;
  }

  body.pathway-kids.session-started #mobileMenuToggle {
    display: inline-grid !important;
    position: fixed !important;
    left: 16px !important;
    top: 16px !important;
    z-index: 80 !important;
  }

  body.pathway-kids.session-started main {
    width: min(100% - 28px, 880px) !important;
    margin: 82px auto 44px !important;
  }

  body.pathway-kids.session-started .kid-ok-header {
    align-items: stretch;
    flex-direction: column;
  }

  body.pathway-kids.session-started .kid-ok-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  body.pathway-kids.session-started .kid-ok-hero {
    grid-template-columns: 1fr;
  }

  body.pathway-kids.session-started .kid-ok-hero-copy {
    padding: 32px 24px 10px;
  }

  body.pathway-kids.session-started .kid-ok-hero-art {
    min-height: 260px;
  }

  body.pathway-kids.session-started .kid-ok-steps,
  body.pathway-kids.session-started .kid-ok-side {
    grid-template-columns: 1fr;
  }

  body.pathway-kids.session-started .kid-ok-step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 620px) {
  body.pathway-kids.session-started main {
    width: min(100% - 20px, 520px) !important;
  }

  body.pathway-kids.session-started .kid-ok-header {
    min-height: auto;
    gap: 14px;
    padding-bottom: 14px;
  }

  body.pathway-kids.session-started .kid-ok-search {
    height: 54px;
    border-radius: 18px;
  }

  body.pathway-kids.session-started .kid-ok-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  body.pathway-kids.session-started .kid-ok-profile {
    width: 100%;
    justify-content: space-between;
  }

  body.pathway-kids.session-started .kid-ok-hero {
    min-height: auto;
    border-radius: 22px;
  }

  body.pathway-kids.session-started .kid-ok-hero h1 {
    font-size: 36px;
  }

  body.pathway-kids.session-started .kid-ok-primary,
  body.pathway-kids.session-started .kid-ok-secondary {
    width: 100%;
  }

  body.pathway-kids.session-started .kid-ok-steps {
    gap: 14px;
  }

  body.pathway-kids.session-started .kid-ok-step {
    min-height: 230px;
  }
}

/* Ajustement dashboard enfant : rendu plus proche de la maquette fournie. */
body.pathway-kids.session-started {
  --kid-ok-ink: #29104f;
  --kid-ok-muted: #705a8d;
  --kid-ok-purple: #7c3aed;
  --kid-ok-pink: #ec4899;
  --kid-ok-glow: rgba(124, 58, 237, 0.16);
  background:
    radial-gradient(circle at 72% 10%, rgba(236, 72, 153, 0.08), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fbf9ff 46%, #f7f1ff 100%) !important;
}

body.pathway-kids.session-started .topbar {
  width: 260px !important;
  padding: 28px 18px 24px !important;
  background:
    radial-gradient(circle at 28% 88%, rgba(255, 255, 255, 0.22), transparent 24%),
    linear-gradient(180deg, #9b5cff 0%, #7c3aed 42%, #5b21b6 100%) !important;
}

body.pathway-kids.session-started .topbar::after {
  content: "";
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  height: 118px !important;
  border-radius: 28px !important;
  background:
    url("assets/images/enfants/vacuum_robot.png") center bottom / 92px auto no-repeat,
    radial-gradient(ellipse at bottom, rgba(196, 181, 253, 0.72), rgba(255,255,255,.12) 58%, transparent 59%) !important;
}

body.pathway-kids.session-started .topbar .brand-title {
  min-height: 255px !important;
  padding: 18px 18px 26px !important;
  border-radius: 30px !important;
}

body.pathway-kids.session-started .topbar .brand-logo {
  width: 106px !important;
  height: 106px !important;
  margin: 0 auto 10px !important;
}

body.pathway-kids.session-started .topbar .brand-title h1 {
  max-width: 205px !important;
  font-size: 26px !important;
  line-height: 1.16 !important;
}

body.pathway-kids.session-started .steps {
  gap: 10px !important;
  padding-bottom: 148px !important;
}

body.pathway-kids.session-started .step-tab {
  min-height: 50px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

body.pathway-kids.session-started main {
  width: min(1500px, calc(100% - 304px)) !important;
  margin: 26px 24px 48px 284px !important;
}

body.pathway-kids.session-started .kid-ok-header {
  min-height: 78px !important;
  margin-bottom: 18px !important;
  padding-bottom: 20px !important;
}

body.pathway-kids.session-started .kid-ok-search {
  width: min(560px, 100%) !important;
  height: 56px !important;
  border-radius: 24px !important;
}

body.pathway-kids.session-started .kid-ok-layout {
  grid-template-columns: minmax(0, 1fr) 370px !important;
  grid-template-areas:
    "hero side"
    "steps side"
    "tip side" !important;
  gap: 22px !important;
}

body.pathway-kids.session-started .kid-ok-hero {
  min-height: 390px !important;
  grid-template-columns: minmax(0, 0.62fr) minmax(355px, 0.38fr) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,.05) 48%, rgba(255,255,255,.06)),
    radial-gradient(circle at 73% 30%, rgba(124, 58, 237, 0.22), transparent 27%),
    radial-gradient(circle at 88% 38%, rgba(255, 255, 255, 0.65), transparent 25%),
    linear-gradient(135deg, #fff1fb 0%, #efdfff 44%, #c7b9ff 100%) !important;
  box-shadow: 0 24px 62px rgba(88, 28, 135, 0.14) !important;
}

body.pathway-kids.session-started .kid-ok-hero::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -86px;
  width: 58%;
  height: 210px;
  border-radius: 50% 0 0 0;
  background: linear-gradient(180deg, rgba(124, 58, 237, .16), rgba(124, 58, 237, .04));
  pointer-events: none;
}

body.pathway-kids.session-started .kid-ok-hero-copy {
  padding: 38px 26px 34px 40px !important;
}

body.pathway-kids.session-started .kid-ok-kicker {
  margin-bottom: 18px !important;
  padding: 10px 17px !important;
  color: #9a5b00 !important;
  background: #fff5d7 !important;
}

body.pathway-kids.session-started .kid-ok-hero h1 {
  max-width: 620px !important;
  margin-bottom: 20px !important;
  color: #2b1052 !important;
  font-size: clamp(42px, 4vw, 58px) !important;
  line-height: 1.02 !important;
}

body.pathway-kids.session-started .kid-ok-hero h1 strong {
  color: #a855f7 !important;
  text-shadow: 0 8px 24px rgba(168, 85, 247, 0.16);
}

body.pathway-kids.session-started .kid-ok-pills span {
  background: rgba(255, 255, 255, 0.9) !important;
}

body.pathway-kids.session-started .kid-ok-primary {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
}

body.pathway-kids.session-started .kid-ok-secondary {
  color: #581c87 !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

body.pathway-kids.session-started .kid-ok-hero-art {
  min-height: 390px !important;
}

body.pathway-kids.session-started .kid-ok-hero-art::before {
  inset: auto 0 0 auto !important;
  right: -36px !important;
  bottom: -72px !important;
  width: 115% !important;
  height: 72% !important;
  border-radius: 70% 0 0 0 !important;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,.56) 0 5px, transparent 6px),
    radial-gradient(circle at 62% 23%, rgba(255,255,255,.42) 0 4px, transparent 5px),
    linear-gradient(135deg, rgba(124,58,237,.18), rgba(236,72,153,.08)) !important;
}

body.pathway-kids.session-started .kid-ok-hero-art img {
  right: 12px !important;
  bottom: 5px !important;
  width: min(410px, 96%) !important;
  height: 360px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 24px 36px rgba(53, 16, 84, 0.18)) !important;
}

body.pathway-kids.session-started .kid-ok-moon {
  width: 92px !important;
  height: 92px !important;
  top: 36px !important;
  right: 130px !important;
  opacity: .38 !important;
}

body.pathway-kids.session-started .kid-ok-base {
  right: 94px !important;
  top: 112px !important;
  width: 190px !important;
  height: 82px !important;
  opacity: .48 !important;
}

body.pathway-kids.session-started .kid-ok-rover {
  left: 20px !important;
  bottom: 62px !important;
  opacity: .78 !important;
}

body.pathway-kids.session-started .kid-ok-side {
  gap: 18px !important;
}

body.pathway-kids.session-started .kid-ok-card {
  border-radius: 25px !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

body.pathway-kids.session-started .kid-ok-steps {
  gap: 22px !important;
}

body.pathway-kids.session-started .kid-ok-step {
  min-height: 265px !important;
  padding: 24px 20px 22px !important;
  border-radius: 24px !important;
}

body.pathway-kids.session-started .kid-ok-step strong {
  font-size: 20px !important;
}

body.pathway-kids.session-started .kid-ok-step small {
  max-width: 180px !important;
}

body.pathway-kids.session-started .kid-ok-tip {
  background: rgba(255, 255, 255, 0.78) !important;
}

body.pathway-kids.session-started .panel[data-panel="1"]:not(.diagnostic-open) > :not([data-kids-hero]) {
  display: none !important;
}

@media (max-width: 1280px) {
  body.pathway-kids.session-started main {
    width: min(100% - 300px, 1120px) !important;
    margin-left: 280px !important;
  }

  body.pathway-kids.session-started .kid-ok-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "hero"
      "side"
      "steps"
      "tip" !important;
  }

  body.pathway-kids.session-started .kid-ok-side {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  body.pathway-kids.session-started main {
    width: min(100% - 24px, 880px) !important;
    margin: 82px auto 42px !important;
  }

  body.pathway-kids.session-started .kid-ok-hero {
    grid-template-columns: 1fr !important;
  }

  body.pathway-kids.session-started .kid-ok-hero-copy {
    padding: 30px 22px 10px !important;
  }

  body.pathway-kids.session-started .kid-ok-hero-art {
    min-height: 300px !important;
  }

  body.pathway-kids.session-started .kid-ok-side,
  body.pathway-kids.session-started .kid-ok-steps {
    grid-template-columns: 1fr !important;
  }
}

/* Correctif anti-deformation : la page enfant garde une grille stable sur bureau,
   puis se replie proprement sur tablette et telephone. */
body.pathway-kids.session-started:not(.module-detail-open) {
  overflow-x: hidden !important;
}

body.pathway-kids.session-started:not(.module-detail-open) #internalNavigation {
  display: none !important;
}

body.pathway-kids.session-started:not(.module-detail-open) main {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 24px 24px 48px 284px !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .panel[data-panel="1"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-dashboard {
  width: 100% !important;
  max-width: 1500px !important;
  min-width: 0 !important;
  margin: 0 auto 44px !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-header {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 560px) auto !important;
  align-items: center !important;
  gap: 16px !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-actions {
  min-width: 0 !important;
  justify-content: end !important;
  flex-wrap: wrap !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-layout {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(305px, 26vw, 370px) !important;
  grid-template-areas:
    "hero side"
    "steps side"
    "tip side" !important;
  gap: clamp(16px, 1.8vw, 24px) !important;
  align-items: start !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero {
  min-width: 0 !important;
  min-height: clamp(330px, 30vw, 430px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 38%) !important;
  overflow: hidden !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero-copy {
  min-width: 0 !important;
  padding: clamp(26px, 3vw, 42px) clamp(20px, 2.5vw, 42px) !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero h1 {
  max-width: 620px !important;
  color: #ffffff !important;
  font-size: clamp(34px, 3.2vw, 54px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-shadow: 0 12px 28px rgba(48, 12, 88, 0.24) !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero h1 strong {
  display: block !important;
  color: #ffe7ff !important;
  text-shadow: 0 12px 30px rgba(76, 29, 149, 0.25) !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero p {
  max-width: 560px !important;
  color: rgba(255, 255, 255, 0.94) !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-pills,
body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero-actions {
  max-width: 680px !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero-art {
  min-width: 0 !important;
  min-height: clamp(300px, 30vw, 430px) !important;
  overflow: hidden !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero-art img {
  right: clamp(0px, 1vw, 18px) !important;
  bottom: 0 !important;
  width: min(100%, 430px) !important;
  height: min(100%, 390px) !important;
  max-height: calc(100% - 10px) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-side,
body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-steps {
  min-width: 0 !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-card,
body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-step {
  min-width: 0 !important;
  overflow: hidden !important;
}

body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-step strong,
body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-step small,
body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-card,
body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-goal-list strong {
  overflow-wrap: anywhere !important;
}

@media (max-width: 1180px) {
  body.pathway-kids.session-started:not(.module-detail-open) main {
    margin: 22px 18px 44px 270px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-header {
    grid-template-columns: 1fr !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-search {
    width: 100% !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-actions {
    justify-content: space-between !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "hero"
      "side"
      "steps"
      "tip" !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-side {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 34%) !important;
  }
}

@media (max-width: 980px) {
  body.pathway-kids.session-started:not(.module-detail-open) .topbar {
    transform: translateX(-112%) !important;
  }

  body.pathway-kids.session-started.mobile-menu-open:not(.module-detail-open) .topbar {
    transform: translateX(0) !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) main {
    width: auto !important;
    max-width: none !important;
    margin: 78px 12px 40px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-header {
    gap: 12px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 52px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-profile {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-profile strong,
  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-profile small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero-copy {
    padding: 28px 22px 10px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero h1 {
    font-size: clamp(30px, 9vw, 44px) !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero-art {
    min-height: 260px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero-art img {
    left: 50% !important;
    right: auto !important;
    width: min(76vw, 330px) !important;
    height: 250px !important;
    transform: translateX(-50%) !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-side,
  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-steps {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body.pathway-kids.session-started:not(.module-detail-open) main {
    margin: 74px 10px 36px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-search {
    height: 52px !important;
    border-radius: 20px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-actions {
    grid-template-columns: repeat(3, 46px) minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-profile {
    min-height: 50px !important;
    padding: 6px 10px 6px 6px !important;
    border-radius: 18px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-avatar {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero {
    border-radius: 24px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-kicker {
    font-size: 13px !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-pills {
    grid-template-columns: 1fr !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-primary,
  body.pathway-kids.session-started:not(.module-detail-open) .kid-ok-secondary {
    width: 100% !important;
    min-height: 50px !important;
  }
}

/* Vitrine RFC06 avant demarrage de session */
body:not(.session-started) {
  background:
    radial-gradient(circle at 10% 0%, rgba(188, 150, 230, .28), transparent 30%),
    radial-gradient(circle at 96% 10%, rgba(255, 209, 102, .20), transparent 34%),
    linear-gradient(135deg, #fff8ff 0%, #ffffff 48%, #fff6eb 100%) !important;
}

body:not(.session-started) .topbar {
  display: none !important;
}

body:not(.session-started) main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(14px, 2vw, 28px) !important;
}

body:not(.session-started) .session-card.vitrine-home {
  display: block !important;
  width: min(100%, 1540px) !important;
  max-width: 1540px !important;
  min-height: 0 !important;
  margin: 0 auto 48px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(93, 38, 132, .12) !important;
  border-radius: 34px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 30px 90px rgba(59, 19, 86, .16) !important;
}

body:not(.session-started) .session-card.vitrine-home::before,
body:not(.session-started) .session-card.vitrine-home::after {
  display: none !important;
}

body:not(.session-started) .vitrine-nav {
  position: sticky;
  top: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(93, 38, 132, .10);
  border-radius: 26px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 44px rgba(59, 19, 86, .10);
  backdrop-filter: blur(18px);
}

body:not(.session-started) .vitrine-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  color: #2d0e45;
  text-decoration: none;
}

body:not(.session-started) .vitrine-brand img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(59, 19, 86, .12);
}

body:not(.session-started) .vitrine-brand strong,
body:not(.session-started) .vitrine-brand small {
  display: block;
  line-height: 1.15;
}

body:not(.session-started) .vitrine-brand strong {
  max-width: 250px;
  font-size: 1rem;
  font-weight: 900;
}

body:not(.session-started) .vitrine-brand small {
  margin-top: 4px;
  color: #7a6688;
  font-size: .78rem;
  font-weight: 800;
}

body:not(.session-started) .vitrine-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
}

body:not(.session-started) .vitrine-links a,
body:not(.session-started) .vitrine-start-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: #3a1658;
  font-weight: 900;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

body:not(.session-started) .vitrine-links a:hover {
  background: #f4ebfb;
  transform: translateY(-1px);
}

body:not(.session-started) .vitrine-start-link {
  color: #fff;
  background: linear-gradient(135deg, #5a1b82, #8d3cc7);
  box-shadow: 0 14px 28px rgba(91, 28, 130, .24);
}

body:not(.session-started) .vitrine-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .78fr);
  grid-template-areas:
    "copy media"
    "copy form";
  gap: 24px 34px;
  padding: clamp(26px, 4vw, 64px);
  background:
    radial-gradient(circle at 20% 14%, rgba(238, 222, 255, .86), transparent 34%),
    radial-gradient(circle at 88% 22%, rgba(255, 209, 102, .18), transparent 30%),
    linear-gradient(135deg, #fff 0%, #fffafd 56%, #fff7ed 100%);
}

body:not(.session-started) .vitrine-hero-copy {
  grid-area: copy !important;
  align-self: center !important;
  padding: 0 !important;
}

body:not(.session-started) .vitrine-hero-copy .eyebrow,
body:not(.session-started) .vitrine-section-label,
body:not(.session-started) .vitrine-form-kicker {
  width: fit-content;
  margin: 0 0 14px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #5b1d84;
  background: #f2e5ff;
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .03em;
  text-transform: uppercase;
}

body:not(.session-started) .vitrine-hero-copy h2 {
  max-width: 760px !important;
  margin: 0 !important;
  color: #260936 !important;
  font-size: clamp(2.6rem, 5.2vw, 5.6rem) !important;
  line-height: .96 !important;
  letter-spacing: 0 !important;
}

body:not(.session-started) .vitrine-hero-copy > p {
  max-width: 700px !important;
  margin: 24px 0 0 !important;
  color: #6b5a78 !important;
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  line-height: 1.6 !important;
  font-weight: 750 !important;
}

body:not(.session-started) .vitrine-hero-copy .landing-benefits {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0 !important;
}

body:not(.session-started) .vitrine-hero-copy .landing-benefits span {
  padding: 10px 14px !important;
  border: 1px solid rgba(91, 28, 130, .14) !important;
  border-radius: 999px !important;
  color: #4a1d6e !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(59, 19, 86, .06) !important;
}

body:not(.session-started) .vitrine-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

body:not(.session-started) .vitrine-primary,
body:not(.session-started) .vitrine-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 16px;
  font-weight: 950;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

body:not(.session-started) .vitrine-primary {
  color: #2d0e45;
  background: #ffd166;
  box-shadow: 0 16px 28px rgba(180, 116, 0, .20);
}

body:not(.session-started) .vitrine-secondary {
  color: #4a1d6e;
  background: #fff;
  border: 1px solid rgba(91, 28, 130, .16);
}

body:not(.session-started) .vitrine-primary:hover,
body:not(.session-started) .vitrine-secondary:hover,
body:not(.session-started) .vitrine-card-grid article:hover,
body:not(.session-started) .vitrine-impact-grid article:hover {
  transform: translateY(-3px);
}

body:not(.session-started) .vitrine-hero-media {
  grid-area: media !important;
  min-height: clamp(280px, 26vw, 420px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: #260936 !important;
  box-shadow: 0 22px 54px rgba(59, 19, 86, .18) !important;
}

body:not(.session-started) .vitrine-hero-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

body:not(.session-started) .vitrine-session-form {
  grid-area: form !important;
  align-self: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(24px, 2.8vw, 36px) !important;
  border: 1px solid rgba(91, 28, 130, .12) !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 22px 56px rgba(59, 19, 86, .10) !important;
}

body:not(.session-started) .vitrine-session-form::before,
body:not(.session-started) .vitrine-session-form::after {
  display: none !important;
}

body:not(.session-started) .vitrine-session-form h3 {
  margin: 0 0 8px;
  color: #260936;
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  line-height: 1.1;
}

body:not(.session-started) .vitrine-session-form > p:not(.session-error):not(.vitrine-form-kicker) {
  margin: 0 0 22px;
  color: #81718e;
  font-weight: 750;
}

body:not(.session-started) .vitrine-session-form label {
  color: #32104d;
  font-weight: 900;
}

body:not(.session-started) .vitrine-session-form input,
body:not(.session-started) .vitrine-session-form select {
  min-height: 56px !important;
  border-radius: 16px !important;
  font-size: 1rem !important;
}

body:not(.session-started) .vitrine-session-form .primary-action {
  min-height: 58px !important;
  border-radius: 17px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #5b1b82, #8a35bf) !important;
  box-shadow: 0 18px 32px rgba(91, 28, 130, .26) !important;
}

body:not(.session-started) .vitrine-section {
  padding: clamp(30px, 4vw, 64px);
  border-top: 1px solid rgba(91, 28, 130, .08);
}

body:not(.session-started) .vitrine-section h3 {
  margin: 0;
  color: #260936;
  font-size: clamp(2rem, 3.2vw, 3.6rem);
  line-height: 1.02;
}

body:not(.session-started) .vitrine-section p {
  color: #6b5a78;
  font-weight: 720;
  line-height: 1.62;
}

body:not(.session-started) .vitrine-mission {
  display: grid;
  grid-template-columns: minmax(260px, .52fr) 1fr;
  gap: 28px;
  align-items: center;
  background: #fff;
}

body:not(.session-started) .vitrine-mission > p {
  margin: 0;
  font-size: clamp(1.05rem, 1.3vw, 1.28rem);
}

body:not(.session-started) .vitrine-impact-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body:not(.session-started) .vitrine-impact-grid article,
body:not(.session-started) .vitrine-card-grid article {
  border: 1px solid rgba(91, 28, 130, .11);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(59, 19, 86, .08);
  transition: transform .22s ease, box-shadow .22s ease;
}

body:not(.session-started) .vitrine-impact-grid article {
  padding: 26px;
  text-align: center;
}

body:not(.session-started) .vitrine-impact-grid strong {
  display: block;
  color: #5a1b82;
  font-size: clamp(2.4rem, 4vw, 4.4rem);
  line-height: 1;
  font-weight: 950;
}

body:not(.session-started) .vitrine-impact-grid span {
  display: block;
  margin-top: 8px;
  color: #8b7898;
  font-weight: 900;
}

body:not(.session-started) .vitrine-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

body:not(.session-started) .vitrine-section-head a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  color: #4a1d6e;
  background: #f5ecff;
  font-weight: 950;
  text-decoration: none;
}

body:not(.session-started) .vitrine-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

body:not(.session-started) .vitrine-card-grid article {
  min-height: 250px;
  padding: 26px;
  background:
    radial-gradient(circle at 95% 0%, rgba(255, 209, 102, .24), transparent 34%),
    linear-gradient(145deg, #ffffff, #fbf7ff);
}

body:not(.session-started) .vitrine-card-grid article span {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #5a1b82, #b147c9);
  font-weight: 950;
}

body:not(.session-started) .vitrine-card-grid h4 {
  margin: 22px 0 10px;
  color: #260936;
  font-size: 1.45rem;
  line-height: 1.12;
}

body:not(.session-started) .vitrine-platform {
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  background: linear-gradient(135deg, #fff8ef, #fff);
}

body:not(.session-started) .vitrine-platform .learning-path-animation {
  width: 100% !important;
  min-height: 340px !important;
  margin: 0 !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 50px rgba(59, 19, 86, .10) !important;
}

body:not(.session-started) .vitrine-platform .landing-journey-preview {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 24px 0 0 !important;
}

body:not(.session-started) .vitrine-platform .landing-journey-preview article {
  margin: 0 !important;
  min-height: 0 !important;
}

body:not(.session-started) .vitrine-footer {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px;
  margin: 0 !important;
  padding: 22px clamp(26px, 4vw, 64px) 34px !important;
  border-top: 1px solid rgba(91, 28, 130, .08);
  background: #fff;
}

body:not(.session-started) .vitrine-footer span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5f4e6c;
  font-weight: 850;
}

body:not(.session-started) .vitrine-footer span::before {
  content: "✓";
  color: #d6a21a;
  font-weight: 950;
}

@media (max-width: 1180px) {
  body:not(.session-started) .vitrine-links {
    display: none;
  }

  body:not(.session-started) .vitrine-hero,
  body:not(.session-started) .vitrine-mission,
  body:not(.session-started) .vitrine-platform {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  body:not(.session-started) .vitrine-hero-copy,
  body:not(.session-started) .vitrine-hero-media,
  body:not(.session-started) .vitrine-session-form {
    grid-area: auto !important;
  }

  body:not(.session-started) .vitrine-card-grid,
  body:not(.session-started) .vitrine-impact-grid,
  body:not(.session-started) .vitrine-footer {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 720px) {
  body:not(.session-started) main {
    padding: 10px !important;
  }

  body:not(.session-started) .session-card.vitrine-home {
    border-radius: 24px !important;
  }

  body:not(.session-started) .vitrine-nav {
    position: relative;
    top: auto;
    align-items: flex-start;
    margin: 10px;
    border-radius: 20px;
  }

  body:not(.session-started) .vitrine-brand {
    min-width: 0;
  }

  body:not(.session-started) .vitrine-brand img {
    width: 48px;
    height: 48px;
  }

  body:not(.session-started) .vitrine-brand strong {
    max-width: 170px;
    font-size: .9rem;
  }

  body:not(.session-started) .vitrine-start-link {
    min-height: 40px;
    padding: 0 12px;
    font-size: .9rem;
  }

  body:not(.session-started) .vitrine-hero,
  body:not(.session-started) .vitrine-section {
    padding: 22px 16px;
  }

  body:not(.session-started) .vitrine-hero-copy h2 {
    font-size: clamp(2.2rem, 12vw, 3.25rem) !important;
  }

  body:not(.session-started) .vitrine-hero-media {
    min-height: 240px !important;
  }

  body:not(.session-started) .vitrine-card-grid,
  body:not(.session-started) .vitrine-impact-grid,
  body:not(.session-started) .vitrine-footer {
    grid-template-columns: 1fr !important;
  }

  body:not(.session-started) .vitrine-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Correctif vitrine prioritaire - doit rester en fin de fichier */
body:not(.session-started) {
  min-height: 100vh !important;
  background: linear-gradient(135deg, #f4f1fb, #f8f5ff, #f7f2f8) !important;
}

body:not(.session-started) .topbar,
body:not(.session-started) #mobileMenuToggle,
body:not(.session-started) #internalNavigation {
  display: none !important;
}

body:not(.session-started) main {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.session-started) .session-card.vitrine-home {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.session-started) .session-card.vitrine-home::before,
body:not(.session-started) .session-card.vitrine-home::after,
body:not(.session-started) .vitrine-nav,
body:not(.session-started) .vitrine-hero,
body:not(.session-started) .vitrine-section,
body:not(.session-started) .vitrine-footer {
  display: none !important;
}

body:not(.session-started) .vitrine-ref-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 80 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  min-height: 76px !important;
  padding: 14px clamp(22px, 3vw, 42px) !important;
  background: rgba(255, 255, 255, .48) !important;
  border-bottom: 1px solid rgba(109, 91, 168, .12) !important;
  box-shadow: 0 10px 34px rgba(61, 37, 89, .08) !important;
  backdrop-filter: blur(14px) !important;
}

body:not(.session-started) .vitrine-ref-brands {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}

body:not(.session-started) .vitrine-ref-brand {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 54px !important;
  padding: 8px 16px !important;
  border-radius: 15px !important;
  line-height: 1.05 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(26, 31, 78, .18) !important;
}

body:not(.session-started) .vitrine-ref-brand span {
  color: rgba(255,255,255,.82) !important;
  font-size: .58rem !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

body:not(.session-started) .vitrine-ref-brand strong {
  color: #fff !important;
  font-size: 1.26rem !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body:not(.session-started) .vitrine-ref-brand-rfc {
  background: linear-gradient(135deg, #171b55, #243897) !important;
}

body:not(.session-started) .vitrine-ref-brand-platform {
  background: linear-gradient(135deg, #8e79ff, #6d5ba8) !important;
}

body:not(.session-started) .vitrine-ref-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(12px, 2vw, 30px) !important;
  min-width: 0 !important;
}

body:not(.session-started) .vitrine-ref-nav a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  color: #fff !important;
  border-bottom: 0 !important;
  background: rgba(255,255,255,.16) !important;
  text-decoration: none !important;
  font-size: .96rem !important;
  font-weight: 800 !important;
  transition: transform .22s ease, background .22s ease !important;
}

body:not(.session-started) .vitrine-ref-nav a:hover {
  background: rgba(255,255,255,.28) !important;
  transform: translateY(-2px) !important;
}

body:not(.session-started) .vitrine-ref-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px) !important;
  align-items: center !important;
  gap: 34px !important;
  min-height: 100vh !important;
  padding: 120px clamp(28px, 5.5vw, 90px) 160px !important;
  overflow: hidden !important;
  background: #4b3189 !important;
}

body:not(.session-started) .vitrine-ref-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    linear-gradient(rgba(40, 19, 74, .28), rgba(18, 11, 34, .46)),
    url("assets/vitrine-rfc-background.png") center / cover no-repeat !important;
  transform: scale(1.02) !important;
  animation: vitrineRefZoom 18s ease-in-out infinite alternate !important;
}

body:not(.session-started) .vitrine-ref-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 78% 16%, rgba(240, 200, 120, .35), transparent 25%),
    linear-gradient(90deg, rgba(70, 43, 130, .88) 0%, rgba(99, 76, 160, .62) 50%, rgba(59, 33, 99, .35) 100%) !important;
}

body:not(.session-started) .vitrine-ref-content,
body:not(.session-started) .vitrine-ref-form,
body:not(.session-started) .vitrine-ref-cards,
body:not(.session-started) #sessionSummary {
  position: relative !important;
  z-index: 2 !important;
}

body:not(.session-started) .vitrine-ref-content {
  max-width: 680px !important;
  color: #fff !important;
}

body:not(.session-started) .vitrine-ref-subtitle {
  margin: 0 0 14px !important;
  color: rgba(255,255,255,.88) !important;
  font-size: .95rem !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

body:not(.session-started) .vitrine-ref-content h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(4rem, 6.6vw, 6.8rem) !important;
  line-height: .94 !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
  text-shadow: 0 8px 30px rgba(27, 12, 48, .28) !important;
}

body:not(.session-started) .vitrine-ref-description {
  max-width: 610px !important;
  margin: 28px 0 34px !important;
  color: rgba(255,255,255,.90) !important;
  font-size: clamp(1.1rem, 1.45vw, 1.35rem) !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
}

body:not(.session-started) .vitrine-ref-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 58px !important;
  padding: 0 34px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(90deg, #9b8cff, #f0c878) !important;
  box-shadow: 0 18px 38px rgba(25, 14, 44, .24) !important;
  text-decoration: none !important;
  font-weight: 850 !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

body:not(.session-started) .vitrine-ref-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 48px rgba(25, 14, 44, .32) !important;
}

body:not(.session-started) .vitrine-ref-form {
  align-self: end !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 34px !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 28px 70px rgba(24, 13, 44, .24) !important;
  backdrop-filter: blur(16px) !important;
}

body:not(.session-started) .vitrine-ref-form::before,
body:not(.session-started) .vitrine-ref-form::after {
  display: none !important;
}

body:not(.session-started) .vitrine-ref-form-kicker {
  display: inline-flex !important;
  margin: 0 0 12px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  color: #6d5ba8 !important;
  background: #f3edff !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

body:not(.session-started) .vitrine-ref-form h3 {
  margin: 0 0 10px !important;
  color: #2c1143 !important;
  font-size: 1.75rem !important;
  line-height: 1.1 !important;
}

body:not(.session-started) .vitrine-ref-form > p:not(.session-error):not(.vitrine-ref-form-kicker) {
  margin: 0 0 20px !important;
  color: #7c708d !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
}

body:not(.session-started) .vitrine-ref-form label {
  display: grid !important;
  gap: 8px !important;
  margin-top: 14px !important;
  color: #32104d !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
}

body:not(.session-started) .vitrine-ref-form input,
body:not(.session-started) .vitrine-ref-form select {
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border: 2px solid #e5d6ef !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: #32104d !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

body:not(.session-started) .vitrine-ref-form .primary-action {
  width: 100% !important;
  min-height: 60px !important;
  margin-top: 20px !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: #fff !important;
  background: linear-gradient(90deg, #9b8cff, #6d5ba8) !important;
  box-shadow: 0 16px 30px rgba(109, 91, 168, .32) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

body:not(.session-started) .vitrine-ref-cards {
  position: absolute !important;
  right: clamp(26px, 5vw, 80px) !important;
  bottom: 44px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 200px) !important;
  gap: 18px !important;
}

body:not(.session-started) .vitrine-ref-cards article {
  min-height: 132px !important;
  padding: 18px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 22px !important;
  color: #fff !important;
  background: rgba(255,255,255,.13) !important;
  box-shadow: 0 16px 38px rgba(22, 11, 39, .16) !important;
  backdrop-filter: blur(14px) !important;
}

body:not(.session-started) .vitrine-ref-cards h3 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: 1.12rem !important;
}

body:not(.session-started) .vitrine-ref-cards p {
  margin: 0 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: .86rem !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

body:not(.session-started) .vitrine-ref-platform {
  display: block !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 100px 60px !important;
  text-align: center !important;
}

body:not(.session-started) .vitrine-ref-section-kicker {
  margin: 0 0 10px !important;
  color: #9b8cff !important;
  font-size: .9rem !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

body:not(.session-started) .vitrine-ref-platform h3 {
  max-width: 800px !important;
  margin: 0 auto 14px !important;
  color: #6d5ba8 !important;
  font-size: clamp(2.4rem, 4vw, 3.7rem) !important;
  line-height: 1.08 !important;
}

body:not(.session-started) .vitrine-ref-lead {
  max-width: 680px !important;
  margin: 0 auto 55px !important;
  color: #666 !important;
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
  font-weight: 550 !important;
}

body:not(.session-started) .vitrine-ref-platform-cards {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px !important;
  margin-bottom: 54px !important;
}

body:not(.session-started) .vitrine-ref-platform-cards article {
  min-height: 235px !important;
  padding: 32px 26px !important;
  border: 1px solid rgba(109, 91, 168, .10) !important;
  border-radius: 24px !important;
  background: white !important;
  box-shadow: 0 8px 30px rgba(109, 91, 168, .10) !important;
  text-align: left !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

body:not(.session-started) .vitrine-ref-platform-cards article:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 45px rgba(109, 91, 168, .18) !important;
}

body:not(.session-started) .vitrine-ref-card-icon {
  margin-bottom: 16px !important;
  font-size: 2.8rem !important;
  line-height: 1 !important;
}

body:not(.session-started) .vitrine-ref-platform-cards h4 {
  margin: 0 0 10px !important;
  color: #333 !important;
  font-size: 1.2rem !important;
  line-height: 1.2 !important;
}

body:not(.session-started) .vitrine-ref-platform-cards p {
  margin: 0 !important;
  color: #777 !important;
  font-size: .92rem !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
}

body:not(.session-started) .vitrine-ref-subheading {
  margin: 50px 0 20px !important;
  color: #6d5ba8 !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
}

body:not(.session-started) .vitrine-ref-subjects {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 18px !important;
}

body:not(.session-started) .vitrine-ref-subjects span {
  display: grid !important;
  place-items: center !important;
  min-height: 86px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  color: #fff !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--subject) 88%, white 12%), var(--subject)) !important;
  box-shadow: 0 16px 32px color-mix(in srgb, var(--subject) 26%, transparent) !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  text-align: center !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}

body:not(.session-started) .vitrine-ref-subjects span:hover {
  transform: translateY(-4px) !important;
}

body:not(.session-started) .vitrine-ref-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 30px !important;
  margin-top: 56px !important;
  padding: 52px 45px !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #6d5ba8, #9b8cff) !important;
  text-align: left !important;
}

body:not(.session-started) .vitrine-ref-cta h3 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: clamp(1.8rem, 3vw, 2.3rem) !important;
}

body:not(.session-started) .vitrine-ref-cta p {
  margin: 0 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 1rem !important;
}

body:not(.session-started) .vitrine-ref-cta a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 56px !important;
  padding: 0 34px !important;
  border-radius: 999px !important;
  color: #6d5ba8 !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.13) !important;
  text-decoration: none !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

body:not(.session-started) .vitrine-ref-footer {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 30px 60px 42px !important;
  border-top: 1px solid rgba(109, 91, 168, .10) !important;
  background: rgba(255,255,255,.62) !important;
}

body:not(.session-started) .vitrine-ref-footer span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #666 !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  text-align: center !important;
}

body:not(.session-started) .vitrine-ref-footer span::before {
  content: "✓" !important;
  color: #6d5ba8 !important;
  font-weight: 950 !important;
}

@keyframes vitrineRefZoom {
  0% { transform: scale(1.02); }
  100% { transform: scale(1.09); }
}

@media (max-width: 1120px) {
  body:not(.session-started) .vitrine-ref-header {
    position: sticky !important;
    top: 0 !important;
    flex-wrap: wrap !important;
    background: rgba(91, 58, 147, .92) !important;
  }

  body:not(.session-started) .vitrine-ref-nav {
    width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }

  body:not(.session-started) .vitrine-ref-hero {
    grid-template-columns: 1fr !important;
    padding-top: 52px !important;
    padding-bottom: 44px !important;
  }

  body:not(.session-started) .vitrine-ref-cards {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-column: 1 / -1 !important;
  }

  body:not(.session-started) .vitrine-ref-platform-cards,
  body:not(.session-started) .vitrine-ref-subjects,
  body:not(.session-started) .vitrine-ref-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body:not(.session-started) .vitrine-ref-header {
    padding: 12px 14px !important;
  }

  body:not(.session-started) .vitrine-ref-brands {
    width: 100% !important;
  }

  body:not(.session-started) .vitrine-ref-brand {
    flex: 1 !important;
    min-height: 48px !important;
    padding: 8px 12px !important;
  }

  body:not(.session-started) .vitrine-ref-brand strong {
    font-size: 1rem !important;
  }

  body:not(.session-started) .vitrine-ref-nav a {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    font-size: .86rem !important;
  }

  body:not(.session-started) .vitrine-ref-hero {
    min-height: auto !important;
    padding: 34px 18px 28px !important;
  }

  body:not(.session-started) .vitrine-ref-content h2 {
    font-size: clamp(3rem, 17vw, 4.2rem) !important;
  }

  body:not(.session-started) .vitrine-ref-description {
    font-size: 1rem !important;
  }

  body:not(.session-started) .vitrine-ref-form {
    padding: 24px !important;
    border-radius: 24px !important;
  }

  body:not(.session-started) .vitrine-ref-cards,
  body:not(.session-started) .vitrine-ref-platform-cards,
  body:not(.session-started) .vitrine-ref-subjects,
  body:not(.session-started) .vitrine-ref-footer {
    grid-template-columns: 1fr !important;
  }

  body:not(.session-started) .vitrine-ref-platform {
    padding: 64px 20px !important;
  }

  body:not(.session-started) .vitrine-ref-cta {
    align-items: stretch !important;
    flex-direction: column !important;
    padding: 34px 24px !important;
    text-align: center !important;
  }
}
/* Page Contact RFC06 */
body:not(.session-started) .contact-page {
  width: min(100% - 56px, 1380px);
  margin: 0 auto;
  padding: 52px 0 72px;
  color: #2f1044;
}

body:not(.session-started) .contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .65fr);
  align-items: stretch;
  gap: 22px;
  margin-bottom: 24px;
}

body:not(.session-started) .contact-hero-copy,
body:not(.session-started) .contact-hero-card,
body:not(.session-started) .contact-details,
body:not(.session-started) .contact-form {
  border: 1px solid rgba(100, 43, 137, .12);
  box-shadow: 0 22px 55px rgba(67, 25, 101, .09);
}

body:not(.session-started) .contact-hero-copy {
  padding: clamp(34px, 5vw, 68px);
  border-radius: 34px;
  background: linear-gradient(135deg, #5b247c 0%, #7d3db0 58%, #9a62c0 100%);
}

body:not(.session-started) .contact-kicker,
body:not(.session-started) .contact-section-label {
  width: fit-content;
  margin: 0 0 14px;
  color: #6f2f98;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body:not(.session-started) .contact-kicker {
  padding: 7px 13px;
  border-radius: 999px;
  color: #3f1855;
  background: #ffdd82;
}

body:not(.session-started) .contact-hero h2 {
  max-width: 760px;
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(2.5rem, 5vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.04em;
}

body:not(.session-started) .contact-hero-copy > p:last-child {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: 1.06rem;
  line-height: 1.65;
}

body:not(.session-started) .contact-hero-card {
  display: flex;
  min-height: 310px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
  border-radius: 34px;
  background: linear-gradient(145deg, #fff4d5, #fffdf7);
}

body:not(.session-started) .contact-hero-card > span {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: auto;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: #f08c5b;
  font-size: 1.8rem;
}

body:not(.session-started) .contact-hero-card strong {
  max-width: 320px;
  font-size: 1.45rem;
  line-height: 1.15;
}

body:not(.session-started) .contact-hero-card p {
  margin: 10px 0 0;
  color: #725f79;
  line-height: 1.55;
}

body:not(.session-started) .contact-layout {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(480px, 1.28fr);
  gap: 24px;
}

body:not(.session-started) .contact-details,
body:not(.session-started) .contact-form {
  padding: clamp(28px, 4vw, 46px);
  border-radius: 32px;
  background: rgba(255, 255, 255, .94);
}

body:not(.session-started) .contact-details h3,
body:not(.session-started) .contact-form h3 {
  margin: 0;
  color: #321044;
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
}

body:not(.session-started) .contact-detail-list {
  display: grid;
  gap: 12px;
  margin: 30px 0;
}

body:not(.session-started) .contact-detail-list article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: #faf6fc;
}

body:not(.session-started) .contact-detail-list article > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: #7740a0;
  font-size: 1.15rem;
  font-weight: 900;
}

body:not(.session-started) .contact-detail-list strong { color: #42195a; }
body:not(.session-started) .contact-detail-list p {
  margin: 4px 0 0;
  color: #76657e;
  line-height: 1.5;
}

body:not(.session-started) .contact-workshops-link,
body:not(.session-started) .contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: #682c91;
  text-decoration: none;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

body:not(.session-started) .contact-form-heading > p:last-child {
  margin: 8px 0 26px;
  color: #7b6b82;
}

body:not(.session-started) .contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

body:not(.session-started) .contact-form label:not(.contact-consent) {
  display: grid;
  gap: 8px;
  color: #4c2b5d;
  font-size: .88rem;
  font-weight: 850;
}

body:not(.session-started) .contact-form input,
body:not(.session-started) .contact-form select,
body:not(.session-started) .contact-form textarea {
  width: 100%;
  border: 1px solid #ddcfe5;
  border-radius: 13px;
  padding: 13px 14px;
  color: #311143;
  background: #fff;
  font: inherit;
  outline: none;
}

body:not(.session-started) .contact-form input:focus,
body:not(.session-started) .contact-form select:focus,
body:not(.session-started) .contact-form textarea:focus {
  border-color: #8147aa;
  box-shadow: 0 0 0 4px rgba(129, 71, 170, .12);
}

body:not(.session-started) .contact-message-field { grid-column: 1 / -1; }
body:not(.session-started) .contact-form textarea { min-height: 150px; resize: vertical; }
body:not(.session-started) .contact-honeypot { position: absolute !important; left: -10000px !important; }

body:not(.session-started) .contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0;
  color: #716078;
  font-size: .82rem;
  line-height: 1.45;
}

body:not(.session-started) .contact-consent input { width: 18px; margin-top: 2px; }
body:not(.session-started) .contact-submit:disabled { cursor: wait; opacity: .65; }
body:not(.session-started) .contact-form-status { min-height: 24px; margin: 14px 0 0; color: #5c287d; font-weight: 800; }
body:not(.session-started) .contact-form-status.is-error { color: #a3293f; }
body:not(.session-started) .contact-form-status.is-success { color: #23734a; }

@media (max-width: 900px) {
  body:not(.session-started) .contact-page { width: calc(100% - 28px); padding-top: 28px; }
  body:not(.session-started) .contact-hero,
  body:not(.session-started) .contact-layout { grid-template-columns: 1fr; }
  body:not(.session-started) .contact-hero-card { min-height: 250px; }
}

@media (max-width: 600px) {
  body:not(.session-started) .contact-hero-copy,
  body:not(.session-started) .contact-hero-card,
  body:not(.session-started) .contact-details,
  body:not(.session-started) .contact-form { padding: 24px; border-radius: 24px; }
  body:not(.session-started) .contact-form-grid { grid-template-columns: 1fr; }
  body:not(.session-started) .contact-message-field { grid-column: auto; }
  body:not(.session-started) .contact-submit { width: 100%; }
}

/* Page Contact RFC06 - refonte chaleureuse */
body:not(.session-started) .contact-page {
  width: min(100% - 56px, 1420px);
  padding: 42px 0 80px;
}

body:not(.session-started) .contact-hero {
  grid-template-columns: minmax(420px, .9fr) minmax(450px, 1.1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
  margin: 0 0 38px;
}

body:not(.session-started) .contact-hero-copy {
  padding: clamp(24px, 3vw, 44px) 0 clamp(24px, 3vw, 44px) clamp(8px, 2vw, 28px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:not(.session-started) .contact-kicker {
  color: #5b3b12;
  background: rgba(255, 214, 107, .48);
}

body:not(.session-started) .contact-hero h2 {
  max-width: 650px;
  color: #321044;
  font-size: clamp(2.8rem, 5.2vw, 5.6rem);
  line-height: .97;
}

body:not(.session-started) .contact-hero h2 span { font-size: .72em; }

body:not(.session-started) .contact-hero .contact-hero-intro {
  max-width: 660px;
  margin: 0;
  color: #6e5a76;
  font-size: 1.08rem;
  line-height: 1.72;
}

body:not(.session-started) .contact-signature {
  margin: 28px 0 0;
  padding-left: 20px;
  border-left: 3px solid #f4c451;
  color: #755e7c;
  font-size: .94rem;
  line-height: 1.65;
}

body:not(.session-started) .contact-hero-copy > p.contact-signature:last-child { color: #755e7c !important; }

body:not(.session-started) .contact-signature strong { color: #4d245f; }

body:not(.session-started) .contact-hero-visual {
  position: relative;
  min-height: clamp(390px, 40vw, 570px);
  padding: 14px 18px 22px 0;
}

body:not(.session-started) .contact-hero-visual::before,
body:not(.session-started) .contact-hero-visual::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

body:not(.session-started) .contact-hero-visual::before {
  width: 170px;
  height: 170px;
  right: -20px;
  top: -8px;
  background: rgba(255, 214, 107, .45);
}

body:not(.session-started) .contact-hero-visual::after {
  width: 110px;
  height: 110px;
  left: -35px;
  bottom: 0;
  background: rgba(130, 71, 168, .15);
}

body:not(.session-started) .contact-hero-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: clamp(390px, 40vw, 550px);
  object-fit: cover;
  object-position: center;
  border-radius: 46% 54% 43% 57% / 31% 39% 61% 69%;
  box-shadow: 0 28px 70px rgba(65, 26, 87, .17);
}

body:not(.session-started) .contact-decor {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 12px 28px rgba(64, 25, 88, .18);
}

body:not(.session-started) .contact-decor-heart {
  right: 0;
  bottom: 48px;
  width: 72px;
  height: 72px;
  border-radius: 24px 24px 24px 8px;
  background: #7a3ba4;
  font-size: 2rem;
}

body:not(.session-started) .contact-decor-dots {
  left: -18px;
  top: 44px;
  width: 74px;
  height: 38px;
  border-radius: 999px;
  color: #59306c;
  background: #f7cc61;
  letter-spacing: 5px;
}

body:not(.session-started) .contact-reassurance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 54px;
  padding: 20px 0;
  border-top: 1px solid rgba(101, 49, 131, .12);
  border-bottom: 1px solid rgba(101, 49, 131, .12);
}

body:not(.session-started) .contact-reassurance > div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px clamp(18px, 3vw, 38px);
}

body:not(.session-started) .contact-reassurance > div + div { border-left: 1px solid rgba(101, 49, 131, .12); }
body:not(.session-started) .contact-reassurance > div > span { font-size: 1.65rem; }
body:not(.session-started) .contact-reassurance p { display: grid; gap: 4px; margin: 0; }
body:not(.session-started) .contact-reassurance strong { color: #452057; font-size: .94rem; }
body:not(.session-started) .contact-reassurance small { color: #817087; font-size: .82rem; line-height: 1.4; }

body:not(.session-started) .contact-layout {
  grid-template-columns: minmax(520px, 1.18fr) minmax(330px, .82fr);
  align-items: stretch;
  gap: 28px;
}

body:not(.session-started) .contact-form {
  padding: clamp(34px, 4vw, 58px);
  border: 1px solid rgba(104, 50, 135, .1);
  border-radius: 42px 42px 42px 14px;
  background: linear-gradient(145deg, #fff 0%, #fffcf4 100%);
  box-shadow: 0 26px 70px rgba(67, 25, 101, .1);
}

body:not(.session-started) .contact-form-heading > p:last-child {
  max-width: 640px;
  margin: 10px 0 32px;
  line-height: 1.6;
}

body:not(.session-started) .contact-form-grid { gap: 22px; }
body:not(.session-started) .contact-phone-field { grid-column: 1 / -1; max-width: calc(50% - 11px); }

body:not(.session-started) .contact-form input:not([type="radio"]):not([type="checkbox"]),
body:not(.session-started) .contact-form textarea {
  min-height: 58px;
  border-color: #e2d5e6;
  border-radius: 18px;
  padding: 16px 18px;
  background: rgba(255,255,255,.9);
}

body:not(.session-started) .contact-form textarea { min-height: 170px; }

body:not(.session-started) .contact-subject-field {
  grid-column: 1 / -1;
  margin: 2px 0;
  padding: 0;
  border: 0;
}

body:not(.session-started) .contact-subject-field legend {
  margin-bottom: 11px;
  color: #4c2b5d;
  font-size: .88rem;
  font-weight: 850;
}

body:not(.session-started) .contact-choice-pills { display: flex; flex-wrap: wrap; gap: 9px; }
body:not(.session-started) .contact-choice-pills label { display: block !important; cursor: pointer; }
body:not(.session-started) .contact-choice-pills input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
body:not(.session-started) .contact-choice-pills span {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid #dbc9e3;
  border-radius: 999px;
  color: #59306c;
  background: #fff;
  font-size: .86rem;
  font-weight: 850;
  transition: .18s ease;
}

body:not(.session-started) .contact-choice-pills input:checked + span {
  border-color: #714096;
  color: #fff;
  background: #714096;
  box-shadow: 0 8px 20px rgba(91, 41, 124, .2);
}

body:not(.session-started) .contact-choice-pills input:focus-visible + span { outline: 3px solid rgba(246, 197, 76, .65); outline-offset: 2px; }
body:not(.session-started) .contact-consent { margin-bottom: 18px; }

body:not(.session-started) .contact-submit {
  min-height: 56px;
  padding: 0 25px;
  border-radius: 17px;
  background: linear-gradient(135deg, #632b86, #8248a8);
  box-shadow: 0 12px 28px rgba(98, 43, 133, .2);
}

body:not(.session-started) .contact-personal-reply {
  display: inline-block;
  margin: 0 0 0 14px;
  color: #87768d;
  font-size: .8rem;
}

body:not(.session-started) .contact-visit {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(32px, 4vw, 52px);
  border: 0;
  border-radius: 44px 14px 44px 44px;
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 214, 107, .72), transparent 34%),
    linear-gradient(145deg, #f8edf9, #fff8e9);
}

body:not(.session-started) .contact-visit::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -70px;
  bottom: -80px;
  border: 28px solid rgba(119, 64, 160, .1);
  border-radius: 50%;
}

body:not(.session-started) .contact-visit > div { position: relative; z-index: 2; }
body:not(.session-started) .contact-visit-accent {
  position: absolute;
  right: 26px;
  top: 28px;
  color: rgba(92, 43, 117, .18);
  font-size: 1.1rem;
  font-weight: 950;
  line-height: .95;
  text-align: right;
  text-transform: uppercase;
  transform: rotate(4deg);
}

body:not(.session-started) .contact-visit h3 { max-width: 440px; margin: 0 0 18px; font-size: clamp(2rem, 3.3vw, 3.25rem); line-height: 1.04; }
body:not(.session-started) .contact-visit-intro,
body:not(.session-started) .contact-visit-note { color: #725f79; line-height: 1.65; }

body:not(.session-started) .contact-featured-address {
  display: grid;
  gap: 6px;
  margin: 28px 0 18px;
  padding: 21px 0 21px 22px;
  border-left: 4px solid #f2c44e;
}

body:not(.session-started) .contact-featured-address strong { color: #482058; font-size: 1.06rem; }
body:not(.session-started) .contact-featured-address span { color: #75627c; }

body:not(.session-started) .contact-help {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: 36px;
  padding: 28px 36px;
  border-radius: 30px;
  background: #5f2a7f;
  box-shadow: 0 22px 55px rgba(67, 25, 101, .14);
}

body:not(.session-started) .contact-help-avatar {
  width: 116px;
  height: 116px;
  overflow: hidden;
  border: 5px solid rgba(255,255,255,.7);
  border-radius: 45% 55% 46% 54% / 55% 41% 59% 45%;
  background: #fff;
}

body:not(.session-started) .contact-help-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
body:not(.session-started) .contact-help .contact-section-label { margin-bottom: 6px; color: #f8d77b; }
body:not(.session-started) .contact-help h3 { margin: 0 0 6px; color: #fff; font-size: clamp(1.35rem, 2vw, 1.9rem); }
body:not(.session-started) .contact-help p:last-child { margin: 0; color: rgba(255,255,255,.78); line-height: 1.55; }
body:not(.session-started) .contact-help > a {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border-radius: 15px;
  color: #4b1d63;
  background: #f6d26c;
  text-decoration: none;
  font-weight: 950;
  white-space: nowrap;
}

@media (max-width: 980px) {
  body:not(.session-started) .contact-page { width: calc(100% - 28px); padding-top: 26px; }
  body:not(.session-started) .contact-hero,
  body:not(.session-started) .contact-layout { grid-template-columns: 1fr; }
  body:not(.session-started) .contact-hero-copy { padding: 22px 8px 0; }
  body:not(.session-started) .contact-hero-visual { min-height: 460px; }
  body:not(.session-started) .contact-hero-image { height: 460px; }
  body:not(.session-started) .contact-reassurance { grid-template-columns: 1fr; gap: 10px; }
  body:not(.session-started) .contact-reassurance > div + div { border-left: 0; }
  body:not(.session-started) .contact-help { grid-template-columns: 92px minmax(0, 1fr); }
  body:not(.session-started) .contact-help-avatar { width: 92px; height: 92px; }
  body:not(.session-started) .contact-help > a { grid-column: 2; width: fit-content; }
}

@media (max-width: 620px) {
  body:not(.session-started) .contact-hero h2 { font-size: clamp(2.6rem, 13vw, 4rem); }
  body:not(.session-started) .contact-hero-visual { min-height: 350px; padding-right: 4px; }
  body:not(.session-started) .contact-hero-image { height: 350px; }
  body:not(.session-started) .contact-decor-heart { width: 58px; height: 58px; right: -4px; }
  body:not(.session-started) .contact-decor-dots { left: 0; }
  body:not(.session-started) .contact-reassurance > div { padding: 9px 4px; }
  body:not(.session-started) .contact-form,
  body:not(.session-started) .contact-visit { padding: 26px 22px; border-radius: 28px 28px 28px 10px; }
  body:not(.session-started) .contact-form-grid { grid-template-columns: 1fr; }
  body:not(.session-started) .contact-phone-field { grid-column: auto; max-width: none; }
  body:not(.session-started) .contact-personal-reply { display: block; margin: 12px 0 0; }
  body:not(.session-started) .contact-help { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 22px; }
  body:not(.session-started) .contact-help-avatar { width: 72px; height: 72px; }
  body:not(.session-started) .contact-help > a { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

/* Page Contact RFC06 - version compacte */
body:not(.session-started) .contact-page { padding: 24px 0 48px; }

body:not(.session-started) .contact-hero {
  grid-template-columns: minmax(390px, .92fr) minmax(420px, 1.08fr);
  gap: clamp(24px, 4vw, 54px);
  margin-bottom: 20px;
}

body:not(.session-started) .contact-hero-copy { padding: 14px 0 14px clamp(6px, 1.5vw, 20px); }

@media (min-width: 981px) {
  body:not(.session-started) .contact-hero-copy { padding-top: 40px; }
  body:not(.session-started) .contact-kicker { margin-top: 26px; }
}
body:not(.session-started) .contact-kicker { margin-bottom: 10px; padding: 6px 12px; }

body:not(.session-started) .contact-hero h2 {
  max-width: 590px;
  margin-bottom: 12px;
  font-size: clamp(2.55rem, 4.1vw, 4.35rem);
}

body:not(.session-started) .contact-hero .contact-hero-intro {
  font-size: .98rem;
  line-height: 1.55;
}

body:not(.session-started) .contact-signature {
  margin-top: 16px;
  padding-left: 15px;
  font-size: .86rem;
  line-height: 1.45;
}

body:not(.session-started) .contact-hero-visual {
  min-height: clamp(300px, 28vw, 380px);
  padding: 8px 12px 12px 0;
}

body:not(.session-started) .contact-hero-image { height: clamp(300px, 28vw, 370px); }
body:not(.session-started) .contact-hero-visual::before { width: 120px; height: 120px; }
body:not(.session-started) .contact-hero-visual::after { width: 76px; height: 76px; left: -20px; }
body:not(.session-started) .contact-decor-heart { bottom: 30px; width: 58px; height: 58px; border-radius: 19px 19px 19px 7px; font-size: 1.6rem; }
body:not(.session-started) .contact-decor-dots { top: 24px; width: 64px; height: 32px; }

body:not(.session-started) .contact-reassurance {
  margin-bottom: 30px;
  padding: 10px 0;
}

body:not(.session-started) .contact-reassurance > div {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 6px clamp(12px, 2vw, 24px);
}

body:not(.session-started) .contact-reassurance > div > span { font-size: 1.35rem; }
body:not(.session-started) .contact-reassurance p { gap: 2px; }
body:not(.session-started) .contact-reassurance strong { font-size: .87rem; }
body:not(.session-started) .contact-reassurance small { font-size: .76rem; }

body:not(.session-started) .contact-layout { gap: 20px; }

body:not(.session-started) .contact-form {
  padding: clamp(26px, 3vw, 38px);
  border-radius: 30px 30px 30px 12px;
}

body:not(.session-started) .contact-details h3,
body:not(.session-started) .contact-form h3 { font-size: clamp(1.5rem, 2.1vw, 2rem); }
body:not(.session-started) .contact-form-heading > p:last-child { margin: 7px 0 20px; line-height: 1.45; }
body:not(.session-started) .contact-form-grid { gap: 14px 16px; }

body:not(.session-started) .contact-form input:not([type="radio"]):not([type="checkbox"]),
body:not(.session-started) .contact-form textarea {
  min-height: 48px;
  border-radius: 14px;
  padding: 12px 14px;
}

body:not(.session-started) .contact-form textarea { min-height: 112px; }
body:not(.session-started) .contact-subject-field legend { margin-bottom: 8px; }
body:not(.session-started) .contact-choice-pills { gap: 7px; }
body:not(.session-started) .contact-choice-pills span { min-height: 36px; padding: 0 13px; font-size: .8rem; }
body:not(.session-started) .contact-consent { margin: 13px 0; font-size: .76rem; }
body:not(.session-started) .contact-submit { min-height: 48px; padding: 0 20px; border-radius: 14px; }

body:not(.session-started) .contact-visit {
  padding: clamp(26px, 3vw, 36px);
  border-radius: 32px 12px 32px 32px;
}

body:not(.session-started) .contact-visit-accent { right: 20px; top: 20px; font-size: .88rem; }
body:not(.session-started) .contact-visit h3 { margin-bottom: 12px; font-size: clamp(1.75rem, 2.7vw, 2.55rem); }
body:not(.session-started) .contact-visit-intro,
body:not(.session-started) .contact-visit-note { font-size: .9rem; line-height: 1.5; }
body:not(.session-started) .contact-featured-address { margin: 17px 0 12px; padding: 14px 0 14px 17px; }

body:not(.session-started) .contact-help {
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 20px;
  margin-top: 22px;
  padding: 18px 26px;
  border-radius: 24px;
}

body:not(.session-started) .contact-help-avatar { width: 82px; height: 82px; border-width: 4px; }
body:not(.session-started) .contact-help h3 { font-size: clamp(1.2rem, 1.7vw, 1.6rem); }
body:not(.session-started) .contact-help p:last-child { font-size: .88rem; line-height: 1.4; }
body:not(.session-started) .contact-help > a { min-height: 44px; padding: 0 17px; font-size: .86rem; }

@media (max-width: 980px) {
  body:not(.session-started) .contact-page { padding: 18px 0 38px; }
  body:not(.session-started) .contact-hero { gap: 10px; margin-bottom: 14px; }
  body:not(.session-started) .contact-hero-copy { padding: 12px 5px 0; }
  body:not(.session-started) .contact-hero-visual { min-height: 330px; }
  body:not(.session-started) .contact-hero-image { height: 320px; }
  body:not(.session-started) .contact-reassurance { gap: 2px; margin-bottom: 22px; padding: 7px 0; }
  body:not(.session-started) .contact-help { grid-template-columns: 72px minmax(0, 1fr); padding: 17px 20px; }
  body:not(.session-started) .contact-help-avatar { width: 72px; height: 72px; }
}

@media (max-width: 620px) {
  body:not(.session-started) .contact-hero h2 { font-size: clamp(2.25rem, 11vw, 3.25rem); }
  body:not(.session-started) .contact-hero .contact-hero-intro { font-size: .92rem; line-height: 1.5; }
  body:not(.session-started) .contact-signature { margin-top: 12px; }
  body:not(.session-started) .contact-hero-visual { min-height: 265px; }
  body:not(.session-started) .contact-hero-image { height: 255px; }
  body:not(.session-started) .contact-decor-heart { width: 48px; height: 48px; bottom: 20px; }
  body:not(.session-started) .contact-reassurance > div { padding: 6px 2px; }
  body:not(.session-started) .contact-form,
  body:not(.session-started) .contact-visit { padding: 22px 18px; border-radius: 24px 24px 24px 9px; }
  body:not(.session-started) .contact-form-heading > p:last-child { margin-bottom: 16px; }
  body:not(.session-started) .contact-form-grid { gap: 12px; }
  body:not(.session-started) .contact-form textarea { min-height: 100px; }
  body:not(.session-started) .contact-help { margin-top: 16px; padding: 16px; }
}

/* Bloc de rencontre : la photo remplace le grand vide décoratif. */
body:not(.session-started) .contact-visit {
  display: grid;
  grid-template-rows: minmax(190px, 34%) 1fr;
  align-items: stretch;
  padding: 0;
  background: linear-gradient(145deg, #f8edf9, #fff8e9);
}

body:not(.session-started) .contact-visit-visual {
  position: relative;
  z-index: 2;
  min-height: 0;
  overflow: hidden;
  border-radius: 32px 12px 42% 14%;
}

body:not(.session-started) .contact-visit-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(61, 20, 81, .32));
  pointer-events: none;
}

body:not(.session-started) .contact-visit-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

body:not(.session-started) .contact-visit-welcome {
  position: absolute;
  z-index: 3;
  left: 22px;
  bottom: 18px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  color: #412052;
  background: rgba(255, 246, 214, .92);
  box-shadow: 0 10px 24px rgba(48, 17, 65, .14);
  font-size: .82rem;
  font-weight: 950;
}

body:not(.session-started) .contact-visit-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3vw, 34px);
}

body:not(.session-started) .contact-visit-content .contact-workshops-link { align-self: flex-start; }

/* Inversion des deux colonnes : visite à gauche, formulaire à droite. */
@media (min-width: 981px) {
  body:not(.session-started) .contact-layout {
    grid-template-columns: minmax(330px, .82fr) minmax(520px, 1.18fr);
  }

  body:not(.session-started) .contact-visit {
    grid-column: 1;
    grid-row: 1;
    border-radius: 12px 32px 32px 32px;
  }

  body:not(.session-started) .contact-visit-visual {
    border-radius: 12px 32px 14% 42%;
  }

  body:not(.session-started) .contact-form {
    grid-column: 2;
    grid-row: 1;
    border-radius: 30px 30px 12px 30px;
  }
}

@media (max-width: 980px) {
  body:not(.session-started) .contact-visit { grid-template-rows: 240px auto; }
  body:not(.session-started) .contact-visit-content { padding: 28px; }
}

@media (max-width: 620px) {
  body:not(.session-started) .contact-visit { grid-template-rows: 190px auto; padding: 0; }
  body:not(.session-started) .contact-visit-visual { border-radius: 24px 24px 38% 10%; }
  body:not(.session-started) .contact-visit-content { padding: 22px 18px; }
}

/* Dashboard adulte chaleureux et rééquilibré. */
body.pathway-adult.session-started .adult-learning-dashboard.premium-adult-dashboard {
  position: relative !important;
  gap: 22px !important;
  margin-bottom: 30px !important;
  padding: clamp(18px, 2.2vw, 32px) !important;
  border-radius: 38px !important;
  background:
    radial-gradient(circle at 8% 14%, rgba(248, 201, 90, .18), transparent 25%),
    radial-gradient(circle at 88% 28%, rgba(167, 99, 207, .13), transparent 28%),
    linear-gradient(145deg, #fffaf3 0%, #fcf7ff 50%, #fffdf8 100%) !important;
}

body.pathway-adult.session-started .adult-pro-topbar {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.pathway-adult.session-started .adult-pro-search {
  min-height: 52px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  background: #fffdfb !important;
}

body.pathway-adult.session-started .adult-pro-icon-button,
body.pathway-adult.session-started .adult-pro-profile { min-height: 48px !important; border-radius: 15px !important; }
body.pathway-adult.session-started .adult-pro-icon-button { width: 50px !important; }
body.pathway-adult.session-started .adult-pro-profile { min-width: 168px !important; }

body.pathway-adult.session-started .adult-pro-layout {
  grid-template-columns: minmax(0, 1.34fr) minmax(330px, .66fr) !important;
  gap: clamp(20px, 2vw, 30px) !important;
}

body.pathway-adult.session-started .adult-pro-main,
body.pathway-adult.session-started .adult-pro-side { gap: 18px !important; }

body.pathway-adult.session-started .adult-pro-hero {
  position: relative !important;
  grid-template-columns: minmax(380px, 1.12fr) minmax(300px, .88fr) !important;
  gap: clamp(24px, 2.4vw, 38px) !important;
  min-height: 350px !important;
  padding: clamp(30px, 3vw, 44px) !important;
  border-color: rgba(126, 67, 152, .12) !important;
  border-radius: 32px 32px 32px 12px !important;
  background:
    radial-gradient(circle at 5% 0%, rgba(247, 198, 82, .28), transparent 34%),
    linear-gradient(135deg, #fff9ed 0%, #fffdf9 57%, #f6ebfb 100%) !important;
  box-shadow: 0 18px 48px rgba(72, 30, 91, .09) !important;
}

body.pathway-adult.session-started .adult-pro-hero::after {
  content: "♡";
  position: absolute;
  left: 24px;
  bottom: 18px;
  color: rgba(116, 48, 148, .12);
  font-size: 3.4rem;
  line-height: 1;
  pointer-events: none;
}

body.pathway-adult.session-started .adult-pro-hero-copy { position: relative !important; z-index: 2 !important; justify-content: center !important; }

body.pathway-adult.session-started .adult-pro-kicker {
  margin-bottom: 10px !important;
  padding: 7px 12px !important;
  background: rgba(246, 196, 73, .26) !important;
  font-size: .72rem !important;
}

body.pathway-adult.session-started .adult-pro-welcome-note {
  display: block !important;
  margin-bottom: 5px !important;
  color: #8a617f !important;
  font: 800 .92rem/1.2 inherit !important;
}

body.pathway-adult.session-started .adult-pro-hero h2 {
  width: 100% !important;
  max-width: none !important;
  color: #351047 !important;
  font-size: clamp(2.75rem, 3.5vw, 4.45rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body.pathway-adult.session-started .adult-pro-hero h2 span { color: #7937a0 !important; white-space: nowrap !important; }

body.pathway-adult.session-started .adult-pro-hero p {
  max-width: 590px !important;
  margin-top: 14px !important;
  font-size: clamp(.96rem, 1vw, 1.08rem) !important;
  font-weight: 680 !important;
  line-height: 1.52 !important;
}

body.pathway-adult.session-started .adult-pro-cta-row { margin-top: 21px !important; }
body.pathway-adult.session-started .adult-pro-primary,
body.pathway-adult.session-started .adult-pro-secondary { min-height: 48px !important; padding: 0 20px !important; border-radius: 15px !important; }

body.pathway-adult.session-started .adult-pro-hero-media {
  min-height: 285px !important;
  max-height: 365px !important;
  border: 5px solid rgba(255, 255, 255, .72) !important;
  border-radius: 28px 28px 48% 28px !important;
  box-shadow: 0 16px 38px rgba(66, 25, 84, .13) !important;
}

body.pathway-adult.session-started .adult-pro-hero-media img { object-position: center 42% !important; }

body.pathway-adult.session-started .adult-pro-card,
body.pathway-adult.session-started .adult-pro-focus article,
body.pathway-adult.session-started .adult-pro-guidance {
  border-color: rgba(119, 60, 146, .1) !important;
  box-shadow: 0 12px 34px rgba(64, 24, 84, .07) !important;
}

body.pathway-adult.session-started .adult-pro-card { padding: 22px !important; border-radius: 24px !important; }
body.pathway-adult.session-started .adult-pro-progress {
  background:
    radial-gradient(circle at 100% 0, rgba(247, 194, 65, .2), transparent 32%),
    linear-gradient(145deg, #fff, #fffaf1 100%) !important;
}

body.pathway-adult.session-started .adult-pro-card-title { margin-bottom: 10px !important; }
body.pathway-adult.session-started .adult-pro-ring {
  width: 146px !important;
  height: 146px !important;
  margin: 4px auto 14px !important;
  background:
    radial-gradient(circle, #fffdf9 0 58%, transparent 59%),
    conic-gradient(#7b2fd1 calc(var(--adult-progress) * 1%), #f2b705 0 calc((var(--adult-progress) + 8) * 1%), #eadcf2 0) !important;
}

body.pathway-adult.session-started .adult-pro-ring strong { font-size: 2.2rem !important; }
body.pathway-adult.session-started .adult-pro-ring small { margin-top: -40px !important; }
body.pathway-adult.session-started .adult-pro-level { padding: 13px !important; border-radius: 15px !important; background: #f7edf9 !important; }
body.pathway-adult.session-started .adult-pro-mini-stats { margin-top: 10px !important; }
body.pathway-adult.session-started .adult-pro-mini-stats span { padding: 10px 8px !important; border-radius: 14px !important; }

body.pathway-adult.session-started .adult-pro-focus { gap: 14px !important; }
body.pathway-adult.session-started .adult-pro-focus article {
  gap: 11px !important;
  min-height: 205px !important;
  padding: 22px !important;
  border-radius: 22px !important;
}

body.pathway-adult.session-started .adult-pro-focus article:nth-child(1) { background: linear-gradient(145deg, #fff, #f8f0fc) !important; }
body.pathway-adult.session-started .adult-pro-focus article:nth-child(2) { background: linear-gradient(145deg, #fff, #fff7e5) !important; }
body.pathway-adult.session-started .adult-pro-focus article:nth-child(3) { background: linear-gradient(145deg, #fff, #fdf0f3) !important; }
body.pathway-adult.session-started .adult-pro-focus article > span { width: 46px !important; height: 46px !important; border-radius: 14px !important; }
body.pathway-adult.session-started .adult-pro-focus button { min-height: 44px !important; padding: 0 17px !important; border-radius: 14px !important; }

body.pathway-adult.session-started .adult-pro-guidance {
  min-height: 120px !important;
  padding: 23px 26px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #fff8e9, #fff, #f7eefb) !important;
}

body.pathway-adult.session-started .adult-pro-side { top: 14px !important; }

@media (max-width: 1280px) {
  body.pathway-adult.session-started .adult-pro-layout { grid-template-columns: minmax(0, 1fr) 330px !important; }
  body.pathway-adult.session-started .adult-pro-hero { grid-template-columns: minmax(320px, 1.1fr) minmax(250px, .9fr) !important; }
  body.pathway-adult.session-started .adult-pro-hero h2 { font-size: clamp(2.55rem, 4vw, 3.8rem) !important; }
}

@media (max-width: 1120px) {
  body.pathway-adult.session-started .adult-pro-layout { grid-template-columns: 1fr !important; }
  body.pathway-adult.session-started .adult-pro-side { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  body.pathway-adult.session-started .adult-pro-hero { grid-template-columns: 1fr !important; }
  body.pathway-adult.session-started .adult-pro-hero-media { min-height: 250px !important; max-height: 320px !important; }
}

/* Administration du site, distincte de la gestion des formations. */
body:not(.session-started):has(#administrationSite:target) #sessionCard { display: none !important; }
body:not(.session-started) #administrationSite:target {
  display: block !important;
  width: min(1500px, calc(100% - 32px));
  margin: 24px auto 60px;
}

.admin-site-panel .panel-copy { position: relative; }
.admin-back-site { display: inline-flex; width: fit-content; margin-top: 14px; text-decoration: none; }

.admin-workspace-nav .admin-nav-group-label {
  flex: 1 0 100%;
  padding: 7px 10px 1px;
  color: #6d4380;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-workspace-nav .admin-nav-training-label {
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid #eadff0;
}

.admin-workspace-nav button.admin-nav-site {
  border: 1px solid rgba(112, 56, 145, .16);
  background: #fbf7fd;
}

.site-content-admin { display: grid; gap: 22px; }
.site-content-heading { align-items: center; }
.site-content-heading .eyebrow { margin: 0 0 5px; color: #8143a8; }
.site-preview-link { width: fit-content; text-decoration: none; }

.site-editor-page-nav {
  display: flex;
  gap: 8px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid #e3d5eb;
  border-radius: 16px;
  background: #faf7fc;
}

.site-editor-page-nav button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 15px;
  border: 0;
  border-radius: 11px;
  color: #613574;
  background: transparent;
  cursor: pointer;
  font-weight: 900;
}

.site-editor-page-nav button.active {
  color: #fff;
  background: linear-gradient(135deg, #5a237f, #8c45c4);
  box-shadow: 0 7px 16px rgba(86, 34, 119, .2);
}

.site-editor-preview-shell {
  overflow: hidden;
  border: 1px solid #dfd0e8;
  border-radius: 20px;
  background: #ece5f0;
  box-shadow: 0 16px 36px rgba(64, 25, 83, .1);
}

.site-editor-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: #fff;
}

.site-editor-preview-heading > div { display: grid; gap: 2px; }
.site-editor-preview-heading strong { color: #4b205d; }
.site-editor-preview-heading span { color: #897590; font-size: .8rem; }
.site-editor-preview-heading button { min-height: 38px; }
.site-editor-preview-shell iframe { display: block; width: 100%; height: min(62vh, 660px); border: 0; background: #fff; }

.site-editor-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7eefb, #fff9e9);
}

.site-editor-toolbar > div { display: grid; gap: 3px; }
.site-editor-toolbar strong { color: #482058; font-size: 1.1rem; }
.site-editor-toolbar span { color: #806d88; font-size: .82rem; }
.site-editor-toolbar label { width: min(360px, 100%); color: #60466d; font-size: .8rem; font-weight: 850; }
.site-editor-toolbar input { width: 100%; margin-top: 5px; }
.site-content-editor-fields { display: grid; gap: 12px; }
.site-editor-section {
  overflow: clip;
  border: 1px solid #e4d7eb;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(72, 32, 90, .06);
}

.site-editor-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 19px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(135deg, #fbf7fd, #fffbf1);
}

.site-editor-section > summary::-webkit-details-marker { display: none; }
.site-editor-section > summary span { display: grid; gap: 3px; }
.site-editor-section > summary small { color: #906ca0; font-size: .68rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.site-editor-section > summary strong { color: #472057; font-size: 1rem; }
.site-editor-section > summary em { color: #88758f; font-size: .78rem; font-style: normal; font-weight: 800; }
.site-editor-section[open] > summary { border-bottom: 1px solid #eadff0; }
.site-editor-section-preview {
  max-height: 430px;
  padding: 18px;
  overflow: auto;
  border-bottom: 1px solid #eadff0;
  background:
    linear-gradient(45deg, rgba(116, 58, 145, .035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(116, 58, 145, .035) 25%, transparent 25%),
    #f8f3fa;
  background-size: 24px 24px;
}

.site-editor-section-preview::before {
  content: "Cette section sur le site";
  display: block;
  margin: 0 0 10px;
  color: #79508b;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.site-editor-section-preview > div {
  width: 142.86%;
  zoom: .7;
  pointer-events: none;
  user-select: none;
}

.site-editor-section-preview .site-editor-visual-clone {
  position: relative !important;
  inset: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.site-editor-section-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  background: #fffdfb;
}

.site-editor-section-body::before {
  content: "Contenu de cette section à modifier";
  grid-column: 1 / -1;
  color: #4e245e;
  font-size: .83rem;
  font-weight: 950;
}
.site-editor-section-body .site-editor-images-title { grid-column: 1 / -1; }

.site-editor-photo-zone {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 2px solid #e7d2ee;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff8e9, #fbf2ff);
}

.site-editor-photo-zone > h4,
.site-editor-texts-title {
  grid-column: 1 / -1;
  margin: 0;
  color: #4c225d;
  font-size: 1rem;
}

.site-editor-photo-zone > h4::before {
  content: "📷";
  margin-right: 7px;
}

.site-editor-photo-zone > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #806d87;
  font-size: .86rem;
}

.site-editor-photo-zone.has-photos > h4 {
  color: #612679;
}

.site-editor-texts-title {
  margin-top: 5px;
}

.site-editor-field,
.site-editor-image-field {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #eadff0;
  border-radius: 15px;
  background: #fff;
}

.site-editor-field label,
.site-editor-image-field label { color: #593667; font-size: .8rem; font-weight: 900; }
.site-editor-field label { line-height: 1.35; }
.site-editor-field textarea { width: 100%; min-height: 72px; resize: vertical; }
.site-editor-field small,
.site-editor-image-field small { color: #94839b; }
.site-editor-images-title { margin: 12px 0 0; color: #4c225d; font-size: 1rem; }

.site-editor-image-field {
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
}

.site-editor-image-field img {
  grid-row: 1 / 4;
  width: 150px;
  height: 105px;
  object-fit: cover;
  border-radius: 12px;
  background: #f1eaf5;
}

.site-editor-image-field input[type="file"] { width: 100%; }
.site-editor-actions { position: sticky; bottom: 10px; z-index: 10; padding: 12px; border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 12px 34px rgba(64, 25, 83, .15); backdrop-filter: blur(10px); }

@media (max-width: 720px) {
  .site-editor-toolbar { align-items: stretch; flex-direction: column; }
  .site-editor-toolbar label { width: 100%; }
  .site-editor-image-field { grid-template-columns: 1fr; }
  .site-editor-image-field img { grid-row: auto; width: 100%; height: 180px; }
  .site-editor-photo-zone { grid-template-columns: 1fr; padding: 10px; }
  .site-editor-preview-heading { align-items: stretch; flex-direction: column; }
  .site-editor-preview-shell iframe { height: 480px; }
  .site-editor-section-body { grid-template-columns: 1fr; }
  .site-editor-section > summary { align-items: flex-start; flex-direction: column; gap: 7px; }
  .site-editor-section-preview { max-height: 340px; padding: 12px; }
  .site-editor-section-preview > div { width: 166.67%; zoom: .6; }
}

/* Planning ateliers RFC06 */
.workshop-planning-dialog {
  width: min(1180px, calc(100vw - 28px)) !important;
  max-height: min(90vh, 980px);
  overflow: auto;
  border-radius: 30px;
  background: linear-gradient(180deg, #fff 0%, #fffaf2 100%);
}

.workshop-planning-dialog > header {
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(88, 28, 135, .10);
}

.workshop-planning-dialog h2 {
  font-size: clamp(2rem, 4vw, 3.6rem);
  color: #251044;
  letter-spacing: 0;
}

.planning-eyebrow,
.planning-category {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff1c2;
  color: #6b3d00;
  font-weight: 900;
  text-transform: uppercase;
  font-size: .78rem;
}

.planning-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}

.planning-filters button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(88, 28, 135, .14);
  background: #fff;
  color: #41205f;
  font-weight: 850;
  box-shadow: 0 10px 24px rgba(88, 28, 135, .08);
}

.planning-filters button.active {
  background: linear-gradient(135deg, #5b1b84, #8d3fc2);
  color: #fff;
}

.workshop-planning-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 22px;
}

.planning-workshop-card.modern {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(88, 28, 135, .12);
  border-radius: 26px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 50px rgba(59, 7, 100, .12);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}

.planning-workshop-card.modern:hover,
.planning-workshop-card.modern:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 30px 70px rgba(59, 7, 100, .18);
  outline: none;
}

.planning-workshop-photo {
  aspect-ratio: 16 / 10;
  background: #f7f0ff;
  overflow: hidden;
}

.planning-workshop-photo > img,
.workshop-detail-photo > img,
.workshop-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.workshop-default-image {
  width: 100%;
  height: 100%;
  min-height: 210px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #3b0764;
}

.workshop-default-image span {
  font-size: 3rem;
}

.workshop-default-image strong {
  display: block;
  margin-top: 10px;
  font-size: 1.2rem;
}

.planning-workshop-body {
  padding: 22px;
  display: grid;
  gap: 14px;
}

.planning-workshop-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.planning-workshop-topline time {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: #f5eaff;
  color: #5b1b84;
  line-height: 1;
}

.planning-workshop-topline time b {
  font-size: 1.7rem;
}

.planning-workshop-topline time span {
  font-size: .72rem;
  font-weight: 900;
}

.workshop-status {
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .78rem;
  background: #eaf8ef;
  color: #177447;
}

.workshop-status.almost-full { background: #fff3d6; color: #9a5b00; }
.workshop-status.full { background: #f1f2f6; color: #4b5563; }
.workshop-status.cancelled { background: #ffe4e6; color: #b42318; }
.workshop-status.draft { background: #ede9fe; color: #5b21b6; }
.workshop-status.ended { background: #e5e7eb; color: #374151; }

.planning-workshop-body h3 {
  margin: 0;
  color: #251044;
  font-size: 1.45rem;
  line-height: 1.15;
}

.planning-workshop-body p {
  margin: 0;
  color: #5f4b72;
  line-height: 1.55;
}

.planning-workshop-body dl,
.workshop-detail-content dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.planning-workshop-body dl div,
.workshop-detail-content dl div {
  padding: 12px;
  border-radius: 16px;
  background: #fbf7ff;
}

.planning-workshop-body dt,
.workshop-detail-content dt {
  color: #8a719c;
  font-size: .75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.planning-workshop-body dd,
.workshop-detail-content dd {
  margin: 4px 0 0;
  color: #251044;
  font-weight: 800;
}

.planning-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.planning-card-actions button,
.reserve-workshop {
  min-height: 48px;
  border-radius: 16px;
  border: 0;
  padding: 0 18px;
  font-weight: 900;
}

.planning-card-actions button:first-child {
  background: #fff;
  color: #5b1b84;
  border: 1px solid rgba(88, 28, 135, .16);
}

.reserve-workshop {
  background: #ffd166;
  color: #402400;
  box-shadow: 0 14px 28px rgba(245, 158, 11, .24);
}

.reserve-workshop:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.workshop-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 18px;
}

.workshop-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(25, 8, 44, .58);
  backdrop-filter: blur(8px);
}

.workshop-detail-card {
  position: relative;
  width: min(1120px, calc(100vw - 32px));
  max-height: min(88vh, 860px);
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr);
  border: 1px solid rgba(88, 28, 135, .12);
  border-radius: 34px;
  background: linear-gradient(135deg, #ffffff 0%, #fffaf0 100%);
  box-shadow: 0 34px 90px rgba(25, 8, 44, .30);
}

.workshop-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #3b0764;
  font-size: 1.6rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.workshop-detail-photo {
  min-height: 560px;
  background: #f5f0ff;
  position: sticky;
  top: 0;
}

.workshop-detail-content {
  padding: clamp(26px, 4vw, 46px);
  display: grid;
  gap: 22px;
  align-content: start;
}

.workshop-detail-content h2 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(2.15rem, 4vw, 3.55rem);
  line-height: .98;
  color: #251044;
}

.workshop-detail-heading {
  display: grid;
  gap: 16px;
}

.workshop-detail-heading > p {
  margin: 0;
  max-width: 60ch;
  color: #5f5170;
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 700;
}

.workshop-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.workshop-detail-badges .workshop-seats,
.workshop-detail-badges .planning-category,
.workshop-detail-badges .workshop-status {
  min-height: 36px;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 950;
}

.workshop-detail-badges .workshop-seats {
  color: #4b3100;
  background: #fff1bd;
}

.workshop-detail-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.workshop-detail-info div {
  min-height: 90px;
  padding: 16px;
  border: 1px solid rgba(88, 28, 135, .11);
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 14px 30px rgba(88, 28, 135, .07);
}

.workshop-detail-info .wide {
  grid-column: 1 / -1;
}

.workshop-detail-info dt {
  margin-bottom: 7px;
  color: #8b5cf6;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.workshop-detail-info dd {
  margin: 0;
  color: #251044;
  font-size: .98rem;
  line-height: 1.35;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.workshop-detail-content aside,
.workshop-detail-practical {
  padding: 18px;
  border: 1px solid rgba(245, 158, 11, .20);
  border-radius: 22px;
  background: linear-gradient(135deg, #fff8e6, #fff);
  color: #4b3100;
}

.workshop-detail-practical strong {
  display: block;
  margin-bottom: 6px;
  color: #6b3d00;
  font-size: 1rem;
}

.workshop-detail-practical p {
  margin: 0;
  line-height: 1.55;
}

.workshop-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}

.workshop-detail-footer > span {
  color: #6f627b;
  font-weight: 800;
}

.workshop-detail-footer .reserve-workshop {
  min-width: 245px;
}

.workshop-admin-pro {
  display: grid;
  gap: 22px;
}

.workshop-admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.workshop-admin-stats article {
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff, #fbf5ff);
  border: 1px solid rgba(88, 28, 135, .12);
  box-shadow: 0 14px 32px rgba(88, 28, 135, .08);
}

.workshop-admin-stats strong {
  display: block;
  font-size: 2rem;
  color: #5b1b84;
}

.workshop-admin-pro form {
  display: grid;
  gap: 16px;
}

.full-field {
  display: grid;
  gap: 8px;
}

.workshop-image-admin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: stretch;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(88, 28, 135, .12);
  background: #fffaf4;
}

.workshop-image-admin.workshop-image-admin-double {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.workshop-image-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.workshop-image-slot input[type="file"] {
  width: 100%;
}

.workshop-image-preview {
  min-height: 180px;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #f4ecff;
  color: #7a4f93;
  font-weight: 900;
}

.workshop-admin-table {
  display: grid;
  gap: 8px;
}

.workshop-admin-head,
.workshop-admin-table article {
  display: grid;
  grid-template-columns: 100px 1.35fr 120px 1fr 150px 320px;
  gap: 12px;
  align-items: center;
}

.workshop-admin-head {
  padding: 0 14px;
  color: #7b668b;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.workshop-admin-table article {
  padding: 14px;
  border: 1px solid rgba(88, 28, 135, .10);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(88, 28, 135, .07);
}

.workshop-admin-table small {
  display: block;
  margin-top: 4px;
  color: #7b668b;
}

.workshop-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.workshop-admin-actions button {
  border: 1px solid rgba(88, 28, 135, .14);
  background: #fff;
  color: #4b166b;
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 850;
}

.workshop-admin-calendar {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(88, 28, 135, .12);
  background: #fff;
}

.workshop-admin-calendar header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.calendar-weekdays span {
  color: #7b668b;
  font-weight: 900;
  text-align: center;
}

.calendar-day {
  min-height: 94px;
  padding: 8px;
  border-radius: 14px;
  background: #fbf8ff;
  border: 1px solid rgba(88, 28, 135, .08);
}

.calendar-day > strong {
  display: block;
  color: #2b1041;
  margin-bottom: 6px;
}

.calendar-day button {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 5px 7px;
  border: 0;
  border-radius: 8px;
  background: #efe2ff;
  color: #4b166b;
  font-size: .72rem;
  font-weight: 850;
  text-align: left;
}

@media (max-width: 900px) {
  .workshop-detail-card {
    grid-template-columns: 1fr;
  }

  .workshop-detail-photo {
    min-height: 260px;
  }

  .planning-workshop-body dl,
  .workshop-detail-content dl,
  .workshop-admin-stats,
  .workshop-image-admin.workshop-image-admin-double,
  .workshop-image-admin {
    grid-template-columns: 1fr;
  }

  .planning-card-actions,
  .planning-card-actions button,
  .reserve-workshop {
    width: 100%;
  }

  .workshop-admin-head {
    display: none;
  }

  .workshop-admin-table article {
    grid-template-columns: 1fr;
  }

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

/* Ateliers visibles directement dans l'accueil vitrine */
body:not(.session-started) .vitrine-ref-workshops {
  scroll-margin-top: 120px;
  margin: clamp(34px, 5vw, 72px) auto 0;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgba(88, 28, 135, .12);
  border-radius: clamp(28px, 4vw, 42px);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 204, 112, .22), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(250,246,255,.93));
  box-shadow: 0 24px 70px rgba(64, 24, 94, .12);
}

body:not(.session-started) .workshop-planning-home {
  display: grid;
  gap: 22px;
}

body:not(.session-started) .vitrine-ref-workshops-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
}

body:not(.session-started) .vitrine-ref-workshops-head h3 {
  margin: 8px 0 8px;
  color: #2c0d42;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: .96;
  letter-spacing: -0.02em;
}

body:not(.session-started) .vitrine-ref-workshops-head p {
  max-width: 760px;
  margin: 0;
  color: #6b5878;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  font-weight: 750;
}

body:not(.session-started) .vitrine-ref-workshops-login,
body:not(.session-started) .planning-card-actions button,
body:not(.session-started) .reserve-workshop {
  min-height: 48px;
  border-radius: 999px;
  font-weight: 900;
}

body:not(.session-started) .vitrine-ref-workshops-login {
  flex: 0 0 auto;
  padding: 14px 22px;
  color: #35104f;
  background: linear-gradient(135deg, #ffe7a3, #ffc857);
  box-shadow: 0 14px 28px rgba(176, 116, 12, .18);
  text-decoration: none;
}

body:not(.session-started) .vitrine-ref-workshops .planning-filters {
  justify-content: flex-start;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body:not(.session-started) .vitrine-ref-workshops .planning-filters button {
  background: #fff;
  border-color: rgba(88, 28, 135, .14);
  box-shadow: 0 10px 26px rgba(64, 24, 94, .08);
}

body:not(.session-started) .vitrine-ref-workshops .planning-filters button.active {
  color: #fff;
  background: linear-gradient(135deg, #51206f, #8f3fc7);
}

body:not(.session-started) .vitrine-ref-workshops .workshop-planning-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

body:not(.session-started) .vitrine-ref-workshops .planning-workshop-card.modern {
  min-height: 100%;
  border-radius: 28px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(88, 28, 135, .12);
  box-shadow: 0 18px 48px rgba(64, 24, 94, .11);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body:not(.session-started) .vitrine-ref-workshops .planning-workshop-card.modern:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 200, 87, .85);
  box-shadow: 0 26px 64px rgba(64, 24, 94, .16);
}

body:not(.session-started) .vitrine-ref-workshops .planning-workshop-photo {
  aspect-ratio: 16 / 10;
  min-height: 0;
  border-radius: 0;
}

body:not(.session-started) .vitrine-ref-workshops .planning-workshop-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:not(.session-started) .vitrine-ref-workshops .planning-workshop-body {
  padding: 22px;
}

body:not(.session-started) .vitrine-ref-workshops .planning-workshop-body h3 {
  color: #2c0d42;
  font-size: clamp(1.25rem, 1.6vw, 1.62rem);
  line-height: 1.12;
}

body:not(.session-started) .vitrine-ref-workshops .planning-workshop-body p,
body:not(.session-started) .vitrine-ref-workshops .planning-workshop-body dd {
  color: #5f506a;
  line-height: 1.5;
}

body:not(.session-started) .vitrine-ref-workshops .planning-card-actions {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}

body:not(.session-started) .vitrine-ref-workshops .reserve-workshop {
  color: #35104f;
  background: linear-gradient(135deg, #ffe7a3, #ffc857);
  box-shadow: 0 14px 28px rgba(176, 116, 12, .18);
}

body:not(.session-started) .vitrine-ref-workshops .planning-status {
  min-height: 1.2em;
  margin: 0;
  color: #6b5878;
  font-weight: 800;
}

@media (max-width: 1180px) {
  body:not(.session-started) .vitrine-ref-workshops .workshop-planning-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body:not(.session-started) .vitrine-ref-workshops {
    margin-top: 28px;
    padding: 18px;
    border-radius: 28px;
  }

  body:not(.session-started) .vitrine-ref-workshops-head {
    display: grid;
    gap: 16px;
  }

  body:not(.session-started) .vitrine-ref-workshops-login {
    width: 100%;
    text-align: center;
  }

  body:not(.session-started) .vitrine-ref-workshops .workshop-planning-list,
  body:not(.session-started) .vitrine-ref-workshops .planning-card-actions {
    grid-template-columns: 1fr;
  }

  body:not(.session-started) .vitrine-ref-workshops .planning-workshop-photo {
    aspect-ratio: 4 / 3;
  }
}

/* Refonte publique du planning : accès direct depuis l'accueil */
body:not(.session-started) #vitrineAteliers.vitrine-ref-workshops {
  width: min(100%, 1760px);
  margin: clamp(42px, 5vw, 86px) auto;
  padding: clamp(28px, 4vw, 56px);
  border: 0;
  border-radius: clamp(30px, 4vw, 54px);
  background:
    radial-gradient(circle at 8% 14%, rgba(255, 200, 87, .24), transparent 26%),
    radial-gradient(circle at 90% 0%, rgba(145, 82, 206, .14), transparent 30%),
    linear-gradient(135deg, #fff, #fbf8ff 62%, #fff7e8);
  box-shadow: 0 30px 90px rgba(43, 13, 66, .12);
}

body:not(.session-started) #vitrineAteliers .vitrine-ref-workshops-head {
  align-items: center;
  margin-bottom: clamp(12px, 2vw, 20px);
}

body:not(.session-started) #vitrineAteliers .vitrine-ref-workshops-head h3 {
  max-width: 860px;
  margin: 6px 0 10px;
  color: #2b0f3f;
  font-size: clamp(2.4rem, 5vw, 4.7rem);
  letter-spacing: -0.045em;
}

body:not(.session-started) #vitrineAteliers .vitrine-ref-workshops-note {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  color: #4b3100;
  background: linear-gradient(135deg, #ffe8a8, #ffc857);
  box-shadow: 0 16px 34px rgba(176, 116, 12, .2);
  font-weight: 950;
  white-space: nowrap;
}

body:not(.session-started) #vitrineAteliers .planning-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 16px;
}

body:not(.session-started) #vitrineAteliers .planning-filters button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(77, 27, 111, .12);
  border-radius: 999px;
  color: #4b176f;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(64, 24, 94, .07);
  font-weight: 900;
}

body:not(.session-started) #vitrineAteliers .planning-filters button.active {
  color: #fff;
  background: linear-gradient(135deg, #4b176f, #8f3fc7);
  box-shadow: 0 16px 32px rgba(85, 30, 126, .2);
}

body:not(.session-started) #vitrineAteliers .workshop-planning-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 34px);
}

body:not(.session-started) #vitrineAteliers .planning-workshop-card.modern {
  display: grid;
  grid-template-columns: minmax(260px, .92fr) minmax(0, 1.08fr);
  min-height: 360px;
  border: 1px solid rgba(65, 22, 96, .12);
  border-radius: 34px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 20px 58px rgba(43, 13, 66, .12);
  overflow: hidden;
  cursor: pointer;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-card.modern:hover,
body:not(.session-started) #vitrineAteliers .planning-workshop-card.modern:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(255, 200, 87, .9);
  box-shadow: 0 30px 78px rgba(43, 13, 66, .17);
}

body:not(.session-started) #vitrineAteliers .planning-workshop-media {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 0 0 18px;
  background: linear-gradient(180deg, #fff 0%, #fffaf1 100%);
}

body:not(.session-started) #vitrineAteliers .planning-workshop-photo {
  width: 100%;
  height: 100%;
  min-height: 360px;
  aspect-ratio: auto;
  border-radius: 0;
  background: #f6eefb;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-photo img,
body:not(.session-started) #vitrineAteliers .planning-workshop-photo .workshop-default-visual {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-body {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 34px);
}

body:not(.session-started) #vitrineAteliers .planning-workshop-topline {
  align-items: start;
  gap: 14px;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-topline time {
  width: 74px;
  height: 78px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, #4b176f, #8d3bc0);
  box-shadow: 0 14px 28px rgba(75, 23, 111, .2);
}

body:not(.session-started) #vitrineAteliers .planning-workshop-topline time b {
  font-size: 2rem;
  line-height: 1;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body:not(.session-started) #vitrineAteliers .workshop-status,
body:not(.session-started) #vitrineAteliers .workshop-seats,
body:not(.session-started) #vitrineAteliers .planning-category {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 950;
}

body:not(.session-started) #vitrineAteliers .workshop-seats {
  color: #4b3100;
  background: #fff1bd;
}

body:not(.session-started) #vitrineAteliers .planning-category {
  justify-self: start;
  color: #4b176f;
  background: #f0e6ff;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-body h3 {
  margin: 0;
  color: #241039;
  font-size: clamp(1.6rem, 2vw, 2.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-body p {
  margin: 0;
  color: #5c5067;
  font-size: 1rem;
  line-height: 1.55;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 4px;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-meta div {
  padding: 11px 12px;
  border: 1px solid rgba(80, 31, 113, .09);
  border-radius: 16px;
  background: #fbf8ff;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-meta dt {
  color: #8a7895;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-meta dd {
  margin: 3px 0 0;
  color: #2f173f;
  font-size: .94rem;
  font-weight: 850;
}

body:not(.session-started) #vitrineAteliers .planning-card-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 4px;
}

body:not(.session-started) #vitrineAteliers .planning-card-actions button {
  min-height: 52px;
  border-radius: 16px;
}

body:not(.session-started) #vitrineAteliers .reserve-workshop {
  order: 1;
  width: calc(100% - 36px);
  justify-self: center;
  min-height: 52px;
  border-radius: 16px;
  border: 0;
  color: #35104f;
  background: linear-gradient(135deg, #ffe8a8, #ffc857);
  box-shadow: 0 16px 32px rgba(176, 116, 12, .2);
}

body:not(.session-started) #vitrineAteliers .workshop-detail-link {
  order: 2;
  border: 1px solid rgba(80, 31, 113, .13);
  color: #4b176f;
  background: #fff;
}

@media (max-width: 1240px) {
  body:not(.session-started) #vitrineAteliers .workshop-planning-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body:not(.session-started) #vitrineAteliers.vitrine-ref-workshops {
    width: calc(100% - 24px);
    margin: 26px auto;
    padding: 18px;
    border-radius: 28px;
  }

  body:not(.session-started) #vitrineAteliers .vitrine-ref-workshops-head {
    display: grid;
  }

  body:not(.session-started) #vitrineAteliers .vitrine-ref-workshops-note {
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  body:not(.session-started) #vitrineAteliers .planning-workshop-card.modern {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 26px;
  }

  body:not(.session-started) #vitrineAteliers .planning-workshop-photo {
    min-height: 250px;
    aspect-ratio: 16 / 11;
  }

  body:not(.session-started) #vitrineAteliers .planning-workshop-topline {
    grid-template-columns: auto 1fr;
  }

  body:not(.session-started) #vitrineAteliers .planning-workshop-meta,
  body:not(.session-started) #vitrineAteliers .planning-card-actions {
    grid-template-columns: 1fr;
  }
}

/* Planning public compact : cartes plus lisibles et visuelles */
body:not(.session-started) #vitrineAteliers.vitrine-ref-workshops {
  width: min(calc(100% - 56px), 1500px);
  padding: clamp(24px, 3vw, 40px);
}

body:not(.session-started) #vitrineAteliers .vitrine-ref-workshops-head h3 {
  font-size: clamp(2rem, 3.4vw, 3.35rem);
  letter-spacing: -0.035em;
}

body:not(.session-started) #vitrineAteliers .workshop-planning-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-card.modern {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 28px;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-media {
  gap: 12px;
  padding-bottom: 16px;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-photo {
  height: 210px;
  min-height: 210px;
  aspect-ratio: 16 / 9;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-photo img,
body:not(.session-started) #vitrineAteliers .planning-workshop-photo .workshop-default-image,
body:not(.session-started) #vitrineAteliers .planning-workshop-photo .workshop-default-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:not(.session-started) #vitrineAteliers .workshop-default-image.visual-fallback {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f7efff;
}

body:not(.session-started) #vitrineAteliers .workshop-default-image.visual-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43, 15, 63, .04), rgba(43, 15, 63, .45));
}

body:not(.session-started) #vitrineAteliers .workshop-default-image.visual-fallback span,
body:not(.session-started) #vitrineAteliers .workshop-default-image.visual-fallback strong {
  position: absolute;
  z-index: 1;
}

body:not(.session-started) #vitrineAteliers .workshop-default-image.visual-fallback span {
  left: 18px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 22px rgba(43, 13, 66, .18);
  font-size: 1.5rem;
}

body:not(.session-started) #vitrineAteliers .workshop-default-image.visual-fallback strong {
  left: 18px;
  right: 18px;
  bottom: 16px;
  color: #fff;
  font-size: 1.05rem;
  text-shadow: 0 2px 12px rgba(43, 13, 66, .38);
}

body:not(.session-started) #vitrineAteliers .planning-workshop-body {
  gap: 11px;
  padding: 18px;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-topline time {
  width: 62px;
  height: 66px;
  border-radius: 18px;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-topline time b {
  font-size: 1.55rem;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-badges {
  justify-content: flex-end;
}

body:not(.session-started) #vitrineAteliers .workshop-status,
body:not(.session-started) #vitrineAteliers .workshop-seats,
body:not(.session-started) #vitrineAteliers .planning-category {
  min-height: 30px;
  padding: 7px 10px;
  font-size: .72rem;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-body h3 {
  font-size: clamp(1.28rem, 1.35vw, 1.55rem);
  line-height: 1.14;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-body p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: .95rem;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-meta {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-meta div {
  padding: 9px 10px;
  border-radius: 14px;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-meta dd {
  font-size: .85rem;
  line-height: 1.25;
}

body:not(.session-started) #vitrineAteliers .planning-card-actions {
  grid-template-columns: 1fr;
  gap: 8px;
}

body:not(.session-started) #vitrineAteliers .planning-card-actions button {
  min-height: 46px;
  border-radius: 15px;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-media .reserve-workshop {
  min-height: 46px;
}

@media (max-width: 1280px) {
  body:not(.session-started) #vitrineAteliers .workshop-planning-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body:not(.session-started) #vitrineAteliers.vitrine-ref-workshops {
    width: calc(100% - 22px);
    padding: 16px;
  }

  body:not(.session-started) #vitrineAteliers .workshop-planning-list {
    grid-template-columns: 1fr;
  }

  body:not(.session-started) #vitrineAteliers .planning-workshop-photo {
    height: 220px;
    min-height: 220px;
  }

  body:not(.session-started) #vitrineAteliers .planning-workshop-media .reserve-workshop {
    width: calc(100% - 28px);
  }
}

/* Fiche detail atelier : lecture plus claire */
.workshop-detail-modal .workshop-detail-card {
  width: min(1120px, calc(100vw - 32px));
  max-height: min(88vh, 860px);
  grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr);
  border: 1px solid rgba(88, 28, 135, .12);
  border-radius: 34px;
  background: linear-gradient(135deg, #fff 0%, #fffaf1 100%);
  box-shadow: 0 34px 90px rgba(25, 8, 44, .30);
}

.workshop-detail-modal .workshop-detail-photo {
  min-height: 560px;
  position: sticky;
  top: 0;
}

.workshop-detail-modal .workshop-detail-photo img,
.workshop-detail-modal .workshop-detail-photo .workshop-default-image {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}

.workshop-detail-heading,
.workshop-detail-content {
  min-width: 0;
}

.workshop-detail-heading {
  display: grid;
  gap: 16px;
}

.workshop-detail-heading h2 {
  max-width: 12ch;
}

.workshop-detail-heading > p {
  margin: 0;
  color: #5f5170;
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 700;
}

.workshop-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.workshop-detail-modal .workshop-seats,
.workshop-detail-modal .planning-category,
.workshop-detail-modal .workshop-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 36px;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.workshop-detail-modal .workshop-seats {
  color: #4b3100;
  background: #fff1bd;
}

.workshop-detail-modal .planning-category {
  color: #4b176f;
  background: #f0e6ff;
}

.workshop-detail-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.workshop-detail-info div {
  min-height: 90px;
  padding: 16px;
  border: 1px solid rgba(88, 28, 135, .11);
  border-radius: 20px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 14px 30px rgba(88, 28, 135, .07);
}

.workshop-detail-info .wide {
  grid-column: 1 / -1;
}

.workshop-detail-info dt {
  margin-bottom: 7px;
  color: #8b5cf6;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.workshop-detail-info dd {
  margin: 0;
  color: #251044;
  font-size: .98rem;
  line-height: 1.35;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.workshop-detail-practical {
  padding: 18px;
  border: 1px solid rgba(245, 158, 11, .20);
  border-radius: 22px;
  background: linear-gradient(135deg, #fff8e6, #fff);
  color: #4b3100;
}

.workshop-detail-practical strong {
  display: block;
  margin-bottom: 6px;
  color: #6b3d00;
  font-size: 1rem;
}

.workshop-detail-practical p {
  margin: 0;
  line-height: 1.55;
}

.workshop-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}

.workshop-detail-footer > span {
  color: #6f627b;
  font-weight: 800;
}

.workshop-detail-footer .reserve-workshop {
  min-width: 245px;
}

@media (max-width: 860px) {
  .workshop-detail-modal {
    padding: 10px;
    align-items: start;
  }

  .workshop-detail-modal .workshop-detail-card {
    width: 100%;
    max-height: calc(100vh - 20px);
    grid-template-columns: 1fr;
    border-radius: 26px;
  }

  .workshop-detail-modal .workshop-detail-photo {
    min-height: 240px;
    position: relative;
  }

  .workshop-detail-modal .workshop-detail-photo img,
  .workshop-detail-modal .workshop-detail-photo .workshop-default-image {
    min-height: 240px;
  }

  .workshop-detail-content {
    padding: 24px;
  }

  .workshop-detail-info {
    grid-template-columns: 1fr;
  }

  .workshop-detail-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .workshop-detail-footer .reserve-workshop {
    width: 100%;
    min-width: 0;
  }
}

/* Fiche atelier premium compacte */
.workshop-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.workshop-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(29, 10, 45, .42);
  backdrop-filter: blur(10px);
}

.workshop-detail-modal .workshop-detail-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(310px, .42fr) minmax(0, .58fr);
  gap: 0;
  width: min(1220px, calc(100vw - 48px));
  max-height: min(90vh, 820px);
  overflow: hidden;
  border: 1px solid rgba(88, 28, 135, .12);
  border-radius: 32px;
  background: #fffdf8;
  box-shadow: 0 30px 90px rgba(31, 10, 48, .26);
}

.workshop-detail-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(88, 28, 135, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #32104f;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 12px 28px rgba(49, 16, 79, .16);
  cursor: pointer;
}

.workshop-detail-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  background: linear-gradient(180deg, #fbf7ff 0%, #fff7e8 100%);
  border-right: 1px solid rgba(88, 28, 135, .10);
  overflow: auto;
}

.workshop-detail-gallery {
  display: grid;
  gap: 14px;
}

.workshop-detail-modal .workshop-detail-photo {
  position: relative;
  min-height: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 24px;
  background: #f4ecff;
  box-shadow: 0 18px 40px rgba(88, 28, 135, .13);
}

.workshop-detail-modal .workshop-detail-photo.is-secondary {
  aspect-ratio: 16 / 10;
  border-radius: 22px;
}

.workshop-detail-modal .workshop-detail-photo img,
.workshop-detail-modal .workshop-detail-photo .workshop-default-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.workshop-detail-modal .workshop-detail-photo .workshop-default-image {
  display: grid;
  place-items: center;
}

.workshop-detail-modal .workshop-default-image.visual-fallback::after,
.workshop-detail-modal .workshop-default-image.visual-fallback span,
.workshop-detail-modal .workshop-default-image.visual-fallback strong {
  display: none;
}

.workshop-detail-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: min(90vh, 820px);
  padding: 28px 30px 0;
  overflow: auto;
  background: #fff;
}

.workshop-detail-heading {
  display: grid;
  gap: 12px;
  padding-right: 48px;
}

.workshop-detail-heading h2 {
  max-width: none;
  margin: 0;
  color: #210735;
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.workshop-detail-heading > p {
  max-width: 62ch;
  margin: 0;
  color: #6a5b73;
  font-size: 1.04rem;
  line-height: 1.55;
  font-weight: 750;
}

.workshop-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workshop-detail-modal .workshop-seats,
.workshop-detail-modal .planning-category,
.workshop-detail-modal .workshop-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 34px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.workshop-detail-modal .planning-category {
  color: #48126b;
  background: #f1e7ff;
}

.workshop-detail-modal .workshop-seats {
  color: #214718;
  background: #eaf8de;
}

.workshop-detail-modal .workshop-seats.almost-full {
  color: #704000;
  background: #fff0c7;
}

.workshop-detail-modal .workshop-seats.full,
.workshop-detail-modal .workshop-seats.cancelled {
  color: #8f1d1d;
  background: #ffe1e1;
}

.workshop-detail-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

.workshop-detail-info div {
  min-height: 0;
  padding: 13px 14px;
  border: 1px solid rgba(88, 28, 135, .10);
  border-radius: 18px;
  background: #fbf9ff;
  box-shadow: none;
}

.workshop-detail-info .wide {
  grid-column: 1 / -1;
}

.workshop-detail-info dt {
  margin: 0 0 5px;
  color: #7b3bb1;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
}

.workshop-detail-info dd {
  margin: 0;
  color: #251044;
  font-size: .96rem;
  line-height: 1.3;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.workshop-detail-primary-action {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff8e3, #fff);
  border: 1px solid rgba(232, 168, 38, .28);
}

.workshop-detail-primary-action .reserve-workshop {
  min-height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f2be45, #ffe08a);
  color: #3f2600;
  box-shadow: 0 14px 28px rgba(196, 137, 20, .24);
}

.workshop-detail-primary-action span {
  color: #7a657e;
  font-size: .9rem;
  font-weight: 800;
  text-align: center;
}

.workshop-detail-scroll {
  display: grid;
  gap: 14px;
  padding-bottom: 96px;
}

.workshop-detail-section {
  padding: 18px;
  border: 1px solid rgba(88, 28, 135, .10);
  border-radius: 22px;
  background: #fff;
}

.workshop-detail-section h3 {
  margin: 0 0 10px;
  color: #2d0b44;
  font-size: 1.05rem;
}

.workshop-detail-section p {
  margin: 0;
  color: #5c4d66;
  line-height: 1.55;
  font-weight: 700;
}

.workshop-detail-section ul,
.workshop-detail-section ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workshop-detail-section li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  color: #4a365a;
  line-height: 1.4;
  font-weight: 760;
}

.workshop-detail-section li > span:first-child,
.workshop-detail-program li::before {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff1bd;
  color: #5b3900;
  font-weight: 950;
}

.workshop-detail-program ol {
  counter-reset: workshop-step;
}

.workshop-detail-program li {
  grid-template-columns: auto 1fr;
  counter-increment: workshop-step;
}

.workshop-detail-program li::before {
  content: counter(workshop-step);
}

.workshop-detail-program li strong,
.workshop-detail-program li span {
  grid-column: 2;
}

.workshop-detail-program li strong {
  color: #32104f;
}

.workshop-detail-program li span {
  color: #675a70;
}

.workshop-detail-objectives {
  background: rgba(255, 255, 255, .82);
}

.workshop-detail-practical {
  background: linear-gradient(135deg, #fff9e8, #fff);
  border-color: rgba(245, 158, 11, .22);
  color: #4b3100;
}

.workshop-detail-sticky-reserve {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin: auto -30px 0;
  padding: 14px 30px;
  border-top: 1px solid rgba(88, 28, 135, .10);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  box-shadow: 0 -18px 40px rgba(88, 28, 135, .08);
}

.workshop-detail-sticky-reserve strong {
  color: #2d0b44;
  font-size: 1.15rem;
}

.workshop-detail-sticky-reserve span {
  color: #6a5b73;
  font-weight: 850;
}

.workshop-detail-sticky-reserve .reserve-workshop {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f2be45, #ffe08a);
  color: #3f2600;
}

@media (max-width: 900px) {
  .workshop-detail-modal {
    align-items: stretch;
    padding: 10px;
  }

  .workshop-detail-modal .workshop-detail-card {
    width: 100%;
    max-height: calc(100vh - 20px);
    grid-template-columns: 1fr;
    border-radius: 24px;
    overflow: auto;
  }

  .workshop-detail-left {
    max-height: none;
    padding: 14px 14px 0;
    border-right: 0;
    background: #fff;
    overflow: visible;
  }

  .workshop-detail-modal .workshop-detail-photo {
    aspect-ratio: 16 / 9;
    border-radius: 20px;
  }

  .workshop-detail-gallery {
    gap: 10px;
  }

  .workshop-detail-modal .workshop-detail-photo.is-secondary {
    aspect-ratio: 16 / 9;
  }

  .workshop-detail-left .workshop-detail-objectives {
    display: none;
  }

  .workshop-detail-content {
    max-height: none;
    padding: 18px 16px 0;
    overflow: visible;
  }

  .workshop-detail-heading {
    padding-right: 42px;
  }

  .workshop-detail-heading h2 {
    font-size: clamp(1.65rem, 8vw, 2.35rem);
  }

  .workshop-detail-info {
    grid-template-columns: 1fr;
  }

  .workshop-detail-sticky-reserve {
    grid-template-columns: 1fr;
    margin-inline: -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }

  .workshop-detail-sticky-reserve .reserve-workshop {
    width: 100%;
  }
}

/* Vitrine / planning : echelle plus sobre et moins massive */
body:not(.session-started) #vitrineAteliers.vitrine-ref-workshops {
  width: min(calc(100% - 64px), 1420px) !important;
  margin: clamp(34px, 4vw, 64px) auto !important;
  padding: clamp(22px, 2.5vw, 34px) !important;
  border-radius: clamp(24px, 3vw, 38px) !important;
}

body:not(.session-started) #vitrineAteliers .vitrine-ref-workshops-head h3 {
  max-width: 720px !important;
  font-size: clamp(2rem, 3.15vw, 3.2rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}

body:not(.session-started) #vitrineAteliers .vitrine-ref-workshops-head p {
  max-width: 660px !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

body:not(.session-started) #vitrineAteliers .vitrine-ref-workshops-note {
  min-height: 42px !important;
  padding: 0 16px !important;
  font-size: .88rem !important;
}

body:not(.session-started) #vitrineAteliers .planning-filters {
  gap: 8px !important;
  margin: 4px 0 14px !important;
}

body:not(.session-started) #vitrineAteliers .planning-filters button {
  min-height: 38px !important;
  padding: 0 14px !important;
  font-size: .86rem !important;
  box-shadow: 0 8px 18px rgba(64, 24, 94, .055) !important;
}

body:not(.session-started) #vitrineAteliers .workshop-planning-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-card.modern {
  min-height: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 36px rgba(43, 13, 66, .09) !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-card.modern:hover,
body:not(.session-started) #vitrineAteliers .planning-workshop-card.modern:focus-visible {
  transform: translateY(-4px) !important;
  box-shadow: 0 22px 48px rgba(43, 13, 66, .13) !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-media {
  gap: 10px !important;
  padding-bottom: 14px !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-photo {
  height: 178px !important;
  min-height: 178px !important;
  aspect-ratio: 16 / 9 !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-body {
  gap: 9px !important;
  padding: 16px !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-topline {
  gap: 10px !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-topline time {
  width: 54px !important;
  height: 58px !important;
  border-radius: 16px !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-topline time b {
  font-size: 1.35rem !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-topline time span {
  font-size: .68rem !important;
}

body:not(.session-started) #vitrineAteliers .workshop-status,
body:not(.session-started) #vitrineAteliers .workshop-seats,
body:not(.session-started) #vitrineAteliers .planning-category {
  min-height: 28px !important;
  padding: 6px 9px !important;
  font-size: .68rem !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-body h3 {
  font-size: clamp(1.16rem, 1.28vw, 1.38rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.015em !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-body p {
  font-size: .9rem !important;
  line-height: 1.42 !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-meta {
  gap: 8px !important;
  margin: 0 !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-meta div {
  padding: 8px 9px !important;
  border-radius: 12px !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-meta dt {
  font-size: .64rem !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-meta dd {
  font-size: .82rem !important;
}

body:not(.session-started) #vitrineAteliers .planning-card-actions {
  gap: 9px !important;
}

body:not(.session-started) #vitrineAteliers .planning-card-actions button,
body:not(.session-started) #vitrineAteliers .reserve-workshop {
  min-height: 42px !important;
  border-radius: 13px !important;
  font-size: .88rem !important;
}

body:not(.session-started) #vitrineAteliers .reserve-workshop {
  width: calc(100% - 28px) !important;
}

body:not(.session-started) #vitrineAteliers .workshop-default-image.visual-fallback span {
  width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
  font-size: 1.25rem !important;
}

body:not(.session-started) #vitrineAteliers .workshop-default-image.visual-fallback strong {
  font-size: .95rem !important;
}

@media (max-width: 1180px) {
  body:not(.session-started) #vitrineAteliers .workshop-planning-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body:not(.session-started) #vitrineAteliers.vitrine-ref-workshops {
    width: calc(100% - 24px) !important;
    margin: 24px auto !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }

  body:not(.session-started) #vitrineAteliers .workshop-planning-list {
    grid-template-columns: 1fr !important;
  }

  body:not(.session-started) #vitrineAteliers .planning-workshop-photo {
    height: 210px !important;
    min-height: 210px !important;
  }

  body:not(.session-started) #vitrineAteliers .planning-workshop-body h3 {
    font-size: 1.28rem !important;
  }
}

/* Calendrier : photos cadrées et intégrées proprement aux cartes */
body:not(.session-started) #vitrineAteliers .planning-workshop-card.modern {
  align-items: stretch !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-media {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f4edf8 !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-photo {
  position: relative !important;
  width: 100% !important;
  height: 200px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #f4edf8 !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-photo > img,
body:not(.session-started) #vitrineAteliers .planning-workshop-photo .workshop-default-image,
body:not(.session-started) #vitrineAteliers .planning-workshop-photo .workshop-default-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

body:not(.session-started) #vitrineAteliers .planning-workshop-body {
  width: 100% !important;
  flex: 1 1 auto !important;
  align-content: start !important;
  box-sizing: border-box !important;
}

body:not(.session-started) #vitrineAteliers .planning-card-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: auto !important;
  padding-top: 4px !important;
}

body:not(.session-started) #vitrineAteliers .planning-card-actions .reserve-workshop,
body:not(.session-started) #vitrineAteliers .planning-card-actions .workshop-detail-link {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 10px !important;
  justify-self: stretch !important;
}

body:not(.session-started) #vitrineAteliers .planning-card-actions .reserve-workshop {
  color: #35104f !important;
  border: 0 !important;
  background: linear-gradient(135deg, #ffe8a8, #ffc857) !important;
}

@media (max-width: 720px) {
  body:not(.session-started) #vitrineAteliers .planning-workshop-photo {
    height: 220px !important;
  }

  body:not(.session-started) #vitrineAteliers .planning-card-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Boîte de réception du formulaire de contact */
.admin-messages-nav {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#contactUnreadBadge {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  color: #fff;
  background: #c43f78;
  font-size: .72rem;
  font-weight: 950;
}

#contactUnreadBadge[hidden] { display: none !important; }

.contact-inbox-admin {
  display: grid;
  gap: 20px;
  background:
    radial-gradient(circle at 95% 0%, rgba(255, 208, 108, .18), transparent 28%),
    linear-gradient(145deg, #fff, #fffafd 62%, #fff9ee);
}

.contact-inbox-heading {
  align-items: center;
}

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

.contact-inbox-stats button {
  display: grid;
  gap: 3px;
  min-height: 88px;
  padding: 15px;
  border: 1px solid rgba(91, 27, 132, .12);
  border-radius: 18px;
  color: #4a1d61;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(61, 21, 87, .07);
  text-align: left;
}

.contact-inbox-stats strong { font-size: 1.65rem; }
.contact-inbox-stats span { color: #7d6988; font-size: .82rem; font-weight: 850; }

.contact-inbox-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #f7f0fa;
}

.contact-inbox-toolbar label { display: grid; gap: 6px; color: #573266; font-weight: 900; }
.contact-inbox-toolbar select { min-width: 220px; }
.contact-inbox-toolbar p { max-width: 560px; margin: 0; color: #7b6983; font-size: .82rem; }

.contact-inbox-list {
  display: grid;
  gap: 14px;
}

.contact-inbox-list[aria-busy="true"] { opacity: .55; pointer-events: none; }

.contact-inbox-card {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
  gap: 14px 20px;
  padding: 20px;
  border: 1px solid rgba(82, 31, 113, .12);
  border-left: 6px solid #b8a9c2;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(53, 16, 78, .07);
}

.contact-inbox-card.is-new { border-left-color: #c43f78; background: linear-gradient(135deg, #fff, #fff8fb); }
.contact-inbox-card.is-read { border-left-color: #f1b93f; }
.contact-inbox-card.is-answered { border-left-color: #4aab78; }
.contact-inbox-card.is-archived { opacity: .76; border-left-color: #a6a0aa; }

.contact-inbox-card header { display: grid; gap: 9px; }
.contact-inbox-card header > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.contact-inbox-card header strong { color: #321344; font-size: 1.08rem; }
.contact-inbox-card time { color: #8a788f; font-size: .75rem; font-weight: 750; }

.contact-inbox-status {
  display: inline-flex;
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  color: #6a2851;
  background: #ffe3ef;
  font-size: .7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.contact-inbox-card.is-answered .contact-inbox-status { color: #14633d; background: #ddf6e8; }
.contact-inbox-card.is-archived .contact-inbox-status { color: #625b66; background: #eeeaf0; }

.contact-inbox-person {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12px;
  border-radius: 15px;
  background: #f8f3fa;
}

.contact-inbox-person b { color: #40204f; }
.contact-inbox-person a { color: #6b2b8e; overflow-wrap: anywhere; }
.contact-inbox-person span { color: #8a7a91; font-size: .82rem; }

.contact-inbox-message {
  grid-column: 1 / -1;
  margin: 0;
  padding: 17px;
  border-radius: 16px;
  color: #4d3d54;
  background: #fffaf0;
  line-height: 1.58;
  white-space: normal;
}

.contact-inbox-card footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 3px;
}

.contact-inbox-card footer a,
.contact-inbox-card footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  text-decoration: none;
}

.contact-inbox-empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 30px;
  border: 1px dashed #d8c5e1;
  border-radius: 22px;
  color: #74627d;
  background: #fbf7fc;
  text-align: center;
}

.contact-inbox-empty span { font-size: 2rem; }
.contact-inbox-empty p { margin: 4px 0 0; }

@media (max-width: 760px) {
  .contact-inbox-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-inbox-toolbar { align-items: stretch; flex-direction: column; }
  .contact-inbox-toolbar select { width: 100%; min-width: 0; }
  .contact-inbox-card { grid-template-columns: 1fr; padding: 16px; }
  .contact-inbox-message,
  .contact-inbox-card footer { grid-column: 1; }
  .contact-inbox-card footer > * { width: 100%; }
}

/* Réservation directe des ateliers */
.workshop-booking-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 22px;
}

.workshop-booking-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35, 14, 45, .64);
  backdrop-filter: blur(7px);
}

.workshop-booking-card {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  max-height: calc(100vh - 36px);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(104, 47, 135, .14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 211, 122, .16), transparent 30%),
    linear-gradient(155deg, #fff, #fffdfb 66%, #fff9ef);
  box-shadow: 0 28px 80px rgba(35, 10, 48, .28);
  scrollbar-width: thin;
  scrollbar-color: #c7aad8 transparent;
}

.workshop-booking-card .workshop-detail-close {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  margin: 0;
  border: 1px solid rgba(76, 34, 96, .12);
  border-radius: 50%;
  color: #5c376c;
  background: rgba(255,255,255,.94);
  box-shadow: 0 7px 20px rgba(48, 17, 65, .1);
  font-size: 1.45rem;
}

.booking-world-layout { display: grid; grid-template-columns: minmax(310px, .82fr) minmax(0, 1.18fr); min-height: min(820px, calc(100vh - 36px)); max-height: calc(100vh - 36px); }
.booking-world-panel { position: relative; display: grid; grid-template-rows: minmax(230px, 42%) auto 1fr; overflow: hidden; color: #fff; background: linear-gradient(155deg, #351345, #642479 58%, #8f4a91); }
.booking-world-panel > img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; object-position: center; }
.booking-world-copy { display: grid; gap: 6px; padding: 23px 26px 18px; }
.booking-world-copy span { color: #ead7f0; font-family: Georgia, serif; font-size: .84rem; font-style: italic; }
.booking-world-copy strong { max-width: 330px; font-family: Georgia, serif; font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 650; line-height: 1.08; }
.booking-world-copy p { max-width: 330px; margin: 2px 0 0; color: rgba(255,255,255,.78); font-size: .8rem; line-height: 1.5; }
.booking-world-content { max-height: calc(100vh - 36px); overflow: auto; padding: clamp(30px, 4vw, 46px); scrollbar-width: thin; scrollbar-color: #c7aad8 transparent; }

.workshop-booking-card .workshop-detail-close:hover,
.workshop-booking-card .workshop-detail-close:focus-visible { color: #fff; background: #5b1b84; outline: 3px solid rgba(123, 63, 161, .22); outline-offset: 2px; }
.booking-modal-header { display: grid; gap: 8px; padding-right: 48px; }
.workshop-booking-card h2 { margin: 0; color: #351345; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.05; }
.booking-modal-header > p { margin: 0; color: #75627d; font-size: .98rem; }
.booking-kicker { color: #8c3baa; font-size: .72rem; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.booking-promises { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin: 8px 0 0 !important; color: #705a79 !important; font-family: Georgia, serif; font-size: .76rem !important; font-style: italic; }
.booking-promises i { width: 3px; height: 3px; border-radius: 50%; background: #c292a5; }

.booking-workshop-summary { display: grid; gap: 7px; margin: 20px 0 24px; padding: 18px 20px; border: 1px solid #eadcf1; border-radius: 20px; color: #5c4766; background: linear-gradient(135deg, #f7effb, #fdfaff); box-shadow: 0 8px 22px rgba(74, 32, 94, .05); }
.booking-workshop-summary strong { color: #3e1752; font-size: 1.1rem; }
.booking-workshop-summary > span { font-size: .88rem; font-weight: 720; }
.booking-summary-facts { display: flex; flex-wrap: wrap; gap: 7px 13px; padding-top: 7px; border-top: 1px solid rgba(111, 64, 135, .1); color: #644875; font-size: .78rem; font-weight: 820; }
.booking-workshop-summary small { color: #806f87; font-size: .76rem; font-weight: 720; }
.booking-world-panel .booking-workshop-summary { align-self: end; margin: 0 20px 22px; padding: 16px 17px; border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.82); background: rgba(255,255,255,.11); box-shadow: none; backdrop-filter: blur(8px); }
.booking-world-panel .booking-workshop-summary small { color: #e9d7ef; font-family: Georgia, serif; font-style: italic; }
.booking-world-panel .booking-workshop-summary strong { color: #fff; font-family: Georgia, serif; font-size: 1.05rem; }
.booking-world-panel .booking-summary-facts { border-color: rgba(255,255,255,.13); color: rgba(255,255,255,.82); }

#workshopBookingForm { display: grid; gap: 18px; }
.booking-form-section { display: grid; gap: 13px; padding: 22px 0 2px; border: 0; border-top: 1px solid #ecdfef; border-radius: 0; background: transparent; }
.booking-section-title { display: flex; align-items: flex-start; gap: 11px; }
.booking-section-title > span { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #5b1b84, #9346bc); font-size: .8rem; font-weight: 950; }
.booking-section-title h3 { margin: 3px 0 0; color: #3b174d; font-family: Georgia, serif; font-size: 1.18rem; font-weight: 650; }
.booking-section-title small { display: block; margin-top: 2px; color: #a05275; font-family: Georgia, serif; font-size: .72rem; font-style: italic; }
.booking-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
#workshopBookingForm label { color: #4e2a5e; font-size: .84rem; font-weight: 850; }
#workshopBookingForm input,
#workshopBookingForm select,
#workshopBookingForm textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #d8c8e0; border-radius: 12px; color: #362340; background: #fff; box-shadow: inset 0 1px 2px rgba(54, 24, 69, .03); font: inherit; }
#workshopBookingForm input:focus-visible,
#workshopBookingForm textarea:focus-visible { border-color: #7b3ba1; outline: 3px solid rgba(123, 59, 161, .15); }
#workshopBookingForm [aria-invalid="true"] { border-color: #bd315f; background: #fff9fb; outline: 3px solid rgba(189, 49, 95, .1); }
#workshopBookingForm textarea { min-height: 88px; resize: vertical; }
.booking-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.booking-children-list { display: grid; gap: 11px; }
.booking-child-row { display: grid; gap: 9px; padding: 14px 0 2px; border-top: 1px dashed #dfcde6; background: transparent; }
.booking-child-row:first-child { padding-top: 0; border-top: 0; }
.booking-child-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.booking-child-row-head strong { color: #5a2c6d; font-size: .82rem; }
.booking-child-fields { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 12px; }
.booking-remove-child { padding: 3px 0; border: 0; color: #9b3158; background: transparent; font-size: .72rem; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }
.booking-remove-child:hover,
.booking-remove-child:focus-visible { color: #671837; outline: 2px solid rgba(155,49,88,.18); outline-offset: 3px; }
.booking-add-child { justify-self: start; min-height: 40px; padding: 8px 13px; border: 1px solid #cdb5da; border-radius: 12px; color: #673181; background: #fff; font-size: .8rem; font-weight: 900; }
.booking-add-child:hover,
.booking-add-child:focus-visible { border-color: #7b3ba1; background: #f7effb; outline: 3px solid rgba(123,59,161,.12); }
.booking-children-limit { margin: -4px 0 0; color: #89768f; font-size: .72rem; }
.booking-field-error { min-height: 0; color: #a32450; font-size: .72rem; font-weight: 760; line-height: 1.35; }
.booking-field-error:empty { display: none; }
.booking-optional-section { background: transparent; }
.booking-after-card { display: block; padding: 15px 18px; border: 0; border-left: 3px solid #b47ab6; border-radius: 0 15px 15px 0; color: #5d4a65; background: linear-gradient(90deg, #f8f1f9, rgba(248,241,249,.35)); }
.booking-after-card strong { display: block; margin: 2px 0 6px; color: #442153; font-family: Georgia, serif; }
.booking-after-card p { position: relative; margin: 3px 0; padding-left: 13px; font-size: .78rem; line-height: 1.4; }
.booking-after-card p::before { content: ""; position: absolute; top: .55em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #a35c83; }
.booking-consent-wrap { display: grid; gap: 4px; }
#workshopBookingForm .booking-consent { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 9px; font-size: .86rem; font-weight: 700; line-height: 1.45; }
#workshopBookingForm .booking-consent input { width: 20px; min-height: 20px; margin-top: 1px; }
.booking-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.booking-submit { width: 100%; min-height: 56px; border-radius: 15px; background: linear-gradient(135deg, #5b1b84, #873ab1); box-shadow: 0 13px 28px rgba(91, 27, 132, .2); font-size: .95rem; }
.booking-submit:hover,
.booking-submit:focus-visible { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(91, 27, 132, .26); outline: 3px solid rgba(123,59,161,.18); outline-offset: 3px; }
.booking-submit:disabled { opacity: .65; transform: none; cursor: wait; }
.booking-security-note { margin: -10px 0 0; color: #806f87; font-size: .72rem; text-align: center; }
.booking-form-status:not(:empty) { margin: -6px 0 0; padding: 10px 12px; border-radius: 10px; color: #8a2348; background: #fff0f5; font-size: .78rem; }
.booking-success { display: grid; place-items: center; gap: 12px; padding: 30px 10px 10px; text-align: center; }
.booking-success-mark { position: relative; display: block; width: 70px; height: 70px; border-radius: 50%; background: #4aab78; }
.booking-success-mark::after { content: ""; position: absolute; top: 19px; left: 25px; width: 16px; height: 26px; border: solid #fff; border-width: 0 5px 5px 0; transform: rotate(45deg); }
.booking-success h3 { margin: 5px 0 0; color: #351345; font-size: 1.7rem; }
.booking-success p { max-width: 470px; margin: 0; color: #66536f; line-height: 1.55; }

.booking-admin { display: grid; gap: 20px; background: linear-gradient(145deg, #fff, #fffafd 62%, #fff9ee); }
.admin-bookings-nav span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; color: #fff; background: #c43f78; font-size: .72rem; font-weight: 950; }
#bookingUnreadBadge[hidden] { display: none !important; }
.booking-admin-card.is-confirmed { border-left-color: #4aab78; }
.booking-admin-card.is-waitlist { border-left-color: #f1b93f; }
.booking-admin-card.is-cancelled { opacity: .76; border-left-color: #a6a0aa; }
.booking-admin-card.is-confirmed .contact-inbox-status { color: #14633d; background: #ddf6e8; }
.booking-admin-card.is-waitlist .contact-inbox-status { color: #7a5200; background: #fff0c4; }
.booking-admin-card.is-cancelled .contact-inbox-status { color: #625b66; background: #eeeaf0; }
.booking-admin-card header small { color: #806e87; font-weight: 750; }

@media (max-width: 820px) {
  .workshop-booking-modal { align-items: end; padding: 0; }
  .workshop-booking-card { max-height: 95vh; overflow: auto; border-radius: 24px 24px 0 0; }
  .booking-world-layout { display: block; min-height: 0; max-height: none; }
  .booking-world-panel { display: grid; grid-template: 180px auto / 42% 58%; }
  .booking-world-panel > img { grid-row: 1 / 3; min-height: 100%; }
  .booking-world-copy { padding: 24px 22px 12px; }
  .booking-world-panel .booking-workshop-summary { align-self: start; margin: 0 18px 18px; padding: 13px 14px; }
  .booking-world-content { max-height: none; overflow: visible; padding: 28px 20px 30px; }
  .booking-modal-header { padding-right: 42px; }
  .booking-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .booking-world-panel { display: block; }
  .booking-world-panel > img { height: 190px; min-height: 190px; }
  .booking-world-copy { padding: 20px 20px 14px; }
  .booking-world-copy strong { font-size: 1.4rem; }
  .booking-world-panel .booking-workshop-summary { margin: 0 14px 18px; }
  .booking-world-content { padding: 24px 17px 28px; }
  .booking-promises { gap: 5px 7px; }
  .booking-promises i { display: none; }
  .booking-promises { flex-direction: column; align-items: flex-start; }
  .booking-form-section { padding-top: 19px; }
  .booking-child-fields { grid-template-columns: 1fr; }
  .booking-child-row-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .booking-after-card { padding: 14px; }
}

/* Priorité finale sur les anciens styles de la page de connexion. */
#connexionSession #accessRoleChooser[hidden],
#connexionSession #sessionForm[hidden],
#connexionSession #sessionForm .access-pathway-field[hidden] {
  display: none !important;
}

/* Connexion v2 : choix lisibles, empilés et immédiatement compréhensibles. */
#connexionSession .access-role-chooser {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center;
  gap: 14px !important;
  max-width: 620px;
  margin: auto;
}

#connexionSession .access-role-card {
  grid-template-columns: 62px minmax(0, 1fr) auto !important;
  gap: 17px !important;
  width: 100%;
  min-width: 0;
  min-height: 126px !important;
  padding: 20px 22px !important;
  border-radius: 22px !important;
}

#connexionSession .access-role-copy strong {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem) !important;
  line-height: 1.18 !important;
  overflow-wrap: normal;
  word-break: normal;
}

#connexionSession .access-role-copy em {
  max-width: 34ch;
  font-size: .9rem !important;
  line-height: 1.38 !important;
}

#connexionSession .access-role-arrow {
  width: auto !important;
  min-width: 82px;
  height: 38px !important;
  padding: 0 14px;
  border-radius: 999px !important;
  font-size: .78rem !important;
  white-space: nowrap;
}

@media (max-width: 620px) {
  #connexionSession .access-role-card {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 17px !important;
  }

  #connexionSession .access-role-arrow {
    display: none !important;
  }
}

/* Parcours enfant : jeu d'association visuel, propre à chaque module. */
.module-detail.kid-module-detail .module-practice-puzzle.kid-match-game {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 32px;
  color: #18214a;
  background: #f7f8ff;
  box-shadow: 0 24px 70px rgba(34, 48, 108, .16);
}

.kid-match-game .kid-match-hero {
  position: relative;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) minmax(145px, auto);
  align-items: center;
  gap: 20px;
  padding: 27px 30px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% 4%, rgba(255,255,255,.3), transparent 22%),
    radial-gradient(circle at 8% 120%, rgba(255,222,89,.38), transparent 30%),
    var(--kid-module-gradient);
}

.kid-match-game .kid-match-hero::after {
  content: "";
  position: absolute;
  right: 21%;
  bottom: -42px;
  width: 130px;
  height: 130px;
  border: 18px solid rgba(255,255,255,.08);
  border-radius: 50%;
}

.kid-match-mascot {
  position: relative;
  z-index: 1;
  width: 82px;
  height: 70px;
  border: 4px solid rgba(255,255,255,.82);
  border-radius: 25px;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.08), 0 12px 25px rgba(26,17,69,.18);
}

.kid-match-mascot::before,
.kid-match-mascot::after {
  content: "";
  position: absolute;
  top: 24px;
  width: 10px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
}

.kid-match-mascot::before { left: 19px; }
.kid-match-mascot::after { right: 19px; }

.kid-match-mascot > span {
  position: absolute;
  left: 28px;
  bottom: 14px;
  width: 20px;
  height: 9px;
  border-bottom: 4px solid #fff;
  border-radius: 0 0 999px 999px;
}

.kid-match-mascot > i {
  position: absolute;
  left: 36px;
  top: -20px;
  width: 5px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
}

.kid-match-mascot > i::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -7px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffdd59;
  box-shadow: 0 0 0 4px rgba(255,255,255,.2);
}

.kid-match-mascot > b {
  position: absolute;
  left: -9px;
  top: 28px;
  width: 8px;
  height: 22px;
  border-radius: 8px 0 0 8px;
  background: #ffdd59;
  box-shadow: 92px 0 0 #ffdd59;
}

.kid-match-hero > div:nth-child(2) {
  position: relative;
  z-index: 1;
}

.kid-match-hero small {
  color: rgba(255,255,255,.84);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.kid-match-hero h5 {
  margin: 4px 0 7px;
  color: #fff;
  font-size: clamp(1.45rem, 2.8vw, 2.2rem);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.kid-match-hero p {
  max-width: 64ch;
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: .9rem;
  line-height: 1.45;
}

.kid-match-score {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 16px;
  border: 2px solid rgba(255,255,255,.24);
  border-radius: 22px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
}

.kid-match-score > strong {
  color: #ffdf56;
  font-size: 1.8rem;
  font-weight: 950;
  line-height: 1;
}

.kid-match-score > small {
  color: #fff;
  font-size: .62rem;
}

.kid-match-score > i {
  display: block;
  width: 100%;
  height: 7px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
}

.kid-match-score > i > b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #ffdf56;
  transition: width .35s ease;
}

.kid-match-howto {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 20px 24px 0;
  padding: 13px 16px;
  border: 1px solid #dce3f5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(34, 48, 108, .06);
}

.kid-match-howto > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--kid-module-accent);
  font-size: .78rem;
  font-weight: 950;
}

.kid-match-howto p {
  margin: 0;
  color: #65708e;
  font-size: .78rem;
  line-height: 1.35;
}

.kid-match-howto strong { color: #18214a; }

.kid-match-board {
  display: grid;
  grid-template-columns: minmax(180px, .78fr) 54px minmax(300px, 1.22fr);
  gap: 14px;
  padding: 20px 24px 24px;
}

.kid-object-zone,
.kid-mission-zone {
  min-width: 0;
  padding: 18px;
  border: 1px solid #dfe5f5;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 13px 34px rgba(34, 48, 108, .07);
}

.kid-match-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}

.kid-match-label span {
  color: #151f4e;
  font-size: .98rem;
  font-weight: 950;
}

.kid-match-label small {
  color: #7d87a4;
  font-size: .65rem;
  font-weight: 800;
}

.module-detail.kid-module-detail .kid-match-game .practice-card-bank,
.module-detail.kid-module-detail .kid-match-game .practice-drop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.module-detail.kid-module-detail .kid-match-game .kid-object-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  min-height: 114px;
  padding: 12px;
  overflow: visible;
  border: 2px solid #e1e7f5;
  border-radius: 20px;
  color: #18214a;
  background: linear-gradient(145deg, #fff, #f8faff);
  box-shadow: 0 9px 22px rgba(34, 48, 108, .07);
  text-align: left;
}

.module-detail.kid-module-detail .kid-match-game .kid-object-card:hover,
.module-detail.kid-module-detail .kid-match-game .kid-object-card.selected {
  border-color: var(--kid-module-accent);
  box-shadow: 0 13px 28px color-mix(in srgb, var(--kid-module-accent), transparent 78%), 0 0 0 5px color-mix(in srgb, var(--kid-module-accent), transparent 88%);
  transform: translateY(-2px) rotate(-.4deg);
}

.module-detail.kid-module-detail .kid-match-game .kid-object-card.selected::after {
  content: "Je relie cette carte";
  position: absolute;
  right: 10px;
  top: -10px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #18214a;
  background: #ffdf56;
  font-size: .56rem;
  font-weight: 950;
}

.kid-match-game .kid-object-illustration {
  grid-row: 1 / 3;
  display: grid;
  width: 68px;
  height: 68px;
  min-height: 68px;
  place-items: center;
  border-radius: 20px;
  color: var(--kid-module-accent-dark);
  background:
    radial-gradient(circle at 30% 22%, #fff, transparent 35%),
    var(--kid-module-soft);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kid-module-accent), white 70%);
}

.kid-match-game .kid-object-illustration svg {
  width: 45px;
  height: 45px;
  overflow: visible;
}

.module-detail.kid-module-detail .kid-match-game .kid-object-card > strong {
  align-self: end;
  padding: 0;
  color: #18214a;
  font-size: .84rem;
  font-weight: 950;
  line-height: 1.2;
}

.module-detail.kid-module-detail .kid-match-game .kid-object-card > em {
  align-self: start;
  color: #7a85a1;
  font-size: .63rem;
  font-style: normal;
  font-weight: 750;
}

.kid-match-middle {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  padding: 49px 0 0;
}

.kid-match-middle span {
  position: relative;
  align-self: center;
  height: 3px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #c7d0e9 0 7px, transparent 7px 13px);
}

.kid-match-middle span::before,
.kid-match-middle span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--kid-module-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kid-module-accent), white 55%);
  transform: translateY(-50%);
}

.kid-match-middle span::before { left: -3px; }
.kid-match-middle span::after { right: -3px; }

.module-detail.kid-module-detail .kid-match-game .kid-match-target {
  position: relative;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 114px;
  padding: 12px 15px 12px 12px;
  border: 2px dashed #cbd4eb;
  border-radius: 20px;
  background: #fbfcff;
  box-shadow: none;
}

.module-detail.kid-module-detail .kid-match-game .kid-match-target:hover,
.module-detail.kid-module-detail .kid-match-game .kid-match-target:focus-visible {
  border-color: var(--kid-module-accent);
  background: var(--kid-module-soft);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--kid-module-accent), transparent 88%);
  transform: none;
}

.kid-target-node {
  display: block;
  width: 18px;
  height: 18px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #c6cfe5;
  box-shadow: 0 0 0 2px #c6cfe5;
}

.kid-target-copy {
  display: grid;
  gap: 3px;
}

.kid-target-copy small {
  color: var(--kid-module-accent-dark);
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.kid-target-copy strong {
  color: #18214a;
  font-size: .78rem;
  line-height: 1.35;
}

.kid-target-copy em {
  color: #8a94ae;
  font-size: .62rem;
  font-style: normal;
}

.module-detail.kid-module-detail .kid-match-game .kid-match-target:has(.kid-object-card) {
  grid-template-columns: 25px minmax(116px, .62fr) minmax(140px, 1fr);
  border-style: solid;
  border-color: color-mix(in srgb, var(--kid-module-accent), white 60%);
  background: #fff;
}

.module-detail.kid-module-detail .kid-match-game .kid-match-target .kid-object-card {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 82px;
  margin: 0;
  padding: 8px;
  border-radius: 15px;
}

.module-detail.kid-module-detail .kid-match-game .kid-match-target .kid-object-illustration {
  width: 46px;
  height: 46px;
  min-height: 46px;
  border-radius: 13px;
}

.module-detail.kid-module-detail .kid-match-game .kid-match-target .kid-object-illustration svg {
  width: 31px;
  height: 31px;
}

.module-detail.kid-module-detail .kid-match-game .kid-match-target .kid-object-card > em {
  display: none;
}

.module-detail.kid-module-detail .kid-match-game .kid-match-target:has(.kid-object-card) .kid-target-copy {
  grid-column: 3;
}

.module-detail.kid-module-detail .kid-match-game .kid-match-target:has(.kid-object-card) .kid-target-node {
  background: var(--kid-module-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kid-module-accent), white 55%);
}

.module-detail.kid-module-detail .kid-match-game .kid-match-target.is-correct {
  border-color: #25a66c;
  background: #effcf5;
  box-shadow: 0 0 0 5px rgba(37,166,108,.1);
}

.module-detail.kid-module-detail .kid-match-game .kid-match-target.is-correct::after {
  content: "Bonne connexion !";
  position: absolute;
  right: 10px;
  top: -10px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  background: #25a66c;
  font-size: .56rem;
  font-weight: 950;
}

.module-detail.kid-module-detail .kid-match-game .kid-match-target.is-wrong {
  border-color: #ef6f78;
  background: #fff4f5;
  animation: kidMatchShake .36s ease;
}

.module-detail.kid-module-detail .kid-match-game.is-success .kid-match-hero {
  background:
    radial-gradient(circle at 88% 4%, rgba(255,255,255,.3), transparent 22%),
    linear-gradient(125deg, #15855a, #29aa70 58%, #63c98f);
}

.kid-match-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 15px 24px;
  border-top: 1px solid #dde4f3;
  background: #fff;
}

.kid-match-footer p {
  margin: 0;
  color: #697592;
  font-size: .72rem;
  line-height: 1.4;
}

.kid-match-footer p strong { color: #18214a; }

.kid-match-footer > div {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #18214a;
  background: #f0f3fb;
  font-size: .68rem;
  font-weight: 850;
}

.kid-match-footer > div strong {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--kid-module-accent);
}

.kid-match-footer > button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #d3dbed;
  border-radius: 999px;
  color: #34406a;
  background: #fff;
  font: inherit;
  font-size: .68rem;
  font-weight: 900;
  cursor: pointer;
}

.kid-match-footer > button:hover {
  border-color: var(--kid-module-accent);
  color: var(--kid-module-accent-dark);
  background: var(--kid-module-soft);
}

.kid-module-detail .kid-match-game + .guided-practice-feedback:not(:empty) {
  margin-top: 2px;
  padding: 15px 18px;
  border: 2px solid color-mix(in srgb, var(--kid-module-accent), white 62%);
  border-radius: 17px;
  color: #18214a;
  background: var(--kid-module-soft);
  font-weight: 900;
}

.kid-module-detail .kid-match-game.is-success + .guided-practice-feedback:not(:empty) {
  border-color: #9bdfbf;
  color: #176643;
  background: #effcf5;
}

@keyframes kidMatchShake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  65% { transform: translateX(5px); }
}

@media (max-width: 900px) {
  .kid-match-board {
    grid-template-columns: 1fr;
  }

  .kid-match-middle {
    display: none;
  }
}

@media (max-width: 650px) {
  .kid-match-game .kid-match-hero {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
    padding: 24px 18px;
  }

  .kid-match-mascot {
    width: 58px;
    height: 54px;
    border-radius: 18px;
    transform: scale(.82);
    transform-origin: left center;
  }

  .kid-match-score {
    grid-column: 1 / -1;
    grid-template-columns: auto auto minmax(100px, 1fr);
    justify-items: start;
    align-items: center;
  }

  .kid-match-score > i { margin: 0; }

  .kid-match-howto {
    grid-template-columns: 32px minmax(0, 1fr);
    margin: 14px 12px 0;
  }

  .kid-match-board { padding: 14px 12px 18px; }

  .module-detail.kid-module-detail .kid-match-game .kid-match-target:has(.kid-object-card) {
    grid-template-columns: 20px minmax(90px, .65fr) minmax(120px, 1fr);
    gap: 8px;
    padding: 9px;
  }

  .kid-match-footer {
    grid-template-columns: 1fr auto;
    padding: 14px 16px;
  }

  .kid-match-footer p { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .kid-match-game .kid-match-score > i > b,
  .module-detail.kid-module-detail .kid-match-game .kid-match-target.is-wrong {
    animation: none;
    transition: none;
  }
}

/* Calendrier mensuel public des ateliers */
body:not(.session-started) #workshopMonthCalendar.calendar-page-only {
  display: none !important;
}

body:not(.session-started):has(#vitrineAteliers:target) #workshopMonthCalendar.calendar-page-only {
  display: block !important;
}

.public-workshop-calendar {
  margin: 24px 0 30px;
  padding: clamp(18px, 2.3vw, 30px);
  border: 1px solid rgba(85, 27, 132, .13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 210, 68, .18), transparent 31%),
    linear-gradient(145deg, #fff 0%, #fdfaff 65%, #fffaf0 100%);
  box-shadow: 0 22px 60px rgba(52, 20, 80, .09);
}

.public-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.public-calendar-header > div:first-child { min-width: 0; }

.public-calendar-kicker {
  margin: 0 0 4px;
  color: #7a2ca0;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.public-calendar-header h4 {
  margin: 0;
  color: #35104d;
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  line-height: 1.05;
}

.public-calendar-header p:not(.public-calendar-kicker) {
  margin: 7px 0 0;
  color: #6c5a76;
  font-weight: 700;
}

.public-calendar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.public-calendar-controls button {
  display: inline-grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  border: 1px solid rgba(85, 27, 132, .17);
  border-radius: 14px;
  background: #fff;
  color: #4e176f;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(64, 23, 88, .07);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.public-calendar-controls button:hover {
  transform: translateY(-2px);
  border-color: #6f24a1;
}

.public-calendar-controls .public-calendar-today {
  padding: 0 17px;
  border-color: #ffd244;
  background: #ffd244;
  color: #35104d;
}

.public-calendar-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  color: #5d4a68;
  font-size: .86rem;
  font-weight: 800;
}

.public-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.public-calendar-legend i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #7130a0;
  box-shadow: 0 0 0 4px rgba(113, 48, 160, .10);
}

.public-calendar-legend i.is-kids {
  background: #14a798;
  box-shadow: 0 0 0 4px rgba(20, 167, 152, .11);
}

.public-calendar-legend .public-calendar-hint {
  margin-left: auto;
  color: #8b7c93;
  font-weight: 650;
}

.public-calendar-scroll {
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-color: #d5c2e2 transparent;
}

.public-calendar-weekdays,
.public-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(116px, 1fr));
  gap: 8px;
  min-width: 860px;
}

.public-calendar-focus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: min(720px, 100%);
}

.public-calendar-day-column {
  min-height: 250px;
  padding: 16px;
  border: 1px solid rgba(81, 30, 111, .12);
  border-radius: 20px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 26px rgba(65, 22, 89, .06);
}

.public-calendar-day-column:nth-child(2) {
  background: rgba(255, 247, 221, .62);
}

.public-calendar-day-column.is-today {
  outline: 3px solid rgba(255, 210, 68, .55);
  outline-offset: -2px;
}

.public-calendar-day-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 9px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(81, 30, 111, .11);
}

.public-calendar-day-heading span {
  color: #5f237c;
  font-size: 1.08rem;
  font-weight: 950;
  text-transform: capitalize;
}

.public-calendar-day-heading strong {
  grid-row: span 2;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: #ffd244;
  color: #35104d;
  font-size: 1.25rem;
}

.public-calendar-day-column:nth-child(2) .public-calendar-day-heading strong {
  background: #7130a0;
  color: #fff;
}

.public-calendar-day-heading small {
  color: #81718a;
  font-size: .78rem;
  font-weight: 750;
  text-transform: capitalize;
}

.public-calendar-empty {
  display: grid;
  min-height: 150px;
  margin: 0;
  place-items: center;
  color: #8b7c93;
  font-size: .92rem;
  font-weight: 700;
  text-align: center;
}

.public-calendar-weekdays {
  margin-bottom: 8px;
}

.public-calendar-weekdays span {
  padding: 0 8px;
  color: #77667f;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
}

.public-calendar-day {
  min-height: 150px;
  padding: 10px;
  border: 1px solid rgba(81, 30, 111, .10);
  border-radius: 15px;
  background: rgba(255, 255, 255, .88);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.public-calendar-day:nth-child(7n),
.public-calendar-day:nth-child(7n - 1) {
  background: rgba(255, 247, 221, .55);
}

.public-calendar-day.is-empty {
  border-color: transparent;
  background: transparent;
}

.public-calendar-day.has-events {
  border-color: rgba(105, 37, 143, .20);
  box-shadow: 0 9px 24px rgba(65, 22, 89, .06);
}

.public-calendar-day.is-today {
  outline: 3px solid rgba(255, 210, 68, .52);
  outline-offset: -2px;
}

.public-calendar-day-number {
  display: grid;
  width: 29px;
  height: 29px;
  margin: 0 0 7px auto;
  place-items: center;
  border-radius: 10px;
  color: #4c3558;
  font-size: .84rem;
  font-weight: 900;
}

.public-calendar-day.is-today .public-calendar-day-number {
  background: #ffd244;
  color: #35104d;
}

.public-calendar-day-events {
  display: grid;
  gap: 7px;
}

.public-calendar-event {
  overflow: hidden;
  border: 1px solid rgba(102, 37, 145, .13);
  border-radius: 12px;
  background: #f6edfb;
}

.public-calendar-event.is-kids {
  border-color: rgba(20, 167, 152, .22);
  background: #e9faf6;
}

.public-calendar-event-main {
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 9px 9px 7px;
  border: 0;
  background: transparent;
  color: #38114f;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.public-calendar-event-main span {
  color: #782fa3;
  font-size: .69rem;
  font-weight: 950;
}

.public-calendar-event.is-kids .public-calendar-event-main span { color: #087c72; }

.public-calendar-event-main strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: .76rem;
  line-height: 1.22;
}

.public-calendar-event-main small {
  display: block;
  overflow: hidden;
  color: #76637e;
  font-size: .63rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-calendar-event-reserve {
  width: calc(100% - 12px);
  margin: 0 6px 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: #ffd244;
  color: #35104d;
  font: inherit;
  font-size: .69rem;
  font-weight: 950;
  cursor: pointer;
}

.public-calendar-event-reserve:hover:not(:disabled) { background: #ffc928; }

.public-calendar-event-reserve:disabled {
  background: #dfd8e3;
  color: #766d7b;
  cursor: not-allowed;
}

.public-calendar-event.status-cancelled,
.public-calendar-event.status-ended { opacity: .65; }

@media (max-width: 760px) {
  .public-workshop-calendar {
    margin-inline: -4px;
    padding: 18px 14px;
    border-radius: 22px;
  }

  .public-calendar-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-calendar-controls { width: 100%; }
  .public-calendar-controls .public-calendar-today { flex: 1; }

  .public-calendar-legend {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  .public-calendar-legend .public-calendar-hint {
    width: 100%;
    margin-left: 0;
  }

  .public-calendar-scroll {
    margin-right: -14px;
    padding-right: 14px;
  }
}

/* Ajustement final : proportions et centrage des cartes immersives */
.public-calendar-focus-grid {
  width: min(100%, 920px);
  min-width: 0;
  margin: 0 auto;
}

.public-calendar-event {
  position: relative;
  min-height: 258px;
  height: 258px;
  border: 1px solid rgba(255, 255, 255, .48) !important;
  border-radius: 24px;
  background: #35104d !important;
  box-shadow: 0 18px 34px rgba(54, 18, 77, .18);
}

.public-calendar-event.is-kids { border-color: rgba(255, 255, 255, .48) !important; }

.public-calendar-event-art {
  position: absolute;
  inset: 0;
  height: auto;
}

.public-calendar-event-tag {
  top: 15px;
  right: auto;
  bottom: auto;
  left: 15px;
  background: rgba(255, 210, 68, .94);
  color: #35104d;
  transform: rotate(-2deg);
}

.public-calendar-event-main {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 144px;
  padding: 27px 14px 62px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 9px rgba(21, 5, 30, .3);
}

.public-calendar-event-main span,
.public-calendar-event.is-kids .public-calendar-event-main span {
  width: fit-content;
  margin-bottom: 2px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.public-calendar-event-main strong { max-width: 94%; color: #fff; font-size: .96rem; }
.public-calendar-event-main small { max-width: 94%; color: rgba(255, 255, 255, .84); }

.public-calendar-event-reserve {
  position: absolute;
  right: auto;
  bottom: 12px;
  left: 50%;
  z-index: 3;
  width: auto;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: #ffd244;
  transform: translateX(-50%);
}

@media (max-width: 620px) {
  .public-calendar-event { height: 236px; min-height: 236px; }
}

/* Le planning doit être un espace repère, pas une zone beige effacée. */
.public-workshop-calendar {
  border: 1px solid rgba(103, 42, 145, .24);
  background:
    radial-gradient(circle at 94% 4%, rgba(255, 210, 68, .34), transparent 25%),
    radial-gradient(circle at 4% 92%, rgba(131, 63, 182, .18), transparent 33%),
    linear-gradient(135deg, #eee1fa 0%, #faf7ff 54%, #fff4cf 100%);
  box-shadow: 0 24px 66px rgba(83, 32, 119, .16);
}

.public-calendar-header h4 { color: #2f0b46; }

.public-calendar-day-column {
  border-color: rgba(104, 46, 143, .22);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 14px 30px rgba(71, 27, 99, .10);
}

.public-calendar-day-column:nth-child(2) {
  background: linear-gradient(145deg, #fff 0%, #f7edff 100%);
}

.public-calendar-day-heading {
  border-bottom-color: rgba(104, 46, 143, .16);
}

.public-calendar-day-heading span { color: #61238b; }

.public-calendar-day-heading strong {
  box-shadow: 0 7px 16px rgba(255, 189, 40, .28);
}

.public-calendar-focus-grid {
  gap: 24px;
  align-items: stretch;
  width: min(100%, 1120px);
}

.public-calendar-day-column {
  padding: 20px;
}

.public-calendar-day-events {
  display: grid;
  gap: 18px;
}

.public-calendar-event {
  min-height: 340px;
  height: 340px;
}

@media (max-width: 620px) {
  .public-calendar-focus-grid {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 18px;
  }
  .public-calendar-day-column { padding: 14px; }
  .public-calendar-event { height: 300px; min-height: 300px; }
}