/* ==========================================================================
   Thème d'enquête FFBaD — habillage
   Fédération Française de Badminton · LimeSurvey 7.x · Bootstrap 5
   Hérité de vanilla. Ce fichier est chargé APRÈS la variante de
   couleurs (css/variations/ffbad_clair.css ou ffbad_sombre.css), qui définit
   tous les jetons --ffbad-*.
   --------------------------------------------------------------------------
   Sommaire
     1.  Base & typographie
     2.  Conteneur / cadre d'enquête
     3.  En-tête (bandeau marine + logo + motif volant)
     4.  Barre de progression
     5.  Groupes de questions
     6.  Questions
     7.  Réponses & champs de formulaire
     8.  Boutons & navigation
     9.  Écrans bienvenue / fin / message
     10. Tableaux (matrices)
     11. Alertes, aides, messages d'erreur
     12. Pied de page
     13. Accessibilité, responsive, impression
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base & typographie
   -------------------------------------------------------------------------- */

body {
    /* fond et couleur de texte : pilotés par les options du thème
       (Background color / Font color), appliquées en ligne par le parent */
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--bs-link-color);
    text-underline-offset: .18em;
}

a:hover,
a:focus {
    color: var(--bs-link-hover-color);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ffbad-text);
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Titres "signature" FFBaD : capitales serrées comme le logo */
.survey-name,
#survey-name,
.ls-heading .survey-name,
.completed-wrapper h1,
.welcome-container .survey-name {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.15;
}

::selection {
    background: var(--ffbad-blue);
    color: #fff;
}

/* --------------------------------------------------------------------------
   2. Conteneur / cadre d'enquête
   -------------------------------------------------------------------------- */

.outerframe,
#outerframe,
.ls-outerframe {
    background: transparent;
}

#surveyContainer,
.survey-container,
.ls-survey-container,
.container-fluid > .row > main,
main.ls-main {
    max-width: 940px;
    margin-inline: auto;
}

/* Carte principale */
#surveyContainer,
.survey-container {
    background: var(--ffbad-surface);
    border: 1px solid var(--ffbad-border);
    box-shadow: var(--ffbad-shadow);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   En-tête : le bandeau
   Fruity rend le logo dans <header id="survey-nav" class="navbar fixed-top">,
   à l'intérieur d'un .container-fluid.col-xl-8 — d'où un logo confiné en haut
   à gauche. On libère ce conteneur pour obtenir un bandeau pleine largeur,
   placé au-dessus du contenu (équivalent d'un bloc entre .container-fluid et
   l'outer frame), et on rend la barre non flottante.
   -------------------------------------------------------------------------- */

#survey-nav.navbar,
header#survey-nav {
    position: static !important;
    display: block;
    padding: 0;
    background-color: var(--ffbad-header-bg) !important;
    border: 0;
    box-shadow: none;
}

/* theme.js compense la barre flottante par un padding-top sur le body :
   la barre ne flottant plus, on annule cette compensation. */
body {
    padding-top: 0 !important;
}

#survey-nav > .container-fluid,
#survey-nav .container-fluid.col-xl-8 {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100% !important;
    flex: 0 0 100%;
    padding: 0;
    margin: 0;
}

#survey-nav .navbar-brand,
#survey-nav .logo-container {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: var(--ffbad-banner-padding, 0);
    text-align: center;
    line-height: 0;
    background-color: var(--ffbad-header-bg);
}

#survey-nav img.logo,
#survey-nav .logo-container img {
    display: block !important;
    width: var(--ffbad-logo-img-width, 100%) !important;
    max-width: var(--ffbad-logo-img-max, 100%) !important;
    max-height: none !important;
    height: var(--ffbad-logo-img-height, auto) !important;
    object-fit: var(--ffbad-logo-img-fit, contain);
    object-position: var(--ffbad-logo-img-position, center);
    margin-inline: auto;
}

/* Filet de marque sous le bandeau */
#survey-nav::after {
    content: "";
    display: block;
    height: 4px;
    width: 100%;
    background: var(--ffbad-banner-line, linear-gradient(90deg,
        var(--ffbad-accent-line-a, var(--ffbad-accent)) 0%,
        var(--ffbad-accent-line-b, var(--ffbad-accent)) 100%));
}

/* Le menu (langues, index des questions, enregistrer…) se pose sur le bandeau */
#survey-nav #navbar-menu {
    position: absolute;
    top: .5rem;
    right: .75rem;
    z-index: 5;
    margin: 0 !important;
}

#survey-nav #navbar-toggler,
#survey-nav .navbar-toggler {
    color: #fff;
    background-color: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .35);
    padding: .25rem .5rem;
}

#survey-nav .dropdown-menu {
    background-color: var(--ffbad-surface);
    border-color: var(--ffbad-border);
}

#survey-nav .dropdown-item,
#survey-nav .dropdown-header {
    color: var(--ffbad-text);
}

#survey-nav .dropdown-item:hover,
#survey-nav .dropdown-item:focus {
    background-color: var(--ffbad-surface-alt);
    color: var(--ffbad-text);
}


/* Fruity sort le bloc logo du flux (`.logo-container { float: left }`) et
   plafonne la hauteur de l'image : on rétablit un bandeau normal. */
#survey-nav .navbar-brand,
#survey-nav .logo-container {
    float: none !important;
    min-height: 0 !important;
    overflow: visible;
    flex-shrink: 1;
}

/* --------------------------------------------------------------------------
   Titres : Fruity utilise .large-heading (2,85 rem) et
   .group-container .group-title — on redescend à une échelle de formulaire.
   -------------------------------------------------------------------------- */

.survey-name,
.survey-name.large-heading,
#survey-name,
.welcome-container .survey-name {
    font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: .5rem;
}

.survey-description,
.description.form-heading {
    color: var(--ffbad-text-muted);
    font-size: 1rem;
}

.group-container .group-title,
.group-title {
    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-top: 1.5rem;
    margin-bottom: .6rem;
    padding-bottom: .35rem;
    border-bottom: 3px solid var(--ffbad-accent);
    display: inline-block;
}

.group-container .group-description,
.group-description {
    font-size: 1rem;
    color: var(--ffbad-text-muted);
}


/* --------------------------------------------------------------------------
   Surcharges du thème parent (theme_apple.css)
   Le CSS du parent fixe en dur des couleurs pensées pour un fond clair
   (#1E1E1E, #6E748C) sur le contenu des questions : illisibles sur les
   variantes sombres. On reprend ici les MÊMES sélecteurs — même spécificité,
   notre feuille étant chargée après — pour les rebrancher sur les jetons du
   thème. Le message d'aide (.ls-question-message) suit la couleur de
   .ls-em-tip, comme demandé.
   -------------------------------------------------------------------------- */

.question-container .ls-question-message,
.question-container .question-help-container,
.question-container .question-valid-container,
.question-container .help-block,
.ls-question-message,
.ls-em-tip,
.ls-questionhelp,
.questionhelp,
.question-help-container {
    color: var(--ffbad-text-muted);
}

.question-container .ls-label-question,
.question-container .question-title-container,
.ls-label-question {
    color: var(--ffbad-text);
}

.ls-answers label,
.answer-item label,
.control-label,
.form-check-label,
.datasecurity-checkbox-label,
.form-change-lang .language-icon,
.form-change-lang .control-label {
    color: var(--ffbad-text);
}

.ls-answers .ls-heading th,
.ls-answers th {
    color: var(--ffbad-thead-text, #fff);
}

.table-hover > tbody > tr:hover > th,
.table > tbody > tr:hover > th {
    color: var(--ffbad-text);
}

.list-group-item {
    background-color: var(--ffbad-surface);
    color: var(--ffbad-text);
    border-color: var(--ffbad-border);
}

/* Cases à cocher et boutons radio : le parent les peint avec la couleur de sa
   variante « Apple » (#14AE5C) en dur. On les rebranche sur l'accent du thème. */
.radio-item input[type=radio]:checked + label,
.checkbox-item input[type=checkbox]:checked + label {
    color: var(--ffbad-text);
}

.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: var(--ffbad-accent);
}

.radio-item input[type=radio]:checked + label::after {
    background-color: var(--ffbad-accent);
}

.checkbox-item input[type=checkbox]:checked + label::after {
    color: var(--ffbad-accent);
}

li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked + label + .imageselect-radiobutton:after {
    background-color: var(--ffbad-accent);
}

li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked + label + .imageselect-radiobutton:before {
    border-color: var(--ffbad-accent);
}

.input-group-text,
label .input-group-text {
    color: var(--ffbad-accent-contrast);
    background-color: var(--ffbad-accent);
    border-color: var(--ffbad-border);
}

.form-control.ls-important-field {
    border: 2px solid var(--ffbad-accent) !important;
    box-shadow: none;
}

/* Conteneur de question : le parent impose padding: 12px 0 ; on reprend la main
   avec une spécificité supérieure (le conteneur de groupe). */
.group-container .question-container,
.group-container .row.question-container {
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.15rem;
}

/* --------------------------------------------------------------------------
   Navigation Précédent / Suivant
   Fruity utilise <div class="row navigator"> avec deux colonnes .col-6
   (text-start / text-end) : l'alignement est natif, on ne le contrarie pas.
   -------------------------------------------------------------------------- */

.navigator,
#navigator-container {
    align-items: center;
    padding-block: 1rem 1.5rem;
    border-top: 1px solid var(--ffbad-border);
    margin-top: .5rem;
}

@media (max-width: 575.98px) {
    .navigator .btn,
    #navigator-container .btn {
        width: 100%;
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   4. Barre de progression
   -------------------------------------------------------------------------- */

#progress-wrapper,
.progress-wrapper,
.ls-progress-container {
    padding: .75rem 1.5rem 0;
}

.progress {
    height: .5rem;
    background-color: var(--ffbad-surface-alt);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    min-height: .5rem;
    background-image: linear-gradient(90deg, var(--ffbad-blue), var(--ffbad-red));
    background-color: var(--ffbad-blue);
    transition: width .35s ease;
}

/* --------------------------------------------------------------------------
   5. Groupes de questions
   -------------------------------------------------------------------------- */

.group-container,
#group-container,
.ls-group-container {
    padding: .5rem 1.5rem;
}

.group-title,
.ls-group-title,
h4.group-title {
    color: var(--ffbad-navy);
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding-bottom: .35rem;
    border-bottom: 3px solid var(--ffbad-blue);
    display: inline-block;
    margin-bottom: .9rem;
}

html[data-ffbad="sombre"] .group-title,
body.ffbad-sombre .group-title {
    color: var(--ffbad-text);
}

.group-description,
.ls-group-description {
    color: var(--ffbad-text-muted);
    margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   6. Questions
   -------------------------------------------------------------------------- */

.question-container,
.ls-question-container,
.question-wrapper {
    /* fond : option « Question background color » du thème */
    border: 1px solid var(--ffbad-border);
    border-left: 4px solid var(--ffbad-blue);
    box-shadow: var(--ffbad-shadow-sm);
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.15rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.question-container:focus-within {
    border-color: var(--ffbad-blue);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .16);
}

.question-title-container,
.ls-question-title,
.question-text {
    color: var(--ffbad-text);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .35rem;
}

.question-title-container .asterisk,
.asterisk,
.ls-question-mandatory {
    color: var(--ffbad-red);
    font-weight: 700;
}

.question-help-container,
.ls-questionhelp,
.questionhelp,
.question-help {
    color: var(--ffbad-text-muted);
    font-size: .9rem;
    font-style: normal;
    border-left: 3px solid var(--ffbad-border);
    padding-left: .65rem;
    margin: .4rem 0 .75rem;
}

.question-valid-container,
.ls-em-tip {
    color: var(--ffbad-text-muted);
    font-size: .875rem;
}

.question-container.input-error,
.ls-question-container.input-error {
    border-left-color: var(--ffbad-red);
}

/* --------------------------------------------------------------------------
   7. Réponses & champs de formulaire
   -------------------------------------------------------------------------- */

.answer-container,
.ls-answers {
    margin-top: .5rem;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea,
select {
    background-color: var(--ffbad-surface);
    color: var(--ffbad-text);
    border: 1px solid var(--ffbad-border);
    padding: .55rem .75rem;
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--ffbad-text-muted);
    opacity: .8;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus {
    border-color: var(--ffbad-blue);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .20);
    outline: none;
}

/* Cases à cocher / boutons radio */
.form-check-input {
    border: 1.5px solid var(--ffbad-border);
    background-color: var(--ffbad-surface);
    width: 1.15em;
    height: 1.15em;
    margin-top: .2em;
}

.form-check-input:checked {
    background-color: var(--ffbad-blue);
    border-color: var(--ffbad-blue);
}

.form-check-input:focus-visible,
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .25);
    border-color: var(--ffbad-blue);
}

.form-check-label,
.answer-item label,
.ls-answers label {
    color: var(--ffbad-text);
    cursor: pointer;
}

/* Lignes de réponse : surbrillance au survol / sélection */
.answer-item,
.ls-answers .form-check {
    padding: .3rem .5rem;
    transition: background-color .12s ease;
}

.answer-item:hover,
.ls-answers .form-check:hover {
    background-color: var(--ffbad-blue-100);
}

/* Curseurs (question "slider") */
input[type="range"]::-webkit-slider-thumb {
    background: var(--ffbad-blue);
}

input[type="range"]::-moz-range-thumb {
    background: var(--ffbad-blue);
}

/* --------------------------------------------------------------------------
   8. Boutons & navigation
   -------------------------------------------------------------------------- */

.btn {
    font-weight: 700;
    letter-spacing: .01em;
    padding: .55rem 1.25rem;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn-primary,
#ls-button-submit,
.ls-move-next-btn,
.ls-move-submit-btn {
    background-color: var(--ffbad-blue);
    border-color: var(--ffbad-blue);
    color: var(--ffbad-accent-contrast);
}

.btn-primary:hover,
.btn-primary:focus,
#ls-button-submit:hover,
.ls-move-next-btn:hover,
.ls-move-submit-btn:hover {
    background-color: var(--ffbad-blue-600);
    border-color: var(--ffbad-blue-600);
    color: #fff;
}

.btn-primary:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--ffbad-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* Bouton "Envoyer" : rouge FFBaD pour marquer la fin du parcours */
.ls-move-submit-btn,
#ls-button-submit.ls-move-submit-btn {
    background-color: var(--ffbad-red);
    border-color: var(--ffbad-red);
}

.ls-move-submit-btn:hover,
#ls-button-submit.ls-move-submit-btn:hover {
    background-color: var(--ffbad-red-600);
    border-color: var(--ffbad-red-600);
}

.btn-secondary,
.btn-outline-secondary,
.ls-move-previous-btn {
    background-color: transparent;
    border: 1.5px solid var(--ffbad-border);
    color: var(--ffbad-text);
}

.btn-secondary:hover,
.ls-move-previous-btn:hover {
    background-color: var(--ffbad-surface-alt);
    border-color: var(--ffbad-navy-400);
    color: var(--ffbad-text);
}


/* --------------------------------------------------------------------------
   9. Écrans bienvenue / fin / message
   -------------------------------------------------------------------------- */

#welcome-container,
.welcome-container,
.ls-welcome-container,
#completed-wrapper,
.completed-wrapper,
.ls-endtext {
    padding: 1.25rem 1.5rem;
}

.welcome-container .ls-welcometext,
.ls-welcometext {
    font-size: 1.03rem;
    color: var(--ffbad-text);
}

#completed-wrapper,
.completed-wrapper {
    text-align: center;
}

#completed-wrapper::before,
.completed-wrapper::before {
    content: "";
    display: block;
    width: 72px;
    height: 6px;
    margin: 0 auto 1.25rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ffbad-blue), #fff 50%, var(--ffbad-red));
}

/* --------------------------------------------------------------------------
   10. Tableaux (questions matricielles)
   -------------------------------------------------------------------------- */

.table,
table.ls-answers {
    color: var(--ffbad-text);
    border-color: var(--ffbad-border);
}

.table > thead th,
.ls-answers thead th {
    background-color: var(--ffbad-thead-bg, var(--ffbad-navy));
    color: var(--ffbad-thead-text, #fff);
    font-weight: 700;
    border-color: var(--ffbad-thead-bg, var(--ffbad-navy));
    vertical-align: middle;
}

.table > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--ffbad-surface-alt);
    color: var(--ffbad-text);
}

.table > tbody > tr:hover > * {
    background-color: var(--ffbad-blue-100);
}

.ls-answers .answertext,
td.answertext,
th.answertext {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. Alertes, aides, messages d'erreur
   -------------------------------------------------------------------------- */

.alert {
    border-width: 1px;
    border-left-width: 4px;
}

.alert-danger,
.text-danger,
.ls-em-error {
    color: var(--ffbad-red);
}

.alert-danger {
    background-color: rgba(var(--bs-danger-rgb), .08);
    border-color: var(--ffbad-red);
}

.alert-info,
.alert-primary {
    background-color: rgba(var(--bs-primary-rgb), .07);
    border-color: var(--ffbad-blue);
    color: var(--ffbad-text);
}

.ls-em-error,
.em_error {
    font-weight: 600;
}

/* Fenêtres modales (popups de validation) */
.modal-content {
    background-color: var(--ffbad-surface);
    color: var(--ffbad-text);
    border: 1px solid var(--ffbad-border);
}

.modal-header {
    background-color: var(--ffbad-navy);
    color: #fff;
    border-bottom: none;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* --------------------------------------------------------------------------
   12. Pied de page
   -------------------------------------------------------------------------- */

.ls-footer,
#footer,
footer.ls-footer {
    color: var(--ffbad-text-muted);
    font-size: .85rem;
    text-align: center;
    padding: 1rem .5rem 2rem;
    background: transparent;
}

.ls-footer a,
#footer a {
    color: var(--bs-link-color);
}


/* --------------------------------------------------------------------------
   13. Accessibilité, responsive, impression
   -------------------------------------------------------------------------- */

/* Focus visible homogène (RGAA / WCAG 2.1 AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--ffbad-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

@media (max-width: 768px) {
    #surveyContainer,
    .survey-container {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .logo-container,
    #logo-container,
    .header-container {
        padding: 1.1rem .75rem .9rem;
    }

    /* Le logo reste affiché en petite largeur */
    .logo-container img,
    #logo-container img,
    img.logo,
    .ls-logo,
    .header-container img {
        display: block !important;
        max-width: 92%;
    }

    .ffbad-no-logo .logo-container img,
    .ffbad-no-logo #logo-container img,
    .ffbad-no-logo .header-container img {
        display: none !important;
    }

    .survey-name,
    #survey-name,
    .group-container,
    #group-container,
    #navigator-container,
    .navigator-container {
        padding-inline: 1rem;
    }


}

@media (min-width: 1400px) {
    #surveyContainer,
    .survey-container {
        max-width: 1020px;
    }
}