.font-roboto {
  font-family: roboto !important;
}

.font-editorial {
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif !important;
}

.font-humanist {
  font-family: "Gill Sans", "Trebuchet MS", "Avenir Next", sans-serif !important;
}

.font-mono {
  font-family: "SFMono-Regular", "Roboto Mono", "Fira Code", Consolas, monospace !important;
}

.font-impact {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif !important;
}

@media (orientation: landscape) {
  .text-small {
    font-size: 2vw;
  }
}
@media (orientation: portrait) {
  .text-small {
    font-size: 2vh;
  }
}

@media (orientation: landscape) {
  .text-medium {
    font-size: 5vw;
  }
}
@media (orientation: portrait) {
  .text-medium {
    font-size: 5vh;
  }
}

@media (orientation: landscape) {
  .text-large {
    font-size: 8vw;
  }
}
@media (orientation: portrait) {
  .text-large {
    font-size: 8vh;
  }
}

@media (orientation: landscape) {
  .text-Xlarge {
    font-size: 15vw;
  }
}
@media (orientation: portrait) {
  .text-Xlarge {
    font-size: 15vh;
  }
}

.text-haut {
  position: absolute;
  text-align: center;
  top: 0%;
}

.text-bas {
  position: absolute;
  text-align: center;
  bottom: 0%;
}

.text-center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 1.08;
}

.textBas {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 84%;
  top: 84%;
  /* justify-content: first baseline; */
}

.textHaut {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 16%;
  bottom: 84%;
  /* justify-content: first baseline; */
}

.textMHaut {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 40%;
  bottom: 60%;
  /* justify-content: first baseline; */
}

.textMbas {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 40%;
  top: 60%;
  /* justify-content: first baseline; */
}

.textBBas {
  position: absolute;
  text-align: center;
  width: 100%;
  /* height:40%; */
  top: 80%;
}

.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scale-down {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.display-full {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
}
.display-full > * {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
}

.display-inverted {
  color: black;
  background-color: white;
}

#display > h1 {
  z-index: 1;
}

#display > img {
  z-index: 0;
}

.display-separate {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
}
@media (orientation: landscape) {
  .display-separate {
    display: flex;
    flex-direction: row;
  }
}
@media (orientation: portrait) {
  .display-separate {
    display: flex;
    flex-direction: column;
  }
}

/* Scene presets compatible with pages-fr rhythm/instruction screens */
.scene-cinema {
  background: radial-gradient(circle at 50% 12%, #1f2937 0%, #05070b 62%, #000 100%);
  color: #f5f7ff;
}

.scene-stage {
  background: linear-gradient(180deg, #0b1320 0%, #05070b 55%, #000 100%);
  color: #f5f7ff;
}

.scene-paper {
  background: #f5f5f1;
  color: #121212;
}

.scene-alert {
  background: linear-gradient(180deg, #3a0d10 0%, #140707 70%, #000 100%);
  color: #fff3ef;
}

.scene-grid {
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    #040507;
  background-size: 34px 34px, 34px 34px, auto;
  color: #f5f7ff;
}

.scene-poster {
  background: linear-gradient(180deg, #2f160d 0%, #120706 38%, #050505 100%);
  color: #fff4e8;
}

.scene-velvet {
  background: radial-gradient(circle at 50% 15%, #5b1733 0%, #1f0814 55%, #050507 100%);
  color: #fff0f4;
}

.scene-ice {
  background: linear-gradient(180deg, #d9eef6 0%, #9cc5d8 45%, #102331 100%);
  color: #081521;
}

.scene-spotlight {
  background: radial-gradient(circle at 50% 20%, rgba(244, 229, 197, 0.22) 0%, rgba(23, 18, 15, 0.84) 45%, #050505 100%);
  color: #fff9ef;
}

/* Image variants */
.img-soft-dark {
  filter: brightness(0.82) contrast(1.04) saturate(0.95);
}

.img-soft-light {
  filter: brightness(1.04) contrast(1.02) saturate(0.95);
}

.img-focus {
  filter: brightness(0.92) contrast(1.08) saturate(1.06);
}

.img-muted {
  filter: grayscale(0.22) saturate(0.8);
}

.img-frame {
  padding: 1.6vh;
}

.img-frame.contain {
  object-fit: contain;
}

.img-flash {
  filter: contrast(1.15) saturate(1.18);
}

.img-warm {
  filter: sepia(0.18) saturate(1.08) hue-rotate(-8deg) contrast(1.02);
}

.img-cold {
  filter: saturate(0.92) hue-rotate(188deg) brightness(1.03) contrast(1.06);
}

.img-contrast-strong {
  filter: contrast(1.22) saturate(1.12) brightness(0.94);
}

/* Text variants */
.txt-hero {
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.08;
}

.txt-wide {
  letter-spacing: 0.06em;
}

.txt-tight {
  letter-spacing: 0.01em;
}

.txt-uppercase {
  text-transform: uppercase;
}

.txt-strong {
  font-weight: 700;
}

.txt-outline {
  text-shadow:
    -2px -2px 0 rgba(0, 0, 0, 0.55),
    2px -2px 0 rgba(0, 0, 0, 0.55),
    -2px 2px 0 rgba(0, 0, 0, 0.55),
    2px 2px 0 rgba(0, 0, 0, 0.55);
}

.txt-glow {
  text-shadow: 0 0 18px rgba(255, 244, 235, 0.5);
}

.txt-contrast {
  color: #101010;
}

.txt-serif {
  font-weight: 500;
  line-height: 1.14;
}

.txt-softshadow {
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.txt-shadow-hard {
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.5);
}

.txt-poster {
  letter-spacing: 0.04em;
  line-height: 0.96;
  font-weight: 900;
}

.text-ruban {
  position: absolute;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  width: min(92vw, 1240px);
  padding: 0.35em 0.9em 0.48em;
  border-radius: 0.22em;
  background: rgba(8, 10, 14, 0.72);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.scene-paper .text-ruban {
  background: rgba(255, 255, 255, 0.84);
}

/* Contemporary RCO system */
.rco-stage,
.rco-split {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.rco-stage > h1,
.rco-stage > img,
.rco-split > h1,
.rco-split > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rco-stage > h1,
.rco-split > h1 {
  margin: 0;
  padding: 7vh 7vw;
  box-sizing: border-box;
}

.rco-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (orientation: portrait) {
  .rco-split {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.rco-surface-stage {
  background: #080909;
  color: #f3f1eb;
}

.rco-surface-black {
  background: #080909;
  color: #f3f1eb;
}

.rco-surface-deep {
  background: #111315;
  color: #f3f1eb;
}

.rco-surface-paper {
  background: #f3f0e8;
  color: #111315;
}

.rco-surface-beige {
  background: #e7ddcf;
  color: #171412;
}

.rco-surface-light {
  background: #fcfcfa;
  color: #111315;
}

.rco-surface-white {
  background: #ffffff;
  color: #111315;
}

.rco-font-sans {
  font-family: roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.rco-font-arial {
  font-family: Arial, Helvetica, sans-serif !important;
}

.rco-font-serif {
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif !important;
}

.rco-font-mono {
  font-family: "SFMono-Regular", Consolas, monospace !important;
}

@media (orientation: landscape) {
  .rco-type-s { font-size: 2.2vw; }
  .rco-type-m { font-size: 4.2vw; }
  .rco-type-l { font-size: 6.8vw; }
  .rco-type-xl { font-size: 10vw; }
}

@media (orientation: portrait) {
  .rco-type-s { font-size: 2.2vh; }
  .rco-type-m { font-size: 4.2vh; }
  .rco-type-l { font-size: 6.8vh; }
  .rco-type-xl { font-size: 10vh; }
}

@media (orientation: landscape) {
  .rco-type-stage { font-size: 8vw; }
}

@media (orientation: portrait) {
  .rco-type-stage { font-size: 8vh; }
}

.rco-text-center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.08;
}

.rco-text-top {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  line-height: 1.08;
}

.rco-text-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  line-height: 1.08;
}

.rco-text-band {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 7vh 7vw 4vh;
  line-height: 1.12;
  background:
    linear-gradient(
      to top,
      rgba(8, 10, 12, 0.54) 0,
      rgba(8, 10, 12, 0.54) 19vh,
      transparent 19vh
    );
  background-repeat: no-repeat;
  background-position: bottom center;
}

.rco-surface-paper .rco-text-band,
.rco-surface-light .rco-text-band {
  background:
    linear-gradient(
      to top,
      rgba(255, 255, 255, 0.72) 0,
      rgba(255, 255, 255, 0.72) 19vh,
      transparent 19vh
    );
  background-repeat: no-repeat;
  background-position: bottom center;
}

.rco-text-soft {
  letter-spacing: 0.01em;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.rco-text-plain {
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: none;
}

.rco-text-legacy {
  padding: 0 !important;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: none;
}

.rco-text-ink {
  color: #121212;
  letter-spacing: 0.005em;
}

.rco-text-white {
  color: #ffffff;
}

.rco-text-ivory {
  color: #f3f1eb;
}

.rco-text-beige {
  color: #e6d8c5;
}

.rco-text-black {
  color: #111111;
}


.rco-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rco-img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rco-img-dim {
  filter: brightness(0.82) contrast(1.02);
}

.rco-img-soft {
  filter: brightness(1.03) contrast(0.98);
}

.rco-img-muted {
  filter: grayscale(0.12) saturate(0.86);
}

.rco-img-focus {
  filter: brightness(0.95) contrast(1.05);
}

.rco-img-frame {
  padding: 3.5vh 3.5vw;
  box-sizing: border-box;
}