/* Cartes en scène */
body {
  background: #10263c;
}
.topbar,
#game-view .game-heading {
  color: #fff;
}
.topbar {
  background: #10263c;
  padding-block: 5px;
}
.topbar :is(.brand, .edition),
#game-view #progress li {
  color: #dcecf8;
}
.topbar .quiet-button,
#game-view #back-button {
  background: #1d3952;
  border: 1px solid #54728b;
  color: #fff;
}
.topbar .quiet-button[aria-pressed="true"] {
  background: #245b51;
}
#game-view:not([hidden]),
:fullscreen #game-view:not([hidden]) {
  padding: 0;
}
#game-view .game-heading {
  padding: 4px clamp(9px, 1.6vw, 24px) 7px;
}
#game-view #back-button {
  margin-left: 0;
}
#game-view #progress li[aria-current="step"] {
  color: #fff;
}
#game-view #progress li[aria-current="step"]::before {
  background: #68c8ef;
  box-shadow: 0 0 0 3px #68c8ef47;
}

#game-view .game-shell {
  position: relative;
  background: #142d43;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#game-view .game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to top, #0b203795, transparent 57%), var(--hud-image, none);
  background-position: center, var(--hud-image-position, center);
  background-size: cover, var(--hud-image-size, cover);
  background-repeat: no-repeat;
  pointer-events: none;
}
#game-view .world,
#game-view .world[data-kind="scenarios"] {
  z-index: 0;
  border-radius: 0;
}
#game-view .dialogue-dock {
  border: 1px solid #90b7d378;
  border-radius: 11px;
  background: #0f253ced;
  color: #fff;
  padding: 9px 12px;
}
#game-view .dialogue-dock :is(#instruction, #message, #feedback) {
  color: #fff;
}
#game-view .dialogue-dock #speaker-name {
  color: #c5e1f4;
}
#game-view .dialogue-dock[data-speaking] #speaker-name {
  color: #b8efd8;
}
#game-view .dialogue-dock #instruction {
  font-size: clamp(17px, 1.55vw, 24px);
}
#game-view .speaker-portrait img {
  background: #edf6fd;
  padding: 3px;
}
#game-view .scene-actions {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
#game-view .scene-actions .action-button {
  min-height: 44px;
}
#game-view .game-tools {
  margin: 0;
  padding: 3px 8px;
  position: relative;
  z-index: 2;
  background: linear-gradient(transparent, #0b2038a8);
  color: #dcecf8;
}
#game-view .game-tools .tool-group {
  background: transparent;
  border: 0;
  padding: 0;
}
#game-view .game-tools .tool-button {
  min-height: 36px;
  color: #fff;
  background: #1d3952;
  border: 1px solid #54728b;
  border-radius: 8px;
}
#game-view .game-tools .tool-button:hover {
  background: #2d4d67;
}
#game-view .game-tools .tool-button span {
  color: #cae9ff;
}
#game-view .world > .spoken-caption {
  top: 8px;
  bottom: auto;
}
#game-view :is(.workbench, .story-card, .message-board) {
  border: 1px solid #d0e3f1;
  border-radius: 14px;
  background: #f6fbfff5;
  box-shadow: 0 7px 22px #10263c38;
}
#game-view :is(.bench-heading, .piece-counter, .story-card .fiction, .story-card .phone-model) {
  color: #244f6e;
}
#game-view .piece-choice {
  border: 1px solid #bdcfdf;
  border-radius: 10px;
  background: #eaf3f9;
}
#game-view .piece-choice:not(:disabled):hover,
#game-view .piece-choice.selected {
  border-color: #48789b;
  background: #dcecf7;
}
#game-view .scenario-answer-visual img {
  background: transparent;
}
#game-view .scenario-answer-visual .message-seated {
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  background-color: transparent;
}
.scenario-answer-visual:has(.phone-preview) {
  height: clamp(110px, 23dvh, 224px);
}
.scenario-answer-visual .phone-preview {
  height: 92%;
}

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .topbar {
    height: 58px;
  }
  .topbar .brand img {
    width: 32px;
    height: 39px;
  }
  #game-view #back-button {
    min-height: 36px;
  }
  #scenario-answers {
    grid-column: 1 / -1;
  }
  #game-view .game-shell {
    --hud-space: clamp(9px, 1.7vw, 28px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(220px, 1fr) auto auto;
    gap: 7px 12px;
  }
  #game-view .world {
    position: absolute;
    inset: 0;
    min-height: 0;
    aspect-ratio: auto;
  }
  #game-view .game-shell:has(.world:not([data-kind="scenario"], [data-kind="scenarios"]))::before {
    background-position: center, center bottom;
    background-size: cover, max(100%, 170dvh) auto;
  }
  #game-view .world:not([data-kind="scenario"], [data-kind="scenarios"]) {
    background: transparent;
  }
  #game-view .world:not([data-kind="scenario"], [data-kind="scenarios"]) #scene {
    /* Le cadrage dépend de la fenêtre, indépendamment de la place prise par les choix. */
    bottom: clamp(175px, 27dvh, 230px);
    container-type: size;
  }
  #game-view .world:not([data-kind="scenario"], [data-kind="scenarios"]) :is(.scene-background, .scene-ambient) {
    visibility: hidden;
  }
  #game-view .world[data-kind="yard"] .scene-layer {
    translate: 0 min(4.5dvh, 38px);
  }
  #game-view .dialogue-dock {
    grid-area: 2 / 1;
    margin-left: var(--hud-space);
    align-self: end;
    overflow-y: auto;
    max-height: 27dvh;
  }
  #game-view .scene-actions {
    grid-area: 2 / 2;
    margin-right: var(--hud-space);
    align-self: end;
  }
  #game-view .game-shell:not(:has(#actions > button)) .dialogue-dock {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(640px, calc(100% - 2 * var(--hud-space)));
    margin-inline: 0;
  }
  #game-view :is(.dialogue-dock, .scene-actions) {
    z-index: 2;
  }
  #game-view .game-shell:has(.world[data-kind="scenarios"]) {
    grid-template-rows: minmax(0, 1fr);
    padding-bottom: 0;
  }
  #game-view .game-tools {
    grid-area: -2 / 1 / -1 / -1;
    justify-content: center;
    grid-template-columns: auto minmax(0, max-content) auto;
  }
}

@supports (grid-template-columns: subgrid) {
  @media (min-width: 900px) and (min-aspect-ratio: 4/3) {
    #game-view .game-shell:has(#scenario-answers:not([hidden])) {
      grid-template-columns: minmax(0, 1fr) minmax(0, min(40%, 440px)) minmax(0, 1fr);
      grid-template-rows: minmax(200px, 1fr) auto auto auto auto auto;
      row-gap: 5px;
    }
    #game-view .game-shell:has(#scenario-answers:not([hidden])) .dialogue-dock {
      grid-area: 2 / 2;
      width: 100%;
      margin: 0;
    }
    #game-view .game-shell:has(#scenario-answers:not([hidden])) .scene-actions {
      grid-area: 5 / 2;
      margin: 0;
    }
    #scenario-answers:not([hidden]) {
      grid-area: 2 / 1 / 5 / -1;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      justify-items: stretch;
      padding: 0;
      z-index: 3;
      pointer-events: none;
    }
    .scenario-answer-box {
      grid-area: 1 / 1 / -1 / -1;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      gap: inherit;
      width: 100%;
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      pointer-events: none;
    }
    .scenario-answer-grid {
      grid-area: 1 / 1 / 3 / -1;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      gap: inherit;
      pointer-events: none;
    }
    .scenario-answer.action-button {
      grid-row: 1 / -1;
      align-self: end;
      width: min(100%, 365px);
      padding: 6px;
      border-color: #e3eff8;
      box-shadow: 0 7px 22px #061b3470;
      pointer-events: auto;
    }
    .scenario-answer.action-button:first-child {
      grid-column: 1;
      justify-self: start;
      margin-left: var(--hud-space);
      max-width: calc(100% - var(--hud-space));
    }
    .scenario-answer.action-button:last-child {
      grid-column: 3;
      justify-self: end;
      margin-right: var(--hud-space);
      max-width: calc(100% - var(--hud-space));
    }
    .scenario-answer-visual {
      height: clamp(60px, 12vh, 118px);
    }
    .scenario-answer-box h2 {
      grid-area: 2 / 2;
      max-width: 100%;
      border-radius: 8px;
      background: #fff;
      padding: 7px 12px;
    }
    .scenario-answer-feedback {
      grid-area: 3 / 2;
    }
  }
}

@media (width < 900px), (aspect-ratio < 4/3) {
  #game-view .game-shell {
    gap: 6px;
    padding-bottom: 7px;
  }
  #game-view .game-shell::before {
    background-image: linear-gradient(#10263c45, #10263cdd), var(--hud-image, none);
    background-position: center, center top;
    background-size: cover, max(100%, 155dvh) auto;
    background-color: #10263c;
    filter: blur(12px);
    clip-path: inset(0);
  }
  #game-view .scene-camera .message-slot {
    white-space: nowrap;
  }
  #game-view .dialogue-dock,
  #game-view .scene-actions {
    margin-inline: 9px;
  }
  #game-view .game-tools .tool-button {
    min-height: 40px;
  }
}

#game-view .dialogue-dock .read-button {
  color: #143b5e;
}
#game-view .dialogue-dock #message,
#game-view .dialogue-dock #feedback {
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.4;
}
#game-view .game-shell:has(> .scene-actions:empty) .dialogue-dock {
  border-radius: 11px;
}
.scenario-answer-visual .film-still {
  background-position: center top;
}

#game-view .world[data-kind="scenario"] .scenario-frame {
  width: 100%;
}
#game-view .world[data-kind="scenario"] .scenario-frame .scenario-picture {
  top: 0;
  width: max(100%, calc(100cqh * var(--scene-ratio)));
  transform: translateX(-50%);
}
@media (width < 900px), (aspect-ratio < 4/3) {
  #game-view .world[data-kind="scenario"] {
    aspect-ratio: 1.72;
  }
  #game-view .world[data-phone-model="choice"] {
    min-height: 150px;
    aspect-ratio: 2.1;
  }
  .scenario-answer-visual:has(.phone-preview) {
    height: clamp(106px, 24vw, 155px);
  }
  .scenario-answer-visual {
    height: clamp(58px, 19vw, 100px);
  }
  .scenario-answer.action-button {
    font-size: clamp(13px, 3.65vw, 16px);
  }
  .scenario-answer-box h2 {
    font-size: clamp(16px, 4.6vw, 20px);
  }
  .scenario-answer-label {
    min-height: 36px;
    padding-inline: 4px;
  }
}

/* Accueil et menus de Cartes en scène */
.topbar {
  width: 100%;
  max-width: none;
  padding-inline: clamp(10px, 1.3vw, 24px);
}
.topbar .quiet-button:hover,
#game-view #back-button:hover {
  background: #2d4d67;
}
body:has(#home-view:not([hidden])) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
body:has(#home-view:not([hidden])) .topbar {
  flex-shrink: 0;
  margin-block: 0;
}
body:has(#home-view:not([hidden])) main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}
#home-view {
  --home-inset: clamp(12px, 2.6vw, 46px);
  width: 100%;
  max-width: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 0 8px;
  color: #fff;
}
.home-welcome {
  position: relative;
  display: flex;
  align-items: end;
  flex: 1 0 auto;
  min-height: clamp(280px, 44dvh, 650px);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body:has(#home-view:not([hidden])) main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to top, #081b32d9, #0b20375e 31%, #0b203700 62%);
  pointer-events: none;
}
main > .welcome-scene {
  display: none;
  inset: 0;
  z-index: -2;
  object-position: center 34%;
}
body:has(#home-view:not([hidden])) main > .welcome-scene {
  display: block;
}
.welcome-copy {
  width: 100%;
  max-width: 1720px;
  margin-inline: auto;
  padding: 12px var(--home-inset) 36px;
}
#home-title {
  font-size: clamp(28px, 4vw, 58px);
  line-height: 1.08;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
  text-shadow: 0 3px 18px #0b213799;
}
#home-status {
  color: #e0eef9;
  margin: 9px 0 0;
}
#home-status:empty {
  display: none;
}
.home-library {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.3vw, 20px);
  width: 100%;
  max-width: 1720px;
  margin: -21px auto 0;
  padding-inline: var(--home-inset);
  position: relative;
  z-index: 1;
}
.home-library .mission-grid {
  display: contents;
}
.home-library :is(.mission-card, .scenario-entry) {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 5px;
  gap: 0;
  border: 1px solid #dcebf7;
  border-radius: 11px;
  background: #f6fbff;
  color: #183850;
  box-shadow: 0 7px 20px #06192b7d;
}
.home-library :is(.mission-card, .scenario-entry):hover {
  transform: translateY(-3px);
  background: #eaf4fb;
  border-color: #8bc6ea;
  box-shadow: 0 9px 23px #06192b99;
}
.home-library :is(.mission-card, .scenario-entry):disabled {
  opacity: .7;
}
.home-library .card-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.8;
  border-radius: 7px;
  background: #dcecf8;
}
.home-library .card-cover img {
  object-position: center 39%;
}
.home-library .card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-content: center;
  width: 100%;
  flex: 1;
  min-height: 62px;
  padding: 8px 7px;
  text-align: left;
}
.home-library .card-title {
  font-size: clamp(13px, 1.45vw, 20px);
  line-height: 1.25;
  letter-spacing: -.015em;
}
.home-library .card-subtitle {
  grid-area: 2 / 1;
  margin: 3px 0 0;
  line-height: 1.3;
  font-size: clamp(11px, .95vw, 14px);
  color: #365970;
}
.card-arrow {
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
  justify-self: end;
  font-size: 25px;
  line-height: 1;
  color: #256188;
}
.home-library .card-stamp {
  inset: 5px 5px auto auto;
  border-radius: 5px;
  background: #effcf5;
  color: #215746;
}
.home-secondary {
  width: 100%;
  max-width: 1720px;
  display: flex;
  justify-content: end;
  margin: 0 auto;
  padding: 10px var(--home-inset) 0;
}
.home-secondary .evaluation-entry {
  margin: 0;
}
.home-secondary .quiet-button,
.audio-help .quiet-button {
  background: #1d3952;
  border: 1px solid #54728b;
  border-radius: 8px;
  color: #fff;
  min-height: 36px;
}
.audio-help {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 5px clamp(12px, 2.6vw, 46px) 9px;
  color: #dcecf8;
}
body:has(#home-view:not([hidden])) .audio-help {
  order: 2;
}
.audio-help #audio-player:not([hidden]) {
  display: block;
  max-width: 100%;
  margin-top: 6px;
}
#game-view .world[data-kind="scenarios"] .scene-background {
  filter: brightness(.44);
}
#game-view .scenario-picker {
  width: min(94%, 1220px);
}
#game-view .scenario-choice {
  padding: 6px;
  background: #f4faff;
  border: 1px solid #d5e7f4;
  border-radius: 11px;
  box-shadow: 0 7px 23px #07182d70;
}
#game-view .scenario-choice:hover {
  border-color: #88bfdc;
  background: #e5f3fc;
}
#game-view .scenario-choice .scenario-picture {
  border-radius: 6px;
}
#game-view .scenario-choice span {
  padding: 4px;
}
#game-view .success-scene {
  background: #10263c8a;
}
#game-view .success-card {
  border: 1px solid #d0e3f1;
  border-radius: 16px;
  background: #f6fbff;
  box-shadow: 0 8px 28px #0b203a65;
}
#game-view .success-badge {
  color: #fff;
  background: #26688b;
  border: 3px solid #e0f0fa;
  border-radius: 18px;
  box-shadow: 0 3px 10px #0d345540;
}
#game-view .recap-step img,
#game-view .real-life {
  background: #e6f1fa;
  color: #244f6e;
}
#modal {
  border: 1px solid #bcd4e5;
  border-radius: 14px;
  padding: 0;
  background: #f6fbff;
}
#modal::backdrop {
  background: #0b2037ad;
  backdrop-filter: blur(4px);
}
#modal .modal-top {
  background: #142d43;
  color: #fff;
  margin: 0;
  padding: 9px 16px;
}
#modal .modal-top button {
  color: #fff;
  background: #254964;
}
#modal-body {
  padding: clamp(14px, 3vw, 24px);
}
#modal-body .action-button:not(.primary) {
  background: #e8f3fa;
  border-color: #bdd4e4;
  color: #163b58;
}
#modal-body > .spoken-caption {
  background: #e8f3fa;
  border-color: #bdd4e4;
}
#modal-body .action-button:not(.primary):hover {
  background: #d9edf9;
}

@media (max-width: 760px) {
  .home-welcome {
    min-height: clamp(190px, 57vw, 330px);
    flex-grow: 0;
  }
  main > .welcome-scene {
    object-position: 73% 42%;
  }
  .welcome-copy {
    padding-bottom: 29px;
  }
  .home-library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: -15px;
  }
  .home-library .scenario-entry {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    align-items: stretch;
  }
  .home-library .scenario-entry .card-body {
    align-self: center;
    padding-inline: 10px;
  }
  .home-secondary {
    justify-content: start;
  }
}

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  body:has(#home-view:not([hidden]), #game-view:not([hidden])) .topbar {
    position: absolute;
    inset: 0 0 auto;
    z-index: 10;
    background: linear-gradient(#0b2039e8, #0b2039b0 65%, transparent);
  }
  body:has(#home-view:not([hidden])) .home-welcome {
    padding-top: 58px;
  }
  #game-view .game-heading {
    position: absolute;
    z-index: 9;
    inset: 58px 0 auto;
    background: linear-gradient(#0b2039ae, transparent);
  }
  #game-view .world :is(.scene-caption, .scenario-note),
  #game-view .world > .spoken-caption {
    top: 114px;
    bottom: auto;
  }
  #game-view .world[data-kind="scenarios"] .scenario-picker {
    inset-block-start: max(140px, 17%);
  }
  #game-view .world:is([data-kind="phone"], [data-kind="build"]):not(:has(.success-scene)) .scene-hud {
    top: 107px;
  }
}

.home-secondary { gap: 8px; flex-wrap: wrap; }
.retour-site { display: inline-flex; align-items: center; text-decoration: none; }