.realtime-question-image-container {
    margin-top: 1rem;
    border-radius: 12px;
    overflow: hidden;
    /* Reference du credit en surimpression. */
    position: relative;
    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    background-color: rgba(255, 255, 255, 0.05);
    max-height: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 0;
}

.realtime-question-image-container.visible {
    max-height: 300px;
    opacity: 1;
}

.realtime-question-image-container img {
    width: 100%;
    /* max-height: 300px; */
    object-fit: contain;
    display: block;
}

/* Attribution de l'image (auteur, licence).
   En SURIMPRESSION et non sous l'image : le conteneur est plafonne a 300 px et
   l'ecran de jeu n'a pas de hauteur a ceder. Discrete par construction — elle
   doit etre lisible pour etre conforme, pas remarquable. */
.realtime-question-image-credit {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 100%;
    padding: 2px 8px;
    border-top-left-radius: 8px;
    background: rgba(0, 0, 0, .55);
    color: rgba(255, 255, 255, .92);
    font-size: .62rem;
    line-height: 1.5;
    letter-spacing: .01em;
    /* Un auteur Commons peut tenir sur trois lignes : on borne a une seule. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* ===========================================================================
   PICTOGRAMMES — composition en CSS, glyphe en masque
   ---------------------------------------------------------------------------
   La composition etait cuite dans un JPEG a fond creme : sur les themes sombres
   chaque question affichait une plaque claire, et la couleur du glyphe ne
   pouvait pas suivre les douze themes.

   Le disque, l'anneau et la pastille sont de la pure geometrie — ils se
   dessinent tres bien ici et prennent leurs couleurs des jetons. L'image ne
   porte plus que le GLYPHE, en couche alpha, employe comme MASQUE : sa couleur
   vient donc du fond de l'element, donc du theme.
   =========================================================================== */
.realtime-question-image-container.is-pictogram {
    display: grid;
    place-items: center;
    height: 210px;
    background: var(--qz-screen, #F1FAF6);
}
.realtime-question-image-container.is-pictogram.visible { max-height: 210px; }

/* Le disque pale, teinte de l'accent du theme. */
.realtime-question-image-container.is-pictogram::before {
    content: "";
    grid-area: 1 / 1;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--qz-accent, #16A87A) 16%, transparent);
}

/* L'anneau. Il suit le theme, sur le jeton le plus pale de la gamme : assez
   present pour fermer la composition, assez discret pour ne pas concurrencer
   le glyphe qui, lui, porte l'accent plein. */
.realtime-question-image-container.is-pictogram::after {
    content: "";
    grid-area: 1 / 1;
    width: 178px;
    height: 178px;
    border-radius: 50%;
    border: 2px solid var(--qz-200);
}

/* Le glyphe : l'image employee comme masque. Sa couleur est celle du fond de
   l'element, donc celle de l'accent du theme. */
.realtime-question-image-container .qzr-picto {
    grid-area: 1 / 1;
    position: relative;
    width: 84px;
    height: 84px;
    background: var(--qz-accent, #16A87A);
    -webkit-mask-image: var(--qzp-mask);
    mask-image: var(--qzp-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* La pastille, posee sur le pourtour de l'anneau. L'angle vient de la graine de
   la question et est transmis par le client : la variation d'une question a
   l'autre est ainsi conservee sans rien cuire dans l'image. */
.realtime-question-image-container .qzr-picto::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0 -7.5px;
    border-radius: 50%;
    background: #C55A3A;
    transform: rotate(var(--qzp-a, 40deg)) translateX(89px) rotate(calc(-1 * var(--qzp-a, 40deg)));
}

/* Un pictogramme est un repere, pas un document : la licence MIT n'exige aucune
   attribution, il n'a donc pas de credit a porter. */
.realtime-question-image-container.is-pictogram .realtime-question-image-credit {
    display: none;
}

.realtime-quiz-image-container {
    margin-bottom: 1.5rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    height: 0;
    transition: all 0.5s ease-in-out;
    opacity: 0;
}

.realtime-quiz-image-container.visible {
    height: 200px;
    opacity: 1;
}

.realtime-quiz-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}