.filter-section {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

    .filter-section > div {
        position: relative;
    }

/* Ligne d'informations sous le titre d'un accès. Le nombre d'éléments varie selon le site et
   selon la ligne : les séparateurs sont donc portés par le conteneur et non par chaque élément,
   sans quoi on obtient une bordure orpheline ou un double filet. */
/* Gris des informations secondaires : plus foncé que text-muted, trop clair pour se lire d'un coup d'œil. */
:root {
    --request-muted-color: #4f5660;
}

.request-meta-item {
    color: var(--request-muted-color);
}

/* Saisi à l'accueil : se repère en parcourant la liste, seul cas à garder son icône en colonnes. */
.request-meta-item.request-meta-walkin {
    color: var(--si-primary);
    font-weight: 600;
}

.request-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

    /* Filet entre deux mentions textuelles voisines seulement : les badges sont déjà
       distincts, ils ne prennent que l'espacement. */
    .request-meta > .request-meta-item + .request-meta-item {
        border-left: 1px solid var(--si-border-color);
        padding-left: .5rem;
    }

/* Une classe par raison de masquer une ligne : recherche, onglet, repli de la liste, période. */
.filter-info-container.search-miss,
.filter-info-container.segment-out,
.filter-info-container.limit-out,
.filter-info-container.day-out {
    display: none !important;
}

/* Refusée ou supprimée : la personne n'entrera pas, la ligne reste lisible pour le constater. */
.filter-info-container.request-dimmed {
    opacity: .55;
}

/* Panel (DefaultButton) puis UpdatePanel s'intercalent entre .modal-content et .modal-body :
   sans boîte propre, header / body / footer redeviennent les enfants directs de .modal-content,
   comme dans une modale Bootstrap normale, et modal-dialog-scrollable borne le corps. */
.modal-scroll-chain,
.modal-scroll-chain > div {
    display: contents;
}

/* Calendrier inline de largeur fixe : centré plutôt que collé à gauche d'une modale plus large. */
.multi-date-calendar .flatpickr-calendar.inline {
    margin-left: auto;
    margin-right: auto;
}

    .multi-date-calendar > small {
        text-align: center;
    }

    /* Jour passé déjà accordé : conservé mais plus modifiable, distinct d'un simple jour désactivé. */
    .multi-date-calendar .flatpickr-day.past-granted {
        background: #e9ecef;
        border-color: #e9ecef;
        color: #6c757d;
    }

/* Informations de contrôle d'un accès (jours, badge, véhicule) : icône + valeur, séparées par de l'espace. */
.request-facts {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    row-gap: .25rem;
    font-size: .875rem;
}

/* Icône + texte, dans un fait de contrôle comme dans une mention : même taille, même couleur, centrées. */
.request-fact,
.request-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

    .request-fact > .bx,
    .request-meta-item > .bx {
        color: var(--si-primary);
        font-size: 1.1rem;
        line-height: 1;
    }

/* Ligne d'accès en colonnes (profil Grant). Les largeurs sont fixes, sauf Personne : chaque
   information tombe au même endroit d'une ligne à l'autre, même quand une case est vide. */
.access-row {
    padding: .75rem 0;
    border-bottom: 1px solid var(--si-border-color);
}

.access-grid-head {
    display: none;
}

.access-cell {
    min-width: 0;
    font-size: .875rem;
    overflow-wrap: anywhere;
}

    /* Sans en-tête de colonnes, chaque case porte son libellé. */
    .access-cell[data-label]::before {
        content: attr(data-label) " : ";
        color: var(--request-muted-color);
    }

.access-person {
    font-size: 1rem;
    margin-bottom: .25rem;
}

    .access-person .request-meta-item:not(.request-meta-walkin) > .bx {
        display: none;
    }

.access-date-detail {
    color: var(--request-muted-color);
}

.access-revoked .access-date {
    color: var(--si-danger);
}

.access-actions {
    justify-content: flex-end;
    margin-top: .5rem;
}

@media (min-width: 992px) {
    .access-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 11rem 6rem 10rem 6rem;
        column-gap: 1rem;
        align-items: center;
    }

    .access-grid-head {
        padding-bottom: .5rem;
        border-bottom: 1px solid var(--si-border-color);
        font-size: .75rem;
        font-weight: 600;
        color: var(--request-muted-color);
    }

    .access-cell[data-label]::before {
        content: none;
    }

    .access-person {
        margin-bottom: 0;
    }

    .access-actions {
        margin-top: 0;
    }
}

/* Les boutons affichent leur texte à partir de cette largeur (d-xl-inline). */
@media (min-width: 1200px) {
    .access-grid {
        grid-template-columns: minmax(0, 1fr) 11rem 6rem 10rem 14rem;
    }
}

/* Liste des accès quotidiens (accueil) : barre de période et de recherche posée entre l'en-tête
   et le corps de la modale, donc hors de la zone qui défile. */
.daily-access-toolbar {
    padding: .75rem var(--si-modal-padding, 1.5rem);
    border-bottom: 1px solid var(--si-border-color);
}

    .daily-access-toolbar .daily-access-range {
        width: 16rem;
    }

    .daily-access-toolbar .daily-access-search {
        min-width: 14rem;
    }

.daily-access-stale {
    opacity: .5;
    transition: opacity .15s;
}

.daily-access-day + .daily-access-day {
    margin-top: 2rem;
}

.daily-access-group + .daily-access-group {
    margin-top: 1.25rem;
}

.daily-access-group-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
    font-size: 1rem;
}

    .daily-access-group-title > .bx {
        color: var(--si-primary);
        font-size: 1.25rem;
    }

/* Largeurs fixes : d'une sous-liste à l'autre, les premières colonnes tombent au même endroit.
   Largeur minimale : sur petit écran le tableau défile plutôt que de s'écraser. */
.daily-access-table {
    table-layout: fixed;
    min-width: 56rem;
}

    .daily-access-table .col-num {
        width: 2.5rem;
    }

    .daily-access-table .col-visitor {
        width: 24%;
    }

    .daily-access-table .col-nationality {
        width: 12%;
    }

    .daily-access-table .col-birth {
        width: 12%;
    }

    .daily-access-table .col-vehicle {
        width: 14%;
    }

    .daily-access-table .col-requester {
        width: 19%;
    }

/* Supervision, profil Grant : personnes attendues jour par jour. */
.attendees-toolbar .attendees-range {
    width: 16rem;
}

.attendees-toolbar .attendees-search {
    min-width: 14rem;
}

/* Sur très grand écran, la barre tient sur une ligne : un filet y sépare période et filtres. */
@media (min-width: 1400px) {
    .attendees-toolbar .attendees-filters {
        padding-left: .75rem;
        border-left: 1px solid var(--si-border-color, #dee2e6);
    }
}

.attendees-day + .attendees-day {
    margin-top: 2rem;
}

.attendees-table {
    table-layout: fixed;
    min-width: 52rem;
}

    .attendees-table .col-visitor {
        width: 28%;
    }

    .attendees-table .col-kind {
        width: 7rem;
    }

    .attendees-table .col-contact {
        width: 20%;
    }

    .attendees-table .col-card {
        width: 9rem;
    }

    .attendees-table .col-vehicle {
        width: 9rem;
    }

    .attendees-table .col-arrived {
        width: 5rem;
    }

.daily-plate {
    display: inline-block;
    padding: .05rem .45rem;
    border: 1px solid var(--si-gray-500, #adb5bd);
    border-radius: .25rem;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

a.filter-info-container {
    text-decoration: initial;
    color: initial;
}

    a.filter-info-container:hover .card {
        background-color: #4c82f729;
    }

/* Carte d'évènement : bannière à ratio fixe, statut et date posés sur l'image. */
.event-card .card-img-top {
    aspect-ratio: 16 / 5;
    object-fit: cover;
}

    .event-card:hover {
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12) !important;
    }

    a.filter-info-container:hover .event-card {
        background-color: var(--bs-card-bg);
    }

    a.filter-info-container:focus-visible .event-card {
        outline: 3px solid var(--si-primary);
        outline-offset: 2px;
    }

.event-card-ended .card-img-top {
    filter: grayscale(1);
    opacity: .6;
}

.event-status {
    position: absolute;
    top: .75rem;
    left: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background-color: #fff;
    color: #161616;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

    .event-status > .bx {
        font-size: 1rem;
        line-height: 1;
    }

    .event-status-published > .bx {
        color: var(--si-success);
    }

    .event-status-unpublished > .bx {
        color: var(--si-warning);
    }

    .event-status-closed > .bx,
    .event-status-ended > .bx {
        color: var(--si-gray-700);
    }

.btn-file {
    position: relative;
    overflow: hidden;
}

    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        opacity: 0;
    }

.publication-block {
    background-color: var(--bs-tertiary-bg);
}

    .publication-block.is-published {
        background-color: rgba(var(--si-primary-rgb), .04);
        border-color: rgba(var(--si-primary-rgb), .3) !important;
    }

.form-text {
    font-size: .875rem;
}

/* Réglage oui/non : l'interrupteur seul, sans la marge ni la hauteur minimale de .form-check. */
.setting-switch {
    min-height: 0;
    margin: 0;
    padding: 0;
}

    .setting-switch .form-check-input {
        margin: 0;
        float: none;
    }

/* Boîte au gabarit d'un champ : même formule de hauteur que .form-control (ligne 1.6em + marges internes + bordure). */
.form-control-switch {
    height: calc(1.6em + 1.25rem + 2px);
}

.publish-status {
    float: right;
    position: relative;
    top: -15px;
}

.divider {
    height: 3px;
    width: 100%;
    display: block;
    margin: 23px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

.img-qrcode {
    padding: 8px 0;
}

.bd-callout {
    padding: 1.25rem;
    background-color: var(--bd-callout-bg, var(--bs-gray-100));
    border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300))
}

    .bd-callout h4 {
        margin-bottom: .25rem
    }

    .bd-callout > :last-child {
        margin-bottom: 0
    }

    .bd-callout + .bd-callout {
        margin-top: -.25rem
    }

    .bd-callout .highlight {
        background-color: rgba(0,0,0,0.05)
    }

.bd-callout-info {
    --bd-callout-bg: rgba(var(--bs-info-rgb), .075);
    --bd-callout-border: rgba(var(--bs-info-rgb), .5)
}

.bd-callout-warning {
    --bd-callout-bg: rgba(var(--bs-warning-rgb), .075);
    --bd-callout-border: rgba(var(--bs-warning-rgb), .5)
}

.bd-callout-danger {
    --bd-callout-bg: rgba(var(--bs-danger-rgb), .075);
    --bd-callout-border: rgba(var(--bs-danger-rgb), .5)
}

.request-details li > span {
    margin-right: 5px
}

.list-group-item-action.active span.badge {
    color: white !important;
    background-color: #a4a5f6 !important;
}

.modal .form-control {
    padding: .3rem .6rem;
}

.modal .form-group {
    margin-bottom: .5rem;
}

.modal label.disabled,
.modal .form-control.disabled,
.modal .form-select:disabled {
    background-color: #00000010;
}

.modal select:not(:disabled) {
    cursor: pointer;
}

.action-button {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Traduction anglaise d'un libellé : collée au français, nettement séparée du champ suivant. */
.forms-content .label-en {
    display: block;
    font-size: .8125rem;
    line-height: 1.3;
}

.reponse-oui-non input[type=radio] {
    margin-right: .4rem;
}

.reponse-oui-non label {
    margin-right: 1.5rem;
}

/* Chevron accordéon : inverse le thème (fermé = haut, ouvert = bas).
   Après theme.min.css => l'emporte à spécificité égale, sans !important. */
.accordion-button::after {
    transform: rotate(-180deg);
}
.accordion-button:not(.collapsed)::after {
    transform: rotate(0deg);
}

:root {
    --site-logo-height: 80px;
    --site-brand-font-size: 1.125rem;
    --site-brand-max-width: 16rem;
    /* Logo + padding vertical du .navbar-brand et du .navbar. */
    --site-header-height: calc(var(--site-logo-height) + 1.5rem);
}

@media (max-width: 991.98px) {
    :root {
        --site-logo-height: 56px;
        --site-brand-font-size: .9375rem;
        --site-brand-max-width: 10rem;
    }
}

/* Contraint en hauteur et non en largeur : deux logos de proportions
   différentes gardent la même ligne de base. */
.site-logo {
    height: var(--site-logo-height);
    width: auto;
}

/* Bornée en largeur : sans ça le nom du site, plus ou moins long selon le site,
   pousse le menu hors du conteneur. white-space hérite du nowrap de .navbar-brand. */
.site-brand-name {
    max-width: var(--site-brand-max-width);
    font-size: var(--site-brand-font-size);
    line-height: 1.2;
    white-space: normal;
}

/* L'en-tête est hors flux, sa hauteur ne réserve aucune place. Remplace le
   padding haut d'origine, qui est en !important et l'emporterait. */
.below-site-header {
    padding-top: calc(var(--site-header-height) + 1.5rem);
}