/* ==========================================================================
   Nicomak graphic charter (March 2025), defined once here, on top of Bootstrap's variables:
   CHARTE GRAPHIQUE_Nicomak_110325.pdf, pages 10, 11, 26 and 27.
   - Orange #F27430, main colour: identity (logo, accents) and main buttons. Never text on white (2.87:1). The main
     buttons carry the white text of the charter although it is below the 4.5:1 of RGAA 3.2 (2.87:1, 3.2:1 on hover):
     choice of Nicomak, decision of 14/10/2026 replacing the dark text of 07/10/2026.
   - Blue-green #007367, secondary colour: interactive elements (links, focus, current state, secondary buttons), 5.76:1.
   - Texts #111928 and #647482 (page 26). #647482 reaches 4.5:1 on white and on the page background only.
   - Nunito (page 12), served by the application. Caveat, handwritten, is not used: hard to read in an interface.
   ========================================================================== */
:root {
    --sk-orange: #f27430;
    /* Darker on hover */
    --sk-orange-hover: #e8651f;
    /* Orange with an opacity of 10 % (page 9) */
    --sk-orange-light: #fef1ea;
    --sk-primary: #007367;
    --sk-primary-hover: #005a51;
    --sk-primary-light: #e6f1ef;
    --sk-primary-border: #9cc9c3;
    --sk-danger: #b42318;
    --sk-success: #1a6b3c;
    --sk-success-light: #e7f4ec;
    --sk-warning: #7a4a00;
    --sk-warning-light: #fff1d6;
    --sk-ink: #111928;
    --sk-muted: #647482;
    --sk-border: #d8dfe2;
    /* Border of the form fields: it identifies them, >= 3:1 (RGAA 3.3) */
    --sk-input-border: #737d87;
    /* Light enough for the grey text to keep 4.5:1 (#647482: 4.6:1) */
    --sk-background: #f8fafa;
    --sk-white: #ffffff;
    /* Statuses of the respondents (App\Enum\RespondentStatus): a distinct hue by status, as in SIRH, in the charts of
       the follow-up (categorical palette checked for the colour blindnesses, every pair apart) and the badges, whose
       text takes a dark shade of the hue on a light one (>= 4.5:1) */
    --sk-status-not-invited: #e87ba4;
    --sk-status-not-invited-text: #9b2d5c;
    --sk-status-not-invited-light: #fbe4ee;
    --sk-status-invited: #2a78d6;
    --sk-status-invited-text: #1c5cab;
    --sk-status-invited-light: #e3eefb;
    --sk-status-started: #eda100;
    --sk-status-started-text: #7a4a00;
    --sk-status-started-light: #fdf0d5;
    --sk-status-completed: #008300;
    --sk-status-completed-text: #006300;
    --sk-status-completed-light: #e0f1e0;
    /* Quadrants of the urgency / importance matrix of the reporting (App\Enum\MatrixQuadrant): light tints under the
       points, the dark text kept at >= 4.5:1 */
    --sk-quadrant-priority: #fde3d5;
    --sk-quadrant-anticipate: #e6f1ef;
    --sk-quadrant-watch: #fdf0d5;
    --sk-quadrant-secondary: #f1f3f5;
    /* PESTEL dimensions of the issues in the charts of the reporting (App\Enum\PestelDimension, in its order):
       categorical palette checked for the colour blindnesses on the adjacent axes of the spider charts; always with a
       shape by dimension and the names written, the colour never alone (RGAA 3.1) */
    --sk-pestel-political: #2a78d6;
    --sk-pestel-economic: #eb6834;
    --sk-pestel-social: #1baf7a;
    --sk-pestel-technological: #eda100;
    --sk-pestel-environmental: #008300;
    --sk-pestel-legal: #e87ba4;

    /* Bootstrap overrides */
    --bs-body-font-family: "Nunito Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: var(--sk-ink);
    --bs-body-bg: var(--sk-background);
    --bs-secondary-color: var(--sk-muted);
    --bs-border-color: var(--sk-border);
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;
    --bs-primary: var(--sk-primary);
    --bs-primary-rgb: 0, 115, 103;
    --bs-danger: var(--sk-danger);
    --bs-danger-rgb: 180, 35, 24;
    --bs-link-color: var(--sk-primary);
    --bs-link-color-rgb: 0, 115, 103;
    --bs-link-hover-color: var(--sk-primary-hover);
    --bs-link-hover-color-rgb: 0, 90, 81;
    --bs-focus-ring-color: var(--sk-primary);
    /* Bootstrap's #dc3545 is below 4.5:1 on the page background (RGAA 3.2) */
    --bs-form-invalid-color: var(--sk-danger);
    --bs-form-invalid-border-color: var(--sk-danger);
}

/* Titles in Nunito Bold (charter, page 26) */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

/* Bootstrap buttons do not read --bs-primary: their colours are set per variant */
.btn {
    --bs-btn-font-weight: 700;
}

/* Main button: orange of the charter, with white text (2.87:1, decision of 14/10/2026) */
.btn-primary {
    --bs-btn-color: var(--sk-white);
    --bs-btn-bg: var(--sk-orange);
    --bs-btn-border-color: var(--sk-orange);
    --bs-btn-hover-color: var(--sk-white);
    --bs-btn-hover-bg: var(--sk-orange-hover);
    --bs-btn-hover-border-color: var(--sk-orange-hover);
    --bs-btn-active-color: var(--sk-white);
    --bs-btn-active-bg: var(--sk-orange-hover);
    --bs-btn-active-border-color: var(--sk-orange-hover);
    --bs-btn-disabled-color: var(--sk-white);
    --bs-btn-disabled-bg: var(--sk-orange);
    --bs-btn-disabled-border-color: var(--sk-orange);
}

/* Checked boxes and radios: Bootstrap compiles its own blue, not --bs-primary */
.form-check-input:checked {
    background-color: var(--sk-primary);
    border-color: var(--sk-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--sk-primary);
    --bs-btn-border-color: var(--sk-primary);
    --bs-btn-hover-bg: var(--sk-primary);
    --bs-btn-hover-border-color: var(--sk-primary);
    --bs-btn-active-bg: var(--sk-primary);
    --bs-btn-active-border-color: var(--sk-primary);
    --bs-btn-disabled-color: var(--sk-primary);
    --bs-btn-disabled-border-color: var(--sk-primary);
}

.btn-danger,
.btn-outline-danger {
    --bs-btn-border-color: var(--sk-danger);
    --bs-btn-hover-bg: var(--sk-danger);
    --bs-btn-hover-border-color: var(--sk-danger);
    --bs-btn-active-bg: var(--sk-danger);
    --bs-btn-active-border-color: var(--sk-danger);
}

.btn-danger {
    --bs-btn-bg: var(--sk-danger);
}

.btn-outline-danger {
    --bs-btn-color: var(--sk-danger);
}

.form-control,
.form-select,
.form-check-input {
    border-color: var(--sk-input-border);
}

/* A button never wider than its container, even with enlarged text (RGAA 10.4) */
.btn {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Icon on the left of the button text */
.btn .bi {
    margin-right: .375rem;
}

/* Column layout so that the footer stays at the bottom of short pages */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Long words (email addresses, URLs) are broken rather than overflowing when the text is enlarged (RGAA 10.4) */
    overflow-wrap: break-word;
}

/*
 * Visible focus (RGAA 10.7): Bootstrap removes the outline of buttons and fields
 * and replaces it with a pale shadow (25 % opacity), below 3:1.
 */
:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    outline: 2px solid var(--sk-primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* Skip link (RGAA 12.7) */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    max-width: 100%;
    padding: .5rem 1rem;
    background: var(--sk-white);
    transform: translateY(-100%);
}

.skip-link:focus {
    transform: none;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    min-height: 4rem;
    padding: .75rem 1.5rem;
    background: var(--sk-white);
    /* Orange of the charter: decorative line */
    border-bottom: 3px solid var(--sk-orange);
}

/* Logo of Nicomak, then the name of the application */
.site-header__brand {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    color: var(--sk-ink);
    text-decoration: none;
}

/* Above the minimum size of the charter for the web (100 px wide) */
.site-header__logo {
    width: auto;
    max-width: 100%;
    height: 2rem;
    object-fit: contain;
}

.site-header__app {
    /* The name of the application on two lines if needed, the menu kept on one line on a computer */
    max-width: 10rem;
    padding-left: .75rem;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.15;
    border-left: 1px solid var(--sk-border);
}

.site-header__brand:hover .site-header__app {
    color: var(--sk-primary);
}

.site-header__nav {
    flex: 1;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav__link {
    display: inline-block;
    padding: .5rem .25rem;
    font-weight: 600;
    color: var(--sk-ink);
    text-decoration: none;
    /* Room for the current page marker, so that the items do not move */
    border-bottom: 3px solid transparent;
}

.main-nav__link:hover {
    color: var(--sk-primary);
}

/* Current page or section: marked by a border, not by colour only (RGAA 3.1) */
.main-nav__link[aria-current] {
    color: var(--sk-primary);
    border-bottom-color: var(--sk-primary);
}

.main-nav__link .bi {
    margin-right: .375rem;
}

.site-header__user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.site-header__name .bi {
    margin-right: .375rem;
}

/* ==========================================================================
   Pages reachable without being logged in (login, forgotten password)
   ========================================================================== */
.auth-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 26rem;
    margin: auto;
    padding: 2rem;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    /* Orange of the charter: decorative line */
    border-top: 4px solid var(--sk-orange);
    border-radius: var(--bs-border-radius-lg);
}

.auth-card__brand {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* Above the minimum size of the charter for the web (100 px wide) */
.auth-card__logo {
    align-self: flex-start;
    width: auto;
    /* Never wider than the card, even with enlarged text (RGAA 10.4) */
    max-width: 100%;
    height: 2.5rem;
    object-fit: contain;
    object-position: left;
    margin-bottom: .5rem;
}

.auth-card__app {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--sk-ink);
}

.auth-card__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.auth-card__link {
    display: inline-block;
    margin-top: .5rem;
}

.form-intro {
    font-size: .875rem;
    color: var(--sk-muted);
}

/* ==========================================================================
   Page layout
   ========================================================================== */
.site-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem;
}

.site-main:focus {
    outline: none;
}

.page-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.page-heading__text {
    display: flex;
    flex: 1 1 20rem;
    flex-direction: column;
    gap: .5rem;
    /* Can shrink below its longest word, which is then broken (body overflow-wrap) */
    min-width: 0;
    max-width: 50rem;
}

.page-heading__actions:empty {
    display: none;
}

/* Heading H1 of the charter: Nunito Bold (page 26) */
.page-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.page-subtitle {
    margin: 0;
    color: var(--sk-muted);
}

/* Small uppercase title above a page or panel title */
.eyebrow {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sk-primary);
}

/* ==========================================================================
   Components
   ========================================================================== */
/* Bootstrap uses the page background (grey) for modals */
.confirm-modal {
    --bs-modal-bg: var(--sk-white);
}

.confirm-modal .modal-title {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Add button at the bottom of a list */
.btn-dashed {
    --bs-btn-color: var(--sk-primary);
    --bs-btn-bg: var(--sk-white);
    /* The dashed border identifies the button: >= 3:1 (RGAA 3.3) */
    --bs-btn-border-color: var(--sk-primary);
    --bs-btn-hover-bg: var(--sk-primary-light);
    --bs-btn-hover-color: var(--sk-primary);
    --bs-btn-hover-border-color: var(--sk-primary);
    --bs-btn-active-bg: var(--sk-primary-light);
    --bs-btn-active-color: var(--sk-primary);
    --bs-btn-font-weight: 600;
    width: 100%;
    min-height: 2.75rem;
    border-style: dashed;
}

/* Icon only button: the accessible name is a visually hidden text, repeated as a tooltip */
.btn-icon {
    --bs-btn-color: var(--sk-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--sk-primary);
    --bs-btn-hover-bg: var(--sk-primary-light);
    --bs-btn-hover-border-color: var(--sk-primary-border);
    --bs-btn-active-color: var(--sk-primary);
    --bs-btn-active-bg: var(--sk-primary-light);
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
}

.btn-icon .bi {
    margin: 0;
}

/* Badges: the information is written, colour only reinforces it (RGAA 3.1) */
.badge-label {
    display: inline-block;
    padding: .1875rem .5rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    border-radius: var(--bs-border-radius-sm);
}

.badge-label--success {
    color: var(--sk-success);
    background: var(--sk-success-light);
}

.badge-label--primary {
    color: var(--sk-primary);
    background: var(--sk-primary-light);
}

.badge-label--warning {
    color: var(--sk-warning);
    background: var(--sk-warning-light);
}

.badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.badge-label--neutral {
    color: var(--sk-muted);
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
}

/* Status of a respondent (RespondentStatus::badgeVariant()): the colours of the charts of the follow-up, a dot of the
   hue itself before the label */
.badge-label--status-not_invited { --status: var(--sk-status-not-invited); color: var(--sk-status-not-invited-text); background: var(--sk-status-not-invited-light); }
.badge-label--status-invited { --status: var(--sk-status-invited); color: var(--sk-status-invited-text); background: var(--sk-status-invited-light); }
.badge-label--status-started { --status: var(--sk-status-started); color: var(--sk-status-started-text); background: var(--sk-status-started-light); }
.badge-label--status-completed { --status: var(--sk-status-completed); color: var(--sk-status-completed-text); background: var(--sk-status-completed-light); }

[class*="badge-label--status-"]::before {
    content: "";
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-right: .375rem;
    vertical-align: .05em;
    background: var(--status);
    border-radius: 50%;
}

/* Data tables */
.data-table {
    /* Containing block of the visually hidden texts (absolute): otherwise they escape the scroll and widen the page */
    position: relative;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-radius: var(--bs-border-radius-lg);
    /* Horizontal scroll only: a rounding pixel would otherwise add a vertical scrollbar */
    overflow-y: hidden;
}

.data-table .table {
    --bs-table-bg: var(--sk-white);
    margin: 0;
}

.data-table th,
.data-table td {
    padding: .75rem 1rem;
    vertical-align: middle;
}

.data-table thead th {
    font-size: .875rem;
    color: var(--sk-muted);
    white-space: nowrap;
}

.data-table__inactive th,
.data-table__inactive td {
    color: var(--sk-muted);
}

.data-table__actions {
    white-space: nowrap;
    text-align: right;
}

/* Tabs of a list (e.g. active / archived): links, the current one marked by a border, not by colour only (RGAA 3.1) */
.segmented-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
    border-bottom: 1px solid var(--sk-border);
}

.segmented-nav__link {
    padding: .5rem 0;
    font-weight: 600;
    color: var(--sk-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.segmented-nav__link:hover {
    color: var(--sk-primary);
}

.segmented-nav__link[aria-current] {
    color: var(--sk-primary);
    border-bottom-color: var(--sk-primary);
}

/* Navigation of a dialogue (dialogue/_nav.html.twig): back to the list, then its sections */
.dialogue-nav {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.back-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-weight: 600;
}

.dialogue-nav .segmented-nav__link .bi {
    margin-right: .375rem;
}

/* List of the dialogues (home page): organisation under the title, actions stacked as in SIRH */
.dialogue-list__organization {
    display: block;
    font-size: .875rem;
    font-weight: 400;
    color: var(--sk-muted);
}

.dialogue-list__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .375rem;
    min-width: 13rem;
}

.dialogue-list__actions .btn {
    --bs-btn-padding-y: .25rem;
    --bs-btn-font-size: .875rem;
    text-align: left;
}

/* Status under a page title (block "meta" of commons/_page_title.html.twig) */
.page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    margin: 0;
    color: var(--sk-muted);
}

/* Settings of a dialogue (dialogue/show.html.twig): a card by theme, as in SIRH */
.settings-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
    gap: 1rem;
}

.settings-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-radius: var(--bs-border-radius-lg);
}

.settings-card__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: 1rem 1.25rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--sk-border);
}

.settings-card__title .bi {
    font-size: 1.25rem;
    color: var(--sk-orange);
}

.settings-card__body {
    display: grid;
    flex: 1;
    align-content: start;
    gap: .75rem;
    margin: 0;
    padding: 1rem 1.25rem;
}

.settings-card__body dt {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sk-muted);
}

.settings-card__body dd {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0;
}

.settings-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--sk-border);
}

.settings-card__actions .btn {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .625rem;
    --bs-btn-font-size: .875rem;
}

/* Title of a section of a page, with its actions on the right */
.section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: 1rem;
}

.section-heading__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Flag of a language (commons/_flag.html.twig): a thin border keeps the white of the flags visible on white */
.flag {
    display: inline-block;
    vertical-align: middle;
    object-fit: cover;
    border: 1px solid var(--sk-border);
    border-radius: 2px;
}

/* Search above a list */
.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    max-width: 36rem;
}

.search-form .form-control {
    flex: 1 1 14rem;
    min-width: 0;
}

.search-summary {
    margin: 0;
}

.search-summary a {
    margin-left: .5rem;
}

/* Empty list */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-radius: var(--bs-border-radius);
}

.empty-state__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.empty-state__text {
    margin: 0;
    color: var(--sk-muted);
}

/* Same width as an icon button: keeps the action buttons aligned from one row to the next */
.btn-placeholder {
    display: inline-block;
    width: 2.25rem;
}

/* Sections of the library: a block of questions, a PESTEL dimension */
.library-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.library-block__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.library-block__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    /* In a flex container, overflow-wrap: break-word does not break a long word (e.g. « Environnemental » enlarged) */
    overflow-wrap: anywhere;
}

.library-block__count {
    font-weight: 400;
    color: var(--sk-muted);
}

.library-block__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.library-block__note {
    margin: 0;
    color: var(--sk-muted);
}

/* Personalisation of the questionnaire of a dialogue: counters checked before the publication (§5.4) */
.questionnaire-counters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Deactivated question or issue: the state is also written in a badge (RGAA 3.1) */
.data-table__row--inactive > * {
    --bs-table-bg: var(--sk-background);
}

.data-table__row--inactive .library-question__label {
    font-weight: 400;
}

.library-question {
    min-width: 16rem;
}

.library-question__label {
    display: block;
    font-weight: 600;
}

.library-question__help {
    display: block;
    font-size: .875rem;
    font-weight: 400;
    color: var(--sk-muted);
}

.library-question__options {
    margin-top: .25rem;
    font-size: .875rem;
}

.library-question__options ol {
    margin: .25rem 0 0;
    padding-left: 1.25rem;
}

/* Entries of a collection of a form (collection Stimulus controller) */
.collection {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.collection__fieldset {
    padding: 1rem;
    border: 1px solid var(--sk-border);
    border-radius: var(--bs-border-radius);
}

.collection__legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 .25rem;
    font-size: 1rem;
    font-weight: 700;
}

.collection__free-text {
    align-self: end;
}

.collection__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .25rem;
}

.form-card__hint {
    color: var(--sk-muted);
}

/* Side panel: Bootstrap offcanvas (commons/_offcanvas.html.twig), or full page without JavaScript */
.side-panel {
    --bs-offcanvas-width: min(32rem, 100%);
    --bs-offcanvas-border-width: 4px;
    --bs-offcanvas-border-color: var(--sk-orange);
    --bs-offcanvas-bg: var(--sk-white);
}

/* Bootstrap focuses the dialog container when it opens: no outline around the whole panel (not an interactive element) */
.side-panel:focus {
    outline: none;
}

.side-panel turbo-frame {
    display: block;
    height: 100%;
}

.side-panel__content {
    display: flex;
    flex-direction: column;
    max-width: 32rem;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-radius: var(--bs-border-radius);
}

.side-panel .side-panel__content {
    height: 100%;
    max-width: none;
    border: 0;
    border-radius: 0;
}

.side-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--sk-border);
}

.side-panel__title {
    min-width: 0;
    margin: .25rem 0 0;
    font-size: 1.375rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.side-panel__form {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.side-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.side-panel__footer {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--sk-border);
}

/* Steps of a process, e.g. the creation of a dialogue (commons/_stepper.html.twig) */
.stepper {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.stepper__step {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    color: var(--sk-muted);
    counter-increment: step;
    /* « Questionnaire » enlarged at 320px (RGAA 10.11) */
    overflow-wrap: anywhere;
}

.stepper__step::before {
    content: counter(step);
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-weight: 700;
    border: 2px solid currentColor;
    border-radius: 50%;
}

/* Current step: bold, filled, not marked by colour only (RGAA 3.1) */
.stepper__step[aria-current] {
    font-weight: 700;
    color: var(--sk-primary);
}

.stepper__step[aria-current]::before {
    color: var(--sk-white);
    background: var(--sk-primary);
    border-color: var(--sk-primary);
}

.stepper__step--done {
    color: var(--sk-ink);
}

.stepper__step--done::before {
    content: "✓";
}

/* Organisation name with its logo */
.organization-name {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.organization-name__logo {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

/* Forms */
.form-card {
    padding: 2rem;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-radius: var(--bs-border-radius-lg);
}

.form-card__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0 1.5rem;
}

.form-card + .form-card {
    margin-top: 0;
}

.form-card__title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Label / value pairs (e.g. information of a dialogue) */
.summary-list {
    display: grid;
    gap: .75rem;
    margin: 0;
}

.summary-list > div {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: .25rem 1rem;
}

.summary-list dt {
    font-weight: 600;
    color: var(--sk-muted);
}

.summary-list dd {
    margin: 0;
}

.dialogue-organization a {
    margin-left: .75rem;
}

.form-card__fieldset {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sk-border);
}

.form-card__legend {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.form-card__logo {
    display: block;
    max-width: min(10rem, 100%);
    max-height: 5rem;
    margin-bottom: 1rem;
    object-fit: contain;
}

.form-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

/* Next to the floating checkbox, overflow-wrap: break-word does not break a long word when the text is enlarged */
.form-check-label {
    overflow-wrap: anywhere;
}

/* Required fields (RGAA 11.10): explained by .form-intro above the form */
.form-label.required::after,
.col-form-label.required::after {
    content: " *";
}

.flash-message {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    /* Long words enlarged on a phone (RGAA 10.11): the text of the alert shrinks with its container */
    overflow-wrap: anywhere;
}

.flash-message > :not(.bi) {
    min-width: 0;
}

/* Conditions of the publication (dialogue/_publication_conditions.html.twig): the state is also written (RGAA 3.1) */
.checklist {
    display: grid;
    gap: .75rem;
    padding: 0;
    margin: 0 0 1rem;
    list-style: none;
}

.checklist__item {
    display: flex;
    gap: .5rem;
    align-items: baseline;
}

.checklist__item--met > .bi {
    color: var(--sk-success);
}

.checklist__item--missing > .bi {
    color: var(--sk-danger);
}

.checklist__text {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.checklist__label {
    font-weight: 600;
}

.checklist__problem {
    color: var(--sk-muted);
}

.publication-alert .checklist {
    margin: 0;
}

.publication-alert .checklist__problem {
    color: inherit;
}

.history {
    padding-left: 1.25rem;
    margin: 0;
}

/* Anonymization of the respondents (dialogue/respondent/_anonymization.html.twig) */
.anonymization {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    align-items: center;
    margin-top: 1rem;
}

/* Invitations and reminders (dialogue/respondent/_emails_form.html.twig) */
.emails-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Live interview (dialogue/interview/page.html.twig): every page reachable */
.interview-pages ol {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.interview-pages a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    font-weight: 600;
    color: var(--sk-primary);
    border: 1px solid var(--sk-primary-border);
    border-radius: .5rem;
    text-decoration: none;
}

.interview-pages a:hover {
    background: var(--sk-primary-light);
}

.interview-pages a[aria-current] {
    color: var(--sk-white);
    background: var(--sk-primary);
    border-color: var(--sk-primary);
}

.interview-card {
    max-width: none;
    margin: 0;
}

/* Indicators of the collection (dialogue/respondent/_indicators.html.twig), as in SIRH */
.indicators {
    display: grid;
    gap: 1rem;
}

/* Yellow and pink are under 3:1 on white: the values are always written beside and the segments separated by a gap,
   the colour is never the only means (RGAA 3.1, 3.3) */
.status-bar__segment--not_invited { background: var(--sk-status-not-invited); }
.status-bar__segment--invited { background: var(--sk-status-invited); }
.status-bar__segment--started { background: var(--sk-status-started); }
.status-bar__segment--completed { background: var(--sk-status-completed); }

.status-tiles {
    display: grid;
    /* One column on a phone, the text enlarged included (RGAA 10.11) */
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.status-tile {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    height: 100%;
    padding: 1rem 1.25rem;
    color: var(--sk-ink);
    text-decoration: none;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-radius: var(--bs-border-radius-lg);
}

.status-tile:hover {
    border-color: var(--sk-primary);
}

.status-tile__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
}

.status-tile__label .bi {
    color: var(--sk-orange);
}

.status-tile__swatch {
    flex: none;
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 2px;
}

.status-tile__value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
}

.status-tile__hint {
    font-size: .875rem;
    color: var(--sk-muted);
}

.indicator-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 1rem;
}

.indicator {
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 1rem 1.25rem;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-radius: var(--bs-border-radius-lg);
}

.indicator__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 700;
}

.indicator__title .bi {
    font-size: 1.25rem;
    color: var(--sk-orange);
}

.indicator__value {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
}

/* Stacked bar: a 2px gap of the surface between the segments */
.status-bar {
    display: flex;
    gap: 2px;
    height: .875rem;
    margin-top: .5rem;
    overflow: hidden;
    border-radius: 4px;
}

.status-bar__segment {
    min-width: 2px;
}

.status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    padding: 0;
    margin: .75rem 0 0;
    font-size: .875rem;
    color: var(--sk-muted);
    list-style: none;
}

.status-legend li {
    display: flex;
    align-items: center;
    gap: .375rem;
}

/* Bars with their label and value (by mode) */
.bar-list {
    display: grid;
    gap: .875rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.bar-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem 1rem;
}

.bar-list__label {
    font-size: .9375rem;
}

.bar-list__value {
    font-weight: 700;
    text-align: right;
}

.bar-list li > .status-bar {
    grid-column: 1 / -1;
    margin: 0;
}

/* Histogram of the respondents by category (dialogue/respondent/_category_histogram.html.twig): a column by category,
   --ratio of the highest one, its value written above it, the labels aligned under a common baseline */
.histogram {
    --histogram-height: 10rem;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    column-gap: .5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.histogram__item {
    display: grid;
    /* The tallest column and its value above */
    grid-template-rows: calc(var(--histogram-height) + 1.75rem) auto;
    grid-template-areas: "bar" "label";
    justify-items: center;
    min-width: 0;
}

.histogram__label {
    grid-area: label;
    justify-self: stretch;
    padding-top: .5rem;
    font-size: .8125rem;
    line-height: 1.3;
    text-align: center;
    hyphens: auto;
    border-top: 2px solid var(--sk-border);
}

.histogram__value {
    grid-area: bar;
    align-self: end;
    margin-bottom: calc(var(--ratio) * var(--histogram-height) + .25rem);
    font-weight: 700;
}

.histogram__bar {
    grid-area: bar;
    align-self: end;
    display: flex;
    /* « Terminé » at the bottom */
    flex-direction: column-reverse;
    gap: 2px;
    width: min(3.5rem, 100%);
    height: calc(var(--ratio) * var(--histogram-height));
    overflow: hidden;
    border-radius: 4px 4px 0 0;
}

.histogram__bar > span {
    min-width: 2px;
    min-height: 2px;
}

/* Narrow screen: a row by category, the label then the value, the bar under them */
@media (max-width: 48em) {
    .histogram {
        grid-auto-columns: auto;
        grid-auto-flow: row;
        row-gap: .875rem;
    }

    .histogram__item {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto;
        grid-template-areas: "label value" "bar bar";
        gap: .25rem 1rem;
        justify-items: stretch;
    }

    .histogram__label {
        padding: 0;
        font-size: .9375rem;
        text-align: left;
        border: 0;
    }

    .histogram__value {
        grid-area: value;
        align-self: start;
        margin: 0;
    }

    .histogram__bar {
        flex-direction: row;
        width: calc(var(--ratio) * 100%);
        height: .625rem;
        border-radius: 4px;
    }
}

/* Forced colours (Windows high contrast): the bars keep a visible outline */
@media (forced-colors: active) {
    .status-bar__segment,
    .status-tile__swatch,
    .histogram__bar > span,
    .pestel-mark,
    .option-bars__bar {
        forced-color-adjust: none;
    }
}

/* Filters of a list (dialogue/respondent/index.html.twig) */
.list-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: flex-end;
}

.list-filters .form-group,
.list-filters > div {
    min-width: 0;
}

/* ==========================================================================
   Reporting (templates/dialogue/report/, §9)
   ========================================================================== */
.report-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    align-items: center;
}

.report-filter > div:first-child {
    flex: 1 1 20rem;
    min-width: 0;
}

.report-summary {
    margin: 0;
    font-weight: 600;
}

.report-section,
.report-issue,
.report-issue__questions {
    display: grid;
    gap: 1rem;
}

/* The two spider charts side by side (§9.2), one below the other on a narrow screen */
.report-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
    gap: 1.5rem;
}

.report-chart {
    min-width: 0;
    padding: 1rem;
    margin: 0;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-radius: .75rem;
}

/* A chart alone on its row, the criticality after the urgency and the importance: the whole width */
.report-chart:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.report-chart__title {
    margin-bottom: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
}

.report-chart__canvas {
    position: relative;
    height: 26rem;
}

/* Urgency / importance matrix (dialogue/report/_matrix.html.twig): the chart on the whole width, the names of the
   issues on it, then the numbered issues in columns */
.report-matrix {
    display: grid;
    gap: 1.5rem;
}

.report-chart__canvas--matrix {
    height: 38rem;
}

.report-matrix__issues {
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-wrap: anywhere;
    columns: 3 16rem;
    column-gap: 1.5rem;
}

.report-matrix__issues li {
    display: grid;
    margin-bottom: .5rem;
    break-inside: avoid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .125rem .625rem;
    align-items: center;
}

.report-matrix__issues .pestel-mark {
    grid-row: span 2;
}

/* Legend of the PESTEL dimensions (dialogue/report/_pestel_legend.html.twig) */
.pestel-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
    padding: 0;
    margin: 0 0 1rem;
    font-size: .875rem;
    list-style: none;
}

.pestel-legend li {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Shape of the points of a dimension, as in the charts (PESTEL_MARKERS, assets/lib/report_chart.js) */
.pestel-mark {
    flex: none;
    width: .875rem;
    height: .875rem;
    background: var(--pestel, var(--sk-muted));
}

/* Without dimension: a grey circle */
.pestel-mark:not([class*="pestel-mark--"]) {
    border-radius: 50%;
}

.pestel-mark--political { --pestel: var(--sk-pestel-political); border-radius: 50%; }
.pestel-mark--economic { --pestel: var(--sk-pestel-economic); }
.pestel-mark--social { --pestel: var(--sk-pestel-social); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pestel-mark--technological { --pestel: var(--sk-pestel-technological); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pestel-mark--environmental { --pestel: var(--sk-pestel-environmental); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pestel-mark--legal { --pestel: var(--sk-pestel-legal); clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }

.report-matrix__quadrant {
    justify-self: start;
    padding: 0 .5rem;
    font-size: .8125rem;
    color: var(--sk-muted);
    border-radius: 999px;
}

.report-matrix__quadrant--priority { color: var(--sk-ink); background: var(--sk-quadrant-priority); }
.report-matrix__quadrant--anticipate { color: var(--sk-ink); background: var(--sk-quadrant-anticipate); }
.report-matrix__quadrant--watch { color: var(--sk-ink); background: var(--sk-quadrant-watch); }
.report-matrix__quadrant--secondary { color: var(--sk-ink); background: var(--sk-quadrant-secondary); }

@media (max-width: 62em) {
    .report-chart__canvas--matrix {
        height: 26rem;
    }
}

/* Results by issue in tabs (dialogue/report/_issue_tabs.html.twig): the issues on the left, the panel beside them,
   both in the colour of the PESTEL dimension of the issue (--pestel) */
.report-tabs {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.report-tabs__list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: .25rem;
}

.report-tabs__tab {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .5rem .75rem;
    font-size: .9375rem;
    line-height: 1.3;
    color: var(--sk-ink);
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: .5rem;
}

.report-tabs__label {
    flex: 1;
    min-width: 0;
}

/* Criticality of the issue, by which the list can be sorted */
.report-tabs__score {
    flex: none;
    font-size: .875rem;
    font-weight: 700;
    color: var(--sk-muted);
}

.report-tabs__sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin-bottom: .75rem;
    font-size: .875rem;
}

.report-tabs__sort-label {
    margin-right: .25rem;
    color: var(--sk-muted);
}

.report-tabs__sort-button {
    padding: .25rem .75rem;
    font-weight: 600;
    color: var(--sk-primary);
    background: var(--sk-white);
    border: 1px solid var(--sk-primary-border);
    border-radius: 999px;
}

.report-tabs__sort-button[aria-pressed="true"] {
    color: var(--sk-white);
    background: var(--sk-primary);
    border-color: var(--sk-primary);
}

.report-tabs__sort-button:focus-visible {
    outline: 3px solid var(--sk-primary);
    outline-offset: 2px;
}

.report-tabs__tab:hover {
    background: var(--sk-primary-light);
}

.report-tabs__tab.active {
    font-weight: 700;
    background: var(--sk-white);
    border-color: var(--sk-border);
    box-shadow: inset 4px 0 0 var(--pestel);
}

.report-tabs__tab:focus-visible {
    outline: 3px solid var(--sk-primary);
    outline-offset: 2px;
}

@media (max-width: 62em) {
    .report-tabs {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-tabs__list {
        flex-flow: row wrap;
    }

    .report-tabs__tab {
        width: auto;
    }
}

.report-issue {
    padding: 1.25rem;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-top: 6px solid var(--pestel, var(--sk-border));
    border-radius: .75rem;
    overflow-wrap: anywhere;
}

/* The panel shown keeps its grid, over the display: block of Bootstrap */
.tab-content > .report-issue.active {
    display: grid;
}

.report-issue__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    margin: 0;
    color: var(--sk-muted);
}

.report-issue__dimension {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--sk-ink);
}

.report-issue__subtitle {
    margin: .5rem 0 0;
    font-size: 1rem;
    font-weight: 700;
}

/* The scores of the issue in large, each with the colour of its dimension on its left */
.score-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: 1rem;
    margin: 0;
}

.score-tile {
    padding: .75rem 1rem;
    background: var(--sk-background);
    border-left: 4px solid var(--pestel, var(--sk-border));
    border-radius: .5rem;
}

.score-tile__label {
    font-size: .875rem;
    font-weight: 700;
    color: var(--sk-muted);
}

.score-tile__value {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.score-tile__max {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sk-muted);
}

.score-tile__hint {
    margin: 0;
    font-size: .875rem;
    color: var(--sk-muted);
}

.report-issue__title,
.report-question__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.report-question__title {
    font-size: 1rem;
}

.report-question {
    display: grid;
    gap: .5rem;
    min-width: 0;
}

.report-question__summary {
    margin: 0;
    color: var(--sk-muted);
}

/* A closed question: a card, a horizontal bar by option (dialogue/report/_question.html.twig) */
.report-question--card {
    padding: 1rem 1.25rem;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-radius: .75rem;
}

/* The closed questions of the tab « Autres questions », side by side */
.report-questions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
    gap: 1rem;
    align-items: start;
}

.option-bars {
    display: grid;
    gap: .625rem;
    padding: 0;
    margin: .25rem 0 0;
    list-style: none;
}

.option-bars__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem 1rem;
}

.option-bars__label {
    font-size: .9375rem;
}

.option-bars__value {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.option-bars__percent {
    font-weight: 400;
    color: var(--sk-muted);
}

/* Bar on 100 % of the answers: one hue, the same measure for every option */
.option-bars__track {
    grid-column: 1 / -1;
    display: block;
    height: .625rem;
    overflow: hidden;
    background: var(--sk-primary-light);
    border-radius: 4px;
}

.option-bars__bar {
    display: block;
    height: 100%;
    background: var(--sk-primary);
    border-radius: 4px;
}

/* « Je ne sais pas »: apart from the levels of the scale, in grey */
.option-bars__item--dont-know .option-bars__label {
    font-style: italic;
    color: var(--sk-muted);
}

.option-bars__item--dont-know .option-bars__bar {
    background: var(--sk-muted);
}

/* Sections of the reporting in horizontal tabs (dialogue/report/index.html.twig) */
.report-sections {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 1.5rem 0;
    border-bottom: 2px solid var(--sk-border);
}

.report-sections__tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    margin-bottom: -2px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sk-muted);
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
}

.report-sections__tab:hover {
    color: var(--sk-ink);
}

.report-sections__tab.active {
    color: var(--sk-primary);
    border-bottom-color: var(--sk-orange);
}

.report-sections__tab:focus-visible {
    outline: 3px solid var(--sk-primary);
    outline-offset: -3px;
}

.tab-content > .report-sections__panel.active {
    display: grid;
    gap: 2rem;
}

.verbatims {
    display: grid;
    gap: .75rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.verbatim {
    padding: .75rem 1rem;
    background: var(--sk-background);
    border-left: 3px solid var(--sk-primary-border);
    border-radius: .25rem;
}

.verbatim__text {
    margin: 0;
}

.verbatim__context {
    margin: .25rem 0 0;
    font-size: .875rem;
    color: var(--sk-muted);
}

/* Result of « Copier le lien » (clipboard controller): the link itself when it cannot be copied */
.copy-status {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
    user-select: all;
}

.copy-status:empty {
    display: none;
}

/* Preview of the questionnaire (dialogue/preview.html.twig): one page per block, as for the respondents (§7.3) */
.preview {
    display: grid;
    gap: 1.5rem;
    /* Long words enlarged on a phone (§10.4, RGAA 10.11) */
    overflow-wrap: anywhere;
}

.preview-page {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
    padding: 1.5rem;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-radius: .75rem;
}

.preview-page__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
}

.preview-page__subtitle {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.preview-page__number {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--sk-muted);
}

/* ==========================================================================
   Respondent journey (templates/respondent/), also shown by the preview: usable on a phone from 360px (§10.4)
   ========================================================================== */
.respondent-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.5rem;
    background: var(--sk-white);
    border-bottom: 3px solid var(--sk-orange);
}

.respondent-header__logo {
    max-width: 8rem;
    max-height: 3rem;
}

.respondent-header__name {
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.respondent-card {
    display: grid;
    gap: 1.25rem;
    max-width: 48rem;
    min-width: 0;
    padding: 2rem;
    margin: 0 auto;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-radius: .75rem;
    overflow-wrap: anywhere;
}

.respondent-page {
    display: grid;
    gap: 1.25rem;
}

/* Name of the block or of the issue: large, bold, underlined by the orange of the charter (decorative) */
.respondent-page__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    padding-bottom: .75rem;
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.2;
    border-bottom: 3px solid var(--sk-orange);
}

.preview .respondent-page__title {
    font-size: 1.625rem;
}

/* Name of the block above the issue it qualifies */
.respondent-page > .eyebrow {
    margin-bottom: -.5rem;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.respondent-page__subtitle {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

/* « Enjeu 1 sur 4 »: a pill above the name of the issue */
.respondent-page__counter {
    padding: .25rem .625rem;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sk-primary);
    background: var(--sk-primary-light);
    border-radius: 999px;
}

.respondent-page__description {
    font-size: 1.0625rem;
    color: var(--sk-muted);
}

.respondent-page__description,
.respondent-page__final {
    margin: 0;
}

.respondent-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.respondent-progress {
    display: grid;
    gap: .25rem;
}

.respondent-progress__label {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--sk-muted);
}

.respondent-progress__bar {
    width: 100%;
    height: .5rem;
    accent-color: var(--sk-primary);
}

.respondent-privacy {
    padding: 1rem;
    background: var(--sk-background);
    border-radius: .5rem;
}

.respondent-issues {
    display: grid;
    gap: .5rem;
    margin: 0;
}

.respondent-issues__description {
    display: block;
}

/* Answer to a question (App\Form\Respondent\AnswerType) */
.answer {
    min-width: 0;
}

.answer legend,
.answer .form-label {
    font-size: 1.0625rem;
    font-weight: 700;
}

.answer__required {
    font-weight: 400;
    color: var(--sk-muted);
}

/* Options of a question as cards (AnswerType): the whole card is the label of the native radio button or checkbox,
   kept visible inside it; chosen, the card takes the colour of the interface. One column for the choices, side by
   side for the scales, one column on a phone or with the text enlarged (RGAA 10.11) */
.answer-choices {
    display: grid;
    gap: .5rem;
    margin-top: .5rem;
}

/* 4 levels and « Je ne sais pas » on a line; 2 columns on a phone */
.answer-choices--scale {
    grid-template-columns: repeat(auto-fit, minmax(min(7.25rem, 100%), 1fr));
}

.answer-choices .form-check {
    position: relative;
    min-height: 0;
    padding: 0;
    margin: 0;
}

.answer-choices .form-check-input {
    position: absolute;
    top: 50%;
    left: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    transform: translateY(-50%);
}

.answer-choices .form-check-label {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 3.25rem;
    padding: .75rem 1rem .75rem 2.875rem;
    line-height: 1.35;
    cursor: pointer;
    background: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-radius: var(--bs-border-radius-lg);
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.answer-choices .form-check:hover .form-check-label {
    border-color: var(--sk-primary);
    background: var(--sk-background);
}

/* Scales: the radio button centred above its label, the cards of a same height */
.answer-choices--scale .form-check-input {
    top: .875rem;
    left: 50%;
    transform: translateX(-50%);
}

.answer-choices--scale .form-check-label {
    flex-direction: column;
    justify-content: center;
    padding: 2.75rem .75rem .875rem;
    text-align: center;
}

/* « Je ne sais pas »: a dashed border, apart from the levels of the scale */
.answer-choices .form-check:has([data-dont-know]) .form-check-label {
    color: var(--sk-muted);
    border-style: dashed;
    border-color: var(--sk-input-border);
}

/* Chosen: border doubled and tint, the checked radio button too, so not told by colour only (RGAA 3.1) */
.answer-choices .form-check:has(.form-check-input:checked) .form-check-label {
    font-weight: 600;
    color: var(--sk-ink);
    border-style: solid;
    background: var(--sk-primary-light);
    border-color: var(--sk-primary);
    box-shadow: inset 0 0 0 1px var(--sk-primary);
}

/* The focus ring around the card, the input itself being inside it (RGAA 10.7) */
.answer-choices .form-check-input:focus-visible {
    box-shadow: none;
}

.answer-choices .form-check:has(.form-check-input:focus-visible) .form-check-label {
    outline: 3px solid var(--sk-primary);
    outline-offset: 2px;
}

/* Choice of an issue: its PESTEL dimension above its label */
.answer-choices .form-check-label:has(.answer-choices__eyebrow) {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.answer-choices__eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sk-primary);
}

/* Checkboxes (multiple choice): the same cards, a rounded square */
.answer-choices .form-check-input[type="checkbox"] {
    border-radius: .375rem;
}

/* Text answers, and the free text of an option: the same look as the cards, the border of the form fields kept
   (>= 3:1, RGAA 3.3) */
.answer .form-control {
    padding: .75rem 1rem;
    background-color: var(--sk-white);
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--bs-border-radius-lg);
    transition: border-color .15s, box-shadow .15s;
}

.answer textarea.form-control {
    min-height: 8rem;
    resize: vertical;
}

.answer .form-control:hover {
    border-color: var(--sk-primary);
}

.answer .form-control:focus {
    border-color: var(--sk-primary);
    box-shadow: inset 0 0 0 1px var(--sk-primary);
    outline: 3px solid var(--sk-primary);
    outline-offset: 2px;
}

.answer .form-text {
    margin-top: .375rem;
}

/* Free text of an option (« Autre, précisez »), under the options */
.answer [data-free-text-target="field"] {
    margin-top: .75rem;
}

@media (prefers-reduced-motion: reduce) {
    .answer-choices .form-check-label,
    .answer .form-control {
        transition: none;
    }
}

/* ==========================================================================
   Responsive (keep last so that it overrides the rules above)
   Breakpoints in em so that they also apply when the user enlarges the text (RGAA 10.4).
   ========================================================================== */
@media (max-width: 62em) {
    .site-main {
        padding: 1.5rem 1rem;
    }

    .site-header {
        padding: .75rem 1rem;
    }

    .page-title {
        font-size: 1.5rem;
    }

    .respondent-page__title {
        font-size: 1.5rem;
    }

    .summary-list > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-card,
    .form-card,
    .preview-page,
    .respondent-card {
        padding: 1.5rem 1rem;
    }

    .respondent-header {
        padding: .75rem 1rem;
    }
}