/* Polices */

@font-face {
    font-family: 'Lato';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/lato/Lato-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/lato/Lato-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: url('../fonts/lato/Lato-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/lato/Lato-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 500 700;
    font-style: italic;
    font-display: swap;
    src: url('../fonts/lato/Lato-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/lato/Lato-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-300-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-700-normal.woff2') format('woff2');
}

/* Jetons */

:root {
    color-scheme: light;

    --canl-rouge: #d41130;
    --canl-rouge-rgb: 212, 17, 48;
    --canl-rouge-vif: #ef0038;
    --canl-rouge-fonce: #b00e28;
    --canl-ardoise: #465863;
    --canl-ardoise-rgb: 70, 88, 99;
    --canl-ardoise-fonce: #38474f;
    --canl-gris: #a7aeb5;
    --canl-gris-clair: #ced3db;
    --canl-brume: #ecf1f4;

    --texte: #1f2a30;
    --texte-rgb: 31, 42, 48;
    --texte-secondaire: var(--canl-ardoise);
    --texte-discret: #5f6e78;
    --texte-discret-rgb: 95, 110, 120;
    --filet: #e3e8ec;
    --ombre-carte: 0 1px 2px rgba(31, 42, 48, .05), 0 1px 3px rgba(31, 42, 48, .04);
    --ombre-flottante: 0 12px 32px rgba(31, 42, 48, .12), 0 2px 6px rgba(31, 42, 48, .06);
    --police-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;

    --succes: #2f6b4f;
    --succes-rgb: 47, 107, 79;
    --succes-fonce: #1f4a36;
    --succes-fond: #e6f0eb;
    --succes-bord: #b5d0c2;
    --attention: #8a5a00;
    --attention-rgb: 138, 90, 0;
    --attention-icone: #b7791f;
    --attention-fonce: #6b4600;
    --attention-fond: #fbf1dc;
    --attention-bord: #ebcf94;
    --erreur-fonce: #7f0a1d;
    --erreur-fond: #fbe3e7;
    --erreur-bord: #f2a8b4;

    --marque: var(--canl-rouge);
    --marque-rgb: var(--canl-rouge-rgb);
    --marque-survol: var(--canl-rouge-vif);
    --marque-active: var(--canl-rouge-fonce);
    --marque-texte: var(--canl-rouge);
    --marque-texte-rgb: var(--canl-rouge-rgb);
    --marque-texte-survol: var(--canl-rouge-vif);
    --marque-pale: #fbe3e7;
    --marque-police: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --bs-primary: var(--marque);
    --bs-primary-rgb: var(--marque-rgb);
    --bs-primary-text-emphasis: var(--erreur-fonce);
    --bs-primary-bg-subtle: var(--marque-pale);
    --bs-primary-border-subtle: var(--erreur-bord);
    --bs-secondary: var(--canl-ardoise);
    --bs-secondary-rgb: var(--canl-ardoise-rgb);
    --bs-secondary-text-emphasis: #2f3c44;
    --bs-secondary-bg-subtle: var(--canl-brume);
    --bs-secondary-border-subtle: var(--canl-gris-clair);
    --bs-success: var(--succes);
    --bs-success-rgb: var(--succes-rgb);
    --bs-success-text-emphasis: var(--succes-fonce);
    --bs-success-bg-subtle: var(--succes-fond);
    --bs-success-border-subtle: var(--succes-bord);
    --bs-warning: var(--attention);
    --bs-warning-rgb: var(--attention-rgb);
    --bs-warning-text-emphasis: var(--attention-fonce);
    --bs-warning-bg-subtle: var(--attention-fond);
    --bs-warning-border-subtle: var(--attention-bord);

    --bs-info: var(--canl-ardoise);
    --bs-info-rgb: var(--canl-ardoise-rgb);
    --bs-info-text-emphasis: #2f3c44;
    --bs-info-bg-subtle: var(--canl-brume);
    --bs-info-border-subtle: var(--canl-gris-clair);
    --bs-danger: var(--canl-rouge);
    --bs-danger-rgb: var(--canl-rouge-rgb);
    --bs-danger-text-emphasis: var(--erreur-fonce);
    --bs-danger-bg-subtle: var(--erreur-fond);
    --bs-danger-border-subtle: var(--erreur-bord);
    --bs-light: var(--canl-brume);
    --bs-light-rgb: 236, 241, 244;
    --bs-light-text-emphasis: var(--texte-secondaire);
    --bs-light-bg-subtle: #f6f8fa;
    --bs-light-border-subtle: var(--filet);
    --bs-dark: var(--texte);
    --bs-dark-rgb: var(--texte-rgb);

    --bs-font-sans-serif: var(--marque-police);
    --bs-font-monospace: var(--police-mono);
    --bs-body-font-family: var(--marque-police);
    --bs-body-color: var(--texte);
    --bs-body-color-rgb: var(--texte-rgb);
    --bs-emphasis-color: #11181c;
    --bs-emphasis-color-rgb: 17, 24, 28;
    --bs-heading-color: var(--texte);
    --bs-secondary-color: var(--texte-discret);
    --bs-secondary-color-rgb: var(--texte-discret-rgb);
    --bs-tertiary-color: rgba(95, 110, 120, .8);
    --bs-secondary-bg: #e2e8ec;
    --bs-tertiary-bg: var(--canl-brume);
    --bs-border-color: var(--canl-gris-clair);
    --bs-border-color-translucent: rgba(70, 88, 99, .16);
    --bs-link-color: var(--marque-texte);
    --bs-link-color-rgb: var(--marque-texte-rgb);
    --bs-link-hover-color: var(--marque-texte-survol);
    --bs-link-hover-color-rgb: var(--marque-texte-rgb);
    --bs-code-color: var(--canl-ardoise-fonce);
    --bs-focus-ring-color: rgba(var(--marque-rgb), .25);
    --bs-form-valid-color: var(--succes);
    --bs-form-valid-border-color: var(--succes);
    --bs-form-invalid-color: var(--canl-rouge);
    --bs-form-invalid-border-color: var(--canl-rouge);
}

[data-marque="clap"] {
    --marque: #f00038;
    --marque-rgb: 240, 0, 56;
    --marque-survol: #ff2e41;
    --marque-active: #c8002f;

    --marque-texte: #c8002f;
    --marque-texte-rgb: 200, 0, 47;
    --marque-texte-survol: #f00038;
    --marque-pale: #ffe5eb;
    --marque-police: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Base */

body {
    font-family: var(--marque-police);
    color: var(--texte);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(var(--marque-rgb), .18);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--texte);
    letter-spacing: -.005em;
}

a {
    text-decoration: none;
    text-underline-offset: .18em;
}

a:hover {
    text-decoration: underline;
}

.alert a:not(.btn),
.form-text a,
.sous-titre a,
.intro-publique a,
.pied-public a,
.err-message a,
.etat-vide p a,
p:not([class]) > a:not(.btn) {
    text-decoration: underline;
}

.app-nav-lien:hover,
.marque:hover,
.app-entete-marque:hover,
.tuile-stat:hover,
.dropdown-item:hover,
.btn:hover,
.page-link:hover,
.nav-link:hover,
.etiquette:hover,
.choix-methode:hover {
    text-decoration: none;
}

hr {
    color: var(--canl-gris-clair);
    opacity: 1;
}

code {
    padding: .1rem .35rem;
    border-radius: 4px;
    background: var(--canl-brume);
    font-size: .85em;
    word-break: break-word;
}

kbd {
    background: var(--texte);
}

.text-muted,
.text-body-secondary {
    color: var(--texte-discret) !important;
}

.fw-semibold {
    font-weight: 700 !important;
}

.fw-black {
    font-weight: 900 !important;
}

.police-mono {
    font-family: var(--police-mono);
}

.font-monospace {
    font-family: var(--police-mono) !important;
}

.puce::before {
    display: inline-block;
    width: .62em;
    height: .62em;
    margin-right: .5em;
    border-radius: 50% 50% 12% 50%;
    background: var(--marque);
    content: '';
    vertical-align: .02em;
}

/* Boutons */

.btn {
    --bs-btn-font-weight: 700;
    --bs-btn-padding-x: .95rem;
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--marque-rgb), .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

.btn-sm {
    --bs-btn-padding-x: .65rem;
    gap: .35rem;
}

.btn-lg {
    --bs-btn-font-size: 1rem;
    --bs-btn-padding-y: .72rem;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--marque);
    --bs-btn-border-color: var(--marque);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--marque-survol);
    --bs-btn-hover-border-color: var(--marque-survol);
    --bs-btn-focus-shadow-rgb: var(--marque-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--marque-active);
    --bs-btn-active-border-color: var(--marque-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--marque);
    --bs-btn-disabled-border-color: var(--marque);
}

.btn-outline-primary {
    --bs-btn-color: var(--marque-texte);
    --bs-btn-border-color: var(--marque);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--marque);
    --bs-btn-hover-border-color: var(--marque);
    --bs-btn-focus-shadow-rgb: var(--marque-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--marque-active);
    --bs-btn-active-border-color: var(--marque-active);
    --bs-btn-disabled-color: var(--marque-texte);
    --bs-btn-disabled-border-color: var(--marque);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--canl-ardoise);
    --bs-btn-border-color: var(--canl-ardoise);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--canl-ardoise-fonce);
    --bs-btn-hover-border-color: var(--canl-ardoise-fonce);
    --bs-btn-focus-shadow-rgb: var(--canl-ardoise-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2d3a41;
    --bs-btn-active-border-color: #2d3a41;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--canl-ardoise);
    --bs-btn-disabled-border-color: var(--canl-ardoise);
}

.btn-outline-secondary {
    --bs-btn-color: var(--canl-ardoise);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--canl-gris);
    --bs-btn-hover-color: var(--texte);
    --bs-btn-hover-bg: var(--canl-brume);
    --bs-btn-hover-border-color: var(--canl-ardoise);
    --bs-btn-focus-shadow-rgb: var(--canl-ardoise-rgb);
    --bs-btn-active-color: var(--texte);
    --bs-btn-active-bg: #dde4e9;
    --bs-btn-active-border-color: var(--canl-ardoise);
    --bs-btn-disabled-color: var(--canl-ardoise);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--canl-gris-clair);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--canl-rouge);
    --bs-btn-border-color: var(--canl-rouge);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--canl-rouge-vif);
    --bs-btn-hover-border-color: var(--canl-rouge-vif);
    --bs-btn-focus-shadow-rgb: var(--canl-rouge-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--canl-rouge-fonce);
    --bs-btn-active-border-color: var(--canl-rouge-fonce);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--canl-rouge);
    --bs-btn-disabled-border-color: var(--canl-rouge);
}

.btn-outline-danger {
    --bs-btn-color: var(--canl-rouge);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--erreur-bord);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--canl-rouge);
    --bs-btn-hover-border-color: var(--canl-rouge);
    --bs-btn-focus-shadow-rgb: var(--canl-rouge-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--canl-rouge-fonce);
    --bs-btn-active-border-color: var(--canl-rouge-fonce);
    --bs-btn-disabled-color: var(--canl-rouge);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--erreur-bord);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--succes);
    --bs-btn-border-color: var(--succes);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--succes-fonce);
    --bs-btn-hover-border-color: var(--succes-fonce);
    --bs-btn-focus-shadow-rgb: var(--succes-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--succes-fonce);
    --bs-btn-active-border-color: var(--succes-fonce);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--succes);
    --bs-btn-disabled-border-color: var(--succes);
}

.btn-outline-success {
    --bs-btn-color: var(--succes);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--succes-bord);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--succes);
    --bs-btn-hover-border-color: var(--succes);
    --bs-btn-focus-shadow-rgb: var(--succes-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--succes-fonce);
    --bs-btn-active-border-color: var(--succes-fonce);
    --bs-btn-disabled-color: var(--succes);
    --bs-btn-disabled-border-color: var(--succes-bord);
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--attention);
    --bs-btn-border-color: var(--attention);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--attention-fonce);
    --bs-btn-hover-border-color: var(--attention-fonce);
    --bs-btn-focus-shadow-rgb: var(--attention-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--attention-fonce);
    --bs-btn-active-border-color: var(--attention-fonce);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--attention);
    --bs-btn-disabled-border-color: var(--attention);
}

.btn-outline-warning {
    --bs-btn-color: var(--attention);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--attention-bord);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--attention);
    --bs-btn-hover-border-color: var(--attention);
    --bs-btn-focus-shadow-rgb: var(--attention-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--attention-fonce);
    --bs-btn-active-border-color: var(--attention-fonce);
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--canl-ardoise);
    --bs-btn-border-color: var(--canl-ardoise);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--canl-ardoise-fonce);
    --bs-btn-hover-border-color: var(--canl-ardoise-fonce);
    --bs-btn-focus-shadow-rgb: var(--canl-ardoise-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2d3a41;
    --bs-btn-active-border-color: #2d3a41;
}

.btn-outline-info,
.btn-outline-dark {
    --bs-btn-color: var(--texte);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--canl-ardoise);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--canl-ardoise);
    --bs-btn-hover-border-color: var(--canl-ardoise);
    --bs-btn-focus-shadow-rgb: var(--canl-ardoise-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--canl-ardoise-fonce);
    --bs-btn-active-border-color: var(--canl-ardoise-fonce);
}

.btn-light {
    --bs-btn-color: var(--texte);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--texte);
    --bs-btn-hover-bg: var(--canl-brume);
    --bs-btn-hover-border-color: var(--canl-brume);
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
    --bs-btn-active-color: var(--texte);
    --bs-btn-active-bg: var(--canl-gris-clair);
    --bs-btn-active-border-color: var(--canl-gris-clair);
}

.btn-link {
    --bs-btn-color: var(--marque-texte);
    --bs-btn-hover-color: var(--marque-texte-survol);
    --bs-btn-active-color: var(--marque-active);
    --bs-btn-disabled-color: var(--texte-discret);
    text-decoration: none;
}

.btn-icone {
    --bs-btn-padding-x: .5rem;
    --bs-btn-padding-y: .4rem;
    --bs-btn-color: var(--texte-secondaire);
    --bs-btn-hover-color: var(--texte);
    --bs-btn-hover-bg: var(--canl-brume);
    --bs-btn-active-bg: var(--canl-gris-clair);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    font-size: 1.15rem;
    line-height: 1;
}

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(var(--marque-rgb), .25);
}

/* Formulaires */

.form-label {
    margin-bottom: .35rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--texte);
}

.form-label .text-muted,
.form-label small {
    font-weight: 400;
}

.form-text {
    color: var(--texte-discret);
}

.form-control,
.form-select {
    border-color: var(--canl-gris);
    color: var(--texte);
}

.form-control::placeholder {
    color: #7b8891;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--marque);
    box-shadow: 0 0 0 .25rem rgba(var(--marque-rgb), .18);
}

.form-control[readonly] {
    background-color: var(--canl-brume);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--canl-brume);
    color: var(--texte-discret);
}

.form-check-input {
    border-color: var(--canl-gris);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--marque);
    border-color: var(--marque);
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28212, 17, 48, 0.45%29'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23d41130'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23d41130' stroke='none'/%3e%3c/svg%3e");
}

.input-group-text {
    border-color: var(--canl-gris);
    background-color: var(--canl-brume);
    color: var(--texte-secondaire);
}

input[type=file]::file-selector-button {
    font-weight: 700;
}

.liste-defilante {
    max-height: 13rem;
    overflow-y: auto;
    padding: .6rem .8rem;
    border: 1px solid var(--canl-gris-clair);
    border-radius: .5rem;
    background: #fff;
}

/* Cartes, tableaux, badges, alertes */

.card {
    --bs-card-border-color: var(--canl-gris-clair);
    --bs-card-border-radius: .625rem;
    --bs-card-inner-border-radius: calc(.625rem - 1px);
    --bs-card-cap-bg: #fff;
    --bs-card-cap-padding-y: .85rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    box-shadow: var(--ombre-carte);
}

.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border-bottom-color: var(--canl-gris-clair);
    font-weight: 700;
    color: var(--texte);
}

.card-header > :only-child {
    margin-right: auto;
}

.card-header .bi {
    color: var(--texte-secondaire);
}

.card-footer {
    border-top-color: var(--filet);
    background: #fff;
}

.card-title {
    font-weight: 700;
}

.table {
    --bs-table-color: var(--texte);
    --bs-table-border-color: var(--filet);
    --bs-table-striped-bg: rgba(236, 241, 244, .55);
    --bs-table-striped-color: var(--texte);
    --bs-table-hover-bg: rgba(236, 241, 244, .95);
    --bs-table-hover-color: var(--texte);
    --bs-table-active-bg: var(--canl-brume);
    vertical-align: middle;
}

.table > :not(caption) > * > * {
    padding: .7rem .75rem;
}

.table-sm > :not(caption) > * > * {
    padding: .45rem .6rem;
}

.table > thead th {
    border-bottom-color: var(--canl-gris-clair);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--texte-secondaire);
}

.table > :not(:first-child) {
    border-top: 0;
}

.table-light {
    --bs-table-color: var(--texte-secondaire);
    --bs-table-bg: var(--canl-brume);
    --bs-table-border-color: var(--canl-gris-clair);
}

.card > .table,
.card > .table-responsive > .table,
.card > .card-body.p-0 > .table,
.card > .card-body.p-0 > .table-responsive > .table {
    margin-bottom: 0;
}

.card > .table > :not(caption) > tr > :first-child,
.card > .table-responsive > .table > :not(caption) > tr > :first-child,
.card > .card-body.p-0 > .table > :not(caption) > tr > :first-child,
.card > .card-body.p-0 > .table-responsive > .table > :not(caption) > tr > :first-child {
    padding-left: 1.25rem;
}

.card > .table > :not(caption) > tr > :last-child,
.card > .table-responsive > .table > :not(caption) > tr > :last-child,
.card > .card-body.p-0 > .table > :not(caption) > tr > :last-child,
.card > .card-body.p-0 > .table-responsive > .table > :not(caption) > tr > :last-child {
    padding-right: 1.25rem;
}

.table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

.table-fiche {
    margin-bottom: 0;
}

.table-fiche > tbody > tr > th {
    width: 38%;
    padding-left: 0;
    font-size: .85rem;
    font-weight: 700;
    color: var(--texte-secondaire);
    vertical-align: top;
}

.table-fiche > tbody > tr > td {
    padding-right: 0;
    word-break: break-word;
}

.table-fiche > tbody > tr > * {
    border-bottom: 1px solid var(--filet);
}

.table-borderless > tbody > tr > th {
    font-weight: 700;
    color: var(--texte-secondaire);
}

.colonne-actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.colonne-actions .btn + .btn,
.colonne-actions .btn + form,
.colonne-actions form + .btn,
.colonne-actions form + form {
    margin-left: .25rem;
}

.badge {
    --bs-badge-padding-x: .6em;
    --bs-badge-padding-y: .38em;
    --bs-badge-font-weight: 700;
    --bs-badge-border-radius: 999px;
    border: 1px solid transparent;
    letter-spacing: .01em;
    vertical-align: .08em;
}

.badge.bg-primary {
    border-color: var(--erreur-bord);
    background-color: var(--marque-pale) !important;
    color: var(--erreur-fonce) !important;
}

.badge.bg-secondary {
    border-color: var(--canl-gris-clair);
    background-color: var(--canl-brume) !important;
    color: var(--texte-secondaire) !important;
}

.badge.bg-info {
    border-color: var(--canl-gris);
    background-color: #fff !important;
    color: var(--texte-secondaire) !important;
}

.badge.bg-success {
    border-color: var(--succes-bord);
    background-color: var(--succes-fond) !important;
    color: var(--succes-fonce) !important;
}

.badge.bg-warning {
    border-color: var(--attention-bord);
    background-color: var(--attention-fond) !important;
    color: var(--attention-fonce) !important;
}

.badge.bg-danger {
    background-color: var(--canl-rouge) !important;
    color: #fff !important;
}

.badge.bg-light {
    border-color: var(--canl-gris-clair);
    background-color: var(--canl-brume) !important;
    color: var(--texte) !important;
}

.badge.bg-dark {
    background-color: var(--canl-ardoise) !important;
    color: #fff !important;
}

.etiquette {
    display: inline-block;
    margin: 0 .25rem .3rem 0;
    padding: .18rem .45rem;
    border: 1px solid var(--canl-gris-clair);
    border-radius: 4px;
    background: var(--canl-brume);
    font-family: var(--police-mono);
    font-size: .78rem;
    line-height: 1.35;
    color: var(--texte);
    overflow-wrap: anywhere;
}

a.etiquette:hover {
    border-color: var(--canl-ardoise);
    text-decoration: none;
}

.alert {
    --bs-alert-border-radius: .5rem;
    border-left-width: 4px;
}

.alert-success {
    border-left-color: var(--succes);
}

.alert-warning {
    border-left-color: var(--attention-icone);
}

.alert-warning .bi {
    color: var(--attention-icone);
}

.alert-danger {
    border-left-color: var(--canl-rouge);
}

.alert-info {
    --bs-alert-color: var(--texte);
    border-left-color: var(--canl-ardoise);
}

.alert-info > .bi:first-child {
    color: var(--canl-ardoise);
}

.alert-link {
    font-weight: 700;
}

.alert-icone {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.alert-icone > .bi {
    flex: none;
    margin-top: .1rem;
    font-size: 1.1rem;
}

.alert-icone > div {
    flex: 1;
    min-width: 0;
}

/* Navigation */

.nav-link {
    --bs-nav-link-color: var(--marque-texte);
    --bs-nav-link-hover-color: var(--marque-texte-survol);
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(var(--marque-rgb), .25);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--canl-gris-clair);
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--texte);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    gap: .25rem;
}

.nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: -1px;
    padding: .6rem .9rem;
    border: 0;
    border-bottom: 3px solid transparent;
    font-weight: 700;
    color: var(--texte-secondaire);
}

.nav-tabs .nav-link:hover {
    border-bottom-color: var(--canl-gris-clair);
    color: var(--texte);
    text-decoration: none;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-bottom-color: var(--marque);
    background: transparent;
    color: var(--texte);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--canl-ardoise);
    --bs-nav-pills-link-active-color: #fff;
}

.nav-pills .nav-link {
    color: var(--texte-secondaire);
    font-weight: 700;
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--canl-gris-clair);
    --bs-dropdown-border-radius: .625rem;
    --bs-dropdown-inner-border-radius: calc(.625rem - 1px);
    --bs-dropdown-link-color: var(--texte);
    --bs-dropdown-link-hover-color: var(--texte);
    --bs-dropdown-link-hover-bg: var(--canl-brume);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--marque);
    --bs-dropdown-item-padding-x: .85rem;
    --bs-dropdown-item-padding-y: .45rem;
    --bs-dropdown-header-color: var(--texte-discret);
    --bs-dropdown-divider-bg: var(--filet);
    padding: .4rem;
    box-shadow: var(--ombre-flottante);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: .4rem;
}

.dropdown-item .bi {
    color: var(--texte-secondaire);
}

.dropdown-item:active .bi,
.dropdown-item.active .bi {
    color: inherit;
}

.pagination {
    --bs-pagination-color: var(--canl-ardoise);
    --bs-pagination-border-color: var(--canl-gris-clair);
    --bs-pagination-hover-color: var(--texte);
    --bs-pagination-hover-bg: var(--canl-brume);
    --bs-pagination-hover-border-color: var(--canl-gris-clair);
    --bs-pagination-focus-color: var(--texte);
    --bs-pagination-focus-bg: var(--canl-brume);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--marque-rgb), .2);
    --bs-pagination-active-bg: var(--marque);
    --bs-pagination-active-border-color: var(--marque);
    --bs-pagination-disabled-color: var(--canl-gris);
    --bs-pagination-disabled-border-color: var(--canl-gris-clair);
    margin-bottom: 0;
}

.page-link {
    font-weight: 700;
}

.list-group {
    --bs-list-group-border-color: var(--canl-gris-clair);
    --bs-list-group-action-hover-bg: var(--canl-brume);
    --bs-list-group-active-bg: var(--marque);
    --bs-list-group-active-border-color: var(--marque);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--marque);
    --bs-progress-bg: var(--canl-brume);
}

.modal {
    --bs-modal-border-color: transparent;
    --bs-modal-border-radius: .75rem;
    --bs-modal-inner-border-radius: .75rem;
    --bs-modal-header-border-color: var(--filet);
    --bs-modal-footer-border-color: var(--filet);
    --bs-modal-box-shadow: var(--ombre-flottante);
}

.modal-content {
    border-top: 4px solid var(--marque);
    box-shadow: var(--ombre-flottante);
}

.modal-backdrop {
    --bs-backdrop-bg: #1f2a30;
    --bs-backdrop-opacity: .45;
}

.tooltip {
    --bs-tooltip-bg: var(--texte);
}

.offcanvas {
    --bs-offcanvas-border-color: var(--canl-gris-clair);
}

/* Select2 */

.select2-container {
    font-size: 1rem;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: calc(1.5em + .75rem + 2px);
    border: 1px solid var(--canl-gris);
    border-radius: var(--bs-border-radius);
    background-color: #fff;
}

.select2-container--default .select2-selection--multiple {
    padding: 0 .375rem .3rem;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--marque);
    box-shadow: 0 0 0 .25rem rgba(var(--marque-rgb), .18);
    outline: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: .3rem;
    padding: .1rem .5rem .1rem 1.4rem;
    border: 1px solid var(--canl-gris-clair);
    border-radius: 4px;
    background: var(--canl-brume);
    font-size: .85rem;
    color: var(--texte);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    height: 100%;
    border-right-color: var(--canl-gris-clair);
    color: var(--texte-secondaire);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background: var(--marque-pale);
    color: var(--marque-texte);
}

.select2-container--default .select2-search--inline .select2-search__field {
    margin-top: .45rem;
    font-family: inherit;
}

.select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: #7b8891;
}

.select2-dropdown {
    overflow: hidden;
    border-color: var(--canl-gris-clair);
    border-radius: .5rem;
    box-shadow: var(--ombre-flottante);
}

.select2-results__option {
    padding: .45rem .75rem;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--marque);
    color: #fff;
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--canl-brume);
    font-weight: 700;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--canl-gris);
    border-radius: .375rem;
}

/* Administration */

body.app-admin {
    background: var(--canl-brume);
}

.lien-evitement:focus {
    position: fixed !important;
    top: .5rem;
    left: .5rem;
    z-index: 1100;
    padding: .5rem 1rem;
    border-radius: .375rem;
    background: #fff;
    box-shadow: var(--ombre-flottante);
}

.app {
    display: flex;
    min-height: 100vh;
    border-top: 4px solid var(--canl-rouge);
}

.app-menu {
    --bs-offcanvas-width: 17rem;
}

.app-menu .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.1rem .9rem 1rem;
}

@media (min-width: 992px) {
    .app-menu.offcanvas-lg {
        position: sticky;
        top: 0;
        flex: none;
        width: 17rem;
        height: 100vh;
        border-right: 1px solid var(--canl-gris-clair);
        background-color: #fff !important;
    }

    .app-menu .offcanvas-body {
        flex-grow: 1;
        overflow-y: auto;
        padding: 1.1rem .9rem 1rem;
    }
}

.app-menu-marque {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .35rem;
}

.marque {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: var(--texte);
}

.marque:hover {
    color: var(--texte);
    text-decoration: none;
}

.marque img {
    display: block;
    width: 60px;
    height: 60px;
}

.marque-nom {
    display: flex;
    flex-direction: column;
    padding-left: .85rem;
    border-left: 2px solid var(--canl-rouge);
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: .02em;
}

.marque-nom small {
    margin-top: .2rem;
    font-size: .74rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--texte-discret);
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.app-nav-titre {
    margin: 1rem 0 .3rem;
    padding: 0 .75rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-discret);
}

.app-nav-lien {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    font-size: .92rem;
    color: var(--texte);
}

.app-nav-lien > .bi {
    width: 1.15rem;
    font-size: 1.05rem;
    text-align: center;
    color: var(--texte-secondaire);
}

.app-nav-lien:hover {
    background: var(--canl-brume);
    color: var(--texte);
    text-decoration: none;
}

.app-nav-lien.active {
    background: var(--marque-pale);
    font-weight: 700;
    color: var(--erreur-fonce);
}

.app-nav-lien.active > .bi {
    color: var(--canl-rouge);
}

.app-nav-lien.active::before {
    position: absolute;
    top: .4rem;
    bottom: .4rem;
    left: -.9rem;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--canl-rouge);
    content: '';
}

.app-nav-lien .badge {
    margin-left: auto;
}

.app-menu-pied {
    margin-top: auto;
    padding: .9rem .75rem 0;
    border-top: 1px solid var(--filet);
    font-size: .78rem;
    color: var(--texte-discret);
}

.app-principal {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.app-entete {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 4rem;
    padding: .5rem 1.5rem;
    border-bottom: 1px solid var(--canl-gris-clair);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(1.4) blur(6px);
}

.app-entete-marque {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--texte);
}

.app-entete-marque:hover {
    color: var(--texte);
    text-decoration: none;
}

.app-entete-fil {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    font-size: .9rem;
    color: var(--texte-discret);
}

.app-entete-fil strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--texte);
}

.environnement {
    padding: .2rem .55rem;
    border: 1px solid var(--attention-bord);
    border-radius: 999px;
    background: var(--attention-fond);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--attention-fonce);
}

.app-utilisateur {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem .5rem .3rem .3rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    font-weight: 700;
    color: var(--texte);
}

.app-utilisateur:hover,
.app-utilisateur[aria-expanded="true"] {
    border-color: var(--canl-gris-clair);
    background: var(--canl-brume);
}

.app-utilisateur:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--marque-rgb), .25);
}

.avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--canl-ardoise);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    text-transform: uppercase;
}

.avatar-lg {
    width: 3rem;
    height: 3rem;
    font-size: 1.05rem;
}

.dropdown-utilisateur {
    min-width: 16rem;
}

.dropdown-utilisateur .dropdown-header {
    padding: .5rem .85rem .6rem;
    white-space: normal;
}

.dropdown-utilisateur .dropdown-header strong {
    display: block;
    font-size: .95rem;
    color: var(--texte);
}

.bandeau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1rem;
    padding: .65rem 1.5rem;
    border-bottom: 1px solid transparent;
    font-size: .92rem;
    text-align: center;
}

.bandeau-attention {
    border-bottom-color: var(--attention-bord);
    background: var(--attention-fond);
    color: var(--attention-fonce);
}

.bandeau-attention > .bi {
    color: var(--attention-icone);
}

.bandeau-attention a {
    font-weight: 700;
    color: var(--attention-fonce);
    text-decoration: underline;
}

.bandeau-session {
    background: var(--canl-ardoise-fonce);
    color: #fff;
}

.bandeau-session strong {
    color: #fff;
}

.app-page {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 1.75rem 2rem 3rem;
}

.app-page:focus {
    outline: 0;
}

@media (max-width: 575.98px) {
    .app-page {
        padding: 1.25rem 1rem 2.5rem;
    }

    .app-entete {
        padding: .5rem 1rem;
    }
}

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

.entete-page-texte {
    min-width: 0;
}

.surtitre {
    margin: 0 0 .3rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--marque-texte);
}

.surtitre a {
    color: inherit;
}

.entete-page h1 {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 300;
    line-height: 1.2;
    word-break: break-word;
}

.entete-page h1 strong {
    font-weight: 700;
}

.sous-titre {
    max-width: 48rem;
    margin: .4rem 0 0;
    color: var(--texte-discret);
}

.entete-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.entete-page-actions form {
    margin: 0;
}

.titre-section {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.barre-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--canl-gris-clair);
    border-radius: .625rem;
    background: #fff;
    box-shadow: var(--ombre-carte);
}

.barre-filtres .form-label {
    font-size: .78rem;
}

.champ-recherche {
    position: relative;
    flex: 1 1 16rem;
    max-width: 28rem;
}

.champ-recherche > .bi {
    position: absolute;
    top: 50%;
    left: .8rem;
    transform: translateY(-50%);
    color: var(--texte-discret);
    pointer-events: none;
}

.champ-recherche > .form-control {
    padding-left: 2.3rem;
}

.tuile-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--canl-gris-clair);
    border-radius: .625rem;
    background: #fff;
    box-shadow: var(--ombre-carte);
    color: var(--texte);
}

a.tuile-stat:hover {
    border-color: var(--canl-ardoise);
    text-decoration: none;
}

.tuile-stat-icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .6rem;
    background: var(--marque-pale);
    font-size: 1.25rem;
    color: var(--canl-rouge);
}

.tuile-stat-valeur {
    display: block;
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tuile-stat-libelle {
    display: block;
    font-size: .82rem;
    color: var(--texte-discret);
}

.etat-vide {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--texte-discret);
}

.etat-vide > .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: .75rem;
    border-radius: 50%;
    background: var(--canl-brume);
    font-size: 1.4rem;
    color: var(--texte-secondaire);
}

.etat-vide-titre {
    margin-bottom: .25rem;
    font-weight: 700;
    color: var(--texte);
}

.etat-vide p {
    max-width: 30rem;
    margin: 0 auto;
}

.etat-vide .btn {
    margin-top: 1rem;
}

.secret {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    padding: .5rem .5rem .5rem .75rem;
    border: 1px dashed var(--attention-bord);
    border-radius: .5rem;
    background: #fff;
}

.secret code {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    font-size: .85rem;
    color: var(--texte);
    word-break: break-all;
}

.btn-copier.est-copie {
    --bs-btn-color: var(--succes);
    --bs-btn-border-color: var(--succes-bord);
}

.ligne-element {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: 1rem 1.25rem;
}

.ligne-element + .ligne-element {
    border-top: 1px solid var(--filet);
}

.ligne-element-icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .55rem;
    background: var(--canl-brume);
    font-size: 1.15rem;
    color: var(--texte-secondaire);
}

.ligne-element-corps {
    display: flex;
    flex: 1;
    gap: .9rem;
    align-items: flex-start;
    min-width: 0;
}

.ligne-element-titre {
    margin: 0;
    font-weight: 700;
}

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem 1rem;
    margin: .2rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
    color: var(--texte-discret);
}

.meta .bi {
    margin-right: .25rem;
}

/* Pages publiques */

body.page-publique {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2.5rem 1rem 1.5rem;
    background-color: var(--canl-brume);
    background-image:
        radial-gradient(60rem 26rem at 50% -10rem, rgba(var(--marque-rgb), .07), transparent 70%);
    background-repeat: no-repeat;
}

.carte-publique {
    width: 100%;
    max-width: 27.5rem;
    padding: 2.25rem 2rem 2rem;
    border-top: 4px solid var(--marque);
    border-radius: .875rem;
    background: #fff;
    box-shadow: var(--ombre-flottante);
}

.carte-publique--large {
    max-width: 32.5rem;
}

@media (max-width: 480px) {
    .carte-publique {
        padding: 1.75rem 1.25rem 1.5rem;
    }
}

.logo-marque {
    display: block;
    width: auto;
    height: 72px;
    margin: 0 auto 1.5rem;
}

[data-marque="clap"] .logo-marque {
    height: 52px;
}

.titre-public {
    margin: 0 0 .5rem;
    font-size: 1.55rem;
    font-weight: 300;
    line-height: 1.25;
    text-align: center;
}

.titre-public strong {
    font-weight: 700;
}

.intro-publique {
    margin: 0 0 1.5rem;
    text-align: center;
    color: var(--texte-discret);
}

.intro-publique strong {
    color: var(--texte);
}

.pastille-etat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--canl-brume);
    font-size: 1.8rem;
    color: var(--texte-secondaire);
}

.pastille-etat--succes {
    background: var(--succes-fond);
    color: var(--succes);
}

.pastille-etat--erreur {
    background: var(--erreur-fond);
    color: var(--canl-rouge);
}

.pastille-etat--marque {
    background: var(--marque-pale);
    color: var(--marque-texte);
}

.champ {
    position: relative;
}

.champ > .bi {
    position: absolute;
    top: 50%;
    left: .95rem;
    z-index: 4;
    transform: translateY(-50%);
    font-size: 1.05rem;
    color: var(--texte-discret);
    pointer-events: none;
}

.champ > .form-control {
    min-height: 3rem;
    padding-left: 2.75rem;
}

.champ > .form-control.is-invalid {
    padding-right: 2.75rem;
}

.champ-mot-de-passe > .form-control {
    padding-right: 3rem;
}

.champ-mot-de-passe > .form-control.is-invalid {
    padding-right: 4.75rem;
    background-position: right 3rem center;
}

.bouton-oeil {
    position: absolute;
    top: 50%;
    right: .35rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: .4rem;
    background: transparent;
    font-size: 1.1rem;
    color: var(--texte-secondaire);
}

.bouton-oeil:hover {
    background: var(--canl-brume);
    color: var(--texte);
}

.bouton-oeil:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(var(--marque-rgb), .25);
}

.champ ~ .invalid-feedback,
.champ .invalid-feedback {
    text-align: left;
}

.page-publique .form-control:not(.champ-code) {
    font-size: 1rem;
}

.champ-code {
    min-height: 3.5rem;
    font-family: var(--police-mono);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .4em;
    text-align: center;
    text-indent: .4em;
    font-variant-numeric: tabular-nums;
}

.champ-code::placeholder {
    font-family: var(--marque-police);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    text-indent: 0;
}

.champ-code--long {
    font-size: 1rem;
    letter-spacing: .02em;
    text-indent: 0;
}

.liens-publics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--filet);
    font-size: .9rem;
}

.liens-publics a,
.liens-publics .btn-link {
    font-weight: 700;
}

.lien-discret {
    color: var(--texte-discret);
}

.lien-discret:hover {
    color: var(--texte);
}

.separateur-ou {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--texte-discret);
}

.separateur-ou::before,
.separateur-ou::after {
    flex: 1;
    height: 1px;
    background: var(--filet);
    content: '';
}

.choix-methode {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    padding: .9rem 1rem;
    border: 1px solid var(--canl-gris-clair);
    border-radius: .75rem;
    background: #fff;
    font: inherit;
    text-align: left;
    color: var(--texte);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.choix-methode:hover {
    border-color: var(--marque);
    box-shadow: 0 0 0 3px rgba(var(--marque-rgb), .1);
}

.choix-methode:focus-visible {
    outline: 0;
    border-color: var(--marque);
    box-shadow: 0 0 0 .25rem rgba(var(--marque-rgb), .25);
}

.choix-methode-icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--canl-brume);
    font-size: 1.2rem;
    color: var(--texte-secondaire);
}

.choix-methode-corps {
    flex: 1;
    min-width: 0;
}

.choix-methode-titre {
    display: block;
    font-weight: 700;
}

.choix-methode-detail {
    display: block;
    font-size: .85rem;
    color: var(--texte-discret);
}

.choix-methode > .bi-chevron-right {
    color: var(--texte-discret);
}

.choix-methode.est-principale .choix-methode-icone {
    background: var(--marque-pale);
    color: var(--marque-texte);
}

.etiquette-principale {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--marque-pale);
    font-size: .7rem;
    font-weight: 700;
    vertical-align: .12em;
    color: var(--erreur-fonce);
}

.methode-courante {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.25rem;
    padding: .85rem 1rem;
    border-radius: .75rem;
    background: var(--canl-brume);
    text-align: left;
}

.methode-courante .choix-methode-icone {
    background: #fff;
}

.liste-permissions {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    border: 1px solid var(--canl-gris-clair);
    border-radius: .75rem;
}

.liste-permissions li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .7rem 1rem;
    text-align: left;
}

.liste-permissions li + li {
    border-top: 1px solid var(--filet);
}

.liste-permissions .bi {
    color: var(--succes);
}

.liste-choix {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--canl-gris-clair);
    border-radius: .75rem;
}

.choix-radio {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .7rem 1rem;
    cursor: pointer;
}

.choix-radio + .choix-radio {
    border-top: 1px solid var(--filet);
}

.choix-radio:has(input:checked) {
    background: var(--canl-brume);
}

.choix-radio .form-check-input {
    flex: none;
    margin: 0;
}

.choix-radio-corps {
    flex: 1;
    min-width: 0;
    font-weight: 700;
}

.choix-radio-corps .bi {
    margin-right: .35rem;
    color: var(--texte-secondaire);
}

.pied-public {
    margin-top: 1.5rem;
    font-size: .82rem;
    text-align: center;
    color: var(--texte-discret);
}

.pied-public p {
    margin: 0 0 .2rem;
}

.pied-public a {
    color: var(--texte-secondaire);
    font-weight: 700;
}

.attente {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    color: var(--texte-discret);
}

.spinner-border {
    --bs-spinner-border-width: .2em;
    color: var(--marque);
}

/* Pages d'erreur */

.page-erreur {
    --ton: var(--canl-ardoise);
    --ton-rgb: var(--canl-ardoise-rgb);
}

.page-erreur.ton-attention {
    --ton: var(--attention);
    --ton-rgb: var(--attention-rgb);
}

.page-erreur.ton-erreur {
    --ton: var(--marque);
    --ton-rgb: var(--marque-rgb);
}

.err-carte {
    max-width: 34rem;
    text-align: center;
}

.err-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7.5rem;
    margin-bottom: .5rem;
}

.err-code {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7.5rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.04em;
    white-space: nowrap;
    color: rgba(var(--ton-rgb), .12);
    user-select: none;
    pointer-events: none;
}

.err-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    font-size: 2rem;
    color: var(--ton);

    background-color: #fff;
    background-image: linear-gradient(rgba(var(--ton-rgb), .12), rgba(var(--ton-rgb), .12));
    box-shadow: 0 0 0 9px rgba(var(--ton-rgb), .06);
}

.err-message {
    max-width: 30rem;
    margin: 0 auto;
    color: var(--texte-discret);
}

.err-details {
    margin-top: 1.25rem;
}

.err-label {
    margin: 0 0 .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texte-discret);
}

.err-chip {
    display: inline-block;
    max-width: 100%;
    padding: .35rem .7rem;
    border: 1px solid var(--canl-gris-clair);
    border-radius: .5rem;
    background: var(--canl-brume);
    font-family: var(--police-mono);
    font-size: .82rem;
    color: var(--texte);
    word-break: break-all;
}

.err-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.75rem;
}

.err-actions .btn {
    min-width: 11rem;
}

@media (max-width: 480px) {
    .err-code {
        font-size: 5.5rem;
    }

    .err-actions .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .carte-publique {
        animation: apparition .4s cubic-bezier(.2, .7, .3, 1) both;
    }
}

@keyframes apparition {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}