/* =========================================================
   SkinZenitude — Question cliente
   FR / EN
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    overflow: hidden;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: #f5eee4;
    font-family: inherit;
}

#question {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* FR desktop */
html:lang(fr) #question {
    background-image: url("/SZ/site/FR/question/question_FR_desktop.webp");
}

/* EN — prévu pour la suite */
html:lang(en) #question {
    background-image: url("/SZ/site/EN/question/question_EN_desktop.webp");
}

/* ---------------------------------------------------------
   Zone de saisie
   --------------------------------------------------------- */

.question-panel {
    position: absolute;

    left: 29%;
    top: 56%;

    width: 40%;
    height: 41%;

    box-sizing: border-box;
}

#question-text {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 4% 5%;

    box-sizing: border-box;

    border: none;
    border-radius: 0;
    outline: none;

    resize: none;

    background: transparent;
    color: #3d3833;

    font-family: inherit;
    font-size: clamp(1rem, 1.3vw, 1.35rem);
    line-height: 1.55;

    overflow-y: auto;

    box-shadow: none;
}

#question-text::placeholder {
    color: #5c554e;
    opacity: 0.82;
}

#question-text:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

#question-text.is-typing,
#question-text.is-paused,
#question-text.is-analysing {
    border: none;
    box-shadow: none;
}

/* ---------------------------------------------------------
   Message d'état
   --------------------------------------------------------- */

.question-status {
    position: absolute;

    left: 0;
    right: 0;
    bottom: -2.25rem;

    min-height: 1.5rem;

    font-size: 0.9rem;
    line-height: 1.4;

    opacity: 0;
    transition: opacity 0.2s ease;
}

.question-status.is-visible {
    opacity: 1;
}

/* ---------------------------------------------------------
   Accessibilité
   --------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------
   Mobile — optimisation cell
   --------------------------------------------------------- */

@media (max-width: 767px) {

    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        -webkit-text-size-adjust: 100%;
    }

    #question {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 100dvh;

        background-image: url("/SZ/site/FR/question/question_FR_cell.webp") !important;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    html:lang(en) #question {
        background-image: url("/SZ/site/EN/question/question_EN_cell.webp") !important;
    }

    /*
     * Le panneau blanc de l'image mobile est nettement plus large
     * que sur desktop. Le champ de saisie épouse donc sa surface.
     */
    .question-panel {
        left: 4%;
        top: 56.2%;
        width: 70%;
        height: 19.5%;
    }

    #question-text {
        width: 100%;
        height: 100%;
        padding: 5% 5.5%;

        /* 16px évite le zoom automatique d'iOS lors du focus. */
        font-size: 16px;
        line-height: 1.45;

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: manipulation;
    }

    #question-text::placeholder {
        font-size: 16px;
        line-height: 1.45;
    }

    .question-status {
        bottom: -2rem;
        font-size: 0.82rem;
        line-height: 1.35;
    }
}

/* Sur un téléphone tenu horizontalement, le fond desktop
   reste plus cohérent avec le format très large de l'écran. */
@media (max-width: 767px) and (orientation: landscape) {

    #question {
        background-image: url("/SZ/site/FR/question/question_FR_desktop.webp") !important;
        background-position: center center;
        background-size: cover;
    }

    html:lang(en) #question {
        background-image: url("/SZ/site/EN/question/question_EN_desktop.webp") !important;
    }

    .question-panel {
        left: 29%;
        top: 56%;
        width: 40%;
        height: 41%;
    }

    #question-text {
        font-size: 16px;
    }
}

/* =========================================================
   AVA — QUESTION
   Position spécifique : Ava repose sur la paume gauche
   de Saphyia.
   ========================================================= */

#question > #ava {
    left: 72.5% !important;
    top: 30% !important;
    width: 8% !important;
}

#question > #ava .ava-child .ava-panel {
    font-size: clamp(11px, .95vw, 16px) !important;
}

@media (max-width: 767px) {
    #question > #ava {
        left: 57% !important;
        top: 46 !important;
        width: 13% !important;
        max-width: 64px !important;
    }
}