/* ===== Thème léger inspiré de design.quebec.ca =========================== */
:root {
    --qc-blue: #095797; /* primaire */
    --qc-blue-700: #1472BF;
    --qc-accent: #E06A4A; /* petite barre sous les titres */
    --qc-text: #1D1D1D;
    --qc-muted: #5B5B5B;
    --qc-border: #D7DFEA;
    --qc-bg: #FFFFFF;
    --qc-focus: #2680EB;
    --qc-danger: #B00020;
    --qc-radius: .5rem;
    --qc-space: 32px; /* gouttière officielle */
    /* Tailles officielles des champs */
    --qc-input-xl: 825px; /* extra-large */
    --qc-input-lg: 528px; /* large (défaut) */
    --qc-input-md: 249px; /* moyen */
    --qc-input-sm: 156px; /* petit */
    --qc-input-xs: 63px; /* extra-petit */
    /* Gaps compacts (ligne/colonne) */
    --qc-gap-col: 32px;
    --qc-gap-row: 12px;
    /* Boutons */
    --btn-h-std: 56px;
    --btn-h-cmp: 40px;
    --btn-gap-std: 32px;
    --btn-gap-cmp: 24px;
    --btn-maxw: 360px;
    --qc-blue-50: #eef4fb;
    --qc-danger-700: #8C0019;
    /* Largeur de conteneur uniforme (header + contenu) */
    --qc-container: 1000px;
}

/* Base */
html, body {
    height: 100%
}

body {
    color: var(--qc-text);
    background: var(--qc-bg);
    font: 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Conteneur principal */
.qc-main, .qc-form {
    max-width: var(--qc-container);
    margin: 0 auto;
    padding: 1rem 0.5rem 2rem 0; /* ✅ moitié moins de padding à gauche */
}

/* Titres */
.qc-titre, .qc-h1 {
    /* keep size/weight/underline */
    font-size: 2.25rem;
    font-weight: 700;
    margin: 1rem 0 .75rem;
    position: relative;
    padding-bottom: .5rem;
    /* remove these 4 to align with logo/container */
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-inline: 0;
}

    .qc-titre::after, .qc-h1::after {
        content: "";
        position: absolute;
        left: .14rem;
        bottom: 0;
        width: 56px;
        height: 4px;
        background: var(--qc-accent);
        border-radius: 2px
    }

.groupe-titre {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 .75rem
}

/* Groupes */
.groupe {
    margin-bottom: calc(var(--qc-space)/1.5);
    padding: 1rem 1rem 1.25rem;
    border: 1px solid var(--qc-border);
    border-radius: var(--qc-radius);
    background: #FFFFFF;
}

/* === Champs (défaut = 528px, coins carrés) ============================== */
/* ⚠️ volontairement SANS select ici (il est stylé plus bas via .qc-select) */
.qc-form input[type="text"],
.qc-form input[type="email"],
.qc-form input[type="tel"],
.qc-form input[type="number"],
.qc-form input[type="password"],
.qc-form textarea,
.qc-form .input,
.qc-form .textarea {
    width: 100% !important; /* plein largeur dans sa colonne */
    max-width: 100% !important;
    padding: .55rem .7rem;
    border: 1px solid var(--qc-border);
    border-radius: 0 !important;
    background: #FFFFFF;
    color: var(--qc-text);
    background-clip: border-box;
    appearance: none;
}

/* Textarea : hauteur libre */
.qc-form textarea {
    min-height: 7rem
}

    /* Focus — uniquement pour champs texte / textarea / boutons */
    .qc-form input[type="text"]:focus,
    .qc-form input[type="email"]:focus,
    .qc-form input[type="tel"]:focus,
    .qc-form input[type="number"]:focus,
    .qc-form input[type="password"]:focus,
    .qc-form textarea:focus,
    button:focus {
        outline: 3px solid transparent;
        box-shadow: 0 0 0 3px var(--qc-focus);
    }

/* Libellé + aide */
.label {
    display: block;
    font-weight: 600;
    margin: .35rem 0 .35rem
}

.help {
    display: block;
    color: var(--qc-muted);
    font-size: .92rem;
    margin-top: .2rem;
}

.qc-form small {
    display: contents;
    font-size: inherit;
}

/* Espacement vertical compact */
.qc-form .bloc-question input,
.qc-form .bloc-question select,
.qc-form .bloc-question textarea {
    margin-bottom: var(--qc-gap-row)
}

/* --- Radios -------------------------------------------------------------- */
.option, .option-inline {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .65rem 0
}

    .option > input[type="radio"], .option-inline > input[type="radio"] {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        margin: 0;
        transform: none;
        accent-color: var(--qc-blue)
    }
/* Pas de halo au focus pour radios/checkbox */
.qc-form input[type="radio"]:focus,
.qc-form input[type="checkbox"]:focus {
    outline: none;
    box-shadow: none
}

.option > label, .option-inline > label {
    margin: 0;
    line-height: 24px
}
/* Variante tuile */
.option.tile {
    border: 1px solid var(--qc-border);
    border-radius: .375rem;
    padding: .6rem .75rem
}

    .option.tile input[type=radio] {
        margin-left: .1rem
    }

    .option.tile:has(input[type=radio]:checked) {
        border-color: var(--qc-blue)
    }
/* Ligne avec champ “préciser” */
.option-inline .input, .option-inline input[type="text"] {
    width: var(--qc-input-md) !important;
    margin-bottom: 0
}

/* Boutons */
.actions {
    margin-top: 1.25rem;
    display: flex;
    gap: .75rem
}

.btn-group {
    display: flex;
    gap: var(--btn-gap-std);
    align-items: center;
    flex-wrap: wrap
}

.btn-group--compact {
    gap: var(--btn-gap-cmp)
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 0 20px;
    height: var(--btn-h-std);
    max-width: var(--btn-maxw);
    border: 2px solid transparent;
    border-radius: 0 !important;
    font-weight: 600;
    background: #FFFFFF;
    color: var(--qc-text);
    cursor: pointer;
    text-decoration: none;
    transition: .12s ease-in-out
}

.btn--compact {
    height: var(--btn-h-cmp)
}

.btn:focus {
    outline: 3px solid transparent;
    box-shadow: 0 0 0 3px var(--qc-focus)
}

.btn--primary {
    background: var(--qc-blue);
    border-color: var(--qc-blue);
    color: #FFF
}

    .btn--primary:hover {
        background: var(--qc-blue-700);
        border-color: var(--qc-blue-700);
        color: #FFF
    }

    .btn--primary:active {
        transform: translateY(1px);
        color: #FFF
    }

.btn--secondary {
    background: #FFF;
    color: var(--qc-blue);
    border-color: var(--qc-blue)
}

    .btn--secondary:hover {
        background: var(--qc-blue-50)
    }

.btn--tertiary {
    background: transparent;
    border-color: transparent;
    color: var(--qc-text)
}

    .btn--tertiary:hover {
        text-decoration: underline
    }

.btn--warning {
    background: var(--qc-danger);
    border-color: var(--qc-danger);
    color: #FFF
}

    .btn--warning:hover {
        background: var(--qc-danger-700);
        border-color: var(--qc-danger-700)
    }

.btn:disabled, .btn[disabled] {
    background: #E7EAF0;
    border-color: #E7EAF0;
    color: #777;
    cursor: not-allowed;
    opacity: .75;
    box-shadow: none
}

/* État désactivé par règles */
.bloc-question {
    margin-bottom: 1rem
}

    .bloc-question.is-disabled {
        opacity: .6;
        pointer-events: none
    }

        .bloc-question.is-disabled .msg-error,
        .bloc-question.is-disabled .msg-error-inline {
            display: none !important
        }

        .bloc-question.is-disabled .field-error {
            border-color: var(--qc-border) !important;
            box-shadow: none !important
        }

/* ===================== ERREURS / FORMATS ================================ */
.input.field-error, .textarea.field-error,
.qc-form input.field-error, .qc-form textarea.field-error {
    border-color: var(--qc-danger) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(176,0,32,.15)
}

[aria-invalid="true"] {
    outline: 3px solid rgba(176,0,32,.35);
    outline-offset: 1px
}

input.field-error::placeholder, textarea.field-error::placeholder {
    color: var(--qc-danger);
    opacity: .75
}

/* Messages d’erreur */
.msg-error {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    color: var(--qc-danger);
    margin-top: .35rem;
    font-size: .92rem;
    line-height: 1.35
}

    .msg-error::before {
        content: "";
        width: 16px;
        height: 16px;
        flex: 0 16px;
        margin-top: .1rem;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
        <path d='M12 3L22 20H2L12 3Z' stroke='%23B00020' stroke-width='2' fill='none'/>\
        <path d='M12 9v5' stroke='%23B00020' stroke-width='2'/>\
        <circle cx='12' cy='17' r='1.2' fill='%23B00020'/>\
        </svg>");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

.msg-error-inline {
    display: inline-flex;
    align-items: flex-start;
    gap: .45rem;
    margin-left: .5rem;
    font-size: .92rem;
    line-height: 1.3;
    color: var(--qc-danger);
    white-space: normal;
    max-width: 40ch
}

    .msg-error-inline::before {
        content: "";
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        margin-top: .1rem;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
        <path d='M12 3L22 20H2L12 3Z' stroke='%23B00020' stroke-width='2' fill='none'/>\
        <path d='M12 9v5' stroke='%23B00020' stroke-width='2'/>\
        <circle cx='12' cy='17' r='1.2' fill='%23B00020'/>\
        </svg>");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

/* ===== Grille responsive par question (1/2/3 colonnes) ================== */
.qc-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--qc-gap-col);
    row-gap: var(--qc-gap-row);
    align-items: flex-start
}

    .qc-row .bloc-question {
        margin: 0
    }

        .qc-row .bloc-question input, .qc-row .bloc-question select, .qc-row .bloc-question textarea {
            margin-bottom: 0
        }

    .qc-row .label {
        margin: 0 0 .25rem
    }

.qc-col-1 {
    flex: 0 0 100%;
    max-width: 100%
}

.qc-col-2 {
    flex: 0 0 calc((100% - var(--qc-gap-col))/2);
    max-width: calc((100% - var(--qc-gap-col))/2)
}

.qc-col-3 {
    flex: 0 0 calc((100% - 2*var(--qc-gap-col))/3);
    max-width: calc((100% - 2*var(--qc-gap-col))/3)
}

    /* champs full-width en colonnes */
    .qc-col-2 .input, .qc-col-2 input[type="text"], .qc-col-2 textarea, .qc-col-2 select,
    .qc-col-3 .input, .qc-col-3 input[type="text"], .qc-col-3 textarea, .qc-col-3 select {
        width: 100% !important;
        max-width: 100% !important
    }

/* 1) Make inputs include borders/padding in their width */
.qc-form input,
.qc-form textarea,
.qc-form select {
    box-sizing: border-box;
    min-width: 0;
}

/* 2) Force 100% width for 1-column blocks on mobile (wins on specificity) */
@media (max-width: 900px) {
    .qc-form .bloc-question.qc-col-1 .input,
    .qc-form .bloc-question.qc-col-1 input[type="text"],
    .qc-form .bloc-question.qc-col-1 textarea,
    .qc-form .bloc-question.qc-col-1 select,
    .qc-form .bloc-question.qc-col-1 .qc-select select {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Champs préciser */
@media (max-width:820px) {
    .option-inline {
        flex-wrap: wrap;
    }

        .option-inline .input, .option-inline input[type="text"] {
            flex: 1 1 100%;
        }
}

/*Style soumissions*/
/* simple surlignage de la ligne sélectionnée */
#tbl tr.is-selected {
    background: rgba(38,128,235,.06);
}

    #tbl tr.is-selected td {
        border-top-color: rgba(38,128,235,.25);
        border-bottom-color: rgba(38,128,235,.25);
    }
/* lignes archivées */
#tbl tr.is-archived {
    opacity: .6;
}

/* ===== Pagination ===== */
.qc-pagination {
    display: flex;
    justify-content: center;
    margin: 12px 0 0;
}

.qc-pagination__list {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.qc-pagination__item {
    display: flex;
}

.qc-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid transparent;
}

    .qc-pagination__link:hover {
        text-decoration: underline;
    }

    .qc-pagination__link.is-active {
        font-weight: 600;
        border-color: #265A8F;
    }

    .qc-pagination__link.is-disabled {
        opacity: .45;
        pointer-events: none;
    }

.qc-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
}

/* ≤ 820px */
@media (max-width: 820px) {
    .option-inline {
        flex-wrap: wrap;
    }

        .option-inline .msg-error-inline {
            flex-basis: 100%;
            margin-left: calc(24px + .5rem);
        }
}

/* ≤ 560px */
@media (max-width: 560px) {
    .btn-group {
        gap: 24px;
    }
}

/* Pleine largeur pour les blocs en 1 colonne (desktop + mobile) */
.qc-form .bloc-question.qc-col-1 .input,
.qc-form .bloc-question.qc-col-1 input[type="text"],
.qc-form .bloc-question.qc-col-1 textarea,
.qc-form .bloc-question.qc-col-1 select,
.qc-form .bloc-question.qc-col-1 .qc-select select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* ===== Header (logo + emblème via image blanche) ======================== */
.qc-wrap {
    max-width: var(--qc-container);
    margin: 0 auto;
    padding: 0 1rem; /* = 16px */
}

.qc-header {
    border-bottom: 1px solid var(--qc-border)
}

.qc-topbar {
    background: #095797;
    overflow: visible
}

.qc-subbar {
    background: #1e4466;
    overflow: visible
}

    .qc-topbar .qc-wrap, .qc-subbar .qc-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-block: .75rem
    }

.qc-brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: #FFF;
    text-decoration: none;
    padding: 0;
    line-height: 1
}

    .qc-brand:link, .qc-brand:visited {
        color: #FFF
    }

/* Image du mot-symbole Québec (blanc) */
.qc-brand-img {
    /*height: 48px;*/
    width: auto;
    display: block;
    margin-left: -14px; /* ✅ tire légèrement vers la gauche */
}

.qc-sitename {
    font-weight: 600;
    margin-left: .25rem;
    font-size: 1rem
}

.qc-quick {
    display: flex;
    gap: 1rem
}

.qc-quick-link {
    color: #FFF;
    text-decoration: none;
    font-weight: 400
}

    .qc-quick-link:hover {
        text-decoration: underline
    }

.qc-menu {
    display: flex;
    gap: 1.25rem;
    list-style: none;
    padding: .5rem 0;
    margin: 0
}

.qc-menu-link {
    color: #FFF;
    text-decoration: none;
    font-weight: 600;
    padding: .25rem 0;
    border-bottom: 3px solid transparent
}

    .qc-menu-link:hover, .qc-menu-link:focus {
        border-bottom-color: #FFF
    }

.breadcrumb {
    display: none
}

/* ===== Footer ===== */
.qc-footer {
    margin-top: 2rem
}

.qc-footer-top {
    background: #1e4466;
    color: #FFF;
    padding: 1.5rem 0
}

.qc-footer-title {
    margin: 0 0 .75rem;
    font-size: 1.25rem;
    font-weight: 700
}

.qc-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap
}

    .qc-footer-links a {
        color: #FFF;
        text-decoration: none
    }

        .qc-footer-links a:hover {
            text-decoration: underline
        }

.qc-footer-bottom {
    background: #FFF;
    border-top: 1px solid var(--qc-border)
}
/* conteneur centré */
.qc-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0
}

.qc-footer-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 0
}

.qc-footer-logo {
    height: 71px;
    width: 196px;
    display: block
}

.qc-copy {
    color: var(--qc-muted);
    text-align: center;
    margin-left: 0
}

/* Textareas plein-colonne */
.qc-col-1 .textarea, .qc-col-2 .textarea, .qc-col-3 .textarea {
    width: 100% !important;
    max-width: 100% !important
}

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

/* Sous-questions : indentation sans barre */
.bloc-question.indent-1 {
    padding-left: 1.25rem;
    border-left: 0 !important
}

.bloc-question.indent-2 {
    padding-left: 2rem;
    border-left: 0 !important
}

.bloc-question.indent-3 {
    padding-left: 2.75rem;
    border-left: 0 !important
}

.bloc-question.q-sub1 {
    padding-left: 1rem !important;
    border-left: 0 !important
}

.bloc-question.q-sub2 {
    padding-left: 1.5rem !important;
    border-left: 0 !important
}

/* Tables */
.qc-table th, .qc-table td {
    border-bottom: 1px solid var(--qc-border);
    text-align: left;
    padding: .5rem .5rem
}

.qc-table thead th {
    border-bottom: 2px solid var(--qc-border)
}

.qc-table tr:hover {
    background: #fafbfc
}

.req-star, .required-asterisk {
    color: var(--qc-danger);
    margin-left: .25rem;
    font-weight: 700;
    line-height: 1
}

/*------------- SOMMAIRE DES ERREURS ---------------*/
.qc-summary {
    border: 1px solid #f3c8cc;
    border-left-width: 4px;
    border-left-color: var(--qc-danger);
    background: #fff7f7;
    padding: .75rem 1rem;
    margin: 0 0 1rem;
    border-radius: 4px
}

.qc-summary-title {
    font-weight: 700;
    margin-bottom: .35rem;
    color: var(--qc-danger)
}

.qc-summary-list {
    margin: 0;
    padding-left: 1.25rem
}

    .qc-summary-list li {
        margin: .15rem 0
    }

    .qc-summary-list a {
        color: var(--qc-blue);
        text-decoration: underline;
        cursor: pointer
    }

        .qc-summary-list a:focus {
            outline: 2px solid var(--qc-focus);
            outline-offset: 2px
        }

/* -------- Modal -------- */
.qc-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none
}

    .qc-modal[open] {
        display: block
    }

.qc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5)
}

.qc-modal__dialog {
    position: relative;
    margin: 6vh auto;
    max-width: 900px;
    max-height: 82vh;
    /* clé : la modale ne scrolle pas, c'est son corps qui scrolle */
    overflow: visible;
    background: #FFF;
    border: 1px solid var(--qc-border);
    border-radius: 0 !important;
    padding: 1rem 1.25rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    display: flex; /* pour contraindre le corps */
    flex-direction: column;
}

.qc-modal__close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--qc-muted);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important
}

    .qc-modal__close:hover {
        color: var(--qc-blue)
    }

    .qc-modal__close:focus {
        outline: none !important;
        box-shadow: none !important;
        border-radius: 4px
    }

.qc-modal__title {
    margin: 0 0 .75rem;
    font-size: 1.25rem;
    font-weight: 700;
    position: relative;
    padding-bottom: .5rem
}

    .qc-modal__title::after {
        content: "";
        position: absolute;
        left: .14rem;
        bottom: 0;
        width: 56px;
        height: 4px;
        background: var(--qc-accent);
        border-radius: 2px
    }

.qc-modal__body {
    /* le corps scrolle */
    flex: 1 1 auto;
    overflow: auto;
    /* ajuste si ton header/paddings changent */
    max-height: calc(82vh - 120px);
    /* longs textes & retours à la ligne */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

    .qc-modal__body dl {
        margin: 0
    }

    .qc-modal__body dt {
        font-weight: 600;
        margin-top: .65rem
    }

    .qc-modal__body dd {
        margin-left: 0
    }

#tbl tr.is-archived {
    opacity: .6
}

/* ================== LISTE DÉROULANTE / COMBOBOX ================== */
.qc-select {
    position: relative;
    display: inline-block;
    margin-block: var(--qc-space)
}

    .qc-select select {
        width: var(--qc-input-lg) !important;
        max-width: 100%;
        padding-right: 2.25rem;
        border: 1px solid var(--qc-border);
        border-radius: 0 !important;
        background: #FFF;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
  <path d='M6 9l6 6 6-6' stroke='%230053B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
        background-repeat: no-repeat;
        background-position: right .6rem center;
        background-size: 18px 18px
    }
        /* pas de halo pour le select (clic & clavier) */
        .qc-select select:focus {
            outline: none;
            box-shadow: none;
            border-color: var(--qc-border)
        }

        .qc-select select:focus-visible {
            outline: none;
            box-shadow: none;
            border-color: var(--qc-border)
        }

        .qc-select select:disabled {
            background: #f3f5f8;
            color: #777;
            cursor: not-allowed
        }

/* Tailles officielles */
.qc-select--xl select {
    width: var(--qc-input-xl) !important
}
/* 825px */
.qc-select--lg select {
    width: var(--qc-input-lg) !important
}
/* 528px */
.qc-select--md select {
    width: var(--qc-input-md) !important
}
/* 249px */
.qc-select--sm select {
    width: var(--qc-input-sm) !important
}
/* 156px */
.qc-select--xs select {
    width: var(--qc-input-xs) !important
}
/* 63px */

/* Pleine largeur dans la grille si besoin */
.qc-col-1 .input,
.qc-col-1 input[type="text"],
.qc-col-1 select,
.qc-col-1 textarea,
.qc-col-1 .qc-select select,
.qc-col-2 .qc-select select,
.qc-col-3 .qc-select select {
    width: 100% !important;
    max-width: 100% !important
}

/* Variante: liens rapides empilés verticalement à droite */
.qc-quick--stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem
}

    .qc-quick--stack .qc-quick-link {
        display: inline-block;
        line-height: 1.2
    }

/* ================== Aperçu / Panneau détails ================== */
/* Empêche l’extension horizontale du panneau et force l'enroulement */
#details {
    min-width: 0
}

#details-body {
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    overflow-x: hidden
}
    /* Enroule même les très longues séquences (ex: 4000 chiffres) */
    #details-body, #details-body * {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word
    }

.wrap-anywhere {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word
}

/* -----------------------------
   Alerte rouge - style Québec.ca
--------------------------------*/
.qc-alert {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.95rem 1rem;
    margin: 1.25rem 0 1.5rem 0;
    font-size: 1rem;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.qc-alert--danger {
    background-color: #fbeaea; /* rouge très pâle */
    border-color: #e2b6b6; /* bordure rose/rouge */
    color: #750000; /* texte rouge foncé */
}

    .qc-alert--danger strong {
        font-weight: 700;
        color: #5b0000; /* accent plus sombre sur le mot "Attention" */
    }

/* Icône d’avertissement à gauche (optionnelle) */
.qc-alert::before {
    content: "⚠️";
    font-size: 1.3rem;
    flex-shrink: 0;
    line-height: 1;
}

/* Adaptation mobile */
@media (max-width: 600px) {
    .qc-alert {
        font-size: 0.95rem;
        padding: 0.8rem 0.9rem;
    }
}

/* Sommaire d’erreurs – variante danger (fusionne avec .qc-summary existante) */
.qc-summary.qc-summary--danger {
    background: #fbeaea; /* rouge très pâle */
    border-color: #e2b6b6; /* bordure rose/rouge */
    border-left-color: var(--qc-danger);
    color: #750000; /* texte rouge foncé */
}

/* Garde le sommaire vraiment caché quand hidden */
#qc-validation-summary[hidden] {
    display: none !important;
}

/* Entrées d’erreurs serveur (ex.: “HTML/JS non permis”) */
.qc-summary-list li.server-error a {
    font-weight: 600;
}

/* Liens du sommaire : déjà définis, on précise l’état focus/hover pour accessibilité */
.qc-summary-list a:hover {
    text-decoration: underline;
}

.qc-summary-list a:focus {
    outline: 2px solid var(--qc-focus);
    outline-offset: 2px;
}

.input.field-error,
.textarea.field-error,
input.field-error,
textarea.field-error {
    border-color: #d4342a; /* rouge Québec.ca */
    outline: none;
    box-shadow: 0 0 0 1px rgba(212,52,42,.15);
}

.msg-error[hidden] {
    display: none !important;
}

.msg-error-inline {
    display: block;
    color: #d4342a;
    margin-top: .25rem;
}

/*===================== SECTION BUSYBOXE ======================*/

/* --- Spinner & overlay --- */
.qc-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.75);
    /* IMPORTANT: garder display:flex (pas none) pour laisser le navigateur peindre avant la nav */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483000; /* bien au-dessus de tout */
    opacity: 0;
    visibility: hidden; /* invisible mais mesurable (permet la transition + le paint) */
    transition: opacity .12s linear, visibility 0s linear .12s;
    pointer-events: none; /* ne capte PAS les clics -> ne bloque pas le submit */
}

    .qc-loading-overlay.show {
        opacity: 1;
        visibility: visible;
        transition: opacity .12s linear; /* annule le délai sur visibility */
    }

.qc-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    color: var(--qc-blue, #1B66C9); /* force le bleu Québec pour la roue */
    pointer-events: auto; /* si jamais tu veux que le contenu central reste cliquable */
}

/* La roue : utilise currentColor → prend le bleu automatiquement */
.qc-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: qcspin 2s linear infinite;
}

@keyframes qcspin {
    to {
        transform: rotate(360deg);
    }
}

/* Variante bouton : petite roue inline */
.qc-btn-busy {
    position: relative;
}

    .qc-btn-busy .qc-spinner-mini {
        width: 1em;
        height: 1em;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: qcspin .8s linear infinite;
        display: inline-block;
        vertical-align: -0.2em;
        margin-left: .5rem;
    }

/* Accessibilité / confort visuel */
@media (prefers-reduced-motion: reduce) {
    .qc-spinner {
        animation-duration: 1.6s;
    }
    /* ralentir un peu */
    .qc-loading-overlay {
        transition: none;
    }
}

/*============= FIN SECTION BUSY BOXE ==========================*/