/**
 * Thème DSFR pour LimeSurvey
 * Système de Design de l'État Français
 *
 * Ce thème utilise DSFR-Connect Bootstrap pour adapter LimeSurvey au DSFR
 * Documentation DSFR : https://www.systeme-de-design.gouv.fr/
 * DSFR-Connect : https://dsfr-connect.rame.fr/
 */

/* ============================================
   IMPORTS DSFR NATIF
   ============================================ */

/*
 * DSFR natif v1.11 - RESSOURCES LOCALES
 *
 * Les ressources DSFR sont hébergées localement dans les dossiers du thème
 * pour garantir l'autonomie du thème et éviter les dépendances externes.
 * - CSS: ./css/*.min.css
 * - JS: ./js/*.min.js
 * - Fonts: ./fonts/*.woff2
 * - Icons SVG: ./icons/**/*.svg
 *
 * NOTE: On N'utilise PAS DSFR-Connect car nos templates sont déjà
 * en DSFR natif (fr-header, fr-btn, etc.). DSFR-Connect est fait
 * pour convertir les classes Bootstrap, mais on a déjà tout converti.
 *
 * Pour mettre à jour DSFR, voir docs/DSFR-DISTRIBUTION.md
 *
 * Les fichiers DSFR suivants sont chargés automatiquement par LimeSurvey
 * (déclarés dans config.xml, dans l'ordre):
 * 1. dsfr-no-datauri.min.css - CSS principal DSFR
 * 2. icons.min.css - Icônes DSFR (références SVG)
 * 3. dsfr-grid-helpers.css - Helpers de grille personnalisés
 * 4. theme.css - Ce fichier (styles personnalisés)
 * 5. custom.css - Surcharges + linéarisation tableaux (PRIORITÉ ABSOLUE)
 */

/* ============================================
   VARIABLES DSFR
   ============================================ */

:root {
    /*
     * Variables DSFR natives - supportent automatiquement le mode sombre
     * Ne pas redéfinir les couleurs DSFR - utiliser les design tokens natifs
     * Documentation: https://www.systeme-de-design.gouv.fr/fondamentaux-techniques/design-tokens
     */

    /* Espacements */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 1rem;
    --sp-4: 1.5rem;
    --sp-5: 2rem;
    --sp-6: 3rem;
}

/* ============================================
   NEUTRALISATION BOOTSTRAP
   ============================================ */

/*
 * Le thème hérite de vanilla qui charge Bootstrap.
 * On neutralise les classes Bootstrap pour éviter les conflits avec DSFR.
 */

/* Désactiver le fond gris de Bootstrap */
.bg-light {
    background-color: var(--background-default-grey) !important;
}

/* Neutraliser navbar Bootstrap (on utilise fr-header) */
.navbar {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.navbar-light,
.navbar-expand-md {
    background-color: transparent !important;
}

/* Neutraliser les containers Bootstrap */
.container,
.container-fluid {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

/* Reset des boutons Bootstrap pour laisser DSFR gérer */
.btn:not(.fr-btn) {
    all: unset;
}

/* Neutraliser form-control de Bootstrap sur les inputs/textarea */
input[type="text"].form-control,
input[type="email"].form-control,
input[type="number"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
input[type="date"].form-control,
input[type="time"].form-control,
input[type="search"].form-control,
input[type="password"].form-control,
textarea.form-control,
.form-control {
    border: none !important;
    box-shadow: inset 0 -2px 0 0 var(--border-plain-grey) !important;
    background-color: var(--background-contrast-grey) !important;
    border-radius: 0.25rem 0.25rem 0 0 !important;
}

/* Neutraliser form-control au focus */
input[type="text"].form-control:focus,
input[type="email"].form-control:focus,
input[type="number"].form-control:focus,
input[type="tel"].form-control:focus,
input[type="url"].form-control:focus,
input[type="date"].form-control:focus,
input[type="time"].form-control:focus,
input[type="search"].form-control:focus,
input[type="password"].form-control:focus,
textarea.form-control:focus,
.form-control:focus {
    background-color: var(--background-contrast-grey) !important;
    box-shadow: inset 0 -2px 0 0 var(--border-plain-grey) !important;
    outline: 2px solid var(--border-action-high-blue-france) !important;
    outline-offset: 2px !important;
    border: none !important;
}

/* ============================================
   RESET & BASE
   ============================================ */

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    background-color: var(--background-default-grey);
}

body {
    font-family: "Marianne", Arial, sans-serif !important;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-default-grey);
    background-color: var(--background-default-grey) !important;
    margin: 0;
    padding: 0;
}

/* Assurer que le body et article ont le fond par défaut */
body > article {
    background-color: var(--background-default-grey) !important;
}

/* Fond par défaut pour tous les containers principaux */
#outerframeContainer,
.outerframe,
.ls-survey-container,
.survey-question-container {
    background-color: var(--background-default-grey) !important;
}

/* Assurer que les containers DSFR sont blancs */
.fr-container {
    background-color: transparent;
}

/* ============================================
   HEADER DSFR (Navigation Bar)
   ============================================ */

/* Header principal */
#survey-nav.navbar {
    background-color: var(--background-default-grey) !important;
    border-bottom: 1px solid var(--border-default-grey) !important;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 18, 0.1), 0 8px 16px -16px rgba(0, 0, 18, 0.32);
    min-height: 5rem;
    padding: 0 !important;
}

/* Container du header */
#survey-nav .container-fluid {
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Logo / Brand */
#survey-nav .navbar-brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-action-high-blue-france) !important;
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

#survey-nav .logo-container img {
    max-height: 3rem;
    width: auto;
}

/* Bouton toggle mobile */
#survey-nav .navbar-toggler {
    border: 1px solid var(--border-plain-grey);
    border-radius: 0.25rem;
    padding: 0.5rem;
    background: transparent;
}

#survey-nav .navbar-toggler:focus {
    outline: 2px solid var(--border-action-high-blue-france);
    outline-offset: 2px;
    box-shadow: none;
}

/* Navigation items */
#survey-nav .navbar-nav {
    gap: 0.5rem;
}

#survey-nav .navbar-nav .nav-item {
    margin: 0;
}

#survey-nav .navbar-nav .nav-link {
    color: var(--text-default-grey) !important;
    padding: 0.75rem 1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}

#survey-nav .navbar-nav .nav-link:hover,
#survey-nav .navbar-nav .nav-link:focus {
    background-color: var(--background-alt-grey);
    color: var(--text-action-high-blue-france) !important;
}

/* Dropdown menus */
#survey-nav .dropdown-menu {
    border: 1px solid var(--border-default-grey);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
    padding: 0.5rem 0;
}

#survey-nav .dropdown-item {
    padding: 0.75rem 1rem;
    color: var(--text-default-grey);
    transition: background-color 0.2s;
}

#survey-nav .dropdown-item:hover,
#survey-nav .dropdown-item:focus {
    background-color: var(--background-alt-grey);
    color: var(--text-action-high-blue-france);
}

/* ============================================
   CONTENEUR PRINCIPAL
   ============================================ */

#outerframeContainer {
    background-color: var(--grey-light);
    min-height: 100vh;
    padding-top: 6rem; /* Espace pour le header fixed */
}

.container-fluid {
    max-width: 78rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* ============================================
   BARRE DE PROGRESSION
   ============================================ */

.progress-wrapper,
.progress-container {
    margin-bottom: 2rem;
}

.progress {
    height: 0.5rem;
    background-color: #E3E3E3;
    border-radius: 0.25rem;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.progress-bar {
    background-color: var(--blue-france) !important;
    height: 100%;
    transition: width 0.3s ease;
}

.progress-text {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #666;
    text-align: center;
}

/* ============================================
   GROUPES DE QUESTIONS
   ============================================ */

.group-container,
.ls-group {
    margin-bottom: 3rem;
}

.group-name,
.ls-group-name h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-action-high-blue-france);
    margin-bottom: 1rem;
    line-height: 1.25;
}

.group-description,
.ls-group-description {
    font-size: 1rem;
    color: var(--text-mention-grey);
    margin-bottom: 2rem;
    line-height: 1.5;
}

/* ============================================
   QUESTIONS
   ============================================ */

.question-container,
.ls-question,
.question-wrapper {
    background-color: var(--background-raised-grey);
    padding: 2rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.question-text,
.ls-question-text,
.questiontext {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-label-grey);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.question-help,
.ls-question-help,
.question-help-text {
    font-size: 0.875rem;
    color: var(--text-mention-grey);
    margin-top: 0.5rem;
    font-style: italic;
}

.question-mandatory,
.asterisk {
    color: var(--error-425-625);
    font-weight: 700;
    margin-left: 0.25rem;
}

/* ============================================
   VALIDATION MESSAGES - DSFR STYLE
   ============================================ */

/* Messages de validation (info) - style DSFR */
.question-valid-container {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-top: 0.25rem;
    color: var(--text-mention-grey);
}

/* Messages d'erreur EM - style DSFR */
.ls-em-error,
.em_num_answers {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-top: 0.25rem;
    color: var(--error-425-625);
    font-weight: 400;
}

/* État d'erreur sur l'input */
input.error,
textarea.error,
select.error,
.fr-input--error,
input.fr-input--error,
textarea.fr-input--error {
    border-color: var(--error-425-625) !important;
    box-shadow: inset 0 -2px 0 0 var(--error-425-625) !important;
}

/* État valide sur l'input */
.fr-input--valid,
input.fr-input--valid,
textarea.fr-input--valid {
    box-shadow: inset 0 -2px 0 0 var(--success-425-625) !important;
}


/* ============================================
   INPUTS & FORM CONTROLS (DSFR)
   ============================================ */

/*
 * Neutralisation Bootstrap pour les champs de formulaire
 * Bootstrap ajoute des bordures et styles qui entrent en conflit avec DSFR
 */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
    all: unset;
    display: block;
    width: 100%;
}

/*
 * Styles DSFR pour les champs input/textarea
 * Conformément aux spécifications DSFR v1.11
 * https://www.systeme-de-design.gouv.fr/
 */

/* Inputs texte - État normal */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="password"],
textarea {
    /* Fond gris DSFR */
    /* DISABLED - Let DSFR thead background-image show through */
    /*     background-color: var(--background-contrast-grey); */

    /* Bordure uniquement en bas (gris foncé/noir) */
    border: none;
    border-radius: 0.25rem 0.25rem 0 0;
    box-shadow: inset 0 -2px 0 0 var(--border-plain-grey);

    /* Typographie */
    color: var(--text-default-grey);
    font-family: "Marianne", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;

    /* Espacement */
    padding: 0.5rem 1rem;

    /* Layout */
    display: block;
    width: 100%;
    max-height: 2.5rem;
}

/* Textarea spécifique */
textarea {
    min-height: 5rem;
    max-height: none;
    resize: vertical;
}

/* État focus - CRITIQUE pour DSFR */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus {
    /* IMPORTANT: Le fond gris doit RESTER au focus */
    background-color: var(--background-contrast-grey) !important;

    /* La bordure en bas reste grise (ne change PAS en bleu) */
    box-shadow: inset 0 -2px 0 0 var(--border-plain-grey);

    /* Outline DSFR pour la prise de focus (accessibilité) - C'EST ÇA qui devient bleu */
    outline: 2px solid var(--border-action-high-blue-france);
    outline-offset: 2px;
}

/* État disabled */
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="search"]:disabled,
input[type="password"]:disabled,
textarea:disabled {
    background-color: var(--background-disabled-grey);
    color: var(--text-disabled-grey);
    box-shadow: inset 0 -2px 0 0 var(--border-disabled-grey);
    cursor: not-allowed;
}

/* Placeholder style DSFR */
input::placeholder,
textarea::placeholder {
    color: var(--text-mention-grey);
    font-style: italic;
    opacity: 1;
}

/* ============================================
   SELECT / LISTE DÉROULANTE (DSFR)
   ============================================ */

/*
 * Styles DSFR pour les <select>
 * https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/liste-deroulante
 */

/* Select - État normal */
select,
.fr-select,
select.form-control {
    /* Fond gris DSFR */
    /* DISABLED - Let DSFR thead background-image show through */
    /*     background-color: var(--background-contrast-grey); */

    /* Bordure uniquement en bas (gris foncé/noir) */
    border: none;
    border-radius: 0.25rem 0.25rem 0 0;
    box-shadow: inset 0 -2px 0 0 var(--border-plain-grey);

    /* Typographie */
    color: var(--text-default-grey);
    font-family: "Marianne", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;

    /* Espacement */
    padding: 0.5rem 1rem;

    /* Layout */
    display: block;
    width: 100%;
}

/* Select - État focus */
select:focus,
.fr-select:focus,
select.form-control:focus {
    /* Le fond gris reste */
    background-color: var(--background-contrast-grey) !important;

    /* La bordure reste grise/noire */
    box-shadow: inset 0 -2px 0 0 var(--border-plain-grey);

    /* Outline bleu pour la prise de focus */
    outline: 2px solid var(--border-action-high-blue-france);
    outline-offset: 2px;
}

/* Select - État disabled */
select:disabled,
.fr-select:disabled {
    background-color: var(--background-disabled-grey);
    color: var(--text-disabled-grey);
    box-shadow: inset 0 -2px 0 0 var(--border-disabled-grey);
    cursor: not-allowed;
}

/* Groupe de select DSFR */
.fr-select-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.fr-select-group:last-child {
    margin-bottom: 0;
}

/* ============================================
   MESSAGES & VALIDATION DSFR
   ============================================ */

/*
 * Styles DSFR pour les messages de validation
 * https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/champ-de-saisie
 */

/* Groupe de messages */
.fr-messages-group {
    margin-top: 0.25rem;
    display: block;
}

/* Message individuel */
.fr-message {
    font-size: 0.75rem;
    line-height: 1.25rem;
    margin: 0.25rem 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Message info (bleu) */
.fr-message--info::before {
    content: "";
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230063CB' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 0.125rem;
}

/* Message succès (vert) */
.fr-message--valid {
    color: var(--success-425);
}

.fr-message--valid::before {
    content: "";
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2318753C' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 0.125rem;
}

/* Message erreur (rouge) */
.fr-message--error {
    color: var(--error-425-625);
}

.fr-message--error::before {
    content: "";
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23CE0500' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 0.125rem;
}

/* États fr-input-group --error et --valid */
/* Note: Les box-shadow sont gérées par DSFR natif pour éviter les conflits */
/* Les règles --error et --valid sont désactivées pour laisser DSFR gérer nativement les bordures */

/* Label hint text */
.fr-label .fr-hint-text {
    display: block;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: var(--text-mention-grey);
    font-weight: 400;
    margin-top: 0.25rem;
}

/* ============================================
   RADIO BUTTONS (DSFR)
   ============================================ */

/* Container pour les radios */
.radio-item,
.checkbox-item,
.answer-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    position: relative;
}

/* Exception: items numériques avec grille DSFR - ne pas appliquer flex */
.answer-item.numeric-item,
.answer-item.text-item {
    display: block;
}

/* IMPORTANT: Dans les tableaux, ces classes ne doivent PAS avoir de flex/margin */
table .radio-item,
table .checkbox-item,
table .answer-item,
table td.radio-item,
table td.checkbox-item,
table td.answer-item {
    display: table-cell !important;
    margin-bottom: 0 !important;
    padding: 0.5rem !important;
    position: static !important;
}

/* ============================================
   RADIO/CHECKBOX - DSFR NATIF
   ============================================ */

/* Le DSFR gère les radio/checkbox dans .fr-radio-group et .fr-checkbox-group */
/* Aucun override nécessaire - le DSFR fait tout */

/* Dans les tableaux, centrer les inputs */
table input[type="radio"],
table input[type="checkbox"] {
    margin: 0 auto;
}

/* Fin de la section radio/checkbox */

/* ============================================
   BOUTONS (DSFR)
   ============================================ */

/* Bouton primaire - NE PAS STYLER button[type="submit"] pour laisser DSFR gérer */
.btn-primary,
input[type="submit"],
.ls-button-submit,
.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: "Marianne", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 0.5rem 1rem;
    background-color: var(--background-action-high-blue-france);
    color: var(--text-inverted-grey) !important;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
    box-shadow: inset 0 0 0 1px var(--background-action-high-blue-france);
}

/* Laisser DSFR gérer les boutons avec classes DSFR */

.btn-primary:hover,
input[type="submit"]:hover {
    background-color: var(--background-action-high-blue-france-hover);
    box-shadow: inset 0 0 0 1px var(--background-action-high-blue-france-hover);
}

.btn-primary:active {
    background-color: var(--background-action-high-blue-france-active);
}

.btn-primary:focus {
    outline: 2px solid var(--border-action-high-blue-france);
    outline-offset: 2px;
}

.btn-primary:disabled {
    background-color: var(--background-disabled-grey);
    color: var(--text-disabled-grey) !important;
    cursor: not-allowed;
    box-shadow: inset 0 0 0 1px var(--background-disabled-grey);
}

/* Bouton secondaire */
.btn-secondary,
.btn-outline,
.ls-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: "Marianne", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background-color: transparent;
    color: var(--text-action-high-blue-france) !important;
    border: 1px solid var(--border-action-high-blue-france);
    border-radius: 0.25rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-secondary:hover,
.btn-outline:hover {
    background-color: var(--background-action-low-blue-france-hover);
}

.btn-secondary:active {
    background-color: var(--background-action-low-blue-france-active);
}

.btn-secondary:focus {
    outline: 2px solid var(--border-action-high-blue-france);
    outline-offset: 2px;
}

/* Bouton tertiaire (sans bordure) */
.btn-link,
.btn-tertiary {
    background: transparent;
    border: none;
    color: var(--text-action-high-blue-france) !important;
    text-decoration: underline;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 1rem;
}

.btn-link:hover,
.btn-tertiary:hover {
    background-color: var(--background-action-low-blue-france-hover);
    text-decoration: underline;
}

/* ============================================
   NAVIGATION (Previous/Next)
   ============================================ */

.survey-navigation,
#ls-button-submit,
.navigator-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Les boutons de navigation DSFR n'ont pas besoin de ces marges */
.fr-container .fr-btn {
    margin-top: 0 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* ============================================
   QUESTIONS À MULTIPLES ENTRÉES NUMÉRIQUES
   ============================================ */

/* Alignement horizontal des préfixes, input et suffixes */
.ls-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

/* Préfixes et suffixes */
.ls-input-group-extra {
    flex-shrink: 0;
    font-size: 0.875rem;
    color: var(--text-mention-grey, #666);
}

/* L'input group DSFR doit prendre la largeur restante */
.ls-input-group .fr-input-group {
    flex: 1;
    min-width: 0; /* Permet au flex item de shrink en dessous de sa taille de contenu */
}

/* Sur mobile, empiler verticalement */
@media (max-width: 767px) {
    .ls-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    .ls-input-group-extra {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .survey-navigation {
        flex-direction: column;
    }

    .survey-navigation button,
    .survey-navigation .btn {
        width: 100%;
    }
}

/* ============================================
   MESSAGES & ALERTES (DSFR)
   ============================================ */

.alert,
.alert-box,
.ls-alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
    border-left: 4px solid;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.alert::before {
    content: '';
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Info */
.alert-info {
    background-color: var(--background-contrast-info);
    border-left-color: var(--info-425);
    color: var(--info-425);
}

/* Success */
.alert-success {
    background-color: var(--background-contrast-success);
    border-left-color: var(--success-425);
    color: var(--success-425);
}

/* Warning */
.alert-warning {
    background-color: var(--background-contrast-warning);
    border-left-color: var(--warning-425);
    color: var(--warning-425);
}

/* Error/Danger */
.alert-error,
.alert-danger {
    background-color: var(--background-contrast-error);
    border-left-color: var(--error-425-625);
    color: var(--error-425-625);
}

/* ============================================
   ERREURS DE VALIDATION
   ============================================ */

.error-message,
.em_num_answers,
.ls-em-error {
    color: var(--error-425-625);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-message::before,
.em_num_answers::before {
    content: '';
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23CE0500' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3e%3c/svg%3e");
    background-size: contain;
    flex-shrink: 0;
}

input.error,
textarea.error,
select.error,
.has-error input,
.has-error textarea,
.has-error select {
    border-color: var(--error-425-625);
    border-bottom-color: var(--error-425-625);
}

input.error:focus,
textarea.error:focus,
select.error:focus {
    box-shadow: inset 0 -2px 0 0 var(--error-425-625);
}

/* ============================================
   FOOTER
   ============================================ */

.survey-footer {
    background-color: var(--background-alt-grey);
    border-top: 1px solid var(--border-default-grey);
    padding: 2rem 1rem;
    margin-top: 3rem;
}

/* Footer DSFR fond par défaut (override DSFR et custom) */
footer.fr-footer,
.fr-footer {
    background-color: var(--background-default-grey) !important;
}

.survey-footer .container-fluid {
    max-width: 78rem;
    margin: 0 auto;
}

.survey-footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.survey-footer-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.survey-footer-links a {
    color: var(--text-default-grey);
    text-decoration: none;
    font-size: 0.875rem;
}

.survey-footer-links a:hover {
    text-decoration: underline;
    color: var(--text-action-high-blue-france);
}

.survey-footer-bottom {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default-grey);
    font-size: 0.75rem;
    color: var(--text-mention-grey);
    text-align: center;
}

/* ============================================
   BOOTSTRAP MODALS → DSFR STYLE
   ============================================ */

/*
 * LimeSurvey utilise des modales Bootstrap (ex: erreur de validation).
 * On les adapte au style DSFR sans casser leur fonctionnement.
 */

/* Overlay (backdrop) */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.show {
    opacity: 1;
}

/* Container de la modale */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal.show {
    display: block;
}

/* Centrage vertical */
.modal {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 0 auto;
    max-width: 500px;
    pointer-events: none;
}

.modal.show .modal-dialog {
    pointer-events: auto;
}

/* Carte de la modale - style DSFR */
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--background-default-grey);
    background-clip: padding-box;
    border: 1px solid var(--border-default-grey);
    border-radius: 0.5rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    outline: 0;
}

/* Header DSFR */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-default-grey);
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-title-grey);
    line-height: 1.5;
}

/* Bouton fermer DSFR */
.modal-header .btn-close {
    padding: 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23161616' d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center/1rem auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: 1;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
}

.modal-header .btn-close:hover {
    background-color: var(--background-alt-grey);
}

.modal-header .btn-close:focus {
    outline: 2px solid var(--border-action-high-blue-france);
    outline-offset: 2px;
}

/* Body */
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem;
    color: var(--text-default-grey);
    font-size: 1rem;
    line-height: 1.5;
}

.modal-body p {
    margin-bottom: 0;
}

/* Footer */
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-default-grey);
    gap: 0.5rem;
}

.modal-footer .btn {
    margin: 0;
}

/* Responsive */
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
}

/* Animation fade */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    body {
        font-size: 0.875rem;
    }

    .container-fluid {
        padding: 1rem 0.5rem;
    }

    .question-container {
        padding: 1rem;
    }

    .question-text {
        font-size: 1rem;
    }

    .survey-footer-content {
        flex-direction: column;
    }
}

/* ============================================
   ACCESSIBILITÉ
   ============================================ */

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

.visually-hidden-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Focus visible pour tous les éléments interactifs */
*:focus-visible {
    outline: 2px solid var(--blue-france);
    outline-offset: 2px;
}

/* Skip links pour accessibilité */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--blue-france);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* ============================================
   UTILITAIRES
   ============================================ */

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Spacing utilities removed - now using DSFR utilities (fr-mb-*w, fr-mt-*w, fr-p-*w) */

/* ============================================
   CORRECTIONS TABLEAUX DSFR
   ============================================ */

/* Le DSFR avec --bordered applique un fond gris clair (--background-alt-grey)
   par défaut à toutes les cellules tbody td.

   Selon la doc DSFR, les tableaux doivent avoir un fond blanc par défaut,
   avec possibilité d'alternance de couleurs pour les lignes.

   On surcharge ici pour respecter le comportement attendu de LimeSurvey
   avec alternance ls-odd/ls-even */

/* Application du fond gris DSFR sur tous les tbody (compatible mode sombre) */
.fr-table tbody,
.fr-table--bordered tbody {
    background-color: var(--background-alt-grey) !important;
}

/* Reset du fond gris par défaut du DSFR sur tous les td */
.fr-table--bordered table tbody td {
    background-color: transparent !important;
}

/* Application manuelle de l'alternance avec les classes LimeSurvey */
/* Backgrounds removed for responsive mobile linearization */
.fr-table--bordered table tbody tr.ls-odd td,
.fr-table--bordered table tbody tr.ls-odd th,
.fr-table--bordered table tbody tr.ls-even td,
.fr-table--bordered table tbody tr.ls-even th {
    background-color: transparent !important;
}


/* ============================================
   ÉTATS D'ERREUR ET DE VALIDITÉ POUR TABLEAUX
   S'applique sur tous les écrans (pas seulement mobile)
   ============================================ */

/* États d'erreur et de validité pour les inputs dans les tableaux */
.fr-table table tbody tr td .fr-input-group .fr-input.fr-input--error,
.fr-table--bordered table tbody tr td .fr-input-group .fr-input.fr-input--error,
div[class*="fr-table"] table tbody tr td .fr-input-group .fr-input.fr-input--error,
.fr-table table tbody tr td .fr-input.fr-input--error,
.fr-table--bordered table tbody tr td .fr-input.fr-input--error,
div[class*="fr-table"] table tbody tr td .fr-input.fr-input--error,
table.radio-array tbody tr td .fr-input-group .fr-input.fr-input--error,
table.radio-array tbody tr td .fr-input.fr-input--error,
table.questions-list tbody tr td .fr-input-group .fr-input.fr-input--error,
table.questions-list tbody tr td .fr-input.fr-input--error,
table.table tbody tr td .fr-input-group .fr-input.fr-input--error,
table.table tbody tr td .fr-input.fr-input--error,
.fr-input-group--error .fr-input.fr-input--error {
    border-color: var(--error-425-625) !important;
    box-shadow: inset 0 -2px 0 0 var(--error-425-625) !important;
}

.fr-table table tbody tr td .fr-input-group .fr-input.fr-input--valid,
.fr-table--bordered table tbody tr td .fr-input-group .fr-input.fr-input--valid,
div[class*="fr-table"] table tbody tr td .fr-input-group .fr-input.fr-input--valid,
.fr-table table tbody tr td .fr-input.fr-input--valid,
.fr-table--bordered table tbody tr td .fr-input.fr-input--valid,
div[class*="fr-table"] table tbody tr td .fr-input.fr-input--valid,
table.radio-array tbody tr td .fr-input-group .fr-input.fr-input--valid,
table.radio-array tbody tr td .fr-input.fr-input--valid,
table.questions-list tbody tr td .fr-input-group .fr-input.fr-input--valid,
table.questions-list tbody tr td .fr-input.fr-input--valid,
table.table tbody tr td .fr-input-group .fr-input.fr-input--valid,
table.table tbody tr td .fr-input.fr-input--valid,
.fr-input-group--valid .fr-input.fr-input--valid {
    box-shadow: inset 0 -2px 0 0 var(--success-425-625) !important;
}

/* ============================================
   MULTIPLE NUMERIC QUESTIONS - GRID FIX
   ============================================ */

/* Neutraliser les styles de liste par défaut - UNIQUEMENT pour questions numériques */
ul.numeric-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Items de liste - retirer les puces et marges - UNIQUEMENT pour items numériques */
ul.numeric-list li,
li.numeric-item {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Forcer les lignes de grille dynamiques (total/remaining) sans puces */
li.ls-group-total,
li.ls-group-remaining,
li.ls-group-dynamic {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* ============================================
   SLIDERS - AJUSTEMENT MARGE DROITE
   ============================================ */

/* Ajouter une marge à droite pour les sliders horizontaux dans les questions numériques multiples */
.ls-slider-item-horizontal .fr-range-group {
    margin-right: 1.5rem;
}

/* Sur mobile, retirer la marge supplémentaire */
@media (max-width: 767px) {
    .ls-slider-item-horizontal .fr-range-group {
        margin-right: 0;
    }
}

/* S'assurer que les colonnes prennent 100% sur mobile */
@media (max-width: 47.99em) {
    ul.numeric-list .fr-col-12.fr-col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ============================================
   ARRAY TABLES - DSFR STYLE
   ============================================ */

/* Styles DSFR pour les tableaux type Array (Question 26) */
.ls-table-wrapper table.table-array-radio,
.ls-table-wrapper table.radio-array {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
}

/* Bordures DSFR pour le tableau */
.ls-table-wrapper table.table-array-radio,
.ls-table-wrapper table.radio-array {
    border: 1px solid var(--border-default-grey, #ddd);
}

.ls-table-wrapper table.table-array-radio th,
.ls-table-wrapper table.table-array-radio td,
.ls-table-wrapper table.radio-array th,
.ls-table-wrapper table.radio-array td {
    border: 1px solid var(--border-default-grey, #ddd);
    padding: 0.75rem;
    text-align: left;
}

/* En-têtes de colonnes */
.ls-table-wrapper table.table-array-radio thead th,
.ls-table-wrapper table.radio-array thead th {
    /* DISABLED - Let DSFR thead background-image show through */
    /* background-color: var(--background-contrast-grey); */
    font-weight: 700;
    color: var(--text-title-grey);
    text-align: center;
}

/* RÈGLE GLOBALE : Forcer le style DSFR complet sur TOUS les thead
   Cette règle utilise !important pour surcharger toutes les règles spécifiques
   DSFR utilise DEUX propriétés background:
   1. background-color pour le fond gris
   2. background-image (gradient) pour la bordure bottom
   Note: Le background ne s'hérite pas, il faut l'appliquer sur les th/td
*/
.fr-table thead th,
.fr-table thead td,
.fr-table--bordered thead th,
.fr-table--bordered thead td,
.ls-table-wrapper .fr-table thead th,
.ls-table-wrapper .fr-table thead td,
.ls-table-wrapper table thead th,
.ls-table-wrapper table thead td {
    background-color: var(--background-contrast-grey) !important;
    background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey)) !important;
    background-position: bottom !important;
    background-repeat: no-repeat !important;
    background-size: 100% 2px !important;
    color: var(--text-title-grey) !important;
    font-weight: 700 !important;
}

/* Surcharge de la bordure Bootstrap pour utiliser la couleur DSFR */
.ls-table-wrapper table.table-array-radio > :not(:first-child),
.ls-table-wrapper table.radio-array > :not(:first-child) {
    border-top-color: var(--border-default-grey);
}

/* Bordures renforcées en haut de la ligne d'en-tête */
.ls-table-wrapper table.table-array-radio thead tr.ls-heading th,
.ls-table-wrapper table.table-array-radio thead tr.ls-heading td,
.ls-table-wrapper table.radio-array thead tr.ls-heading th,
.ls-table-wrapper table.radio-array thead tr.ls-heading td {
    border-top-color: var(--border-default-grey);
}

/* Bordure bottom uniforme sur TOUS les éléments du thead
   Fix pour surcharger le border:0 du DSFR natif qui ne met pas de vraies bordures
   (DSFR utilise background-image:linear-gradient au lieu de border)
   On utilise border-bottom shorthand avec !important et spécificité maximale */
/*
.ls-table-wrapper table.radio-array.fr-table thead tr > th,
.ls-table-wrapper table.radio-array.fr-table thead tr > td,
.ls-table-wrapper table.radio-array.fr-table--bordered thead tr > th,
.ls-table-wrapper table.radio-array.fr-table--bordered thead tr > td,
.ls-table-wrapper table.fr-table.fr-table--bordered thead tr > th,
.ls-table-wrapper table.fr-table.fr-table--bordered thead tr > td,
.ls-table-wrapper table.fr-table thead tr > th,
.ls-table-wrapper table.fr-table thead tr > td,
table.radio-array.fr-table.fr-table--bordered thead tr > th,
table.radio-array.fr-table.fr-table--bordered thead tr > td,
table.radio-array.fr-table thead tr > th,
table.radio-array.fr-table thead tr > td,
table.fr-table.fr-table--bordered thead tr > th,
table.fr-table.fr-table--bordered thead tr > td,
table.fr-table--bordered thead tr > th,
table.fr-table--bordered thead tr > td,
table.fr-table thead tr > th,
table.fr-table thead tr > td {
    border-bottom: 2px solid var(--border-default-grey) !important;
}
*/

/* En-têtes de lignes (première colonne) */
.ls-table-wrapper table.table-array-radio tbody th.answertext,
.ls-table-wrapper table.radio-array tbody th.answertext {
    font-weight: 700;
    color: var(--text-title-grey);
}

/* Cellules avec radio buttons - centrage */
.ls-table-wrapper table.table-array-radio td.answer_cell,
.ls-table-wrapper table.table-array-radio td[class*="answer_cell_"],
.ls-table-wrapper table.radio-array td.answer_cell,
.ls-table-wrapper table.radio-array td[class*="answer_cell_"] {
    text-align: center;
    vertical-align: middle;
}

/* Fond blanc uniforme pour toutes les lignes */
.ls-table-wrapper table.table-array-radio tbody tr,
.ls-table-wrapper table.radio-array tbody tr {
    background-color: var(--background-default-grey);
}

/* Hover sur les lignes */
.ls-table-wrapper table.table-array-radio tbody tr:hover,
.ls-table-wrapper table.radio-array tbody tr:hover {
    background-color: var(--background-contrast-blue-france);
}

/* Responsive - scroll horizontal sur mobile */
@media (max-width: 48em) {
    .ls-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   ARRAY COLUMN TABLES - DSFR STYLE (Question 27)
   ============================================ */

/* Styles DSFR pour les tableaux type Array Column */
.ls-table-wrapper table.array-radio {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
    border: 1px solid var(--border-default-grey);
}

.ls-table-wrapper table.array-radio th,
.ls-table-wrapper table.array-radio td {
    border: 1px solid var(--border-default-grey);
    padding: 0.75rem;
    text-align: left;
}

/* En-têtes de colonnes */
.ls-table-wrapper table.array-radio thead th {
    /* DISABLED - Let DSFR thead background-image show through */
    /*     background-color: var(--background-contrast-grey); */
    font-weight: 700;
    color: var(--text-title-grey);
    text-align: center;
}

/* Surcharge de la bordure Bootstrap pour utiliser la couleur DSFR */
.ls-table-wrapper table.array-radio > :not(:first-child) {
    border-top-color: var(--border-default-grey);
}

/* Bordures renforcées en haut de la ligne d'en-tête */
.ls-table-wrapper table.array-radio thead tr.ls-heading th,
.ls-table-wrapper table.array-radio thead tr.ls-heading td {
    border-top-color: var(--border-default-grey);
}

/* Bordures renforcées en bas de la ligne d'en-tête */
/* DISABLED - Testing global rule (line 1680) - Can be restored if needed */
/*
.ls-table-wrapper table.array-radio thead tr.ls-heading th,
.ls-table-wrapper table.array-radio thead tr.ls-heading td {
    border-bottom: 2px solid var(--border-plain-grey);
}
*/

/* En-têtes de lignes (première colonne) */
.ls-table-wrapper table.array-radio tbody th.answertext {
    font-weight: 700;
    color: var(--text-title-grey);
}

/* Cellules avec radio buttons - centrage */
.ls-table-wrapper table.array-radio td.answer_cell,
.ls-table-wrapper table.array-radio td[class*="answer_cell_"] {
    text-align: center;
    vertical-align: middle;
}

/* Fond blanc uniforme pour toutes les lignes */
.ls-table-wrapper table.array-radio tbody tr {
    background-color: var(--background-default-grey);
}

/* Hover sur les lignes */
.ls-table-wrapper table.array-radio tbody tr:hover {
    background-color: var(--background-contrast-blue-france);
}

/* Radio buttons DSFR dans les tableaux array-radio */
.ls-table-wrapper table.array-radio .fr-radio-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.ls-table-wrapper table.array-radio .fr-radio-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--border-plain-grey);
    border-radius: 50%;
    background-color: var(--background-default-grey);
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
}

.ls-table-wrapper table.array-radio .fr-radio-input:checked {
    border-color: var(--border-action-high-blue-france);
    background-color: var(--background-default-grey);
}

.ls-table-wrapper table.array-radio .fr-radio-input:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: var(--background-action-high-blue-france);
}

.ls-table-wrapper table.array-radio .fr-radio-input:hover {
    border-color: var(--border-action-high-blue-france);
}

.ls-table-wrapper table.array-radio .fr-radio-input:focus {
    outline: 2px solid var(--border-action-high-blue-france);
    outline-offset: 2px;
}

/* ============================================
   INCREASE/SAME/DECREASE TABLES - DSFR STYLE (Question 30)
   ============================================ */

/* Styles DSFR pour les tableaux type Increase/Same/Decrease */
.array-increase-same-decrease table.radio-array {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
}

.array-increase-same-decrease table.radio-array th,
.array-increase-same-decrease table.radio-array td {
    border: 1px solid var(--border-default-grey, #ddd);
    padding: 0.75rem;
    text-align: left;
}

/* En-têtes de colonnes */
.array-increase-same-decrease table.radio-array thead th,
.array-increase-same-decrease table.radio-array thead td {
    background-color: var(--background-contrast-grey) !important;
    background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey)) !important;
    background-position: bottom !important;
    background-repeat: no-repeat !important;
    background-size: 100% 2px !important;
    font-weight: 700;
    color: var(--text-title-grey) !important;
    text-align: center;
}

/* Surcharge de la bordure Bootstrap pour utiliser la couleur DSFR */
.array-increase-same-decrease table.radio-array > :not(:first-child) {
    border-top-color: var(--border-default-grey) !important;
}

/* Bordures renforcées en haut de la ligne d'en-tête */
.array-increase-same-decrease table.radio-array thead tr.ls-heading th,
.array-increase-same-decrease table.radio-array thead tr.ls-heading td,
.array-increase-same-decrease table.radio-array thead tr.ls-header th,
.array-increase-same-decrease table.radio-array thead tr.ls-header td {
    border-top-color: var(--border-default-grey) !important;
}

/* Bordures renforcées en bas de la ligne d'en-tête */
/* DISABLED - Testing global rule (line 1680) - Can be restored if needed */
/*
.array-increase-same-decrease table.radio-array thead tr.ls-heading th,
.array-increase-same-decrease table.radio-array thead tr.ls-heading td,
.array-increase-same-decrease table.radio-array thead tr.ls-header th,
.array-increase-same-decrease table.radio-array thead tr.ls-header td {
    border-bottom: 2px solid var(--border-default-grey) !important;
}
*/

/* En-têtes de lignes (première colonne) */
.array-increase-same-decrease table.radio-array tbody th.answertext {
    font-weight: 700;
    color: var(--text-label-grey) !important;
}

/* Cellules avec radio buttons - centrage */
.array-increase-same-decrease table.radio-array td.answer_cell,
.array-increase-same-decrease table.radio-array td[class*="answer_cell_"] {
    text-align: center;
    vertical-align: middle;
}

/* Fond transparent pour toutes les lignes (pas de fond sur mobile) */
.array-increase-same-decrease table.radio-array tbody tr {
    background-color: transparent !important;
}

/* Hover sur les lignes */
.array-increase-same-decrease table.radio-array tbody tr:hover {
    background-color: var(--background-contrast-blue-france, #e3e3fd) !important;
}

/* ============================================
   YES/NO/UNCERTAIN TABLES - DSFR STYLE (Question 31)
   ============================================ */

/* Styles DSFR pour les tableaux type Yes/No/Uncertain */
.array-yes-uncertain-no table.radio-array {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
}

.array-yes-uncertain-no table.radio-array th,
.array-yes-uncertain-no table.radio-array td {
    border: 1px solid var(--border-default-grey, #ddd);
    padding: 0.75rem;
    text-align: left;
}

/* En-têtes de colonnes */
.array-yes-uncertain-no table.radio-array thead th,
.array-yes-uncertain-no table.radio-array thead td {
    background-color: var(--background-contrast-grey) !important;
    background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey)) !important;
    background-position: bottom !important;
    background-repeat: no-repeat !important;
    background-size: 100% 2px !important;
    font-weight: 700;
    color: var(--text-label-grey) !important;
    text-align: center;
}

/* Surcharge de la bordure Bootstrap pour utiliser la couleur DSFR */
.array-yes-uncertain-no table.radio-array > :not(:first-child) {
    border-top-color: var(--border-default-grey, #ddd) !important;
}

/* Bordures renforcées en haut de la ligne d'en-tête */
.array-yes-uncertain-no table.radio-array thead tr.ls-heading th,
.array-yes-uncertain-no table.radio-array thead tr.ls-heading td {
    border-top-color: var(--border-default-grey, #ddd) !important;
}

/* Bordures renforcées en bas de la ligne d'en-tête */
/* DISABLED - Testing global rule (line 1680) - Can be restored if needed */
/*
.array-yes-uncertain-no table.radio-array thead tr.ls-heading th,
.array-yes-uncertain-no table.radio-array thead tr.ls-heading td {
    border-bottom: 2px solid var(--border-default-grey) !important;
}
*/

/* En-têtes de lignes (première colonne) */
.array-yes-uncertain-no table.radio-array tbody th.answertext {
    font-weight: 700;
    color: var(--text-label-grey) !important;
}

/* Cellules avec radio buttons - centrage */
.array-yes-uncertain-no table.radio-array td.answer_cell,
.array-yes-uncertain-no table.radio-array td[class*="answer_cell_"] {
    text-align: center;
    vertical-align: middle;
}

/* Fond transparent pour toutes les lignes (pas de fond sur mobile) */
.array-yes-uncertain-no table.radio-array tbody tr {
    background-color: transparent !important;
}

/* Hover sur les lignes */
.array-yes-uncertain-no table.radio-array tbody tr:hover {
    background-color: var(--background-contrast-blue-france, #e3e3fd) !important;
}

/* ============================================
   DUAL SCALE TABLES - DSFR STYLE (Question 33)
   ============================================ */

/* Styles DSFR pour les tableaux type Dual Scale */
.ls-table-wrapper table.array-flexible-dual-scale,
table.array-flexible-dual-scale {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
}

.ls-table-wrapper table.array-flexible-dual-scale th,
.ls-table-wrapper table.array-flexible-dual-scale td,
table.array-flexible-dual-scale th,
table.array-flexible-dual-scale td {
    padding: 0.75rem;
    text-align: left;
}

/* En-têtes de colonnes */
.ls-table-wrapper table.array-flexible-dual-scale thead th,
table.array-flexible-dual-scale thead th {
    /* DISABLED - Let DSFR thead background-image show through */
    /*     background-color: var(--background-contrast-grey, #f6f6f6); */
    font-weight: 700;
    color: #161616;
    text-align: center;
}

/* Surcharge de la bordure Bootstrap pour utiliser la couleur DSFR */
.ls-table-wrapper table.array-flexible-dual-scale > :not(:first-child),
table.array-flexible-dual-scale > :not(:first-child) {
    border-top-color: var(--border-default-grey, #ddd);
}

/* Bordures renforcées en haut de la ligne d'en-tête */
.ls-table-wrapper table.array-flexible-dual-scale thead tr.ls-heading th,
.ls-table-wrapper table.array-flexible-dual-scale thead tr.ls-heading td,
table.array-flexible-dual-scale thead tr.ls-heading th,
table.array-flexible-dual-scale thead tr.ls-heading td {
    border-top-color: var(--border-default-grey, #ddd);
}

/* Bordures renforcées en bas de la ligne d'en-tête */
/* DISABLED - Testing global rule (line 1680) - Can be restored if needed */
/*
.ls-table-wrapper table.array-flexible-dual-scale thead tr.ls-heading th,
.ls-table-wrapper table.array-flexible-dual-scale thead tr.ls-heading td,
table.array-flexible-dual-scale thead tr.ls-heading th,
table.array-flexible-dual-scale thead tr.ls-heading td {
    border-bottom: 2px solid var(--border-default-grey);
}
*/

/* En-têtes de lignes (première colonne) */
.ls-table-wrapper table.array-flexible-dual-scale tbody th.answertext,
table.array-flexible-dual-scale tbody th.answertext {
    font-weight: 700;
    color: #161616;
}

/* Cellules avec radio buttons - centrage */
.ls-table-wrapper table.array-flexible-dual-scale td.answer_cell,
.ls-table-wrapper table.array-flexible-dual-scale td[class*="answer_cell_"],
table.array-flexible-dual-scale td.answer_cell,
table.array-flexible-dual-scale td[class*="answer_cell_"] {
    text-align: center;
    vertical-align: middle;
}

/* Fond transparent pour toutes les lignes (pas de fond alterné sur mobile) */
.ls-table-wrapper table.array-flexible-dual-scale tbody tr,
table.array-flexible-dual-scale tbody tr {
    background-color: transparent;
}

/* Hover sur les lignes */
.ls-table-wrapper table.array-flexible-dual-scale tbody tr:hover,
table.array-flexible-dual-scale tbody tr:hover {
    background-color: var(--background-contrast-blue-france, #e3e3fd);
}

/* En-têtes de groupe pour dual scale (gauche/droite) */
.ls-table-wrapper table.array-flexible-dual-scale thead tr.ls-heading.groups th.dsheader,
table.array-flexible-dual-scale thead tr.ls-heading.groups th.dsheader {
    /* DISABLED - Let DSFR thead background-image show through */
    /*     background-color: var(--background-contrast-grey, #f6f6f6); */
    font-weight: 700;
    color: #161616;
    /* DISABLED - Testing global rule (line 1680) - Can be restored if needed */
    /* border-bottom: 2px solid var(--border-default-grey); */
}

/* Séparateurs dans les tableaux dual scale */
.ls-table-wrapper table.array-flexible-dual-scale td.dual_scale_separator,
table.array-flexible-dual-scale td.dual_scale_separator {
    /* DISABLED - Let DSFR thead background-image show through */
    /*     background-color: var(--background-contrast-grey, #f6f6f6); */
    text-align: center;
    font-weight: 500;
}

/* ============================================
   DUAL SCALE DROPDOWN TABLES - DSFR STYLE (Question 33)
   ============================================ */

/* Cibler les tableaux dual scale avec dropdown via leurs classes spécifiques */
.ls-table-wrapper table:has(.left-header, .right-header),
.ls-table-wrapper table:has(.ddarrayseparator) {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
}

.ls-table-wrapper table:has(.left-header, .right-header) th,
.ls-table-wrapper table:has(.left-header, .right-header) td,
.ls-table-wrapper table:has(.ddarrayseparator) th,
.ls-table-wrapper table:has(.ddarrayseparator) td {
    padding: 0.75rem;
    text-align: left;
}

/* En-têtes de colonnes Scale A / Scale B */
.ls-table-wrapper table thead th.left-header,
.ls-table-wrapper table thead th.right-header {
    /* Copier exactement les propriétés DSFR de .fr-table thead */
    /* DISABLED - Let DSFR thead background-image show through */
    /*     background-color: var(--background-contrast-grey); */
    background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey));
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    font-weight: 700;
    color: var(--text-title-grey);
    text-align: center;
}

/* Surcharge de la bordure Bootstrap */
.ls-table-wrapper table:has(.ddarrayseparator) > :not(:first-child) {
    border-top-color: var(--border-default-grey, #ddd) !important;
}

/* Bordures renforcées en bas de la ligne d'en-tête */
/* DISABLED - Testing global rule (line 1680) - Can be restored if needed */
/*
.ls-table-wrapper table thead tr.ls-heading th.left-header,
.ls-table-wrapper table thead tr.ls-heading th.right-header,
.ls-table-wrapper table thead tr.ls-heading td {
    border-bottom: 2px solid var(--border-default-grey) !important;
}
*/

/* Ajouter la bordure via background-image sur les TH spécifiquement */
/* DISABLED - Testing global rule (line 1680) - Can be restored if needed */
/*
.ls-table-wrapper table thead tr.ls-heading th.left-header,
.ls-table-wrapper table thead tr.ls-heading th.right-header {
    background-color: var(--background-contrast-grey) !important;
    background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey)) !important;
    background-position: bottom !important;
    background-repeat: no-repeat !important;
    background-size: 100% 2px !important;
}
*/

/* En-têtes de lignes (première colonne) */
.ls-table-wrapper table:has(.ddarrayseparator) tbody th.answertext {
    font-weight: 700;
    color: var(--text-label-grey) !important;
}

/* Cellules avec dropdown - centrage */
.ls-table-wrapper table td.dropdown-item {
    text-align: center;
    vertical-align: middle;
}

/* Séparateur central - masqué */
.ls-table-wrapper table td.ddarrayseparator {
    width: 0 !important;
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
}

/* Colonne séparatrice dans colgroup - masquée */
.ls-table-wrapper table col.ddarrayseparator {
    width: 0 !important;
}

/* Fond transparent pour toutes les lignes (pas de fond sur mobile) */
.ls-table-wrapper table:has(.ddarrayseparator) tbody tr {
    background-color: transparent !important;
}

/* Hover sur les lignes */
.ls-table-wrapper table:has(.ddarrayseparator) tbody tr:hover {
    background-color: var(--background-contrast-blue-france, #e3e3fd) !important;
}

/* Style DSFR pour les select */
.ls-table-wrapper table td.dropdown-item select.form-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-default-grey, #ddd);
    border-radius: 0.25rem;
    background-color: #fff;
    font-size: 1rem;
    line-height: 1.5;
}

.ls-table-wrapper table td.dropdown-item select.form-select:focus {
    outline: 2px solid #0a76f6;
    outline-offset: 2px;
    border-color: #000091;
}

/* ========================================
   Question Type: Ranking (Type R)
   ======================================== */

/* Remove list bullets/numbers from ranking lists */
.ranking-source-list,
.ranking-target-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Full width for ranking items */
.ranking-item {
    width: 100%;
}

/* Source items styling (same as ranked but clickable) */
.ranking-source-list .ranking-item-content {
    background-color: var(--background-alt-blue-france, #f5f5fe);
    border: 1px solid var(--border-default-grey, #ddd);
    border-radius: 0.25rem;
    padding: 1rem 1rem;
    width: 80%;
    cursor: pointer;
    display: block;
    text-align: left;
}

.ranking-source-list .ranking-item-content:hover {
    background-color: #e8edff;
}

/* Ranked items styling */
.ranking-item.ranked {
    background-color: var(--background-alt-blue-france, #f5f5fe);
    border: 1px solid var(--border-default-grey, #ddd);
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
}

/* Button group in ranked items */
.ranking-item.ranked .fr-col-4 {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
    align-items: center;
}

/* ========================================
   Question Type: Multiple Short Text (Type Q)
   Input On Demand - Saisie à la demande
   ======================================== */

/* Container padding pour éviter le débordement des champs */
.multiple-short-txt .answer-container {
    padding: 0 1rem;
}

/* Style du bouton "Ajouter une ligne" en DSFR */
.selector--inputondemand-addlinebutton,
button.selector--inputondemand-addlinebutton,
.btn.selector--inputondemand-addlinebutton {
    /* Reset Bootstrap */
    all: unset;

    /* Bouton secondaire DSFR */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    color: var(--text-action-high-blue-france, #000091) !important;
    border: 1px solid var(--text-action-high-blue-france, #000091) !important;
    padding: 0.5rem 1rem !important;
    font-family: "Marianne", Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.5rem !important;
    border-radius: 0.25rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.selector--inputondemand-addlinebutton:hover,
button.selector--inputondemand-addlinebutton:hover,
.btn.selector--inputondemand-addlinebutton:hover {
    background-color: var(--background-action-high-blue-france-hover, #1212ff) !important;
    color: white !important;
    border-color: var(--background-action-high-blue-france-hover, #1212ff) !important;
    text-decoration: none !important;
}

.selector--inputondemand-addlinebutton:active,
button.selector--inputondemand-addlinebutton:active,
.btn.selector--inputondemand-addlinebutton:active {
    background-color: var(--background-action-high-blue-france-active, #2323ff) !important;
    color: white !important;
    border-color: var(--background-action-high-blue-france-active, #2323ff) !important;
}

.selector--inputondemand-addlinebutton:focus,
button.selector--inputondemand-addlinebutton:focus,
.btn.selector--inputondemand-addlinebutton:focus {
    outline: 2px solid var(--text-action-high-blue-france, #000091) !important;
    outline-offset: 2px !important;
}

/* Icône dans le bouton */
.selector--inputondemand-addlinebutton i,
.selector--inputondemand-addlinebutton .ri-arrow-down-s-line,
.selector--inputondemand-addlinebutton .fa {
    margin-right: 0.25rem;
    display: inline-block;
    vertical-align: middle;
}

/* Convertir l'icône FontAwesome en icône DSFR visuelle */
.selector--inputondemand-addlinebutton .fa-chevron-down::before,
.selector--inputondemand-addlinebutton .ri-arrow-down-s-line::before {
    content: "▼";
    font-family: "Marianne", Arial, sans-serif;
    font-size: 0.75rem;
}

/* Fix pour les champs qui dépassent */
.selector--inputondemand-list .form-control,
.selector--inputondemand-list .dsfr-input,
.selector--inputondemand-list .fr-input {
    max-width: 100%;
    box-sizing: border-box;
}

/* Fix pour les rows Bootstrap dans les questions on-demand */
.selector--inputondemand-list .row {
    margin: 0;
}

.selector--inputondemand-list .row > div {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Alignement du conteneur du bouton */
.text-end {
    text-align: right;
    margin-top: 1rem;
}

/* Marge gauche pour les labels des questions Multiple Short Text */
/* Pour les templates DSFR */
.multiple-short-txt .fr-label,
.multiple-short-txt label.fr-label {
    margin-left: 0.25rem !important;
}

/* Pour les templates Bootstrap (input on demand) */
.selector--inputondemand-list .control-label,
.selector--inputondemand-list label.control-label,
.selector--inputondemand-list-item .control-label,
.selector--inputondemand-list-item label,
.multiple-short-txt .selector--inputondemand-list .control-label,
.multiple-short-txt .control-label,
li.selector--inputondemand-list-item label.control-label {
    margin-left: 0.25rem !important;
}

/* === Utility classes DSFR custom === */

/* Text alignment utility - right */
.fr-text--right {
    text-align: right !important;
}

/* === Array Dropdown Tables (Question type F) === */

/* Force normal table display for array dropdown tables - DESKTOP ONLY */
@media (min-width: 768px) {
    .fr-table table.dropdown-array,
    .fr-table--bordered table.dropdown-array {
        display: table !important;
        width: 100%;
    }

    .fr-table table.dropdown-array tbody,
    .fr-table--bordered table.dropdown-array tbody {
        display: table-row-group !important;
    }

    .fr-table table.dropdown-array tr,
    .fr-table--bordered table.dropdown-array tr {
        display: table-row !important;
    }

    .fr-table table.dropdown-array th,
    .fr-table table.dropdown-array td,
    .fr-table--bordered table.dropdown-array th,
    .fr-table--bordered table.dropdown-array td {
        display: table-cell !important;
        vertical-align: middle;
        padding: 0.75rem 1rem;
    }

    /* Label column styling - uniquement pour tableaux SANS table-layout:fixed */
    .fr-table table.dropdown-array:not([style*="table-layout"]) th.answertext,
    .fr-table--bordered table.dropdown-array:not([style*="table-layout"]) th.answertext {
        width: 60%;
        font-weight: 400;
        text-align: left;
    }

    /* Select column styling - uniquement pour tableaux SANS table-layout:fixed */
    .fr-table table.dropdown-array:not([style*="table-layout"]) td,
    .fr-table--bordered table.dropdown-array:not([style*="table-layout"]) td {
        width: 40%;
    }

    /* Pour les tableaux multi-flexi avec table-layout:fixed, respecter les <col> widths */
    .fr-table table.dropdown-array[style*="table-layout: fixed"] th.answertext,
    .fr-table--bordered table.dropdown-array[style*="table-layout: fixed"] th.answertext {
        font-weight: 400;
        text-align: left;
        /* width héritée du <col> element */
    }

    .fr-table table.dropdown-array[style*="table-layout: fixed"] td,
    .fr-table--bordered table.dropdown-array[style*="table-layout: fixed"] td {
        /* width héritée du <col> element */
    }

    /* Remove label styles that conflict with DSFR */
    .fr-table table.dropdown-array th.answertext label.fr-label,
    .fr-table--bordered table.dropdown-array th.answertext label.fr-label {
        margin-bottom: 0;
        font-size: 1rem;
        font-weight: 400;
    }
}

/* === Bootstrap Buttons Radio (List Radio avec affichage boutons) === */

/* Conteneur principal des boutons */
.bootstrap-buttons-div {
    margin-bottom: 0.5rem;
}

/* Masquer le radio natif mais le garder accessible */
.bootstrap-buttons-div .btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

/* Style des boutons (labels) - État non sélectionné */
.bootstrap-buttons-div label.btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    color: var(--text-action-high-blue-france, #000091) !important;
    border: 1px solid var(--text-action-high-blue-france, #000091) !important;
    padding: 0.5rem 1rem !important;
    font-family: "Marianne", Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.5rem !important;
    border-radius: 0.25rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s, color 0.2s !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    width: 100%;
    text-align: center;
}

/* Hover */
.bootstrap-buttons-div label.btn:hover {
    background-color: var(--background-action-high-blue-france-hover, #1212ff) !important;
    color: var(--text-inverted-grey, #ffffff) !important;
}

/* Focus visible */
.bootstrap-buttons-div .btn-check:focus-visible + label.btn {
    outline: 2px solid #000091;
    outline-offset: 2px;
}

/* État sélectionné (checked) */
.bootstrap-buttons-div .btn-check:checked + label.btn,
.bootstrap-buttons-div .form-check.active label.btn {
    background-color: var(--background-action-high-blue-france, #000091) !important;
    color: var(--text-inverted-grey, #ffffff) !important;
    border-color: var(--background-action-high-blue-france, #000091) !important;
}

/* Hover sur bouton sélectionné */
.bootstrap-buttons-div .btn-check:checked + label.btn:hover,
.bootstrap-buttons-div .form-check.active label.btn:hover {
    background-color: var(--background-action-high-blue-france-hover, #1212ff) !important;
}

/* Responsive: Ajuster la disposition sur mobile */
@media (max-width: 767px) {
    .bootstrap-buttons-div {
        margin-bottom: 0.75rem;
    }
}

/* === Champ "Autre" pour les Bootstrap Buttons Radio === */

/* Alignement vertical du label avec l'input */
.fr-grid-row[id^="div"][id$="other"].answer-item {
    align-items: center;
}

/* Marge entre label et input sur mobile */
.fr-grid-row[id^="div"][id$="other"].answer-item .fr-label {
    margin-bottom: 0.5rem;
}

/* Sur desktop, retirer la marge et aligner */
@media (min-width: 768px) {
    .fr-grid-row[id^="div"][id$="other"].answer-item .fr-label {
        margin-bottom: 0;
        padding-top: 0.5rem; /* Aligner avec le padding de l'input */
    }
}

/* ========================================================================
   Neutralisation des styles awesome-bootstrap-checkbox pour DSFR
   ======================================================================== */

/* Désactiver les styles Bootstrap checkbox/radio SAUF pour les labels DSFR (.fr-label)
   awesome-bootstrap-checkbox ajoute des pseudo-éléments sur tous les labels,
   mais on doit préserver ceux du DSFR qui utilisent .fr-label */
.fr-radio-group label:not(.fr-label)::before,
.fr-radio-group label:not(.fr-label)::after,
.fr-checkbox-group label:not(.fr-label)::before,
.fr-checkbox-group label:not(.fr-label)::after {
    content: none !important;
    display: none !important;
}

/* Retirer le padding-left ajouté par awesome-bootstrap-checkbox */
.answer-item:has(.fr-radio-group),
.answer-item:has(.fr-checkbox-group) {
    padding-left: 0 !important;
}

/* ============================================
   SOFT MANDATORY QUESTIONS - DSFR STYLE
   ============================================ */

/* Forcer l'affichage du groupe de checkbox DSFR pour soft mandatory */
.question-valid-container .fr-checkbox-group {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* CRITIQUE: Contrer l'opacity:0 du DSFR sur les checkboxes pour rendre visible la checkbox soft mandatory */
.question-valid-container .fr-checkbox-group input[type="checkbox"] {
    opacity: 1 !important;
    position: relative !important;
    flex-shrink: 0;
    margin: 0 !important;
}

/* S'assurer que le label DSFR fonctionne correctement */
.question-valid-container .fr-checkbox-group .fr-label {
    padding-left: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    line-height: 1.5rem;
}

/* ============================================
   PRINT STYLES - DSFR THEME
   ============================================ */

@media print {
    /* Masquer les boutons et éléments de navigation */
    button,
    .btn,
    .fr-btn,
    input[type="submit"],
    input[type="button"],
    .survey-navigation,
    .ls-move-btn,
    .question-nav,
    nav {
        display: none !important;
    }

    /* Réduction du header */
    header,
    .survey-header,
    .fr-header {
        font-size: 10pt !important;
        padding: 0.2cm !important;
        margin-bottom: 0.3cm !important;
    }

    header h1,
    .survey-header h1 {
        font-size: 14pt !important;
        margin: 0.1cm 0 !important;
    }

    /* Optimiser pour l'impression - réduction globale des tailles et marges */
    body {
        font-size: 11pt !important;
        line-height: 1.3 !important;
        padding: 0.5cm !important;
    }

    /* Curseurs (sliders) : afficher uniquement la valeur sélectionnée */
    .slider-container,
    .fr-range-group,
    input[type="range"] {
        display: none !important;
    }

    /* Afficher la valeur du slider en gras */
    .slider-value,
    output,
    .fr-range-group output {
        display: block !important;
        font-weight: bold !important;
        font-size: 11pt !important;
        margin: 0.2cm 0 !important;
    }

    /* Éviter que les questions soient coupées entre deux pages */
    .question-wrapper,
    .question-container,
    .dsfr-question {
        page-break-inside: avoid !important;
        page-break-before: auto !important;
        margin-bottom: 0.3cm !important;
        padding: 0.2cm !important;
    }

    /* Réduction des marges et espacements */
    .fr-mb-2w,
    .fr-mb-3w,
    .fr-mb-4w,
    .fr-mb-6w {
        margin-bottom: 0.2cm !important;
    }

    .fr-mt-2w,
    .fr-mt-3w,
    .fr-mt-4w {
        margin-top: 0.2cm !important;
    }

    .fr-p-2w,
    .fr-p-3w,
    .fr-p-4w {
        padding: 0.1cm !important;
    }

    /* Réduction des titres */
    h1, h2, h3, h4, h5, h6 {
        margin-top: 0.2cm !important;
        margin-bottom: 0.1cm !important;
        line-height: 1.2 !important;
    }

    h1 { font-size: 16pt !important; }
    h2 { font-size: 14pt !important; }
    h3 { font-size: 12pt !important; }
    h4, h5, h6 { font-size: 11pt !important; }

    /* Textarea : hauteur minimale et ajustement au contenu */
    textarea,
    .fr-input[type="textarea"],
    .print-control {
        min-height: 1.5em !important;
        height: auto !important;
        overflow: visible !important;
        resize: none !important;
        padding: 0.1cm !important;
        border: 1px solid #666 !important;
    }

    /* Textarea vide : hauteur d'une ligne */
    textarea:empty,
    textarea:not(:valid) {
        height: 1.5em !important;
    }

    /* Input : hauteur réduite */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    .fr-input,
    .form-control.print-control {
        height: auto !important;
        padding: 0.05cm 0.1cm !important;
        border: 1px solid #666 !important;
    }

    /* Labels et textes de questions */
    .question-text,
    .ls-label-question {
        font-weight: bold !important;
        margin-bottom: 0.1cm !important;
    }

    /* Réduction des espacements dans les grilles */
    .fr-grid-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Tableaux : marges réduites */
    table {
        margin-bottom: 0.2cm !important;
    }

    table th,
    table td {
        padding: 0.1cm !important;
    }

    /* Radio et checkboxes : taille réduite */
    input[type="radio"],
    input[type="checkbox"],
    .input-radio:before,
    .input-checkbox:before {
        width: 0.4cm !important;
        height: 0.4cm !important;
    }

    /* Messages d'aide : texte plus petit */
    .question-help,
    .ls-questionhelp {
        font-size: 9pt !important;
        margin-top: 0.1cm !important;
    }

    /* Groupes de questions */
    .ls-group-container {
        page-break-inside: avoid !important;
        margin-bottom: 0.4cm !important;
    }
}