/**
 * CSS personnalisé pour le thème DSFR
 *
 * Ce fichier contient les styles personnalisés qui complètent
 * le DSFR pour des besoins spécifiques de LimeSurvey.
 */

/* Couche de cascade (issue #41) — ordre déclaré dans dsfr.min.css :
   overrides, theme, dsfr, custom. Tout le fichier vit dans `custom`. */
/* Déclaration d'ordre des couches AVANT toute création implicite : la
   première occurrence d'un nom de couche fige sa position. Ce fichier
   charge avant dsfr.min.css — sans cette ligne, `custom` serait déclarée
   première et l'ordre voulu serait perdu. */
@layer overrides, theme, dsfr, custom;

@layer custom {

/* ============================================
   FOND DES TABLEAUX — UNIFIÉ (#41, revue 2026-06-12)
   ============================================ */

/* Tous les tableaux héritent du fond de la carte question (blanc en
   clair, gris sombre en dark). Avant : theme.css posait alt-grey
   !important sur les tbody (imbattable depuis custom — en importance,
   l'ordre des couches s'inverse) et certaines familles re-peignaient
   leurs lignes en default-grey → tableaux gris OU blancs en clair,
   noir profond OU couleur de page en sombre, selon la famille.
   Déclarations NORMALES : la couche custom bat dsfr (tbody default-grey)
   sans !important. Les th d'en-têtes gardent leur gris DSFR. */
.fr-table tbody,
.fr-table--bordered tbody,
.fr-table__content tbody {
    background-color: transparent;
}

/* ============================================
   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;
}

/* Fond du tbody : géré par la règle globale « FOND DES TABLEAUX — UNIFIÉ »
   en tête de fichier. (L'!important posé ici le 2026-06-12 était en réalité
   inopérant : l'alt-grey venait d'un !important de la couche theme, qui bat
   ceux de custom — supprimé à la racine dans theme.css.) */

/* Matrices dont AUCUNE sous-question n'a de libellé (classe posée par
   answer.twig, qui n'émet alors pas le <col> de la colonne d'en-têtes) :
   on masque entièrement les cellules de première colonne. Les th vides
   restent dans le DOM (champs cachés EM, ids référencés par headers=) mais
   ne participent plus au tableau. NB : largeur 0/0% ne suffisait pas —
   les algorithmes de table redistribuent toujours ~35px à une colonne vide. */
table.array-no-row-labels tbody th.answertext,
table.array-no-row-labels thead tr > :first-child {
    display: none !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: var(--text-title-grey);
    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: var(--text-title-grey);
}

/* 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: var(--text-title-grey);
    /* 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;
}

/* La section « DUAL SCALE DROPDOWN TABLES » a été déplacée en tête de
   custom.css (#41), comme les autres sections tableaux : doit battre
   fr-table (couche dsfr). */

/* Bloc @media dropdown-array desktop (déplacé de theme.css, #41) */
@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;
    }
}


/* ============================================
   MATRICES — EN-TÊTES MULTILIGNES (#43)
   ============================================
   Le DSFR pose `white-space: nowrap` sur les cellules de fr-table et prévoit
   le modificateur fr-table--multiline pour autoriser le retour à la ligne.
   Nos matrices sont en table-layout:fixed : avec nowrap, les libellés longs
   d'en-têtes (lignes ET colonnes) débordent sur les cellules voisines et se
   chevauchent (visible dès ~1280px, signalé à 1920px). On applique la
   sémantique multiline à toutes les matrices LimeSurvey. */
.fr-table__content table.ls-answers th,
.fr-table__content table.ls-answers td {
    white-space: normal;
}

/* ============================================
   MATRICES — ARRAY TABLES (déplacé de theme.css, #41)
   Doit battre fr-table (couche dsfr) : vivait dans theme.css du temps
   de la guerre de spécificité, la couche theme est désormais SOUS dsfr.
   Placé en tête de fichier pour rester battable par la linéarisation
   mobile plus bas (ordre source intra-couche préservé).
   ============================================ */

/* 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 {
    /* Pas de bordure par cellule : le thead a déjà son trait 2px via
       background-image: linear-gradient (cf. règle .fr-table thead th plus
       bas), et un border 1px ici se cumulait pour donner un « double trait »
       sous l'en-tête. De plus, les bordures verticales entre th créaient des
       coupures dans le soulignement gradient à chaque colonne. Séparation
       visuelle des rows assurée par les fonds alternés DSFR et le border
       du <table>. */
    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 des lignes : transparent — hérite de la carte question (cf. « FOND
   DES TABLEAUX — UNIFIÉ »). L'ancien default-grey forçait un blanc en
   clair mais un noir profond (#161616) décalé de la carte en sombre. */
.ls-table-wrapper table.table-array-radio tbody tr,
.ls-table-wrapper table.radio-array tbody tr {
    background-color: transparent;
}

/* 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);
}

/* ============================================
   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 des lignes : transparent — hérite de la carte question (cf. « FOND
   DES TABLEAUX — UNIFIÉ »). */
.ls-table-wrapper table.array-radio tbody tr {
    background-color: transparent;
}

/* 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;
}

/* ============================================
   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é uniquement si vide (classe `dsfr-separator-empty`
   posée par le template Twig). Si interddSep est renseigné, on laisse le bloc
   custom.css prendre le relais (padding + min-width pour affichage horizontal). */
.ls-table-wrapper table td.ddarrayseparator.dsfr-separator-empty {
    width: 0 !important;
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
}

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

/* Fond transparent systématique sur le séparateur (tous cas). */
.ls-table-wrapper table td.ddarrayseparator {
    background-color: transparent !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: var(--background-default-grey);
    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: var(--border-action-high-blue-france);
}
/* Full width for ranking items */
/* Source items styling (same as ranked but clickable) */
/* Button group in ranked items */



/* ============================================
   LAYOUT FIXES
   ============================================ */

/* Ajustements pour le layout global */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > article {
    flex: 1;
}

/* ============================================
   COMPATIBILITÉ LIMESURVEY
   ============================================ */

/* Assurer que les classes Bootstrap ne cassent pas le DSFR */
.container-fluid {
    max-width: 100%;
}

/* Utilitaires d'alignement de texte DSFR-compatible */
.lsd-text-left {
    text-align: left;
}

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

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

/* Utilitaires de couleur de texte DSFR-compatible */
.text-danger {
    color: var(--text-default-error) !important;
}

.text-info {
    color: var(--text-action-high-blue-france) !important;
}

.text-warning {
    color: var(--warning-425-625) !important;
}

.text-muted {
    color: var(--text-mention-grey) !important;
}

/* Navigation responsive */
@media (max-width: 767.98px) {
    .lsd-text-right {
        text-align: center;
        margin-top: 1rem;
    }

    /* Navigation mobile en colonne */
    .fr-grid-row--center .fr-col-sm-6 {
        text-align: center !important;
    }
}

/* ============================================
   STEPPER DSFR - Barre de progression universelle
   ============================================
   DSFR officiel limite la barre à 8 étapes (boucle SCSS @for 1→8 dans la
   lib). Pour supporter N étapes quelconque, on injecte le `background-image`
   (linear-gradient multi-stops segmentés) à l'exécution depuis
   src/ui/stepper-progress.js. Marche pour 1 à 100+ étapes, sans aucune
   règle spécifique au nombre d'étapes côté CSS. */
.fr-stepper__steps {
    position: relative;
    /* La transition s'applique sur le background-image quand JS le met à
       jour (cas d'une navigation pjax qui re-calcule la progression). */
    transition: background-image 0.3s ease;
}

/* ============================================
   COMPOSANTS LIMESURVEY SPÉCIFIQUES
   ============================================ */

/* ============================================
   FIX SCROLL TABLEAUX + VISIBILITÉ
   ============================================ */

/* Désactiver scroll anchoring */
html, body {
    overflow-anchor: none !important;
}

/* Supprimer padding-top excessif et porter l'espacement haut sur le
   conteneur principal : le stepper (cf. progress_bar.twig) n'a plus de
   `fr-mb-*`, c'est `#outerframeContainer` qui assure la marge stable
   entre le header et le contenu, qu'il y ait un stepper au-dessus ou non. */
#outerframeContainer {
    padding-top: 0 !important;
    margin-top: 1.5rem;
}

/* Masquer les labels xs-visibility sur desktop uniquement */
/* Sur mobile (< 768px), ils seront visibles grâce à la media query dans theme.css */
@media (min-width: 768px) {
    table .ls-label-xs-visibility {
        position: absolute;
        left: -10000px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
    /* Entêtes de groupe dualscale (Scale A / Scale B) :
       masqués sur desktop — les <th colspan> du <thead> portent déjà
       l'information. Rendus visibles UNIQUEMENT en mobile via .ls-xs-only. */
    table .ls-xs-only {
        display: none !important;
    }
}

/* Mobile (< 768px) : rendre les séparateurs de groupe visibles et les styler
   comme des en-têtes de section (bold, border-top, fond). */
@media (max-width: 767.98px) {
    table .ls-xs-only.dualscale-scale-header {
        display: block !important;
        width: 100% !important;
        padding: 0.75rem 0.5rem !important;
        margin: 0.75rem 0 0.25rem !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        color: var(--text-title-blue-france, #000091) !important;
        background-color: var(--background-alt-blue-france, #f5f5fe) !important;
        border-top: 2px solid var(--border-plain-blue-france, #000091) !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }
}

/* Centrer radios/checkbox dans cellules.
   :not(.fr-table__content td) : avant @layer, .fr-table__content td (DSFR,
   spécificité supérieure) gardait ses cellules alignées à gauche ; la couche
   custom battant désormais dsfr sans égard à la spécificité, on exclut
   explicitement les tableaux fr-table (#41). */
table td:not(.fr-table__content td) {
    text-align: center;
}

table td input[type="radio"],
table td input[type="checkbox"] {
    display: inline-block;
    margin: 0 auto;
}
/* Checkbox DSFR custom dans tableaux - sélecteurs très spécifiques */
/* Hover sur checkbox */
/* Focus visible pour accessibilité */
/* État coché - fond bleu */
/* Checkmark via pseudo-element */
/* ============================================
/* Questions/groupes conditionnels - EM (ExpressionScript) ajoute ces classes
   sur les .question-container ou .group-container quand la pertinence calcule
   `false`. On les masque visuellement et on les rend non focusables.

   IMPORTANT : on cible UNIQUEMENT le conteneur racine de la question/du groupe
   (sélecteur self avec `.`, pas descendant). LimeSurvey core ajoute aussi
   `ls-irrelevant ls-disabled` sur les sub-questions internes d'une question M
   (Multiple choice) quand une option avec `exclude_all_others` est cochée
   (ex. « Aucun »). Dans ce cas on veut désactiver l'item, PAS le masquer —
   sinon les autres réponses disparaissent à l'écran, surtout après une
   soumission échouée qui re-render la page avec ces classes maintenues.
   Issue #15 (affichage dynamique des questions conditionnelles). */
.question-container.ls-hidden,
.question-container.ls-irrelevant,
.group-container.ls-hidden,
.group-container.ls-irrelevant {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Animation pour les questions conditionnelles qui apparaissent */
.question-container {
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* Quand une question devient visible (classe ls-irrelevant retirée) */
.question-container:not(.ls-irrelevant):not(.ls-hidden) {
    opacity: 1;
}
/* Sub-question items désactivés par une option exclusive (ex. « Aucun ») :
   ils gardent leur place dans le DOM et restent visibles, mais on signale
   visuellement qu'ils sont inactifs. LimeSurvey core applique
   `ls-irrelevant ls-disabled` sur le wrapper `[id^="javatbd"]` (cf.
   answer_row.twig — la classe est posée au bon niveau pour que le JS
   `survey.js` puisse la retirer dynamiquement via `relevance:on`).

   Le signal "désactivé" porte UNIQUEMENT sur la coche : on remplace son
   `border-color` par le gris désactivé DSFR et son fond par le gris alt,
   et on supprime l'éventuel hover/focus. Le libellé garde sa couleur
   normale → contraste RGAA AA préservé sur le texte (le user a explicitement
   signalé que `opacity: 0.5` global rendait le texte illisible).

   On annule aussi l'opacity 0.4 que LS core applique sur tout élément
   `.ls-disabled` (cf. `survey.css` du package limesurvey) — sinon
   l'ensemble libellé+coche passe à 40% et le texte devient illisible. */
.checkbox-item.ls-disabled,
.checkbox-item.ls-irrelevant,
.radio-item.ls-disabled,
.radio-item.ls-irrelevant {
    opacity: 1 !important;
}
.checkbox-item.ls-disabled .fr-checkbox-group input[type="checkbox"] + label::before,
.checkbox-item.ls-irrelevant .fr-checkbox-group input[type="checkbox"] + label::before,
.radio-item.ls-disabled .fr-radio-group input[type="radio"] + label::before,
.radio-item.ls-irrelevant .fr-radio-group input[type="radio"] + label::before {
    box-shadow: inset 0 0 0 1px var(--border-disabled-grey, #929292) !important;
    background-color: var(--background-disabled-grey, #e5e5e5) !important;
}

/* Curseur "not-allowed" sur tout l'item désactivé pour cohérence avec
   l'attribut `disabled` posé par LS sur l'input. */
.checkbox-item.ls-disabled,
.checkbox-item.ls-irrelevant,
.radio-item.ls-disabled,
.radio-item.ls-irrelevant {
    cursor: not-allowed;
}
.checkbox-item.ls-disabled .fr-label,
.checkbox-item.ls-irrelevant .fr-label,
.radio-item.ls-disabled .fr-label,
.radio-item.ls-irrelevant .fr-label {
    cursor: not-allowed;
    /* DSFR pose automatiquement `color: var(--text-disabled-grey)` (~#929292)
       sur le label associé à un input disabled — contraste 3:1, insuffisant
       pour le critère RGAA AA (4.5:1 texte normal). On force la couleur
       texte par défaut → contraste ~12:1, conforme. Le signal "désactivé"
       reste lisible via la coche grisée + cursor not-allowed + aria-disabled. */
    color: var(--text-default-grey, #3a3a3a) !important;
}

/* ============================================
   MESSAGES VALIDATION - Simple
   ============================================ */

/* Copier EXACTEMENT le style fr-message DSFR */
.ls-questionhelp,
.ls-question-message {
    /* Base fr-message */
    font-size: 0.75rem;
    line-height: 1.25rem;
    margin-top: 0.25rem;
    padding: 0;
    display: block;
}

.question-valid-container {
    margin-top: 0.5rem;
}

/* RGAA 11.10 — Masquer les messages legacy LimeSurvey pour les questions
   à saisie multiple gérées par le compteur dynamique (custom.js) */
.multiple-short-txt.input-error > .question-valid-container,
.question-container.input-error[class*="array-"] > .question-valid-container {
    display: none !important;
}

/* RGAA 11.10 — Neutraliser le rouge individuel LimeSurvey (classe .error
   injectée par le core) dans les questions gérées par le compteur dynamique.
   Le rouge individuel n'est appliqué que par le JS via .fr-input--error
   pour les erreurs de format, pas pour les champs vides. */
.question-container[data-mandatory-counter-attached] input.error,
.question-container[data-mandatory-counter-attached] textarea.error,
.question-container[data-mandatory-counter-attached] select.error,
.question-container[data-array-validation-attached] input.error,
.question-container[data-array-validation-attached] textarea.error,
.question-container[data-array-validation-attached] select.error {
    border-color: var(--border-default-grey) !important;
    box-shadow: none !important;
}
/* Quand le JS applique explicitement .fr-input--error (format invalide),
   ça doit rester rouge — la spécificité est plus forte */
.question-container[data-array-validation-attached] input.fr-input--error,
.question-container[data-array-validation-attached] textarea.fr-input--error,
.question-container[data-mandatory-counter-attached] input.fr-input--error,
.question-container[data-mandatory-counter-attached] textarea.fr-input--error {
    border-color: var(--error-425-625) !important;
    box-shadow: inset 0 -2px 0 0 var(--error-425-625) !important;
}
/* Quand le JS applique .fr-input--valid (champ rempli valide),
   le vert doit primer sur la neutralisation grise ci-dessus */
.question-container[data-array-validation-attached] input.fr-input--valid,
.question-container[data-array-validation-attached] textarea.fr-input--valid,
.question-container[data-mandatory-counter-attached] input.fr-input--valid,
.question-container[data-mandatory-counter-attached] textarea.fr-input--valid {
    border-color: var(--success-425-625) !important;
    box-shadow: inset 0 -2px 0 0 var(--success-425-625) !important;
}

/* Info (bleu France DSFR) */
.ls-em-success,
.ls-em-tip:not(.ls-em-error):not(.em_num_answers) {
    color: var(--text-action-high-blue-france) !important;
}

/* Erreur (rouge DSFR) */
.ls-em-error {
    color: var(--error-425-625) !important;
}

/* Warning (orange DSFR warning-main-525) */
.em_num_answers,
.em_validation_q,
.em_commented_checkbox {
    color: var(--warning-425-625) !important;
}

/* ============================================
   SLIDERS - Couleurs DSFR (legacy Bootstrap)
   ============================================ */

.slider-track {
    background-color: var(--background-disabled-grey);
    height: 4px;
}

.slider-selection {
    background-color: var(--background-action-high-blue-france) !important;
}

.slider-handle {
    background-color: var(--background-action-high-blue-france) !important;
    border: 2px solid var(--background-default-grey);
    box-shadow: var(--raised-shadow);
}

.slider-handle:hover {
    background-color: var(--background-action-high-blue-france-hover) !important;
}

/* ============================================
   DSFR RANGE (HTML5 native sliders)
   ============================================ */

/* Reduce margin for range groups inside slider items */
.ls-slider-item-row .fr-range-group {
    margin-bottom: 0;
}

/* Style the range output value display */
.fr-range__output {
    font-weight: 700;
    color: var(--text-action-high-blue-france);
}

/* Ensure text-end utility works for right-aligned labels */
.text-end {
    text-align: right !important;
}

/* ============================================
   LABELS - Alignement gauche
   ============================================ */

/* Override base.css qui met text-align: right */
.form-horizontal .control-label {
    text-align: left !important;
}

/* ============================================
   ALERTES - DSFR Style
   ============================================ */

.alert {
    padding: 1rem 1.5rem;
    border-left: 4px solid;
    border-radius: 0;
}

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

.alert .h4,
.alert strong {
    color: var(--error-425-625) !important;
}

/* Cartes d'erreur Bootstrap → DSFR */
.card {
    border: 1px solid var(--border-default-grey);
    border-radius: 0;
    box-shadow: var(--raised-shadow);
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    margin-bottom: 1rem;
}

/* ============================================
   INPUTS - Bordures DSFR
   ============================================ */

/*
 * SUPPRIMÉ - Les styles des inputs sont maintenant gérés dans theme.css
 * pour éviter les conflits avec Bootstrap et assurer la conformité DSFR
 * Voir theme.css lignes 342-452 pour les styles DSFR complets
 */

/* ============================================
   BOUTONS NAVIGATION - Secondary
   ============================================ */

/* Concurrent : dsfr.min.css (couche dsfr, battue par custom en déclarations
   normales) — pas de core non layerisé sur cette classe, !important inutiles
   (déposés, #41 étape 3a). */
.fr-btn--secondary {
    background-color: transparent;
    color: var(--text-action-high-blue-france);
    border: 1px solid var(--border-action-high-blue-france);
    box-shadow: inset 0 0 0 1px var(--border-action-high-blue-france);
}

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

/* ============================================
   QUESTION - Code/numéro de question
   ============================================ */

/* L'affichage du code/numéro est contrôlé par l'option du thème showquestioncode */
/* dans question_container.twig */

/* Style pour l'affichage du code de question (classe question-code-display) */
.question-code-display {
    color: #666666 !important; /* Gris foncé, fallback si variable non définie */
    color: var(--text-mention-grey, #666666) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.75rem !important;
}

.question-code-display .question-code,
.question-code-display .question-number {
    font-weight: 500 !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}

/* ============================================
   RANKING QUESTIONS - DSFR Styles
   ============================================ */

/* List group (Bootstrap classes used by vanilla ranking) */
.list-group {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.5rem;
    background-color: var(--background-alt-grey);
    border: 1px solid var(--border-default-grey);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.list-group-item:hover {
    background-color: var(--background-action-low-blue-france-hover);
    border-color: var(--border-action-high-blue-france);
}

/* Focus visible pour accessibilité clavier */
.list-group-item:focus {
    outline: 2px solid var(--border-action-high-blue-france);
    outline-offset: 2px;
    background-color: var(--background-action-low-blue-france-hover);
}

/* Focus-visible moderne (navigateurs récents) */
.list-group-item:focus-visible {
    outline: 2px solid var(--border-action-high-blue-france);
    outline-offset: 2px;
    background-color: var(--background-action-low-blue-france-hover);
}

/* Retirer l'outline au clic (gardé au focus clavier) */
.list-group-item:focus:not(:focus-visible) {
    outline: none;
}

/* Ranking items with drag handle */
.sortable-item {
    user-select: none;
}

.sortable-item.grabable:hover {
    cursor: grab;
}

.sortable-item.grabable:active {
    cursor: grabbing;
}

/* Drag handle icon */
.selector__dragHandle {
    color: var(--text-mention-grey);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.sortable-item:hover .selector__dragHandle {
    opacity: 1;
}

/* Sortable placeholder during drag */
.sortable-ghost {
    opacity: 0.4;
    background-color: var(--background-disabled-grey);
}

.sortable-chosen {
    background-color: var(--background-action-low-blue-france-hover) !important;
    border-color: var(--border-action-high-blue-france) !important;
}

/* Subtitles for lists */
.sortable-subtitle {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Empty state */
.ls-remove {
    min-height: 50px;
    border: 2px dashed var(--border-default-grey);
    background-color: var(--background-alt-grey);
}

/* Numeric multi : erreur de somme sous le Total */
.ls-group-total .sum-range-error {
    margin-top: 0.25rem;
}

/* Ranking columns spacing */
.ranking-available-items,
.ranking-sorted-items {
    min-height: 100px;
}

/* ---- Ranking : Accessible controls ---- */

/* Layout des items classés : badge + texte + boutons côte à côte */
.sortable-rank .list-group-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sortable-rank .ranking-item-text {
    flex: 1;
    min-width: 0;
}

/* Le drag handle passe en flex dans la ranked list (float ne fonctionne pas en flex) */
.sortable-rank .selector__dragHandle {
    float: none;
    flex-shrink: 0;
}

/* La choice list garde aussi un layout flex pour le handle */
.sortable-choice .list-group-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sortable-choice .ranking-item-text {
    flex: 1;
    min-width: 0;
}

.sortable-choice .selector__dragHandle {
    float: none;
    flex-shrink: 0;
    margin-left: auto;
}

/* Badge de numérotation du rang */
.ranking-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.5rem;
    padding: 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-inverted-blue-france);
    background-color: var(--background-action-high-blue-france);
    border-radius: 0.25rem;
    flex-shrink: 0;
}

/* Groupe de boutons de contrôle (colonne classée ET colonne choix) */
.ranking-controls,
.ranking-choice-controls {
    display: inline-flex;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Boutons de contrôle : cible tactile 32x32 minimum (WCAG) */
.ranking-controls .fr-btn,
.ranking-choice-controls .fr-btn {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
}

/* Les icônes DSFR sont en ::before, on garde le texte pour l'accessibilité mais masqué visuellement */
.ranking-controls .fr-btn.fr-icon-arrow-up-line,
.ranking-controls .fr-btn.fr-icon-arrow-down-line,
.ranking-controls .fr-btn.fr-icon-close-line,
.ranking-choice-controls .fr-btn.fr-icon-arrow-right-line {
    font-size: 0;
}

.ranking-controls .fr-btn.fr-icon-arrow-up-line::before,
.ranking-controls .fr-btn.fr-icon-arrow-down-line::before,
.ranking-controls .fr-btn.fr-icon-close-line::before,
.ranking-choice-controls .fr-btn.fr-icon-arrow-right-line::before {
    font-size: 1rem;
}

/* Focus visible renforcé sur les boutons */
.ranking-controls .fr-btn:focus-visible,
.ranking-choice-controls .fr-btn:focus-visible {
    outline: 2px solid var(--border-action-high-blue-france);
    outline-offset: 2px;
}

/* État désactivé des boutons aux extrémités ou quand max atteint */
.ranking-controls .fr-btn:disabled,
.ranking-choice-controls .fr-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* État visuel pour le déplacement clavier (Alt+Flèches) */
.ranking-keyboard-moving {
    border-color: var(--border-action-high-blue-france) !important;
    background-color: var(--background-action-low-blue-france-hover) !important;
    box-shadow: 0 0 0 2px var(--border-action-high-blue-france);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* Hide elements in no-JS mode */
.ls-no-js-hidden {
    display: block;
}

/* Masquage JS du core LimeSurvey. Cette classe était fournie par
   template-core.css, retiré via <remove> dans config.xml : sans cette
   redéfinition, l'alerte RGPD #datasecurity_error (privacy_text.twig)
   et d'autres éléments restent visibles en permanence. */
.ls-js-hidden {
    display: none !important;
}

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

/* Float utility */
.float-end {
    float: right;
}

/* Hidden utility */
.d-none {
    display: none !important;
}

/* ============================================
   ALERTES DSFR DE VALIDATION
   ============================================ */

/* Alerte de validation convertie depuis modale Bootstrap */
.dsfr-validation-alert {
    margin-bottom: 2rem;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation de fade-out */
.fr-alert--fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Espacement du bouton fermer dans l'alerte */
.fr-alert .fr-btn--close {
    margin-top: 1rem;
}

/* Groupe de boutons dans les alertes */
.fr-alert .fr-btns-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.fr-alert .fr-btns-group button {
    flex: 0 1 auto;
}

/* Responsive : boutons en colonne sur mobile */
@media (max-width: 575.98px) {
    .fr-alert .fr-btns-group {
        flex-direction: column;
    }

    .fr-alert .fr-btns-group button {
        width: 100%;
    }
}

/* ============================================
   MASQUER MODALES BOOTSTRAP VIDES
   ============================================ */

/* Masquer la modale Bootstrap par défaut */
.modal {
    display: none !important;
}
/* Supprimer le backdrop Bootstrap */
.modal-backdrop {
    display: none !important;
}

/* ============================================
   VALIDATION DSFR - Questions en erreur
   ============================================ */

/* Les styles d'erreur sont DSFR natifs adaptés à l'architecture LimeSurvey :
   - fr-input-group--error sur le conteneur fr-input-group
   - fr-message--error dans fr-messages-group
   - Liseret rouge sur tout le bloc question-container (au lieu de fr-input-group)
   Voir custom.js pour la transformation automatique des erreurs LimeSurvey → DSFR
*/

/* Masquer les liserets DSFR natifs des fr-input-group (on les met sur question-container) */
.question-container .fr-input-group--error::before,
.question-container .fr-input-group--valid::before {
    display: none !important;
}

/* Même principe pour les fieldsets (radios/cases) : errors-dsfr.js pose
   fr-fieldset--error (état DSFR normatif — labels rouges, à conserver),
   mais le trait vertical natif du fieldset doublait notre liseré
   question-container. DSFR le dessine en 3 morceaux : background-image
   du fieldset, background-image du legend, box-shadow du content::before. */
.question-container .fr-fieldset--error,
.question-container .fr-fieldset--error .fr-fieldset__legend,
.question-container .fr-fieldset--valid,
.question-container .fr-fieldset--valid .fr-fieldset__legend {
    background-image: none !important;
}
.question-container .fr-fieldset--error .fr-fieldset__content::before,
.question-container .fr-fieldset--valid .fr-fieldset__content::before {
    box-shadow: none !important;
}

/* Bordure transparente par défaut pour éviter le décalage lors des erreurs */
.question-container {
    border-left: 2px solid transparent;
    padding-left: 1rem;
    /* Transition douce ease-out pour le liseret rouge/vert */
    transition: border-color 0.3s ease-out;
}

/* Liseret rouge DSFR sur tout le bloc question en erreur
   Architecture LimeSurvey : le label est en dehors du fr-input-group,
   donc on applique un seul liseret continu sur question-container.
   La bordure existe déjà (transparente), on change juste sa couleur.
*/
.question-container.input-error,
.question-container.fr-input-group--error {
    border-left-color: var(--border-plain-error);
}

/* Liseret vert DSFR pour les champs valides */
.question-container.input-valid,
.question-container.fr-input-group--valid {
    border-left-color: var(--border-plain-success);
}

/* Messages avec transition douce ease-out */
.fr-messages-group {
    transition: all 0.3s ease-out;
}

/* Message d'erreur */
.fr-message--error {
    color: var(--text-default-error);
    transition: all 0.3s ease-out;
}

/* Message de succès/validation */
.fr-message--valid {
    color: var(--text-default-success);
    transition: all 0.3s ease-out;
}

/* ============================================
   RÉCAPITULATIF D'ERREURS PROGRESSIF
   ============================================ */

/* Transition douce pour le changement de type d'alerte */
#dsfr-error-summary {
    transition: all 0.3s ease-out;
}

/* Liste sans puces par défaut - Les icônes sont dans les liens DSFR */
#dsfr-error-summary ul {
    list-style: none;
    padding-left: 0;
}

/* Lignes d'erreur dans le récapitulatif - Utilisation des icônes DSFR natives */
#dsfr-error-summary .error-item {
    transition: all 0.3s ease-out;
}

/* Transition douce pour le changement d'icône dans les liens */
#dsfr-error-summary .error-item a {
    transition: all 0.3s ease-out;
}

/* Label de question obligatoire */
.question-text-container .mandatory,
.asterisk {
    color: var(--text-default-error);
    font-weight: bold;
}

/* Icône d'erreur (optionnel) */
.fr-error-text::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    background-image: url("../files/icons/inline/d6a5e4d24681.svg");
    background-size: contain;
    vertical-align: middle;
}

/* ============================================
   MULTIPLE CHOICE WITH COMMENTS - Alignement
   ============================================ */

/* Aligner verticalement checkbox et champ de commentaire */
.checkbox-text-item .fr-grid-row {
    align-items: center;
}

/* Ajuster l'espacement du checkbox-group pour l'alignement */
.checkbox-text-item .fr-checkbox-group {
    margin-bottom: 0;
}

/* S'assurer que le champ input a la même hauteur visuelle */
.checkbox-text-item .fr-input-group {
    margin-bottom: 0;
}

/* Supprimer le ::after sur les labels des checkbox avec commentaires */
.checkbox-text-item .fr-checkbox-group .fr-label::after {
    content: none !important;
    display: none !important;
}

/* Cellules de tableau (arrays texte/nombre) : le fr-input-group garde son
   margin-bottom DSFR (24px) dans la cellule → champ décentré verticalement
   (vide sous le champ). Le padding du td suffit. */
td.text-item .fr-input-group,
td.answer-item .fr-input-group {
    margin-bottom: 0;
}

/* ============================================
   DATE PICKER - Alignement des séparateurs
   ============================================ */

/* Utilitaires Bootstrap manquants dans DSFR */
.d-flex {
    display: flex !important;
}

.align-items-center {
    align-items: center !important;
}

.justify-content-center {
    justify-content: center !important;
}

/* ============================================
   INPUT TEXT - Alignement à gauche
   ============================================ */

/* Aligner le texte à gauche dans tous les champs texte */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
.fr-input {
    text-align: left !important;
}

/* ============================================
   QUESTIONS MULTIPLES - Masquer les puces de listes
   ============================================ */

/* Masquer les puces pour toutes les listes de sous-questions */
.ls-answers.subquestion-list,
.questions-list.text-list,
.questions-list.number-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* S'assurer que les éléments <li> n'affichent pas de puces et sont collés à gauche */
.ls-answers.subquestion-list li,
.questions-list.text-list li,
.questions-list.number-list li {
    list-style-type: none !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
}

/* Supprimer toutes les marges et padding sur les containers de questions.
   Scopé sur li : les tables d'arrays portent aussi ls-answers.subquestion-list
   et leurs td.text-item/answer-item perdaient leur padding gauche (champ collé
   au bord de la cellule). */
.ls-answers.subquestion-list li.question-item,
.ls-answers.subquestion-list li.answer-item,
.ls-answers.subquestion-list li.text-item,
.questions-list.text-list li.question-item,
.questions-list.text-list li.answer-item,
.questions-list.text-list li.text-item,
.questions-list.number-list li.question-item,
.questions-list.number-list li.answer-item,
.questions-list.number-list li.text-item {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Supprimer les marges sur les labels dans les listes multiples */
.ls-answers.subquestion-list .fr-label,
.questions-list.text-list .fr-label,
.questions-list.number-list .fr-label {
    margin-left: 0 !important;
}

/* S'assurer que les grilles DSFR sont bien alignées à gauche */
.ls-answers.subquestion-list .fr-grid-row,
.questions-list.text-list .fr-grid-row,
.questions-list.number-list .fr-grid-row {
    margin-left: 0 !important;
}

/* Supprimer le padding du theme.css sur answer-container */
.multiple-short-txt .ls-answers.subquestion-list,
.multiple-short-txt .questions-list.text-list,
.multiple-short-txt .questions-list.number-list {
    padding: 0 !important;
}

.multiple-short-txt .ls-answers.subquestion-list ~ .answer-container,
.multiple-short-txt .answer-container {
    padding: 0 !important;
}

/* Supprimer les padding DSFR sur les colonnes dans les listes multiples */
.ls-answers.subquestion-list .fr-grid-row--gutters > .fr-col,
.ls-answers.subquestion-list .fr-grid-row--gutters > [class*=" fr-col-"],
.ls-answers.subquestion-list .fr-grid-row--gutters > [class^="fr-col-"],
.questions-list.text-list .fr-grid-row--gutters > .fr-col,
.questions-list.text-list .fr-grid-row--gutters > [class*=" fr-col-"],
.questions-list.text-list .fr-grid-row--gutters > [class^="fr-col-"],
.questions-list.number-list .fr-grid-row--gutters > .fr-col,
.questions-list.number-list .fr-grid-row--gutters > [class*=" fr-col-"],
.questions-list.number-list .fr-grid-row--gutters > [class^="fr-col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================
   RADIO BUTTONS - DSFR Conformité
   ============================================ */

/* Masquer les puces sur les listes de radios (si elles existent encore) */
.radio-list,
.answers-list.radio-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.radio-list li,
.answers-list.radio-list li {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* S'assurer que les fr-fieldset__element sont bien espacés */
.fr-fieldset__element {
    margin-bottom: 1rem;
}

/* Inline variant pour radios en ligne */
.fr-fieldset__element--inline {
    display: inline-block;
    margin-right: 2rem;
    margin-bottom: 0.5rem;
}

/* ============================================
   VALIDATION MESSAGES
   ============================================ */

/* Masquer les messages de succès par défaut - ils ne s'affichent qu'après correction d'erreur */
.dsfr-valid-message,
.dsfr-file-valid-message {
    display: none !important;
}

/* Afficher les messages de succès uniquement après correction d'erreur (géré par JS) */
.question-container[data-had-error="true"] .dsfr-valid-message[style*="display: block"],
.question-container[data-had-error="true"] .dsfr-file-valid-message[style*="display: block"] {
    display: block !important;
}

/* Réserver l'espace pour les messages d'erreur (évite le layout shift) */
.fr-messages-group {
    min-height: 2rem; /* Hauteur approximative d'un message fr-message */
}

/* Quand il y a effectivement un message, le min-height s'ajuste naturellement */
.fr-messages-group:empty {
    min-height: 1.5rem; /* Plus petit quand vide pour ne pas prendre trop d'espace */
}

/* Masquer les messages d'erreur natifs LimeSurvey quand on a des fr-messages-group DSFR */
.fr-input-group .error-message,
.fr-input-group + .error-message {
    display: none !important;
}

/* ============================================
   CHAMPS OBLIGATOIRES - Astérisque rouge
   ============================================ */

/* Masquer les badges "Obligatoire" (tous types : info, warning, etc.) */
.fr-badge[aria-label*="Mandatory"],
.fr-badge[aria-label*="Obligatoire"] {
    display: none !important;
}

/* Astérisque rouge pour les champs obligatoires (classe ajoutée par JavaScript)
   NOTE: Pour les questions LimeSurvey, l'astérisque est injecté via DOM (span inline)
   Ce CSS ::before sert de fallback pour d'autres cas (labels simples, captcha, etc.) */
.has-required-field::before {
    content: "* ";
    color: var(--text-default-error);
    font-weight: 700;
    margin-right: 0.25rem;
}

/* TODO: Ajouter les styles spécifiques ici au fur et à mesure */

/* Le bloc « LOGO MARIANNE » historique (redéfinition .fr-logo:before/:after
   vers files/logos/marianne-*.svg, fix CSP antérieur à ADR-019) a été déposé
   avec la migration @layer (#41) : ses sélecteurs à 1 classe écrasaient les
   variantes DSFR à 2 classes (.fr-header__logo .fr-logo:after — échelle
   header) dès lors que la spécificité ne s'applique plus entre couches. Le
   DSFR vendored porte ses propres SVG externalisés depuis ADR-019. */

/* ============================================
   PROTECTION ANTI-BOT (Alternative au CAPTCHA)
   ============================================ */

/* Conteneur principal de la page anti-bot */
#antibot-challenge-container {
    min-height: 50vh;
}

#antibot-challenge-container > div {
    width: 100%;
}

/* Boutons anti-bot - s'assurer qu'ils ne sont pas coupés */
#antibot-challenge-container .fr-btns-group {
    display: flex;
    flex-wrap: wrap;
}

#antibot-challenge-container .fr-btn {
    white-space: normal;
    text-align: center;
}

/* Champs honeypot - invisibles pour les humains */
.antibot-honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Bouton désactivé pendant le timer */
#antibot-submit-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Transitions pour le basculement entre pages */
#antibot-page-wrapper,
#welcome-page-wrapper {
    transition: opacity 0.3s ease;
}

/* Animation de succès sur la réponse */
#antibot-question-group.fr-input-group--valid .fr-input {
    animation: validPulse 0.3s ease;
}

@keyframes validPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Style du compteur */
#antibot-countdown {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   CHECKBOX CHECKMARK - Version sans data-uri
   ============================================ */

/* Le DSFR no-datauri met --data-uri-svg: none; sur les checkboxes.
   On référence le fichier SVG externe pour compatibilité CSP */
.fr-checkbox-group input[type="checkbox"]:checked + label::before {
    --data-uri-svg: url("../files/icons/system/checkbox-checkmark.svg");
}

/* ============================================
   RADIO BUTTONS DSFR DANS TABLEAUX
   ============================================ */

/* Style des radio buttons UNIQUEMENT dans les cellules de tableaux (td/th) */
/* Les radios listradio sont dans des <div>, pas des <table>, donc non affectés */
/* IMPORTANT: Cibler UNIQUEMENT td et th pour éviter tout conflit */
table td > input[type="radio"],
table th > input[type="radio"],
td.answer-item input[type="radio"],
td.radio-item input[type="radio"],
.dualscale-noanswer input[type="radio"],
.dsfr-radio-table {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
    border: 1px solid var(--border-action-high-blue-france) !important;
    border-radius: 50% !important;
    background-color: var(--background-default-grey) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    /* Surcharge DSFR qui masque les inputs */
    opacity: 1 !important;
    position: relative !important;
    z-index: 1;
    margin: 0 auto;
    display: block;
}

table td > input[type="radio"]:hover,
table th > input[type="radio"]:hover,
td.answer-item input[type="radio"]:hover,
td.radio-item input[type="radio"]:hover,
.dualscale-noanswer input[type="radio"]:hover,
.dsfr-radio-table:hover {
    border-color: var(--border-action-high-blue-france) !important;
    background-color: var(--background-alt-grey) !important;
}

table td > input[type="radio"]:focus,
table th > input[type="radio"]:focus,
td.answer-item input[type="radio"]:focus,
td.radio-item input[type="radio"]:focus,
.dualscale-noanswer input[type="radio"]:focus,
.dsfr-radio-table:focus,
table td > input[type="radio"]:focus-visible,
table th > input[type="radio"]:focus-visible,
td.answer-item input[type="radio"]:focus-visible,
td.radio-item input[type="radio"]:focus-visible,
.dualscale-noanswer input[type="radio"]:focus-visible,
.dsfr-radio-table:focus-visible {
    /* La variable --focus n'est pas définie côté DSFR — on utilise la
       couleur d'action principale (cohérence avec le reste du fichier)
       avec le fallback #000091 garantissant un outline visible même
       sans le bundle DSFR chargé. Sans cette correction, var(--focus)
       sans fallback rendait toute la déclaration `outline` invalide et,
       cumulé au `appearance: none` ci-dessus qui supprime le focus
       natif, le focus clavier devenait invisible sur les radios en
       matrice — bloquant pour la navigation au clavier (RGAA 7.1). */
    outline: 2px solid var(--border-action-high-blue-france, #000091) !important;
    outline-offset: 2px !important;
}

table td > input[type="radio"]:checked,
table th > input[type="radio"]:checked,
td.answer-item input[type="radio"]:checked,
td.radio-item input[type="radio"]:checked,
.dualscale-noanswer input[type="radio"]:checked,
.dsfr-radio-table:checked {
    border-color: var(--border-action-high-blue-france) !important;
    background-color: var(--background-action-high-blue-france) !important;
    box-shadow: inset 0 0 0 5px var(--background-default-grey) !important;
}

table td > input[type="radio"]:checked:hover,
table th > input[type="radio"]:checked:hover,
td.answer-item input[type="radio"]:checked:hover,
td.radio-item input[type="radio"]:checked:hover,
.dsfr-radio-table:checked:hover {
    background-color: var(--background-action-high-blue-france-hover) !important;
    border-color: var(--background-action-high-blue-france-hover) !important;
}

/* Centrage dans les cellules de tableau */
td.answer-item.radio-item {
    text-align: center;
    vertical-align: middle;
}

/* Ligne en erreur */
.ls-error-mandatory table td > input[type="radio"],
.ls-error-mandatory table th > input[type="radio"],
.ls-error-mandatory td.answer-item input[type="radio"],
.ls-error-mandatory td.radio-item input[type="radio"],
.ls-error-mandatory .dualscale-noanswer input[type="radio"],
.ls-error-mandatory .dsfr-radio-table {
    border-color: var(--border-plain-error) !important;
}

.ls-error-mandatory table td > input[type="radio"]:checked,
.ls-error-mandatory table th > input[type="radio"]:checked,
.ls-error-mandatory td.answer-item input[type="radio"]:checked,
.ls-error-mandatory td.radio-item input[type="radio"]:checked,
.ls-error-mandatory .dualscale-noanswer input[type="radio"]:checked,
.ls-error-mandatory .dsfr-radio-table:checked {
    background-color: var(--border-plain-error) !important;
}

/* ============================================
   CHECKBOXES DSFR DANS TABLEAUX
   ============================================ */

/* Même traitement que les radios ci-dessus : les matrices « cases à cocher »
   (multiflexi checkbox layout — cellule core answer_td_checkboxes.twig,
   td.checkbox-item) rendaient la checkbox NATIVE (~13px), hors DSFR.
   Enfant direct (>) uniquement : ne surtout pas matcher les inputs des
   .fr-checkbox-group, que DSFR masque pour dessiner la case sur le label. */
table td > input[type="checkbox"],
td.answer-item > input[type="checkbox"],
td.checkbox-item > input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
    border: 1px solid var(--border-action-high-blue-france) !important;
    border-radius: 0.25rem !important;
    background-color: var(--background-default-grey) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1;
    margin: 0 auto;
    display: block;
}

table td > input[type="checkbox"]:hover,
td.answer-item > input[type="checkbox"]:hover,
td.checkbox-item > input[type="checkbox"]:hover {
    border-color: var(--border-action-high-blue-france) !important;
    background-color: var(--background-alt-grey) !important;
}

table td > input[type="checkbox"]:focus,
td.answer-item > input[type="checkbox"]:focus,
td.checkbox-item > input[type="checkbox"]:focus,
table td > input[type="checkbox"]:focus-visible,
td.answer-item > input[type="checkbox"]:focus-visible,
td.checkbox-item > input[type="checkbox"]:focus-visible {
    /* Même correctif que les radios : fallback #000091 obligatoire
       (var(--focus) indéfinie côté DSFR) — RGAA 7.1. */
    outline: 2px solid var(--border-action-high-blue-france, #000091) !important;
    outline-offset: 2px !important;
}

table td > input[type="checkbox"]:checked,
td.answer-item > input[type="checkbox"]:checked,
td.checkbox-item > input[type="checkbox"]:checked {
    border-color: var(--border-action-high-blue-france) !important;
    background-color: var(--background-action-high-blue-france) !important;
    /* Coche : SVG externe (conformité CSP, cf. bloc CHECKBOX CHECKMARK) */
    background-image: url("../files/icons/system/checkbox-checkmark.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1.125rem 1.125rem !important;
}

table td > input[type="checkbox"]:checked:hover,
td.answer-item > input[type="checkbox"]:checked:hover,
td.checkbox-item > input[type="checkbox"]:checked:hover {
    background-color: var(--background-action-high-blue-france-hover) !important;
    border-color: var(--background-action-high-blue-france-hover) !important;
}

/* Centrage dans les cellules de tableau */
td.answer-item.checkbox-item,
td.checkbox-item {
    text-align: center;
    vertical-align: middle;
}

/* Ligne en erreur */
.ls-error-mandatory table td > input[type="checkbox"],
.ls-error-mandatory td.answer-item > input[type="checkbox"],
.ls-error-mandatory td.checkbox-item > input[type="checkbox"] {
    border-color: var(--border-plain-error) !important;
}

.ls-error-mandatory table td > input[type="checkbox"]:checked,
.ls-error-mandatory td.answer-item > input[type="checkbox"]:checked,
.ls-error-mandatory td.checkbox-item > input[type="checkbox"]:checked {
    background-color: var(--border-plain-error) !important;
}

/* ============================================
   LINÉARISATION TABLEAUX MOBILE - PRIORITÉ ABSOLUE
   ============================================ */

/*
 * IMPORTANT : Cette section doit rester dans custom.css (chargé en dernier)
 * pour garantir la priorité absolue sur les règles DSFR natives.
 *
 * Déplacé depuis theme.css pour corriger le problème d'ordre de cascade
 * où les règles DSFR écrasaient la linéarisation mobile.
 */

@media (max-width: 767.98px) {
    /* ============================================
       LINÉARISATION TABLEAUX EN VUE MOBILE
       Force l'affichage en cartes verticales
       ============================================ */

    /* Masquer le tableau natif et forcer le mode bloc */
    .fr-table table,
    .fr-table--bordered table,
    div[class*="fr-table"] table,
    table.radio-array,
    table.questions-list,
    table.dropdown-array,
    table.table {
        border: 0 !important;
        display: block !important;
    }

    /* Cacher complètement les en-têtes de colonnes */
    .fr-table table thead,
    .fr-table--bordered table thead,
    div[class*="fr-table"] table thead,
    table.radio-array thead,
    table.questions-list thead,
    table.dropdown-array thead,
    table.table thead {
        display: none !important;
        visibility: hidden !important;
    }

    /* Tbody en mode bloc */
    .fr-table table tbody,
    .fr-table--bordered table tbody,
    div[class*="fr-table"] table tbody,
    table.radio-array tbody,
    table.questions-list tbody,
    table.dropdown-array tbody,
    table.table tbody {
        display: block !important;
    }

    /* Chaque ligne devient une carte */
    .fr-table table tbody tr,
    .fr-table--bordered table tbody tr,
    div[class*="fr-table"] table tbody tr,
    table.radio-array tbody tr,
    table.questions-list tbody tr,
    table.dropdown-array tbody tr,
    table.table tbody tr {
        display: block !important;
        margin-bottom: 1.5rem !important;
        padding: 0.75rem !important;
        box-sizing: border-box !important;
    }

    /* Fix padding-left pour les TR avec class radio-list/answers-list */
    .fr-table table tbody tr.radio-list,
    .fr-table table tbody tr.answers-list,
    .fr-table--bordered table tbody tr.radio-list,
    .fr-table--bordered table tbody tr.answers-list,
    table.radio-array tbody tr.radio-list,
    table.radio-array tbody tr.answers-list,
    table.questions-list tbody tr.radio-list,
    table.questions-list tbody tr.answers-list {
        padding-left: 0.75rem !important;
    }

    /* Toutes les cellules en mode bloc vertical */
    .fr-table table tbody tr th,
    .fr-table--bordered table tbody tr th,
    .fr-table table tbody tr td,
    .fr-table--bordered table tbody tr td,
    div[class*="fr-table"] table tbody tr th,
    div[class*="fr-table"] table tbody tr td,
    table.radio-array tbody tr th,
    table.radio-array tbody tr td,
    table.questions-list tbody tr th,
    table.questions-list tbody tr td,
    table.dropdown-array tbody tr th,
    table.dropdown-array tbody tr td,
    table.table tbody tr th,
    table.table tbody tr td {
        display: block !important;
        text-align: left !important;
        border: none !important;
        padding: 0.25rem 0 !important;
        margin: 0 !important;
        background-color: transparent !important;
        width: 100% !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }

    /* ACCESSIBILITÉ : Afficher les labels fr-sr-only ET visually-hidden INLINE dans les CELLULES (td) des tableaux linéarisés */
    .fr-table table tbody tr td .fr-sr-only,
    .fr-table--bordered table tbody tr td .fr-sr-only,
    table.radio-array tbody tr td .fr-sr-only,
    table.questions-list tbody tr td .fr-sr-only,
    table.dropdown-array tbody tr td .fr-sr-only,
    table.table tbody tr td .fr-sr-only,
    .fr-table table tbody tr td .visually-hidden,
    .fr-table--bordered table tbody tr td .visually-hidden,
    table.radio-array tbody tr td .visually-hidden,
    table.questions-list tbody tr td .visually-hidden,
    table.dropdown-array tbody tr td .visually-hidden,
    table.table tbody tr td .visually-hidden,
    .fr-table table tbody tr td .ls-label-xs-visibility,
    .fr-table--bordered table tbody tr td .ls-label-xs-visibility,
    table.radio-array tbody tr td .ls-label-xs-visibility,
    table.questions-list tbody tr td .ls-label-xs-visibility,
    table.dropdown-array tbody tr td .ls-label-xs-visibility,
    table.table tbody tr td .ls-label-xs-visibility {
        position: static !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 0 0 0.5rem !important; /* Marge à gauche pour espace après le radio */
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
        border: 0 !important;
        display: inline-block !important; /* INLINE au lieu de BLOCK pour alignement horizontal */
        font-size: 0.875rem !important;
        font-weight: 500 !important; /* Un peu plus gras pour visibilité */
        color: var(--text-label-grey) !important;
        line-height: 1.5rem !important;
        vertical-align: middle !important; /* Alignement vertical avec le radio */
    }

    /* Cellules radio-item en mode flex pour alignement horizontal label + radio */
    .fr-table table tbody tr td.answer-item.radio-item,
    .fr-table table tbody tr td.answer_cell_I,
    .fr-table table tbody tr td.answer_cell_S,
    .fr-table table tbody tr td.answer_cell_D,
    .fr-table table tbody tr td[class*="answer_cell_"],
    .fr-table--bordered table tbody tr td.answer-item.radio-item,
    .fr-table--bordered table tbody tr td[class*="answer_cell_"],
    table.radio-array tbody tr td.answer-item.radio-item,
    table.radio-array tbody tr td[class*="answer_cell_"],
    table.questions-list tbody tr td.answer-item.radio-item,
    table.questions-list tbody tr td[class*="answer_cell_"],
    table.dropdown-array tbody tr td.answer-item.radio-item,
    table.dropdown-array tbody tr td[class*="answer_cell_"],
    table.table tbody tr td.answer-item.radio-item,
    table.table tbody tr td[class*="answer_cell_"] {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important; /* Pas de gap, la marge du label suffit */
        padding: 0.5rem 0 !important;
    }

    /* Cellules multiflexi (select/text) : label au-dessus, contrôle dessous.
       Les select/textfield sont trop larges pour être alignés inline avec
       leur label en mobile — on passe en colonne. */
    table tbody tr td.answer-item.select-item,
    table tbody tr td.answer-item.text-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.25rem !important;
        padding: 0.5rem 0 !important;
    }
    /* Le label reprend sa taille normale (plus de marge-gauche, plus d'inline) */
    table tbody tr td.answer-item.select-item > .ls-label-xs-visibility,
    table tbody tr td.answer-item.text-item > .ls-label-xs-visibility {
        display: block !important;
        margin: 0 !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        color: var(--text-label-grey) !important;
    }
    /* Le contrôle (select/input) prend toute la largeur disponible */
    table tbody tr td.answer-item.select-item .fr-select-group,
    table tbody tr td.answer-item.select-item .fr-select,
    table tbody tr td.answer-item.text-item .fr-input-group,
    table tbody tr td.answer-item.text-item .fr-input {
        width: 100% !important;
    }

    /* Radio avant le label dans l'ordre visuel (flexbox order) */
    .fr-table table tbody tr td.answer-item.radio-item input[type="radio"],
    .fr-table table tbody tr td.answer-item.radio-item input[type="checkbox"],
    .fr-table table tbody tr td[class*="answer_cell_"] input[type="radio"],
    .fr-table table tbody tr td[class*="answer_cell_"] input[type="checkbox"],
    .fr-table--bordered table tbody tr td.answer-item.radio-item input[type="radio"],
    .fr-table--bordered table tbody tr td.answer-item.radio-item input[type="checkbox"],
    .fr-table--bordered table tbody tr td[class*="answer_cell_"] input[type="radio"],
    .fr-table--bordered table tbody tr td[class*="answer_cell_"] input[type="checkbox"],
    table.radio-array tbody tr td.answer-item.radio-item input[type="radio"],
    table.radio-array tbody tr td.answer-item.radio-item input[type="checkbox"],
    table.radio-array tbody tr td[class*="answer_cell_"] input[type="radio"],
    table.radio-array tbody tr td[class*="answer_cell_"] input[type="checkbox"],
    table.questions-list tbody tr td.answer-item.radio-item input[type="radio"],
    table.questions-list tbody tr td.answer-item.radio-item input[type="checkbox"],
    table.questions-list tbody tr td[class*="answer_cell_"] input[type="radio"],
    table.questions-list tbody tr td[class*="answer_cell_"] input[type="checkbox"] {
        order: -1 !important; /* Mettre le radio/checkbox en premier */
    }

    /* Label après le radio */
    .fr-table table tbody tr td.answer-item.radio-item label,
    .fr-table table tbody tr td[class*="answer_cell_"] label,
    .fr-table--bordered table tbody tr td.answer-item.radio-item label,
    .fr-table--bordered table tbody tr td[class*="answer_cell_"] label,
    table.radio-array tbody tr td.answer-item.radio-item label,
    table.radio-array tbody tr td[class*="answer_cell_"] label,
    table.questions-list tbody tr td.answer-item.radio-item label,
    table.questions-list tbody tr td[class*="answer_cell_"] label {
        order: 1 !important; /* Label après le radio */
        flex-shrink: 1 !important; /* Permettre au label de rétrécir si nécessaire */
    }

    /* Radio qui ne rétrécit pas */
    .fr-table table tbody tr td.answer-item.radio-item input[type="radio"],
    .fr-table table tbody tr td[class*="answer_cell_"] input[type="radio"],
    .fr-table table tbody tr td.answer-item.radio-item input[type="checkbox"],
    .fr-table table tbody tr td[class*="answer_cell_"] input[type="checkbox"],
    .fr-table--bordered table tbody tr td.answer-item.radio-item input[type="radio"],
    .fr-table--bordered table tbody tr td[class*="answer_cell_"] input[type="radio"],
    .fr-table--bordered table tbody tr td.answer-item.radio-item input[type="checkbox"],
    .fr-table--bordered table tbody tr td[class*="answer_cell_"] input[type="checkbox"],
    table.radio-array tbody tr td.answer-item.radio-item input[type="radio"],
    table.radio-array tbody tr td[class*="answer_cell_"] input[type="radio"],
    table.radio-array tbody tr td.answer-item.radio-item input[type="checkbox"],
    table.radio-array tbody tr td[class*="answer_cell_"] input[type="checkbox"],
    table.questions-list tbody tr td.answer-item.radio-item input[type="radio"],
    table.questions-list tbody tr td[class*="answer_cell_"] input[type="radio"],
    table.questions-list tbody tr td.answer-item.radio-item input[type="checkbox"],
    table.questions-list tbody tr td[class*="answer_cell_"] input[type="checkbox"] {
        flex-shrink: 0 !important; /* Ne pas rétrécir le radio */
        margin: 0 !important;
        vertical-align: middle !important;
    }

    /* ============================================
       ORDRE SPÉCIFIQUE POUR SELECT/TEXT INPUTS
       Label AVANT input (ordre naturel de formulaire)
       Largeurs normalisées : label 35%, input 65%
       ============================================ */

    /* Cellules dropdown/select ET text-item : label en premier, input après */
    .fr-table table tbody tr td.select-item,
    .fr-table table tbody tr td.ls-dropdown-item,
    .fr-table table tbody tr td.text-item,
    .fr-table--bordered table tbody tr td.select-item,
    .fr-table--bordered table tbody tr td.ls-dropdown-item,
    .fr-table--bordered table tbody tr td.text-item,
    table.dropdown-array tbody tr td.select-item,
    table.dropdown-array tbody tr td.ls-dropdown-item,
    table.dropdown-array tbody tr td.text-item,
    table.subquestion-list tbody tr td.text-item {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    /* Label en premier pour les dropdowns et text-item - largeur fixe 35% */
    .fr-table table tbody tr td.select-item label,
    .fr-table table tbody tr td.ls-dropdown-item label,
    .fr-table table tbody tr td.text-item > label,
    .fr-table--bordered table tbody tr td.select-item label,
    .fr-table--bordered table tbody tr td.ls-dropdown-item label,
    .fr-table--bordered table tbody tr td.text-item > label,
    table.dropdown-array tbody tr td.select-item label,
    table.dropdown-array tbody tr td.ls-dropdown-item label,
    table.dropdown-array tbody tr td.text-item > label,
    table.subquestion-list tbody tr td.text-item > label {
        order: -1 !important; /* Label en premier */
        margin-right: 0.5rem !important;
        margin-left: 0 !important;
        width: 35% !important;
        min-width: 35% !important;
        max-width: 35% !important;
        flex: 0 0 35% !important;
    }

    /* Select/Input-group après le label - largeur 65% */
    .fr-table table tbody tr td.select-item .fr-select-group,
    .fr-table table tbody tr td.ls-dropdown-item .fr-select-group,
    .fr-table table tbody tr td.text-item .fr-input-group,
    .fr-table--bordered table tbody tr td.select-item .fr-select-group,
    .fr-table--bordered table tbody tr td.ls-dropdown-item .fr-select-group,
    .fr-table--bordered table tbody tr td.text-item .fr-input-group,
    table.dropdown-array tbody tr td.select-item .fr-select-group,
    table.dropdown-array tbody tr td.ls-dropdown-item .fr-select-group,
    table.dropdown-array tbody tr td.text-item .fr-input-group,
    table.subquestion-list tbody tr td.text-item .fr-input-group {
        order: 1 !important;
        width: 65% !important;
        flex: 0 0 65% !important;
    }

    .fr-table table tbody tr td.select-item select,
    .fr-table table tbody tr td.ls-dropdown-item select,
    .fr-table--bordered table tbody tr td.select-item select,
    .fr-table--bordered table tbody tr td.ls-dropdown-item select,
    table.dropdown-array tbody tr td.select-item select,
    table.dropdown-array tbody tr td.ls-dropdown-item select {
        width: 100% !important;
    }

    /* Input dans text-item prend toute la largeur du fr-input-group */
    .fr-table table tbody tr td.text-item .fr-input-group input.fr-input,
    .fr-table--bordered table tbody tr td.text-item .fr-input-group input.fr-input,
    table.dropdown-array tbody tr td.text-item .fr-input-group input.fr-input,
    table.subquestion-list tbody tr td.text-item .fr-input-group input.fr-input {
        width: 100% !important;
    }

    /* Cellules avec inputs texte (hors text-item) : label en premier */
    .fr-table table tbody tr td:not(.text-item) .fr-input-group,
    .fr-table--bordered table tbody tr td:not(.text-item) .fr-input-group,
    table.dropdown-array tbody tr td:not(.text-item) .fr-input-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
    }

    /* Label texte (hors text-item) - largeur fixe 35% */
    .fr-table table tbody tr td:not(.text-item) .fr-input-group label,
    .fr-table--bordered table tbody tr td:not(.text-item) .fr-input-group label,
    table.dropdown-array tbody tr td:not(.text-item) .fr-input-group label {
        order: -1 !important;
        width: 35% !important;
        min-width: 35% !important;
        max-width: 35% !important;
        flex: 0 0 35% !important;
        margin: 0 !important;
    }

    /* Input texte (hors text-item) - largeur 65% */
    .fr-table table tbody tr td:not(.text-item) .fr-input-group input.fr-input,
    .fr-table--bordered table tbody tr td:not(.text-item) .fr-input-group input.fr-input,
    table.dropdown-array tbody tr td:not(.text-item) .fr-input-group input.fr-input {
        order: 1 !important;
        width: 65% !important;
        flex: 0 0 65% !important;
    }

    /* Header de ligne (th) mis en évidence */
    .fr-table table tbody tr th,
    .fr-table--bordered table tbody tr th,
    div[class*="fr-table"] table tbody tr th,
    table.radio-array tbody tr th,
    table.questions-list tbody tr th,
    table.dropdown-array tbody tr th,
    table.table tbody tr th {
        font-size: 1.125rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.75rem !important;
        padding-top: 0 !important;
        padding-bottom: 0.75rem !important;
        border-bottom: 1px solid var(--border-default-grey, #ddd) !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Les fr-input-group et fr-select-group doivent rester en bloc */
    .fr-table table tbody tr td .fr-input-group,
    .fr-table--bordered table tbody tr td .fr-input-group,
    div[class*="fr-table"] table tbody tr td .fr-input-group,
    table.radio-array tbody tr td .fr-input-group,
    table.questions-list tbody tr td .fr-input-group,
    table.dropdown-array tbody tr td .fr-input-group,
    table.dropdown-array tbody tr td .fr-select-group,
    table.table tbody tr td .fr-input-group {
        display: block !important;
        width: 100% !important;
    }

    /* Les inputs doivent prendre toute la largeur */
    .fr-table table tbody tr td .fr-input,
    .fr-table--bordered table tbody tr td .fr-input,
    div[class*="fr-table"] table tbody tr td .fr-input,
    table.radio-array tbody tr td .fr-input,
    table.questions-list tbody tr td .fr-input,
    table.dropdown-array tbody tr td .fr-input,
    table.table tbody tr td .fr-input {
        width: 100% !important;
    }

    /* Les selects doivent aussi prendre toute la largeur */
    .fr-table table tbody tr td select,
    .fr-table--bordered table tbody tr td select,
    div[class*="fr-table"] table tbody tr td select,
    table.radio-array tbody tr td select,
    table.questions-list tbody tr td select,
    table.dropdown-array tbody tr td select,
    table.table tbody tr td select,
    .fr-table table tbody tr td .fr-select,
    .fr-table--bordered table tbody tr td .fr-select,
    div[class*="fr-table"] table tbody tr td .fr-select,
    table.radio-array tbody tr td .fr-select,
    table.questions-list tbody tr td .fr-select,
    table.dropdown-array tbody tr td .fr-select,
    table.table tbody tr td .fr-select {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   BOOTSTRAP SELECT - ÉTATS DE SÉLECTION
   Issue #07: Sélection invisible dans les listes déroulantes
   ============================================ */

/* État survolé dans les dropdowns Bootstrap */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.bootstrap-select .dropdown-menu li:hover a,
.bootstrap-select .dropdown-menu li:focus a {
    background-color: var(--background-action-low-blue-france, #e3e3fd);
    color: var(--text-action-high-blue-france, #000091);
}

/* État sélectionné dans les dropdowns Bootstrap */
.dropdown-menu .dropdown-item.selected,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active,
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.active a {
    background-color: var(--background-action-high-blue-france, #000091);
    color: var(--text-inverted-blue-france, #fff);
}

/* Style pour l'option sélectionnée dans select natif DSFR */
select.fr-select option:checked,
.fr-select-group select option:checked {
    background-color: var(--background-action-low-blue-france, #e3e3fd);
}

/* Assurer la visibilité du texte sélectionné */
.bootstrap-select .filter-option-inner-inner {
    color: var(--text-default-grey, #161616);
}

/* Focus visible sur les selects */
select.fr-select:focus,
.fr-select-group select:focus {
    outline: 2px solid var(--border-action-high-blue-france, #000091);
    outline-offset: 2px;
}

/* ============================================
   COLONNES POUR LES OPTIONS (RADIO/CHECKBOX)
   Issue #11: Affichage colonnes non respecté
   ============================================ */

/* Layout en colonnes via CSS Grid */
.ls-columns {
    display: grid;
    gap: 0.5rem 1.5rem;
}

/* 2 colonnes */
.ls-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 colonnes */
.ls-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 4 colonnes */
.ls-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 5 colonnes */
.ls-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

/* Responsive: une seule colonne sur mobile */
@media (max-width: 575.98px) {
    .ls-columns,
    .ls-columns-2,
    .ls-columns-3,
    .ls-columns-4,
    .ls-columns-5 {
        grid-template-columns: 1fr;
    }
}

/* Tablette: maximum 2 colonnes */
@media (min-width: 576px) and (max-width: 767.98px) {
    .ls-columns-3,
    .ls-columns-4,
    .ls-columns-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Les éléments dans la grille doivent être alignés */
.ls-columns > .fr-fieldset__element,
.ls-columns > .fr-checkbox-group,
.ls-columns > .fr-radio-group,
.ls-columns > div {
    margin: 0;
}
/* Style des icônes Oui/Non */
/* Couleurs des icônes */
/* Espacement égal entre les options */
/* ============================================
   BOOTSTRAP BUTTONS → DSFR STYLE
   Question theme "Bootstrap buttons" avec apparence DSFR
   ============================================ */

/* Conteneur des boutons - grille responsive */
/* Padding posé sur le wrapper externe uniquement. Le rendu LimeSurvey de
   l'option "Autre" attribue la classe `.bootstrap-buttons-div` AUSSI au
   `.form-check` interne (cas particulier de `answer_row_other.twig` du
   question theme bootstrap_buttons). Sans exclusion, le padding s'applique
   deux fois sur cette option et son bouton se retrouve 4px plus bas que
   ses voisins. */
.bootstrap-buttons-div:not(.form-check) {
    padding: 0.25rem;
}

/* SECTION CANONIQUE (#41 étapes 3a + 5) — remplace les 3 définitions
   historiques contradictoires (deux sections « → DSFR » + une section
   checkbox), supprime le `all: unset !important`.

   Règle de cascade : Bootstrap est servi par le core LimeSurvey HORS
   layer — toute déclaration normale d'une couche perd contre lui, quelle
   que soit la spécificité. Les !important ci-dessous ne sont donc gardés
   QUE sur les propriétés que Bootstrap pose sur .btn/.btn-primary ;
   les autres (align-items, gap, min-height…) sont en déclarations
   normales. */

/* Boutons : transformer .btn Bootstrap en bouton DSFR secondaire.
   Couvre label.btn (radio/checkbox de bootstrap_buttons) et .btn nu. */
.bootstrap-buttons-div .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.5rem !important;
    min-height: 2.5rem;
    border-radius: 0 !important;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    -webkit-user-select: none;
    user-select: none;

    /* Style DSFR secondaire par défaut (non sélectionné) */
    background-color: transparent !important;
    color: var(--text-action-high-blue-france, #000091) !important;
    border: 1px solid var(--border-action-high-blue-france, #000091) !important;
    box-shadow: inset 0 0 0 1px var(--border-action-high-blue-france, #000091) !important;
}

/* Hover non sélectionné — sémantique DSFR « secondary » : teinte claire.
   (#41 étape 5 : l'ancienne 2e définition posait un hover bleu plein +
   texte blanc, contradictoire — c'est elle qui gagnait. Unifié ici.) */
.bootstrap-buttons-div .btn:hover {
    background-color: var(--background-action-low-blue-france-hover, #e3e3fd) !important;
}

/* Focus - outline DSFR */
.bootstrap-buttons-div .btn-check:focus + .btn,
.bootstrap-buttons-div input.button-item:focus + .btn {
    outline: 2px solid var(--border-action-high-blue-france, #000091);
    outline-offset: 2px;
}

/* État sélectionné - style DSFR primaire (bleu plein) — radios ET checkboxes */
.bootstrap-buttons-div .form-check.active .btn,
.bootstrap-buttons-div .btn-check:checked + .btn,
.bootstrap-buttons-div input.button-item:checked + .btn,
.bootstrap-buttons-div input[type="checkbox"]:checked + .btn {
    background-color: var(--background-action-high-blue-france, #000091) !important;
    color: var(--text-inverted-blue-france, #fff) !important;
    border-color: var(--background-action-high-blue-france, #000091) !important;
    box-shadow: none !important;
}

/* Hover sur état sélectionné */
.bootstrap-buttons-div .form-check.active .btn:hover,
.bootstrap-buttons-div .btn-check:checked + .btn:hover,
.bootstrap-buttons-div input.button-item:checked + .btn:hover,
.bootstrap-buttons-div input[type="checkbox"]:checked + .btn:hover {
    background-color: var(--background-action-high-blue-france-hover, #1212ff) !important;
}

/* Bouton « Sans réponse » - style tertiaire */
.bootstrap-buttons-div .noanswer-item .btn,
.bootstrap-buttons-div[class*="noanswer"] .btn {
    color: var(--text-mention-grey) !important;
    border-color: var(--border-default-grey) !important;
    box-shadow: inset 0 0 0 1px var(--border-default-grey) !important;
}

.bootstrap-buttons-div .noanswer-item .btn:hover {
    background-color: var(--background-alt-grey) !important;
    color: var(--text-default-grey) !important;
}

/* Layout du container de boutons (gap : aucun concurrent core → normal) */
[data-bs-toggle="buttons"],
.btn-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Bloc « Autre : [champ texte] » qui apparaît sous la rangée de boutons
   quand l'utilisateur a coché l'option "Autre" (List Radio avec other=Y).
   Le HTML LimeSurvey est `<div class="row row-cols-lg-auto align-items-center
   mb-3 answer-item" id="div..other"><label class="col-form-label">Autre :</label>
   <div class="col-12"><input ...></div></div>` — Bootstrap ne pose aucun
   espacement horizontal entre le label et le champ, ce qui les colle
   visuellement. On rétablit un gap propre. */
[id^="div"][id$="other"].row > .col-form-label {
    margin-right: 0.75rem;
}

/* Responsive - pleine largeur sur mobile */
@media (max-width: 575.98px) {
    .bootstrap-buttons-div {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================
   BOOTSTRAP BUTTONS MULTI → DSFR STYLE
   Question theme "Bootstrap buttons" pour choix multiples
   ============================================ */

/* Les mêmes styles s'appliquent, avec indicateur visuel de sélection multiple */
.bootstrap-buttons-div input[type="checkbox"]:checked + label.btn::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    background-color: currentColor;
    -webkit-mask-image: url("../files/icons/inline/650ddaa81817.svg");
    mask-image: url("../files/icons/inline/650ddaa81817.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ============================================
   BOOTSTRAP DROPDOWN → DSFR SELECT STYLE
   Question theme "Bootstrap dropdown" avec apparence DSFR
   ============================================ */

/* Transformer le select Bootstrap en style DSFR */
.bootstrap-select .dropdown-toggle,
.bootstrap-select > .btn,
select.list-question-select {
    /* Base DSFR select */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    width: 100%;
    max-width: 400px;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-default-grey, #161616);
    background-color: var(--background-contrast-grey, #eee);
    border: none;
    border-radius: 0.25rem 0.25rem 0 0;
    box-shadow: inset 0 -2px 0 0 var(--border-plain-grey, #666);

    /* Flèche DSFR */
    background-image: url("../files/icons/inline/40a0c6fe9bf5.svg");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5rem;

    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

/* Focus état DSFR */
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select > .btn:focus,
select.list-question-select:focus {
    outline: 2px solid var(--border-action-high-blue-france, #000091);
    outline-offset: 2px;
    box-shadow: inset 0 -2px 0 0 var(--border-action-high-blue-france, #000091);
}

/* Hover état */
.bootstrap-select .dropdown-toggle:hover,
.bootstrap-select > .btn:hover,
select.list-question-select:hover {
    box-shadow: inset 0 -2px 0 0 var(--border-action-high-blue-france, #000091);
}

/* Menu déroulant Bootstrap - style DSFR */
.bootstrap-select .dropdown-menu {
    border: 1px solid var(--border-default-grey, #ddd);
    border-radius: 0;
    box-shadow: var(--raised-shadow);
    padding: 0;
    margin-top: 0;
}

.bootstrap-select .dropdown-menu .dropdown-item,
.bootstrap-select .dropdown-menu li a {
    padding: 0.75rem 1rem;
    color: var(--text-default-grey, #161616);
    transition: background-color 0.2s ease;
}

/* Masquer les éléments de style Bootstrap non nécessaires */
.bootstrap-select .dropdown-toggle::after {
    display: none !important;
}

.bootstrap-select .filter-option {
    display: flex;
    align-items: center;
}

/* ============================================
   TABLEAUX DSFR - 100% LARGEUR EN DESKTOP
   ============================================ */

/* Force tous les wrappers et tableaux DSFR à 100% de largeur */
.ls-table-wrapper,
.fr-table--responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto; /* Scroll horizontal si tableau trop large */
}

.fr-table table,
.fr-table--bordered table,
table.fr-table,
table.fr-table--bordered {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto; /* Permet aux colonnes de s'adapter */
}

/* Tableaux avec colgroup défini - utiliser table-layout fixed pour respecter les largeurs */
.array-flexible-dual-scale .fr-table table,
.array-flexible-dual-scale table.ls-answers,
.array-increase-same-decrease .fr-table table,
.array-increase-same-decrease table.ls-answers,
.array-multi-flexi .fr-table table,
.array-multi-flexi table.ls-answers,
[class*="array-"] .fr-table table,
[class*="array-"] table.ls-answers {
    table-layout: fixed !important;
}

/* Desktop uniquement - préserver l'affichage tableau normal */
@media (min-width: 768px) {
    .fr-table table,
    .fr-table--bordered table,
    table.fr-table,
    table.fr-table--bordered {
        display: table !important;
    }

    .fr-table table thead,
    .fr-table--bordered table thead {
        display: table-header-group !important;
    }

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

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

    .fr-table table tbody tr th,
    .fr-table table tbody tr td,
    .fr-table--bordered table tbody tr th,
    .fr-table--bordered table tbody tr td {
        display: table-cell !important;
    }

    /* Normalisation de la première colonne d'en-tête : éviter le « double
       liseré » causé par la combinaison .fr-table + .fr-table--bordered
       (chacune ajoute sa bordure de droite). On force border-right unique. */
    .fr-table table thead th:first-child,
    .fr-table--bordered table thead th:first-child {
        border-left: 0 !important;
    }
}

/* ============================================
   BORDURES TABLEAUX LINÉARISÉS MOBILE
   Cohérence visuelle : 4 bordures sur chaque carte (au lieu de partielles).
   ============================================ */
@media (max-width: 767.98px) {
    .fr-table table tbody tr,
    .fr-table--bordered table tbody tr,
    div[class*="fr-table"] table tbody tr,
    table.radio-array tbody tr,
    table.questions-list tbody tr,
    table.dropdown-array tbody tr,
    table.table tbody tr {
        border: 1px solid var(--border-default-grey, #ddd) !important;
        border-radius: 0 !important;
        background-color: var(--background-default-grey, #fff) !important;
    }
}

/* ============================================
   LISTRADIO + "AUTRE" — layout inline desktop
   Le radio "Autre :" et son champ texte associé sont rendus dans deux
   conteneurs frères (.fr-radio-group + .fr-input-group) à l'intérieur du
   même .fr-fieldset__element. Par défaut ils s'empilent verticalement, le
   champ apparaît décalé sous le label. Sur desktop on les place sur la
   même ligne (motif « Autre : [champ] »). Sur mobile, empilement naturel
   pour préserver la lisibilité.
   ============================================ */
@media (min-width: 768px) {
    /* :has() ciblage : élément fieldset qui contient le radio "Autre" (id SOTH…) */
    .fr-fieldset__element.radio-item.answer-item:has(> .fr-radio-group input[id^="SOTH"]) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }

    .fr-fieldset__element.radio-item.answer-item:has(> .fr-radio-group input[id^="SOTH"]) > .fr-input-group {
        margin: 0;
        flex: 1 1 240px;
        max-width: 420px;
    }
}

/* ============================================
   INPUT ON DEMAND - Saisie à la demande
   ============================================ */

/* Container principal */
.selector--inputondemand-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Chaque ligne de saisie */
.selector--inputondemand-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Avant @layer, .answer-item.numeric-item/.text-item (theme.css, 2 classes)
   battait par spécificité les display:flex concurrents (.selector--inputondemand-
   list-item ci-dessus, mais aussi .fr-grid-row du DSFR sur les lignes texte de
   527199 — un wrapper sans fr-col s'écrase alors au contenu, textarea à 218px).
   La couche theme étant désormais sous dsfr et custom, on restaure ce
   comportement ici, avec le sélecteur d'origine de theme.css (#41). */
.answer-item.numeric-item,
.answer-item.text-item {
    display: block;
}

/* Respecter d-none pour les éléments cachés (input on demand) */
.selector--inputondemand-list-item.d-none {
    display: none !important;
}

/* Label DSFR */
.selector--inputondemand-list-item > label {
    flex: 0 0 auto;
    min-width: 120px;
    font-weight: 500;
    color: var(--text-label-grey);
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Container input */
.selector--inputondemand-list-item > div {
    flex: 1;
    min-width: 200px;
}

/* Input DSFR */
.selector--inputondemand-list-input {
    width: 100% !important;
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    color: var(--text-default-grey) !important;
    background-color: var(--background-contrast-grey) !important;
    border: none !important;
    border-radius: 0.25rem 0.25rem 0 0 !important;
    box-shadow: inset 0 -2px 0 0 var(--border-plain-grey) !important;
    transition: box-shadow 0.2s ease !important;
}

.selector--inputondemand-list-input:focus {
    outline: none !important;
    box-shadow: inset 0 -2px 0 0 var(--border-plain-info), 0 0 0 2px var(--border-action-high-blue-france, #000091) !important;
}

/* Bouton Ajouter une ligne - DSFR secondary */
.selector--inputondemand-addlinebutton {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--text-action-high-blue-france) !important;
    background-color: transparent !important;
    border: 1px solid var(--border-action-high-blue-france) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.selector--inputondemand-addlinebutton:hover {
    background-color: var(--background-action-low-blue-france-hover) !important;
}

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

/* Icône dans le bouton */
.selector--inputondemand-addlinebutton i {
    font-size: 1rem;
}

/* ============================================
   IMAGES DANS LES RÉPONSES DE QUESTIONS
   ============================================ */

/* Style de base pour toutes les images dans les réponses */
.answer-item img,
.fr-fieldset__content img,
.answertext img,
.fr-checkbox-group img,
.fr-radio-group img,
.question-text-container img,
.ls-question-text img,
.ls-question-help img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.5rem 0;
    border-radius: 0.25rem; /* Border radius DSFR */
    box-shadow: var(--overlap-shadow, 0 8px 16px rgba(0,0,0,0.1)); /* Ombre légère DSFR */
}

/* Images dans les labels de checkbox/radio */
.fr-checkbox-group .fr-label img,
.fr-radio-group .fr-label img {
    margin: 0.5rem 0 1rem 0;
}

/* ============================================
   5-POINT CHOICE DISPLAY MODES
   ============================================ */

/* Hide default LimeSurvey star/emoji markup when DSFR theme is used */
.choice-5-pt-radio .stars-list,
.choice-5-pt-radio .emoji-list,
.choice-5-pt-radio .ls-emojislider {
    display: none !important;
}

/* Force display of DSFR fieldset even when LimeSurvey adds visually-hidden class */
.choice-5-pt-radio .fr-fieldset[data-display-mode="1"].visually-hidden,
.choice-5-pt-radio .fr-fieldset[data-display-mode="2"].visually-hidden {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    clip-path: none !important;
}

/* Star rating mode (slider_rating == 1) - Progressive fill system CSS-only */
.star-rating-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Star item wrapper */
.star-rating-item {
    display: inline-flex;
    align-items: center;
}

/* Mobile : la marge inline générique (2rem sur fr-fieldset__element--inline)
   et le padding horizontal DSFR (0.5rem de chaque côté) faisaient passer les
   5 étoiles sur 2 lignes (5×56px + gaps > 301px utiles à 375px) — le gap du
   conteneur (0.5rem) suffit comme espacement. */
@media (max-width: 767.98px) {
    .star-rating-container .fr-fieldset__element--inline {
        margin-right: 0;
        margin-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Hide radio inputs */
.star-rating-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Star label styling */
.star-rating-label {
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.star-rating-label:hover {
    transform: scale(1.15);
}

/* Star icon wrapper - superpose two icons */
.star-icon-wrapper {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
}

.star-icon-wrapper .star-empty,
.star-icon-wrapper .star-filled {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.2s ease;
}

/* Override DSFR icon size with more specific selector */
.fr-fieldset[data-display-mode="1"] .star-rating-container .star-icon-wrapper .fr-icon-star-line::before,
.fr-fieldset[data-display-mode="1"] .star-rating-container .star-icon-wrapper .fr-icon-star-fill::before {
    --icon-size: 3rem !important;
}

/* Default state: show empty star (grey), hide filled star */
.star-icon-wrapper .star-empty {
    opacity: 1;
    color: var(--border-default-grey);
}

.star-icon-wrapper .star-filled {
    opacity: 0;
    color: var(--text-default-warning);
}

/* Hover effects - fill hovered star and all previous ones using :has() */
.star-rating-container:has([data-star="1"]:hover) [data-star="1"] .star-filled {
    opacity: 1;
}

.star-rating-container:has([data-star="2"]:hover) [data-star="1"] .star-filled,
.star-rating-container:has([data-star="2"]:hover) [data-star="2"] .star-filled {
    opacity: 1;
}

.star-rating-container:has([data-star="3"]:hover) [data-star="1"] .star-filled,
.star-rating-container:has([data-star="3"]:hover) [data-star="2"] .star-filled,
.star-rating-container:has([data-star="3"]:hover) [data-star="3"] .star-filled {
    opacity: 1;
}

.star-rating-container:has([data-star="4"]:hover) [data-star="1"] .star-filled,
.star-rating-container:has([data-star="4"]:hover) [data-star="2"] .star-filled,
.star-rating-container:has([data-star="4"]:hover) [data-star="3"] .star-filled,
.star-rating-container:has([data-star="4"]:hover) [data-star="4"] .star-filled {
    opacity: 1;
}

.star-rating-container:has([data-star="5"]:hover) [data-star="1"] .star-filled,
.star-rating-container:has([data-star="5"]:hover) [data-star="2"] .star-filled,
.star-rating-container:has([data-star="5"]:hover) [data-star="3"] .star-filled,
.star-rating-container:has([data-star="5"]:hover) [data-star="4"] .star-filled,
.star-rating-container:has([data-star="5"]:hover) [data-star="5"] .star-filled {
    opacity: 1;
}

/* Checked state using :has() - fill checked star and all previous ones */
.star-rating-container:has([data-star="1"] .star-rating-input:checked) [data-star="1"] .star-filled {
    opacity: 1;
}

.star-rating-container:has([data-star="2"] .star-rating-input:checked) [data-star="1"] .star-filled,
.star-rating-container:has([data-star="2"] .star-rating-input:checked) [data-star="2"] .star-filled {
    opacity: 1;
}

.star-rating-container:has([data-star="3"] .star-rating-input:checked) [data-star="1"] .star-filled,
.star-rating-container:has([data-star="3"] .star-rating-input:checked) [data-star="2"] .star-filled,
.star-rating-container:has([data-star="3"] .star-rating-input:checked) [data-star="3"] .star-filled {
    opacity: 1;
}

.star-rating-container:has([data-star="4"] .star-rating-input:checked) [data-star="1"] .star-filled,
.star-rating-container:has([data-star="4"] .star-rating-input:checked) [data-star="2"] .star-filled,
.star-rating-container:has([data-star="4"] .star-rating-input:checked) [data-star="3"] .star-filled,
.star-rating-container:has([data-star="4"] .star-rating-input:checked) [data-star="4"] .star-filled {
    opacity: 1;
}

.star-rating-container:has([data-star="5"] .star-rating-input:checked) [data-star="1"] .star-filled,
.star-rating-container:has([data-star="5"] .star-rating-input:checked) [data-star="2"] .star-filled,
.star-rating-container:has([data-star="5"] .star-rating-input:checked) [data-star="3"] .star-filled,
.star-rating-container:has([data-star="5"] .star-rating-input:checked) [data-star="4"] .star-filled,
.star-rating-container:has([data-star="5"] .star-rating-input:checked) [data-star="5"] .star-filled {
    opacity: 1;
}

/* No answer option styling */
.star-rating-no-answer .star-rating-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Style as DSFR tertiary button */
.star-rating-no-answer .fr-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* DSFR button base styles */
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 0.5rem 1rem;
    background-color: transparent;
    color: var(--text-action-high-blue-france);
    border: none;
    box-shadow: inset 0 0 0 1px var(--border-action-high-blue-france);
    transition: all 0.2s ease;
}

.star-rating-no-answer .fr-label:hover {
    background-color: var(--background-action-high-blue-france-hover);
}

.star-rating-no-answer .star-rating-input:checked + .fr-label {
    background-color: var(--background-action-high-blue-france);
    color: var(--text-inverted-grey);
    box-shadow: inset 0 0 0 1px var(--border-action-high-blue-france);
}

/* Mobile: responsive adjustments for star rating */
@media (max-width: 767.98px) {
    /* Étoiles plus grandes sur mobile pour faciliter le touch */
    .star-rating-container {
        gap: 0.75rem !important;
    }

    .star-rating-label {
        font-size: 2.5rem !important;
    }

    .fr-fieldset[data-display-mode="1"] .star-rating-container .star-icon-wrapper .fr-icon-star-line::before,
    .fr-fieldset[data-display-mode="1"] .star-rating-container .star-icon-wrapper .fr-icon-star-fill::before {
        --icon-size: 2.5rem !important;
    }

    /* Option sans réponse en bloc sous les étoiles */
    .star-rating-no-answer-wrapper {
        display: block;
        width: 100%;
        margin-top: 1rem;
    }
}

/* Emoji rating mode (slider_rating == 2) */
/* Hide radio input in emoji mode */
.fr-fieldset[data-display-mode="2"] .fr-radio-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Hide DSFR radio button pseudo-element in emoji mode.
   Scopé au label emoji : le « Sans réponse » du même fieldset est un radio
   DSFR standard qui doit garder son rond (sinon aucun indicateur visible
   alors qu'il est coché par défaut). */
.fr-fieldset[data-display-mode="2"] .fr-radio-group input[type="radio"] + label.fr-label--emoji-rating::before {
    display: none !important;
}

/* Le rond du radio DSFR est AUSSI dessiné en background-image du label
   (SVG externalisé, position 0 50%) — pas seulement en ::before. Sans ce
   masquage, un cercle bleu dépasse derrière chaque emoji/étoile (#43). */
.fr-fieldset[data-display-mode="1"] .fr-radio-group input[type="radio"] + label,
.fr-fieldset[data-display-mode="2"] .fr-radio-group input[type="radio"] + label.fr-label--emoji-rating {
    background-image: none;
}

/* Center emoji in fr-radio-rich box */
.fr-fieldset[data-display-mode="2"] .fr-radio-group.fr-radio-rich {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fr-label--emoji-rating {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 80px;
    min-height: 80px;
    cursor: pointer;
    padding: 1rem !important; /* Uniform padding */
    margin: 0 !important;
}

.fr-label--emoji-rating .emoji-icon {
    font-size: 2.5rem;
    line-height: 1;
    text-align: center;
    display: block;
    /* Item flex du label : remplir l'axe principal comme avant @layer,
       sinon la boîte rétrécit au contenu (48px → 40px) et l'emoji décale. */
    width: 100%;
}

/* Feedback de sélection en mode emoji (revue 2026-06-12).
   Le rond radio DSFR (::before + background-image) est masqué ci-dessus :
   sans ces règles, aucun retour visuel au survol ni à la sélection. On
   matérialise la boîte : cadre gris par défaut, fond léger au survol,
   fond bleu clair + anneau bleu quand l'option est cochée. */
.fr-fieldset[data-display-mode="2"] .fr-radio-group input[type="radio"] + label.fr-label--emoji-rating {
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0 1px var(--border-default-grey, #ddd);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.fr-fieldset[data-display-mode="2"] .fr-radio-group input[type="radio"]:not(:checked) + label.fr-label--emoji-rating:hover {
    background-color: var(--background-default-grey-hover, #f6f6f6);
}

.fr-fieldset[data-display-mode="2"] .fr-radio-group input[type="radio"]:checked + label.fr-label--emoji-rating {
    background-color: var(--background-action-low-blue-france, #e3e3fd);
    box-shadow: inset 0 0 0 2px var(--border-active-blue-france, #000091);
}

.fr-fieldset[data-display-mode="2"] .fr-radio-group input[type="radio"]:focus-visible + label.fr-label--emoji-rating {
    outline: 2px solid var(--border-action-high-blue-france, #000091);
    outline-offset: 2px;
}

/* Responsive adjustments for 5-point choice (revue 2026-06-12) :
   les 5 options restent sur UNE ligne compacte (boîtes égales) au lieu
   d'un empilement pleine largeur ; seul le « Sans réponse » passe en
   pleine largeur dessous. Modes 0 (numéros) et 2 (emoji) — le mode 1
   (étoiles) a sa propre ligne compacte plus haut. */
@media (max-width: 767.98px) {
    .fr-fieldset[data-display-mode="0"] .fr-grid-row,
    .fr-fieldset[data-display-mode="2"] .fr-grid-row {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .fr-fieldset[data-display-mode="0"] .fr-col-auto,
    .fr-fieldset[data-display-mode="2"] .fr-col-auto {
        flex: 1 1 0;
        min-width: 0;
        padding: 0;
    }

    /* Le « Sans réponse » occupe sa propre ligne, pleine largeur. */
    .fr-fieldset[data-display-mode="0"] .fr-col-auto:has(.noanswer-item),
    .fr-fieldset[data-display-mode="2"] .fr-col-auto:has(.noanswer-item) {
        flex: 1 1 100%;
        margin-top: 0.5rem;
    }

    .fr-fieldset[data-display-mode] .fr-radio-group.fr-radio-rich {
        width: 100%;
    }

    /* Boîtes compactes : 5 tiennent dans 320 px utiles. */
    .fr-label--emoji-rating {
        min-width: 0;
        min-height: 3rem;
        padding: 0.5rem !important;
    }

    /* Hauteur unifiée (~3 rem) avec les options riches : le label rich
       DSFR (chiffres 1-5, « Sans réponse ») fait 5.5 rem par défaut. On ne
       réduit que le padding vertical — l'horizontal loge le rond radio. */
    .fr-fieldset[data-display-mode="0"] .fr-radio-group.fr-radio-rich .fr-label,
    .fr-fieldset[data-display-mode="2"] .fr-radio-group.fr-radio-rich .fr-label {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        min-height: 3rem;
    }

    .fr-label--emoji-rating .emoji-icon {
        font-size: 1.75rem;
    }

    /* Options « riches » hors notation (Genre, Oui/Non…) : largeur
       uniforme pleine ligne, libellé étiré pour aligner les pictos à
       droite — sinon chaque boîte s'arrête à son contenu (rendu en
       escalier constaté en mobile). */
    .question-container .fr-fieldset:not([data-display-mode]) .fr-fieldset__element--inline:has(> .fr-radio-group.fr-radio-rich) {
        width: 100%;
        margin-right: 0;
    }

    .question-container .fr-fieldset:not([data-display-mode]) .fr-fieldset__element--inline > .fr-radio-group.fr-radio-rich {
        width: 100%;
    }

    .question-container .fr-fieldset:not([data-display-mode]) .fr-fieldset__element--inline > .fr-radio-group.fr-radio-rich > label.fr-label {
        flex: 1;
    }
}

/* ============================================
   QUESTIONS AVEC IMAGES (Image Select)
   Style élégant sans radio/checkbox visible
   Couvre deux structures HTML:
   1. ul.imageselect-list > li.imageselect-container (radio)
   2. ul.checkbox-list > li.imageselect-listitem (checkbox)
   ============================================ */

/* Container liste - affichage flex inline */
ul.imageselect-list,
ul.checkbox-list.answers-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Chaque élément image - structure 1 (radio) */
li.imageselect-container {
    flex: 0 0 auto !important;
    list-style: none !important;
    position: relative !important;
}

/* Chaque élément image - structure 2 (checkbox) */
li.imageselect-listitem {
    flex: 0 0 auto !important;
    list-style: none !important;
    position: relative !important;
}

/* Container interne pour structure 2 */
li.imageselect-listitem > .imageselect-container {
    position: relative !important;
}

/* Masquer visuellement le radio/checkbox mais garder accessible */
li.imageselect-container > input[type="radio"],
li.imageselect-container > input[type="checkbox"],
li.imageselect-listitem .imageselect-checkbox,
li.imageselect-listitem .imageselect-radiobutton {
    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: 0 !important;
}

/* Label avec image - style carte cliquable (structure 1) */
li.imageselect-container > label.imageselect-radiobutton {
    display: block !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    border: 2px solid var(--border-default-grey) !important;
    border-radius: 0.5rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    background: var(--background-default-grey) !important;
}

/* Label avec image - style carte cliquable (structure 2) */
li.imageselect-listitem .imageselect-label {
    display: block !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    border: 2px solid var(--border-default-grey) !important;
    border-radius: 0.5rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    background: var(--background-default-grey) !important;
}

/* Hover sur la carte image */
li.imageselect-container > label.imageselect-radiobutton:hover,
li.imageselect-listitem .imageselect-label:hover {
    border-color: var(--border-action-high-blue-france) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 145, 0.15) !important;
}

/* Focus visible pour accessibilité */
li.imageselect-container > input:focus-visible + label.imageselect-radiobutton,
li.imageselect-listitem .imageselect-checkbox:focus-visible ~ .imageselect-label {
    outline: 2px solid var(--border-action-high-blue-france) !important;
    outline-offset: 2px !important;
}

/* État sélectionné - bordure bleue épaisse (structure 1) */
li.imageselect-container > input:checked + label.imageselect-radiobutton {
    border-color: var(--border-action-high-blue-france) !important;
    border-width: 3px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 145, 0.25) !important;
    background: var(--background-alt-blue-france) !important;
}

/* État sélectionné - bordure bleue épaisse (structure 2) */
li.imageselect-listitem .imageselect-checkbox:checked ~ .imageselect-label {
    border-color: var(--border-action-high-blue-france) !important;
    border-width: 3px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 145, 0.25) !important;
    background: var(--background-alt-blue-france) !important;
}

/* Image dans la carte - retirer les styles inline */
li.imageselect-container > label.imageselect-radiobutton img,
li.imageselect-listitem .imageselect-label img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0.25rem !important;
    box-shadow: none !important;
    border: none !important;
}

/* Indicateur de sélection (checkmark) pour les images sélectionnées (structure 1) */
li.imageselect-container > input:checked + label.imageselect-radiobutton::after {
    content: "✓";
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--background-action-high-blue-france);
    color: var(--text-inverted-blue-france);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: bold;
    z-index: 1;
}

/* Indicateur de sélection (checkmark) pour les images sélectionnées (structure 2) */
li.imageselect-listitem .imageselect-checkbox:checked ~ .imageselect-label::after {
    content: "✓";
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--background-action-high-blue-france);
    color: var(--text-inverted-blue-france);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: bold;
    z-index: 1;
}

/* Position relative sur le label pour le checkmark */
li.imageselect-listitem .imageselect-label {
    position: relative !important;
}

/* Option "Sans réponse" - style radio DSFR */
ul.imageselect-list > li.no-anwser-item {
    flex: 0 0 100% !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--border-default-grey) !important;
}

/* Wrapper DSFR-like pour le radio */
ul.imageselect-list > li.no-anwser-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

/* Radio DSFR custom */
ul.imageselect-list > li.no-anwser-item > input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* Label avec pseudo-element pour le radio DSFR */
ul.imageselect-list > li.no-anwser-item > label {
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    padding-left: 2rem !important;
    position: relative !important;
    min-height: 1.5rem !important;
    line-height: 1.5rem !important;
}

/* Cercle externe du radio */
ul.imageselect-list > li.no-anwser-item > label::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    border: 1px solid var(--border-action-high-blue-france) !important;
    border-radius: 50% !important;
    background: var(--background-default-grey) !important;
    box-sizing: border-box !important;
}

/* Point interne du radio (sélectionné) */
ul.imageselect-list > li.no-anwser-item > label::after {
    content: "" !important;
    position: absolute !important;
    left: 0.375rem !important;
    top: 0.375rem !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
    border-radius: 50% !important;
    background: var(--background-action-high-blue-france) !important;
    transform: scale(0) !important;
    transition: transform 0.1s ease-in-out !important;
}

/* État sélectionné */
ul.imageselect-list > li.no-anwser-item > input[type="radio"]:checked + label::after {
    transform: scale(1) !important;
}

/* Focus visible */
ul.imageselect-list > li.no-anwser-item > input[type="radio"]:focus-visible + label::before {
    outline: 2px solid var(--border-action-high-blue-france) !important;
    outline-offset: 2px !important;
}

/* Hover */
ul.imageselect-list > li.no-anwser-item > label:hover::before {
    border-color: var(--border-action-high-blue-france) !important;
    background: var(--background-alt-blue-france) !important;
}

/* Responsive - images 2 colonnes sur mobile */
@media (max-width: 767.98px) {
    li.imageselect-container {
        flex: 1 1 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
}

/* Images dans le contenu généré par RichTextEditor */
.question-text-container img,
.ls-question-text img {
    max-width: 100%;
}

/* Responsive - Images sur mobile */
@media (max-width: 767.98px) {
    .answer-item img,
    .fr-fieldset__content img,
    .answertext img {
        max-width: 100%;
        max-height: 300px;
        object-fit: contain;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================
   BOOTSTRAP BUTTONS → DSFR BUTTONS
   ============================================ */

/* Section consolidée dans « BOOTSTRAP BUTTONS → DSFR STYLE » (#41
   étapes 3a + 5) : la définition `all: unset !important` qui vivait ici
   écrasait la section canonique avec un hover contradictoire (bleu plein
   sur bouton non sélectionné). Ne restent ici que les compléments non
   dupliqués. */

/* Container des boutons Bootstrap. !important requis : l'élément porte
   des classes de grille/utilities Bootstrap (non layerisées) qui gagnent
   sinon sur toute déclaration normale layerisée (gate visuel 2026-06-12 :
   ~8px de décalage sous la question sans lui). */
.bootstrap-buttons-div {
    margin-bottom: 0.5rem !important;
}

/* Masquer le contrôle natif. Bootstrap masque déjà .btn-check
   (position:absolute + clip) — on couvre aussi input.button-item (classe
   LimeSurvey) qui peut apparaître sans .btn-check. */
.bootstrap-buttons-div .btn-check,
.bootstrap-buttons-div input.button-item {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Responsive - colonnes sur mobile. !important requis : combat les classes
   de colonnes Bootstrap (row-cols-*, col-*) non layerisées. */
@media (max-width: 767.98px) {
    .bootstrap-buttons-div {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    .bootstrap-buttons-div .btn {
        width: 100% !important;
    }
}

/* Champ "Autre" pour bootstrap_buttons — déjà stylé DSFR dans le template.
   Règle conservée comme ancre sémantique pour retrouver ce point depuis
   l'historique git ; ne doit porter aucune déclaration (le fr-input est
   déjà posé par le template Twig). */
[id$="other"] .fr-input {
    /* Intentionnellement vide. */
}

/* ============================================
   BOOTSTRAP DROPDOWN → DSFR SELECT
   Normalise l'affichage des selects Bootstrap
   pour qu'ils ressemblent aux selects DSFR
   ============================================ */

/* Select Bootstrap standard - style DSFR */
select.form-control,
select.form-select,
.list-question-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    /* Style DSFR */
    display: block !important;
    width: 100% !important;
    padding: 0.5rem 2.5rem 0.5rem 1rem !important;
    font-family: Marianne, arial, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    color: var(--text-default-grey) !important;
    background-color: var(--background-contrast-grey) !important;
    background-image: url("../files/icons/inline/d769779ea39f.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
    border: none !important;
    border-radius: 0.25rem 0.25rem 0 0 !important;
    box-shadow: inset 0 -2px 0 0 var(--border-plain-grey) !important;
    cursor: pointer !important;
}

select.form-control:focus,
select.form-select:focus,
.list-question-select:focus {
    outline: none !important;
    box-shadow: inset 0 -2px 0 0 var(--border-plain-grey), 0 0 0 2px var(--border-action-high-blue-france) !important;
}

select.form-control:hover,
select.form-select:hover,
.list-question-select:hover {
    background-color: var(--background-contrast-grey-hover) !important;
}

/* Options du select */
select.form-control option,
select.form-select option,
.list-question-select option {
    padding: 0.5rem 1rem !important;
    background-color: var(--background-default-grey) !important;
    color: var(--text-default-grey) !important;
}

/* Masquer le selectpicker Bootstrap s'il est généré */
.bootstrap-select.btn-group {
    display: none !important;
}

/* S'assurer que le select natif DSFR est visible */
.fr-select-group .fr-select {
    display: block !important;
}

/* Container du select Bootstrap */
.select-item,
.ls-dropdown-item {
    width: 100% !important;
    max-width: 400px !important;
}

/* Liste déroulante + champ "Autre" : empilement vertical sur toutes tailles
   d'écran (le label DSFR est toujours au-dessus de son input).
   Ordre : select → label "Si autre, précisez" → input. */
.ls-dropdown-with-other {
    max-width: 400px !important;
    display: block;
}

.ls-dropdown-with-other > .fr-input-group {
    max-width: 100%;
}

/* Pour les tableaux multi-flexi avec colonnes fixes, pas de max-width */
table[style*="table-layout: fixed"] td.select-item,
table[style*="table-layout: fixed"] td.ls-dropdown-item {
    max-width: none !important;
}

/* Tableaux avec colgroup (dual-scale, dropdown-array, etc.) - respecter les largeurs définies */
.array-flexible-dual-scale td.select-item,
.array-flexible-dual-scale td.dropdown-item,
.array-flexible-dual-scale td.ls-dropdown-item,
[class*="array-"] td.select-item,
[class*="array-"] td.dropdown-item,
[class*="array-"] td.ls-dropdown-item,
.fr-table table td.select-item,
.fr-table table td.dropdown-item,
.fr-table--bordered table td.select-item,
.fr-table--bordered table td.dropdown-item,
table.ls-answers td.select-item,
table.ls-answers td.dropdown-item,
table.questions-list td.select-item,
table.questions-list td.dropdown-item {
    max-width: none !important;
    width: auto !important;
}

/* S'assurer que les select prennent toute la largeur de leur cellule */
.array-flexible-dual-scale td.select-item select,
.array-flexible-dual-scale td.dropdown-item select,
[class*="array-"] td.select-item select,
[class*="array-"] td.dropdown-item select,
.fr-table table td.select-item select,
.fr-table table td.dropdown-item select,
.fr-table--bordered table td.select-item select,
.fr-table--bordered table td.dropdown-item select {
    width: 100% !important;
    max-width: 100% !important;
}

/* Séparateur dual-scale : scoping via les classes `dsfr-separator-empty` /
   `dsfr-has-ddfix` / `dsfr-has-ddfix-table` posées par le template Twig.
   Voir views/survey/questions/answer/arrays/dualscale/answer_dropdown.twig. */
.array-flexible-dual-scale td.ddarrayseparator,
[class*="array-"] td.ddarrayseparator {
    background-color: transparent !important;
}

/* Séparateur vide : totalement masqué (comportement historique). */
.array-flexible-dual-scale col.ddarrayseparator.dsfr-separator-empty,
.array-flexible-dual-scale td.ddarrayseparator.dsfr-separator-empty,
[class*="array-"] col.ddarrayseparator.dsfr-separator-empty,
[class*="array-"] td.ddarrayseparator.dsfr-separator-empty {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Cas avec ddprefix/ddsuffix : on passe la table en table-layout:auto pour
   que les cellules select-item puissent s'étirer sans tronquer "préfixe"
   et "suffixe", et on donne au séparateur un padding latéral généreux.
   Spécificité élevée (html body .fr-table ...) pour battre la règle
   `[class*="array-"] .fr-table table { table-layout: fixed !important }`
   déclarée plus haut dans ce fichier. */
html body table.dsfr-has-ddfix-table,
html body [class*="array-"] .fr-table table.dsfr-has-ddfix-table,
html body [class*="array-"] table.dsfr-has-ddfix-table.ls-answers {
    table-layout: auto !important;
}

/* Séparateur non-vide : largeur confortable pour "séparateur" etc. et
   padding latéral généreux pour l'aérer. Override des styles inline du
   colgroup (width:8%) via specificity HTML body. */
html body table.dsfr-has-ddfix-table col.ddarrayseparator:not(.dsfr-separator-empty) {
    width: auto;
}

tr.dsfr-has-ddfix td.ddarrayseparator:not(.dsfr-separator-empty) {
    min-width: 5rem;
    padding: 0.5rem 1rem;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: visible;
    color: var(--text-mention-grey);
}

/* Cellules select-item : ne pas rogner le contenu, laisser le flex
   s'étaler. `min-width: max-content` pousse la cellule pour contenir
   le flex ; `overflow: visible` empêche le rognage si les styles
   par défaut du tableau posaient overflow hidden. */
html body tr.dsfr-has-ddfix td.select-item,
html body tr.dsfr-has-ddfix td.dropdown-item {
    overflow: visible !important;
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
    width: auto !important;
    max-width: none !important;
}

/* Flex container interne : nowrap, gap, ne pas shrinker sous la taille
   du contenu combiné. */
html body tr.dsfr-has-ddfix td.select-item .ls-input-group,
html body tr.dsfr-has-ddfix td.dropdown-item .ls-input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
    width: 100%;
}

/* Préfixes et suffixes : intouchables, jamais shrink, jamais rogner. */
html body tr.dsfr-has-ddfix .ls-input-group-extra,
html body tr.dsfr-has-ddfix .ddprefix,
html body tr.dsfr-has-ddfix .ddsuffix {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: keep-all;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
}

/* Select central : override le `width: 100% !important` hérité pour
   qu'il ne monopolise plus la cellule ; `min-width: 10rem` garantit
   un confort de sélection. */
html body tr.dsfr-has-ddfix td.select-item select.fr-select,
html body tr.dsfr-has-ddfix td.dropdown-item select.fr-select,
html body tr.dsfr-has-ddfix td.select-item .ls-input-group > select,
html body tr.dsfr-has-ddfix td.dropdown-item .ls-input-group > select {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 10rem;
}


/* Dropdown menu Bootstrap - style DSFR */
.dropdown-menu {
    background-color: var(--background-default-grey) !important;
    border: 1px solid var(--border-default-grey) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
}

.dropdown-menu .dropdown-item,
.bootstrap-select .dropdown-menu li a {
    padding: 0.75rem 1rem !important;
    color: var(--text-default-grey) !important;
    background-color: transparent !important;
    font-family: Marianne, arial, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    border: none !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.bootstrap-select .dropdown-menu li:hover a,
.bootstrap-select .dropdown-menu li:focus a,
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.active a {
    background-color: var(--background-action-low-blue-france) !important;
    color: var(--text-action-high-blue-france) !important;
    outline: none !important;
}

.dropdown-menu .dropdown-item:active,
.bootstrap-select .dropdown-menu li:active a {
    background-color: var(--background-action-high-blue-france) !important;
    color: var(--text-inverted-blue-france) !important;
}

/* Option sélectionnée */
.dropdown-menu .dropdown-item.selected,
.dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu li.selected a {
    background-color: var(--background-action-low-blue-france) !important;
    color: var(--text-action-high-blue-france) !important;
    font-weight: 500 !important;
}

/* ============================================
   BOOTSTRAP BUTTONS MULTI (CHECKBOXES)
   ============================================ */

/* Consolidé dans « BOOTSTRAP BUTTONS → DSFR STYLE » (#41 étape 3a) :
   le masquage couvre input.button-item/.btn-check (tous types) et l'état
   sélectionné inclut input[type="checkbox"]:checked. */

/* ============================================
   FILE UPLOAD - DSFR
   ============================================ */

/* Container principal */
.upload-files .upload-button {
    margin-bottom: 1rem;
}

/* Table des fichiers uploadés */
.uploadedfiles {
    width: 100%;
}

.uploadedfiles thead th {
    font-weight: 500;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-default-grey);
}

.uploadedfiles tbody td {
    padding: 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-default-grey);
}

.uploadedfiles .upload.image img,
.uploadedfiles img.uploaded {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
    border-radius: 4px;
}

.uploadedfiles .upload-placeholder {
    width: 60px;
    height: 60px;
    background: var(--background-alt-grey);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modale DSFR pour file upload */
.file-upload-modal .fr-modal__body {
    max-width: 100%;
}

.file-upload-modal .fr-modal__content {
    max-height: calc(100vh - 200px);
    overflow: auto;
}

/* Iframe uploader */
.uploader-frame {
    width: 100%;
    min-height: 400px;
    background: var(--background-default-grey);
    border-radius: 4px;
}

.uploader-frame iframe {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 4px;
}

/* Liste des fichiers dans l'iframe */
.files-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.files-list .file-element {
    background: var(--background-alt-grey);
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.files-list .file-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.files-list .file-preview img.uploaded {
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
    border-radius: 4px;
}

.files-list .file-name {
    font-weight: 500;
    word-break: break-all;
}

.files-list .file-info {
    flex: 1;
    min-width: 200px;
}

.files-list .file-info fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.files-list .file-info .mb-3 {
    margin-bottom: 0.75rem !important;
}

.files-list .file-info label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.files-list .file-info input.form-control {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-default-grey);
    border-radius: 4px;
    font-size: 0.875rem;
}

/* Zone de notice (succès/erreur dans l'iframe) */
#notice {
    margin-bottom: 1rem;
}

#notice .alert {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin: 0;
}

#notice .alert-success {
    background: var(--background-contrast-success);
    color: var(--text-default-success);
    border: 1px solid var(--border-plain-success);
}

#notice .alert-danger {
    background: var(--background-contrast-error);
    color: var(--text-default-error);
    border: 1px solid var(--border-plain-error);
}

/* Bouton de suppression */
.files-list .btn-danger {
    background: var(--background-action-high-error) !important;
    color: var(--text-inverted-error) !important;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
}

.files-list .btn-danger:hover {
    background: var(--background-action-high-error-hover) !important;
}

/* Status upload */
#uploadstatus {
    padding: 0.75rem;
    background: var(--background-alt-grey);
    border-radius: 4px;
    margin-top: 1rem;
    font-size: 0.875rem;
}

/* Bouton upload dans l'iframe */
#button_ {
    display: inline-block;
}

.ajaxupload-button,
button[id^="button_"] {
    background: var(--background-action-high-blue-france);
    color: var(--text-inverted-blue-france);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
}

.ajaxupload-button:hover,
button[id^="button_"]:hover {
    background: var(--background-action-high-blue-france-hover);
}

/* Loading spinner */
#loading-icon-fielupload {
    margin-left: 0.5rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Native dialog fallback styling (when DSFR JS not loaded) */
dialog.file-upload-modal:not([class*="fr-modal--opened"]) {
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 90vw;
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
}

dialog.file-upload-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

/* Ensure DSFR dialog doesn't conflict with native dialog */
dialog.fr-modal[open] {
    display: block;
}

/* ============================================
   COMBOBOX DSFR accessible — src/dropdowns/combobox.js
   Remplacement runtime de bootstrap-select pour les list_dropdown
   avec recherche. Pattern WAI-ARIA 1.2 Combobox / Listbox.
   ============================================ */

.dsfr-combobox {
    position: relative;
}

.dsfr-combobox .dsfr-combobox-input {
    width: 100%;
    padding-right: 2.5rem;
}

.dsfr-combobox-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--text-default-grey);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
}

.dsfr-combobox-toggle:focus {
    outline: 2px solid #0a76f6;
    outline-offset: 2px;
}

.dsfr-combobox-listbox {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 20rem;
    overflow-y: auto;
    background: var(--background-default-grey, #fff);
    border: 1px solid var(--border-default-grey, #ddd);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 0;
    margin: 0.25rem 0 0;
    list-style: none;
}

.dsfr-combobox-listbox[hidden] {
    display: none !important;
}

.dsfr-combobox-option {
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: var(--text-default-grey);
    font-family: Marianne, arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.dsfr-combobox-option[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dsfr-combobox-option.is-active,
.dsfr-combobox-option:hover {
    background-color: var(--background-contrast-blue-france, #e3e3fd);
    color: var(--text-action-high-blue-france, #000091);
}

.dsfr-combobox-option[aria-selected="true"] {
    font-weight: 700;
}

/* =====================================================================
   Récapitulatif des réponses (printanswers) — vue HTML navigateur
   ---------------------------------------------------------------------
   Habillage sobre DSFR de la page « Imprimer vos réponses ». La largeur
   des colonnes est portée par les classes fr-col-* (DSFR) ; ici on ne
   pose que la typographie, les séparateurs et les espacements.
   Le PDF a sa propre feuille (printanswers_style.twig) car le DSFR n'y
   est pas chargé et mPDF ne gère pas flexbox.
   ===================================================================== */
.printanswers {
    max-width: 60rem;
    margin: 0 auto;
}
.printanswers__actions {
    display: flex;
    justify-content: flex-end;
}
.printanswers-title {
    margin: 0 0 2rem;
}
.printanswers-section {
    margin: 0 0 2.5rem;
}
.printanswers-section__title {
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-plain-blue-france, #000091);
    color: var(--text-label-blue-france, #000091);
}

/* Une question = libellé (gauche) + réponse (droite). break-inside évite
   qu'une question soit coupée entre deux écrans/colonnes. */
.question-container-printanswers {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-default-grey, #dddddd);
    break-inside: avoid;
}
.printanswers-section__body .question-container-printanswers:last-child {
    border-bottom: 0;
}
.printanswers-q__label {
    font-weight: 700;
    color: var(--text-title-grey, #161616);
}
.printanswers-q__answer {
    color: var(--text-default-grey, #3a3a3a);
}
.printanswers-q__answer > p:first-child { margin-top: 0; }
.printanswers-q__answer > p:last-child { margin-bottom: 0; }

/* Réponse vide / non renseignée */
.printanswers-empty {
    color: var(--text-mention-grey, #666666);
    font-style: italic;
}

/* Réponses multiples : liste sobre des options retenues, marquées d'un ✓ */
.printanswers-q__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.printanswers-q__list li {
    padding: 0.125rem 0;
}
.printanswers-q__list li::before {
    content: "\2713";
    color: var(--text-default-success, #18753c);
    font-weight: 700;
    margin-right: 0.5rem;
}

/* Sous-questions (tableaux 1 réponse/ligne, numériques multi, textes multi) :
   chaque ligne = intitulé + valeur. */
.printanswers-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding: 0.25rem 0;
}
.printanswers-sub + .printanswers-sub {
    border-top: 1px dotted var(--border-default-grey, #dddddd);
}
.printanswers-sub__label {
    flex: 1 1 14rem;
    color: var(--text-mention-grey, #666666);
}
.printanswers-sub__value {
    flex: 1 1 8rem;
    font-weight: 700;
    color: var(--text-title-grey, #161616);
}

/* Classement (ranking) : liste ordonnée sobre */
.printanswers-q__ranked {
    margin: 0;
    padding-left: 1.25rem;
}
.printanswers-q__ranked li {
    padding: 0.125rem 0;
}

/* Question d'information (boilerplate) : texte pleine largeur, sans réponse */
.printanswers-boilerplate {
    color: var(--text-default-grey, #3a3a3a);
}

/* Tableaux (échelles doubles, multi-flexi) : on s'appuie sur .fr-table. */
.printanswers-q__answer .fr-table {
    margin: 0;
}

/* ============================================
   REVUE 2026-06 (#25) — remplacements d'icônes-fontes
   ============================================ */

/* Astérisque de champ obligatoire (texte, plus de fa-asterisk).
   Classe partagée avec l'injection JS de required-fields.js. */
.required-asterisk {
    color: var(--text-default-error);
    font-weight: 700;
}

/* Icônes DSFR des radios riches yesno/gender (remplacent les ri-*
   qui portaient des styles inline font-size/couleur en dur). */
.lsd-rich-radio-icon {
    color: var(--text-mention-grey);
}

.lsd-rich-radio-icon::before {
    --icon-size: 2rem;
}

/* Utilitaires projet (ex-classes fr-* inventées, renommées lsd- :
   le préfixe fr- est réservé au DSFR). */
.lsd-text-center {
    text-align: center;
}

.lsd-text-muted {
    color: var(--text-mention-grey);
}

.lsd-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.lsd-text-error {
    color: var(--text-default-error);
}

/* ============================================
   NEUTRALISATION CIBLÉE DU CORE NON LAYÉRISÉ (#41)
   ============================================
   survey.css (package core) n'est pas layérisable depuis un thème : ses
   règles normales battent désormais toutes nos couches. Chaque règle core
   qui entrait en conflit était historiquement battue par ordre de source ;
   on la neutralise ici explicitement. Les !important de cette section sont
   le PRIX BORNÉ de la migration @layer : ils ciblent uniquement le core,
   jamais nos propres feuilles. */

/* survey.css : `.input-error input { border: 1px solid #e75041 }` (rouge
   Bootstrap). Le DSFR signale l'erreur par le soulignement box-shadow. */
.input-error input {
    border: none !important;
}

/* survey.css : `.ls-input-group { display: table }` (≥481px, émulation
   Bootstrap input-group). theme.css le remplace par un layout flex, que
   l'ordre de source faisait gagner — sans !important le display:table du
   core ferait exploser la largeur des dropdown-array (table-layout). */
.ls-input-group {
    display: flex !important;
}
}

/* ============================================
   COUCHE OVERRIDES (#41)
   ============================================
   Déclarée première dans l'ordre des couches : ses !important battent ceux
   du DSFR (l'ordre des couches s'inverse pour les déclarations importantes).
   N'y mettre QUE les règles qui doivent battre un !important du DSFR
   (utilitaires fr-mb-N, fr-p-N…). */
@layer overrides {
    /* Les <li> de sous-questions portent fr-mb-3w (margin-bottom:1.5rem
       !important, couche dsfr) qui battrait le 1rem !important de la couche
       custom — avant @layer, l'ordre source donnait raison à custom.css. */
    .ls-answers.subquestion-list li,
    .questions-list.text-list li,
    .questions-list.number-list li {
        margin-bottom: 1rem !important;
    }

    /* theme.css pose margin-left:0.25rem !important sur les labels
       inputondemand (sélecteur `…-list-item label`) — l'inversion des
       importants donne theme > custom : seul overrides peut remettre le 0
       attendu sur les labels DSFR des sous-questions. */
    .ls-answers.subquestion-list .fr-label,
    .questions-list.text-list .fr-label,
    .questions-list.number-list .fr-label {
        margin-left: 0 !important;
    }

    /* Cellules mobile-only (.ls-xs-only : en-têtes « Scale A/B » des lignes
       dual-scale) : theme.css restaure display:table-cell !important sur les
       cellules à ≥768px (sortie de linéarisation) avec une spécificité qui
       battait déjà le masquage de custom.css — les cellules restaient donc
       VISIBLES sur desktop (préexistant, #43) : 13 cellules pour 11 <col>,
       dernières colonnes écrasées, pastilles « Sans réponse » débordantes.
       Seul overrides bat l'important de la couche theme. */
    @media (min-width: 768px) {
        table .ls-xs-only {
            display: none !important;
        }
    }
}