/*
 * BSB Institutional — LimeSurvey 7 / Fruity TwentyThree
 * custom.css — revision 4
 *
 * Objectifs :
 * - conserver l'identité BSB sans nuire à la lisibilité ;
 * - corriger la largeur excessive de .col-xl-8 héritée de Fruity TwentyThree ;
 * - corriger le centrage vertical de la navigation ;
 * - mieux gérer les matrices / arrays ;
 * - dimensionner correctement un logo BSB horizontal ;
 * - uniformiser le fond de page en blanc ;
 * - ne pas imposer d'éléments décoratifs au contenu éditorial ;
 * - traiter séparément les arrays de type différentiel sémantique.
 *
 * Palette issue de la charte BSB fournie :
 * Burgundy : #540432
 * Lime     : #CDF249
 * Violet   : #6D29DF
 * Coral    : #FD594D
 * Lilac    : #9967E8
 */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

:root {
    --bsb-burgundy: #540432;
    --bsb-lime: #CDF249;
    --bsb-violet: #6D29DF;
    --bsb-coral: #FD594D;
    --bsb-lilac: #9967E8;

    --bsb-violet-dark: #5520B2;
    --bsb-burgundy-soft: #F8EFF4;
    --bsb-violet-soft: #F2ECFD;
    --bsb-lime-soft: #F4FBD9;

    --bsb-ink: #1E1E1E;
    --bsb-muted: #666A73;
    --bsb-border: #D9DBE2;
    --bsb-border-strong: #B8BBC5;

    --bsb-surface: #FFFFFF;
    --bsb-background: #FFFFFF;

    --bsb-danger: #B42318;

    --bsb-radius: 18px;
    --bsb-radius-small: 10px;

    --bsb-shadow: 0 8px 28px rgba(44, 30, 61, 0.08);

    /* Largeur maximale réelle du questionnaire sur grand écran. */
    --bsb-content-max: 1280px;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

html,
body,
.fruity,
#outerframeContainer,
.survey-container,
.group-container {
    background: #FFFFFF !important;
}

body,
.fruity {
    color: var(--bsb-ink);
    background: #FFFFFF !important;
    font-family: var(--bs-body-font-family);
    font-size: 16px;
    line-height: 1.55;
}

a {
    color: var(--bsb-violet);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

a:hover,
a:focus {
    color: var(--bsb-burgundy);
}

::selection {
    background: var(--bsb-lime);
    color: var(--bsb-ink);
}


/* ==========================================================================
   3. LARGEUR GENERALE DU QUESTIONNAIRE
   --------------------------------------------------------------------------
   Fruity TwentyThree utilise une .col-xl-8, donc seulement 66,67 % de la
   largeur à partir de 1200 px. On neutralise explicitement cette contrainte.
   ========================================================================== */

#outerframeContainer {
    width: 100%;
    max-width: none !important;
    padding-left: clamp(14px, 3vw, 44px);
    padding-right: clamp(14px, 3vw, 44px);
}

#outerframeContainer > .row {
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
}

#outerframeContainer > .row > .col-centered.col-xl-8 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: var(--bsb-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0;
    padding-right: 0;
}

/* La page d'accueil de Fruity TwentyThree est limitée à 750 px d'origine. */
#welcome-container {
    width: 100% !important;
    max-width: none !important;
}


/* ==========================================================================
   4. BARRE SUPERIEURE ET LOGO
   ========================================================================== */

#survey-nav.navbar {
    background: var(--bsb-surface) !important;
    box-shadow: 0 1px 0 rgba(30, 30, 30, 0.10);
}

/*
 * La barre de navigation contient elle aussi une .col-xl-8.
 * On l'aligne sur la largeur du questionnaire.
 */
#survey-nav > .container-fluid.col-xl-8 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: var(--bsb-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(14px, 3vw, 44px);
    padding-right: clamp(14px, 3vw, 44px);
}

/*
 * Logo BSB horizontal :
 * - ne force jamais la largeur ;
 * - limite seulement hauteur et largeur ;
 * - object-fit évite toute déformation.
 */
#survey-nav .logo-container {
    display: flex;
    align-items: center;
    min-height: 78px;
    max-width: min(560px, 70vw);
    padding: 0 !important;
    overflow: visible;
}

#survey-nav .logo-container > img,
#survey-nav .logo-container > img.logo,
#survey-nav .navbar-brand.logo-container > img.logo.img-fluid {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(540px, 68vw) !important;
    max-height: 70px !important;
    padding: 6px 0 !important;
    object-fit: contain;
}

/* Menu "..." */
#survey-nav .navbar-toggler {
    color: var(--bsb-burgundy);
}

#survey-nav .navbar-toggler:focus-visible {
    outline: 3px solid var(--bsb-lime) !important;
    outline-offset: 3px;
}


/* ==========================================================================
   5. ZONE SUPERIEURE / PROGRESSION
   ========================================================================== */

.top-container {
    background: #FFFFFF !important;
    margin-bottom: 0.8rem;
}

.top-container .progress,
.progress {
    background: #E2E3E8;
    box-shadow: none;
}

.top-container .progress {
    height: 3px;
}

.progress-bar {
    background: var(--bsb-violet) !important;
    box-shadow: none;
}


/* ==========================================================================
   6. TITRES ET TEXTES
   ========================================================================== */

.survey-name,
.survey-name h1,
.survey-welcome h1,
h1 {
    color: var(--bsb-ink);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.group-title,
.group-title h2,
.group-name,
.group-name h2,
h2 {
    color: var(--bsb-violet);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.survey-description,
.survey-welcome,
.group-description,
.question-help-container,
.question-valid-container,
.ls-questionhelp,
.help-block {
    color: var(--bsb-muted);
}

.survey-description {
    max-width: 78ch;
}


/* ==========================================================================
   7. GROUPES
   ========================================================================== */

.group-container {
    width: 100%;
    margin-bottom: 2rem;
}

.group-title-container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}


/* ==========================================================================
   8. CARTES DE QUESTIONS
   ========================================================================== */

.question-container {
    width: 100%;
    background: var(--bsb-surface);
    border: 1px solid var(--bsb-border);
    border-left: 5px solid var(--bsb-violet);
    border-radius: var(--bsb-radius);
    box-shadow: var(--bsb-shadow);

    margin-bottom: 1.25rem;
    padding: clamp(1.15rem, 2.2vw, 1.8rem);
}

/*
 * Ne pas mettre overflow:hidden ici :
 * les matrices et certains composants LimeSurvey peuvent nécessiter
 * un débordement horizontal contrôlé.
 */

.question-title-container,
.question-title-container .question-text,
.question-text {
    color: var(--bsb-ink);
    font-weight: 600;
    line-height: 1.42;
}

.question-number,
.question-code {
    color: #6E748C;
    font-weight: 600;
}

.question-container .asterisk,
.text-danger,
.ls-asterisk {
    color: var(--bsb-danger) !important;
}


/* ==========================================================================
   9. CONTENEUR DES REPONSES
   ========================================================================== */

.answer-container {
    max-width: 100%;
}

/*
 * Permet à une table réellement trop large de défiler horizontalement
 * sans élargir toute la page.
 */
.question-container .answer-container {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   10. CHAMPS TEXTE / SELECT
   ========================================================================== */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="password"],
input[type="url"],
input[type="tel"],
textarea,
select {
    color: var(--bsb-ink);
    background: #FFFFFF;
    border: 1.5px solid var(--bsb-border-strong);
    border-radius: var(--bsb-radius-small);
    box-shadow: none;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="password"],
input[type="url"],
input[type="tel"],
select {
    min-height: 46px;
}

textarea.form-control,
textarea {
    min-height: 120px;
}

.form-control:hover,
.form-select:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover,
input[type="password"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
textarea:hover,
select:hover {
    border-color: #858995;
}

.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: var(--bsb-violet) !important;
    outline: 3px solid rgba(109, 41, 223, 0.18) !important;
    outline-offset: 1px;
    box-shadow: none !important;
}


/* ==========================================================================
   11. RADIOS ET CASES A COCHER
   --------------------------------------------------------------------------
   Fruity TwentyThree masque les inputs natifs et dessine ses contrôles
   via label::before / label::after. Il faut donc surcharger ces pseudo-
   éléments et pas seulement utiliser accent-color.
   ========================================================================== */

.radio-item label::before {
    border-color: #7A8090 !important;
    background-color: #FFFFFF !important;
}

.radio-item label::after,
.radio-item input[type="radio"] + label::after {
    background-color: var(--bsb-violet) !important;
}

.radio-item input[type="radio"]:checked + label::before {
    border-color: var(--bsb-violet) !important;
}

.checkbox-item label::before {
    border-color: #7A8090 !important;
    background-color: #FFFFFF !important;
}

.checkbox-item input[type="checkbox"]:checked + label::before,
.checkbox-item input[type="radio"]:checked + label::before {
    border-color: var(--bsb-violet) !important;
}

.checkbox-item input[type="checkbox"]:checked + label::after,
.checkbox-item input[type="radio"]:checked + label::after {
    color: var(--bsb-violet) !important;
    background-color: transparent !important;
}

.checkbox-item input[type="checkbox"]:checked + label {
    color: var(--bsb-ink) !important;
}


/* Focus clavier visible sur radios / cases */
.radio-item input[type="radio"]:focus-visible + label::before,
.checkbox-item input[type="checkbox"]:focus-visible + label::before,
.checkbox-item input[type="radio"]:focus-visible + label::before {
    outline: 3px solid var(--bsb-lime) !important;
    outline-offset: 3px;
}


/* ==========================================================================
   12. MATRICES / ARRAYS
   ========================================================================== */

table.ls-answers {
    width: 100% !important;
    max-width: 100%;
}

/* Empêche les coupures "S / o / m / e" observées sur les en-têtes. */
.ls-answers th,
.ls-answers td,
.ls-answers .ls-heading th {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

.ls-answers .ls-heading th {
    color: var(--bsb-ink);
    background: var(--bsb-violet-soft);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
    padding: 0.75rem 0.55rem;
}

.ls-answers tbody th,
.ls-answers tbody td {
    vertical-align: middle;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.ls-answers tbody th {
    color: var(--bsb-muted);
    font-weight: 600;
}

.ls-answers tbody tr:nth-child(odd) > * {
    background-color: rgba(109, 41, 223, 0.035);
}

/*
 * Sur écran étroit, mieux vaut un défilement horizontal lisible
 * qu'un découpage lettre par lettre.
 */
@media (max-width: 991.98px) {
    .question-container .answer-container table.ls-answers {
        min-width: 760px;
    }
}


/* ==========================================================================
   13. ARRAYS — DIFFERENTIEL SEMANTIQUE
   --------------------------------------------------------------------------
   LimeSurvey permet d'écrire une sous-question sous la forme :
       gauche|droite
   Le texte après "|" est rendu dans une cellule .answertextright.

   Dans ce cas, LimeSurvey peut réserver une largeur importante à gauche ET
   à droite. On rééquilibre uniquement ces tableaux, sans modifier les arrays
   ordinaires.

   :has() est supporté par les navigateurs modernes utilisés avec LS7.
   ========================================================================== */

table.ls-answers:has(.answertextright) {
    table-layout: fixed;
}

/* Pôle gauche : suffisamment large pour les intitulés, sans manger la matrice. */
table.ls-answers:has(.answertextright) col.answertext {
    width: 26% !important;
}

/* Pôle droit : largeur dédiée mais plus compacte. */
table.ls-answers:has(.answertextright) col.answertextright {
    width: 18% !important;
}

table.ls-answers:has(.answertextright) .answertextright {
    width: 18% !important;
    max-width: 18% !important;
    min-width: 8rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    text-align: left !important;
    white-space: normal;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/*
 * Les cellules de réponses doivent se partager l'espace restant.
 * On évite toute largeur minimale excessive héritée d'un autre composant.
 */
table.ls-answers:has(.answertextright) td.answer-item,
table.ls-answers:has(.answertextright) th.answer-item,
table.ls-answers:has(.answertextright) td.radio-item,
table.ls-answers:has(.answertextright) th.radio-item {
    min-width: 4.25rem;
    width: auto !important;
    text-align: center;
}

/* Le libellé gauche reste lisible et peut revenir à la ligne normalement. */
table.ls-answers:has(.answertextright) tbody th:first-child,
table.ls-answers:has(.answertextright) tbody td:first-child {
    white-space: normal;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/*
 * Sur écran intermédiaire ou mobile, on conserve les proportions et on laisse
 * le conteneur .answer-container assurer le défilement horizontal.
 */
@media (max-width: 991.98px) {
    table.ls-answers:has(.answertextright) {
        min-width: 900px !important;
    }
}


/* ==========================================================================
   14. SLIDERS
   --------------------------------------------------------------------------
   On ne modifie PAS la position géométrique du curseur.
   Pour une échelle 1–10, la valeur 5 se situe normalement à 44,4 %.
   ========================================================================== */

.slider-list .slider .slider-handle {
    background-color: var(--bsb-violet) !important;
    background-image: none !important;
}

.slider-list .slider .slider-selection {
    background-color: var(--bsb-violet) !important;
    background-image: none !important;
}

.slider-list .slider .tooltip .tooltip-inner {
    color: var(--bsb-violet) !important;
    background-color: transparent !important;
    font-weight: 600;
}

.slider.slider-horizontal .slider-tick.triangle,
.slider.slider-horizontal .slider-handle.triangle {
    border-bottom-color: var(--bsb-violet) !important;
}

.slider.slider-vertical .slider-tick.triangle,
.slider.slider-vertical .slider-handle.triangle {
    border-left-color: var(--bsb-violet) !important;
    border-right-color: var(--bsb-violet) !important;
}

.slider-tick.custom::before,
.slider-list .slider .slider-handle.custom::before {
    color: var(--bsb-violet) !important;
}

/* Etat non encore manipulé : gris neutre plutôt que vert LimeSurvey. */
.slider-list .slider.slider-untouched .slider-handle {
    background-color: #747988 !important;
}

.slider-list .ls-slider-item-horizontal .slider-container {
    padding-left: 20px;
    padding-right: 20px;
}


/* ==========================================================================
   15. BOUTONS
   ========================================================================== */

.btn {
    border-radius: 999px;
    min-height: 44px;
    padding: 0.65rem 1.25rem;
    font-weight: 600;
    transition:
        transform 0.12s ease,
        background-color 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary,
.btn-primary:visited {
    color: #FFFFFF !important;
    background: var(--bsb-violet) !important;
    border-color: var(--bsb-violet) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: #FFFFFF !important;
    background: var(--bsb-violet-dark) !important;
    border-color: var(--bsb-violet-dark) !important;
}

.btn-outline-secondary,
.btn-secondary,
.btn-default {
    color: var(--bsb-ink) !important;
    background: #FFFFFF !important;
    border: 1.5px solid var(--bsb-ink) !important;
}

.btn-outline-secondary:hover,
.btn-secondary:hover,
.btn-default:hover {
    color: #FFFFFF !important;
    background: var(--bsb-ink) !important;
    border-color: var(--bsb-ink) !important;
}

/* Utilisable ponctuellement : vert lime + texte sombre uniquement. */
.btn-success {
    color: var(--bsb-ink) !important;
    background: var(--bsb-lime) !important;
    border-color: var(--bsb-lime) !important;
}

.btn-success:hover,
.btn-success:focus {
    color: var(--bsb-ink) !important;
    background: #BDE33F !important;
    border-color: #BDE33F !important;
}

.btn:focus-visible,
a:focus-visible {
    outline: 3px solid var(--bsb-lime) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--bsb-ink) !important;
}




/* ==========================================================================
   15B. QUESTIONS EN BOUTONS — METHODE NATIVE FRUITY
   --------------------------------------------------------------------------
   Cette section reprend volontairement la méthode de Fruity :
       .btn-check + .btn
       .btn-check:checked + .btn-primary

   Pas de JavaScript, pas de :has(), pas de dépendance à un conteneur
   .bootstrap-buttons-div.
   ========================================================================== */

/* Etat non sélectionné */
.btn-check + .btn {
    color: #FFFFFF !important;
    background-color: var(--bsb-violet) !important;
    border: 2px solid var(--bsb-violet) !important;
    box-shadow: none !important;
}

/* Fruity neutralise les ombres sur les états interactifs. */
.btn-check + .btn:hover {
    box-shadow: none !important;
}

.btn-check + .btn:focus,
.btn-check + .btn:active,
.btn-check + .btn.active,
.btn-check + .btn:active:focus {
    box-shadow: none !important;
}

/* Survol d'un bouton non sélectionné */
.btn-check + .btn-primary:hover {
    color: #FFFFFF !important;
    background-color: var(--bsb-violet-dark) !important;
    border-color: var(--bsb-violet-dark) !important;
    box-shadow: none !important;
}

/* Etat temporaire pendant le clic */
.btn-check + .btn-primary:active,
.btn-check + .btn-primary.active,
.btn-check + .btn-primary:active:focus {
    color: #FFFFFF !important;
    background-color: var(--bsb-violet-dark) !important;
    border-color: var(--bsb-violet-dark) !important;
    box-shadow: none !important;
}

/* Focus sans sélection */
.btn-check:focus + .btn-primary {
    color: #FFFFFF !important;
    background-color: var(--bsb-violet) !important;
    border: 2px solid var(--bsb-violet) !important;
    box-shadow: 0 0 0 3px rgba(205, 242, 73, 0.85) !important;
}

/* Etat actif transitoire du véritable input */
.btn-check:active + .btn-primary {
    color: var(--bsb-ink) !important;
    background-color: var(--bsb-lime) !important;
    border-color: var(--bsb-burgundy) !important;
    box-shadow: none !important;
}

/*
 * ETAT SELECTIONNE
 * Reprise directe du sélecteur Fruity :
 * .btn-check:checked + .btn-primary
 */
.btn-check:checked + .btn-primary,
.btn-check:checked + .btn-primary:focus,
.btn-check:focus:checked + .btn-primary {
    color: var(--bsb-ink) !important;
    background-color: var(--bsb-lime) !important;
    border-color: var(--bsb-burgundy) !important;
    box-shadow: none !important;
}

/* Le survol ne doit pas faire perdre l'état sélectionné. */
.btn-check:checked + .btn-primary:hover,
.btn-check:checked + .btn-primary:active {
    color: var(--bsb-ink) !important;
    background-color: var(--bsb-lime) !important;
    border-color: var(--bsb-burgundy) !important;
    box-shadow: none !important;
}

/* Les icônes intégrées suivent la couleur du texte. */
.btn-check:checked + .btn-primary .ls-icon,
.btn-check:checked + .btn-primary i,
.btn-check:checked + .btn-primary svg {
    color: var(--bsb-ink) !important;
}

/*
 * Même géométrie que Fruity pour Oui/Non et Genre.
 * On conserve seulement les arrondis plus généreux du thème BSB.
 */
.yesno-button.btn-group > .btn,
.gender-button.btn-group > .btn {
    margin-right: 0;
}

.yesno-button.btn-group > .btn:not(:last-child),
.gender-button.btn-group > .btn:not(:last-child) {
    margin-right: 20px;
}

.yesno-button .ls-button-label,
.gender-button .ls-button-label {
    min-width: 80px;
}

.yesno-button .ls-button-label .ls-icon,
.gender-button .ls-button-label .ls-icon {
    font-size: 32px;
    display: block;
    line-height: 1;
}

.btn-check + .btn {
    min-height: 44px;
    padding: 8px 12px;
    line-height: 20px;
}


/* ==========================================================================
   16. NAVIGATION PRECEDENT / SUIVANT
   --------------------------------------------------------------------------
   Corrige le bouton "Next" visuellement trop bas dans sa zone.
   ========================================================================== */

#navigator-container.navigator {
    align-items: center !important;
    min-height: 76px;
    margin-top: 1.5rem;
    padding: 12px 8px !important;

    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--bsb-border);
}

#navigator-container.navigator > .col-6 {
    display: flex;
    align-items: center;
    min-height: 52px;
}

#navigator-container.navigator > .text-start {
    justify-content: flex-start;
}

#navigator-container.navigator > .text-end {
    justify-content: flex-end;
}


/* ==========================================================================
   17. ALERTES / VALIDATION
   ========================================================================== */

.alert {
    border: 0;
    border-left: 5px solid currentColor;
    border-radius: var(--bsb-radius-small);
}

.alert-info {
    color: #421C7B;
    background: var(--bsb-violet-soft);
}

.alert-success {
    color: #273300;
    background: var(--bsb-lime-soft);
}

.alert-danger,
.alert-error {
    color: #7A271A;
    background: #FFF1F0;
}


/* ==========================================================================
   18. CONFIDENTIALITE / TOKEN / FIN
   ========================================================================== */

.privacy,
.token,
.completed-wrapper,
.survey-completed {
    background: var(--bsb-surface);
    border: 1px solid var(--bsb-border);
    border-radius: var(--bsb-radius);
    box-shadow: var(--bsb-shadow);
}

.privacy {
    padding: clamp(1.25rem, 2.5vw, 2rem);
}


/* ==========================================================================
   19. MOBILE
   ========================================================================== */

@media (max-width: 767.98px) {

    #outerframeContainer {
        padding-left: 10px;
        padding-right: 10px;
    }

    #survey-nav > .container-fluid.col-xl-8 {
        padding-left: 14px;
        padding-right: 14px;
    }

    #survey-nav .logo-container {
        min-height: 64px;
        max-width: 75vw;
    }

    #survey-nav .logo-container > img,
    #survey-nav .logo-container > img.logo,
    #survey-nav .navbar-brand.logo-container > img.logo.img-fluid {
        max-width: 72vw !important;
        max-height: 52px !important;
        padding: 5px 0 !important;
    }

    .question-container {
        padding: 1rem 0.9rem 1rem 1rem;
        border-left-width: 4px;
        border-radius: 14px;
    }

    h1,
    .survey-name h1 {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    h2,
    .group-title,
    .group-name h2 {
        font-size: clamp(1.35rem, 6vw, 1.85rem);
    }

    .btn {
        min-height: 48px;
    }

    #navigator-container.navigator {
        min-height: 72px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #navigator-container.navigator > .col-6 {
        min-height: 50px;
    }
}


/* ==========================================================================
   20. REDUCTION DES ANIMATIONS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }

    .btn:hover {
        transform: none;
    }
}


/* ==========================================================================
   21. IMPRESSION
   ========================================================================== */

@media print {

    html,
    body,
    .fruity {
        color: #000000 !important;
        background: #FFFFFF !important;
    }

    #survey-nav,
    #navigator-container,
    .navigator,
    .btn {
        display: none !important;
    }

    #outerframeContainer,
    #outerframeContainer > .row > .col-centered.col-xl-8 {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .question-container {
        box-shadow: none !important;
        border: 1px solid #999999;
        border-left: 4px solid #000000;
        break-inside: avoid;
    }
}