/*
 * ArchiLid — le kit de l'application, transposé au back-office (carte #275).
 * -------------------------------------------------------------------------
 * POURQUOI CE FICHIER. L'objectif est d'aligner l'ergonomie du BO sur celle de l'app
 * (demande FP du 11/09). Les trois premiers écrans refaits en ce sens — remarques d'une
 * visite, feuille de présence, plans — ont chacun injecté leur propre copie des mêmes
 * styles depuis leur JS. Le compte rendu en aurait fait une quatrième. Tout ce qui est
 * commun vit donc ICI, une fois, sous les MÊMES NOMS que dans l'app (`al-search`,
 * `al-pill`, `al-seg`…) : le jour où les deux fronts partageront un kit, rien n'est à
 * renommer.
 *
 * SOURCE DE VÉRITÉ. Les valeurs recopient l'app, branche feature/refonte :
 *   src/theme/design-tokens.css            tokens --al-*
 *   src/components/ui/AlSearchField.vue    .al-search
 *   src/components/ui/AlFilterPill.vue     .al-pill
 *   src/components/ui/AlSegmented.vue      .al-seg
 *   src/components/ui/AlEmptyState.vue     .al-empty-state
 *   src/components/ui/AlConfirmButton.vue  .al-cb (comportement : web/js/custom/ui/alKit.js)
 *   src/utils/contactIdentity.utils.ts     .al-initials (teintes : alKit.js)
 *   components/project/meeting/Attendee/ProjectMeetingAttendeeListItem.vue
 *                                          .al-att-row, .al-status-seg, .al-switch, .al-time
 * Toute retouche se fait d'abord dans l'app, puis ici.
 *
 * ÉCARTS ASSUMÉS. Les icônes restent Font Awesome (le BO entier l'est ; l'app est en MDI —
 * changer de bibliothèque relève du chantier d'unification, pas de ce fichier). Pas de mode
 * sombre : le BO n'en a pas.
 */

:root {
    /* Couleur — rôles MD3 (primaire = seed de marque, arbitrage FP du 11/09 : #23989e) */
    --al-primary: #23989e;
    --al-primary-shade: #1e868a;
    --al-on-primary: #ffffff;
    /* Le rouge de l'app (Ionic), aligné le 18/09 à la demande de FP. Attention : la valeur
       n'est pas celle qu'annonçait la feuille de l'app — `var(--ion-color-danger, #e5484d)`
       ne se rabat jamais sur son défaut, la variable étant définie à #eb445a. */
    --al-danger: #eb445a;
    /* Le rouge de l'app lit mal : 3,65:1 en texte sur fond clair, 3,81:1 en blanc sur fond
       rouge, sous le seuil de 4,5:1. Il reste donc la couleur des BORDURES, où le contraste
       ne se pose pas ; tout ce qui se LIT — libellés, messages d'erreur, bouton armé — prend
       la nuance foncée, qui repasse à 4,56 et 4,76:1 sans quitter la palette de l'app.
       Arbitrage FP du 18/09. */
    --al-danger-shade: #cf3c4f;
    /* Les couleurs d'état, pour les accents et les pastilles. Elles ne servent JAMAIS de
       fond à du texte blanc sans vérifier le contraste. */
    --al-warning: #d98324;
    --al-success: #2e7d32;
    --al-info: #1565c0;

    --al-surface: #f6fbfb;
    --al-surface-container-lowest: #ffffff;
    --al-surface-container-low: #eff5f5;
    --al-surface-container: #e9f2f2;
    --al-surface-container-high: #e2eeee;

    --al-on-surface: #171d1d;
    --al-on-surface-variant: #3f4948;
    --al-outline: #6f7978;
    --al-outline-variant: #c4cecd;

    /* Le fond de page est teinté, les objets posés dessus sont blancs : la profondeur
       vient de ce contraste, pas des ombres. */
    --al-page-bg: #f4f8f8;
    --al-form-card: #ffffff;
    --al-form-card-border: #e5ecec;
    /* Fond blanc pour tous les champs de formulaire (recette r1, point 1 — FP, 01/10/2026) :
       le gris très clair d'avant se confondait avec les cartes et les champs en lecture seule. */
    --al-form-field-bg: #ffffff;
    --al-form-label: #5c7371;
    --al-form-muted: #8a9c9b;
    --al-form-due-bg: #fef8f1;
    --al-form-due-border: #f0dcc8;
    --al-form-due-fg: #7a4e06;

    /* Forme */
    --al-radius-xs: 4px;
    --al-radius-sm: 8px;
    --al-radius-md: 12px;
    --al-radius-lg: 16px;
    --al-radius-full: 999px;

    /* Typographie (Roboto est déjà chargée par le gabarit project.html.twig) */
    --al-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --al-label-size: 0.75rem;
    --al-label-weight: 600;
    --al-label-tracking: 0.05em;
}

/* ==========================================================================
   L'HÉRITAGE — ce que portait web/assets/css/custom.css avant le 30/09/2026
   (lot 3 de doc/plans/PLAN-css-tout-dans-le-kit.md).

   Le socle de la page (fond, barres de défilement, listes), les jetons --ald-* et
   --vat-recap-*, les composants maison d'avant le kit (ald-section, ald-callout,
   ald-circuit, ald-switch, mfa-*, auth-*, finance-sidebar, récapitulatif TVA, l'attente
   #overlay…) et les anciennes classes utilitaires (.bold, .nowrap, .pull-right, .red…).

   Repris tels quels et DANS LEUR ORDRE, avant les composants du kit : à spécificité égale
   le kit continue de gagner, comme lorsqu'il était chargé après custom.css.

   RIEN NE S'AJOUTE ICI. Un écran retravaillé passe aux composants al-* et aux utilitaires
   du bas de ce fichier ; le bloc qu'il était seul à utiliser est alors supprimé.
   L'habillage de Bootstrap est à part (al-kit-bootstrap.css), celui de DevExtreme aussi
   (al-kit-dx.css).
   ========================================================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover{
    background: #c0c0c0;
}
::-webkit-scrollbar-track{
    background: #FFF;
    border-radius: 0;
    box-shadow: inset -30px -30px 3px #FFF;
}

:root{
    --ald-bg-body: #e6f2f3;
    --ald-bg-menu: #c4d7d8;
    --ald-logo-lg: '/images/logo-lg.png';
    --ald-logo-sm: '/images/logo-sm.png';
    --ald-menu-bg-hover: #23989e;
    --ald-menu-text-hover:#fff;
    --ald-bg: #f6f7f9;
    --ald-card:#fff;
    --ald-card-text-secondary: #2a3441;
    --ald-card-bg-secondary:#e1e6ea;
    --ald-card-bg-tertiary: #eef5ff;
    --ald-fg:#5f6b7a;
    --ald-fg-strong:#2a3441;
    --ald-border:#eaecef;
    --ald-radius: 5px;
    --ald-margin: 5px;
    --ald-shadow:0 10px 30px rgba(0,0,0,.08);
    --ald-color-primary: #23989e;
    --ald-color-secondary: #5f6b7a;
    --ald-text:       #333;
    --ald-text-sec:   #999;
    --ald-text-muted: #ababab;
    --ald-bg-alt:     #f5f5f5;
    --ald-success:    #5cb85c;
    --ald-warning:    #f0ad4e;
    --ald-danger:     #d9534f;
    --ald-info:       #5bc0de;

    /* === Timeline de suivi (steppers FTM/OS/...) === */
    --ald-timeline-done:         #2E7D32;   /* étape franchie */
    --ald-timeline-active:       #546E7A;   /* étape en cours (sobre, BlueGrey 600) */
    --ald-timeline-pending:      #CFD8DC;   /* étape future : point */
    --ald-timeline-line-pending: #E0E0E0;   /* étape future : ligne */

    /* === Récapitulatif TVA (saisie d'avancement DPGF) === */
    /* Cumul M-1 : gris (neutre) */
    --vat-recap-prev-header-bg:   #F5F5F5;
    --vat-recap-prev-header-fg:   #546E7A;
    --vat-recap-prev-cell-bg:     #FAFAFA;
    --vat-recap-prev-total-bg:    #ECEFF1;
    /* Période : jaune (action courante) */
    --vat-recap-period-header-bg: #FFF8E1;
    --vat-recap-period-header-fg: #8D6E00;
    --vat-recap-period-cell-bg:   #FFFDE7;
    --vat-recap-period-total-bg:  #FFF3E0;
    /* Cumulé : bleu (consolidé) */
    --vat-recap-cum-header-bg:    #E3F2FD;
    --vat-recap-cum-header-fg:    #1565C0;
    --vat-recap-cum-cell-bg:      #E3F2FD;
    --vat-recap-cum-total-bg:     #BBDEFB;
    /* Révision (info brute) + Net TTC révisé (total final) */
    --vat-recap-revision-fg:      #6A1B9A;
    --vat-recap-revision-cell-bg: #F3E5F5;
    --vat-recap-net-bg:           #23989E;
    --vat-recap-net-fg:           #ffffff;
}

body {
    background-color:var(--ald-bg-body)!important;
}

hr.dotted {
    border-top: 1px dotted #999999;
}

hr.dashed {
    border-top: 1px dashed #999999;
}

ul{
    list-style: none !important;
}

ul::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
ul::-webkit-scrollbar-thumb {
    background: var(--ald-color-primary);
    border-radius: 0;
}
ul::-webkit-scrollbar-thumb:hover{
    background: var(--ald-color-primary);
}
ul::-webkit-scrollbar-track{
    background: #FFF;
    border-radius: 0;
    box-shadow: inset -30px -30px 3px #000;
}

/* Bloc général */
.ald-section {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px 18px;
    margin-bottom: 10px;
}

/* Titre + bouton "Nouveau" alignés */
.ald-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* Sous-titre de section (ex. "PIÈCES JOINTES", "CIRCUIT SITUATIONS & CP") */
.ald-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #455A64;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid #00897B;
}
.ald-section-title i {
    color: #00897B;
    font-size: 13px;
}

/* Label d'une carte KPI (petit texte au-dessus de la valeur) */
.ald-kpi-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #78909C;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* Label de lot cliquable (ouvre la fiche détail) */
.ald-lot-link:hover {
    color: #00897B;
    text-decoration: underline;
}

#aldLogo.ald-logo {
    width: 197px;
    height: 30px;
    background-image: url('/images/logo-lg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Version small screen */
@media (max-width: 992px) {
    #aldLogo.ald-logo {
        width: 30px;
        height: 30px;
        background-image: url('/images/logo-sm.png');
    }
}

.pull-right {
    float: right !important;
}
.pull-left {
    float: left !important;
}
.blue {
    color: #3498DB
}
.purple {
    color: #9B59B6
}
.green {
    color: #1ABB9C !important;
}
a:hover.green {
    color: #129e86 !important;
}
.text-bluegrey {
    color: #73879C!important;
}
.aero {
    color: #9CC2CB
}
.red {
    color: #E74C3C
}
.orange {
    color: #FFA500
}
.black {
    color: #000000
}
.dark {
    color: #34495E
}
.grey {
    color: #999999
}

.cursor{
    cursor: pointer;
}

.rectangle {
    width: 30px;
    height: 25px;
    font-size: 9px;
    background: black;
    border-radius: 0.2rem;
    text-align: center;
    vertical-align: middle;
    font-family: arial, sans-serif;
    color: white;
    margin: auto;
}

.cercle {
    width: 15px;
    height: 15px;
    font-size: 9px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    font-family: arial, sans-serif;
    color: white;
    margin: auto;
}

.cercle-xl {
    width: 25px;
    height: 25px;
}

.bt {
    border-top: 1px solid #eaeaea;
}

.bb {
    border-bottom: 1px solid #eaeaea;
}

.beautify-marker-circle {
    font-size: 10px;
    padding-top: 6px;
}

.marker-circle {
    color: rgb(255, 255, 255);
    width: 30px;
    height: 30px;
    font-size: 10px;
    border-radius: 100%;
    text-align: center;
    font-weight: 700;
    display: block;
    line-height: 30px;
}

.bold {
    font-weight: bold !important;
}

.bolder {
    font-weight: 600 !important;
}

.nowrap {
white-space: nowrap !important;
}

.no-padding {
padding: 0 !important
}

.no-margin {
margin: 0 !important;
}

.vertical-align-top td {
vertical-align: top !important;
}

.w_100{
    width: 100% !important;
}

.w_49{
    width: 49% !important;
}

.full-width {
    width:100%;
}

.italic {
    font-style: italic;
}

.upper{
    text-transform: uppercase !important;
}

.gototop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }
    .gototop.active {
    opacity: 1;
    visibility: visible; }
    .gototop a {
    width: 40px;
    height: 40px;
    display: table;
    background: #05050569;
    text-align: center;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    box-shadow: 0 1px 6px rgba(0,0,0,.1), 0 2px 24px rgba(0,0,0,.2);
}
/* La couleur du lien : sous le thème DevExtreme c'est celle des liens du thème qui s'applique
   (.dx-theme-generic-typography a) ; :where() garde ce blanc pour les seules pages publiques. */
:where(.gototop) a {
    color: #fff;
}
.gototop a i {
    height: 20px;
    width: 20px;
    display: table-cell;
    font-weight: bold;
    vertical-align: middle;
    color: #fff;
}
.gototop a:hover, .gototop a:active, .gototop a:focus {
text-decoration: none;
outline: none;
}

#container-footer {
    text-align: right;
}

.video-card {
    position: relative;
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.video-thumb {
    display: block;
    width: 70px;
    height: auto;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;      /* plein conteneur */
    height: 100%;     /* plein conteneur */
    background: rgba(0, 0, 0, 0.1);
    border: none;
    /* hérite de border-radius du parent via overflow:hidden */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    cursor: pointer;
}

.video-overlay:hover {
    background: rgba(0, 0, 0, 0.2);
}

.video-overlay .icon-info {
    font-size: 1.4rem;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
    position: relative;
    top: 3px;
}
/* Fin vidéo tuto */

/* LOADER — l'attente du site (beforeLoad, ajaxtools.js) au modèle du kit : voile clair flouté,
   carte blanche, anneau gris à arc bleu-vert (décision FP 24/09). Les pages publiques (connexion,
   2FA…) le dessinent aussi : elles chargent al-kit.css, pas al-kit-dx.css. */

#overlay {
    position: fixed;
    inset: 0;
    z-index: 9999; /* Toujours au-dessus, fenêtres comprises */
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(244, 248, 248, .72);
    backdrop-filter: blur(2px);
    font-family: var(--al-font-family, 'Roboto', sans-serif);
}
#overlay .al-loading-card {
    width: auto;
    min-width: 160px;
    max-width: 360px;
    box-sizing: border-box;
    padding: 22px 26px 18px;
    text-align: center;
    background: var(--al-form-card, #fff);
    border: 1px solid var(--al-form-card-border, #e5ecec);
    border-radius: var(--al-radius-lg, 16px);
    box-shadow: 0 12px 32px rgba(15, 40, 42, .12);
}
#overlay .al-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 4px solid var(--al-surface-container, #e9f2f2);
    border-top-color: var(--al-primary, #23989e);
    animation: al-spin .8s linear infinite;
}
#overlay .al-loading-message {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--al-on-surface-variant, #3f4948);
}
@keyframes al-spin {
    to { transform: rotate(360deg); }
}
/* END LOADER */

/* CSS INBOX */

.mail_list_column {
    border-left: 0
}
.mail_list {
    width: 100%;
    border-bottom: 1px solid #DBDBDB;
    display: inline-block;
    padding-left: 10px;
    padding-top: 5px;
}
.mail_list .left {
    width: 5%;
    float: left;
    margin-right: 3%;
    padding-top: 5px;
}
.mail_list .right {
    width: 90%;
    float: left;
}
.mail_list h3 {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 6px;
}
.mail_list h3 small {
    float: right;
    color: #ADABAB;
    font-size: 11px;
    line-height: 20px
}
.mail_list .badge {
    padding: 3px 6px;
    font-size: 8px;
    background: #BAB7B7
}

.mail_heading h4 {
    font-size: 18px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-top: 20px;
}
.attachment {
    margin-top: 30px;
}
.attachment ul {
    width: 100%;
    list-style: none;
    padding-left: 0;
    display: inline-block;
    margin-bottom: 30px;
}
.attachment ul li {
    float: left;
    width: 150px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.attachment ul li img {
    height: 150px;
    border: 1px solid #ddd;
    padding: 5px;
    margin-bottom: 10px;
}
.attachment ul li span {
    float: right;
}
.attachment .links {
    width: 100%;
    display: inline-block;
}

/* End CSS INBOX */

/* NoResult  */
#confirm {
    display: block;
    background-color: #f8f8f8;
    color: #000000;
    border: 1px solid #aaa;
    position: relative;
    width: 60%;
    min-height: 200px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 0.5rem;
    margin: 20px auto 100px;
    -webkit-box-shadow: 0 10px 10px -4px rgba(0,0,0,0.12);
    -moz-box-shadow: 0 10px 10px -4px rgba(0,0,0,0.12);
    box-shadow: 0 10px 10px -4px rgba(0,0,0,0.12);;
}

#confirm .ico {
    padding: 20px 10px 10px 10px;
    font-size: 4.5rem;
    color: rgba(0,0,0,0.25);
}

#confirm .title {
    text-align: center;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    padding: 10px;
    text-transform: uppercase;
}
#confirm .message {
    text-align: center;
    font-size: 1rem;
    padding: 10px 10px 30px;
    color: #666666;
}
#confirm .button {
    text-align: center;
    padding-bottom: 20px;
}

/* End NoResult  */

button[aria-expanded=true] .visibility_off {
    display: none;
}
button[aria-expanded=false] .visibility_on {
    display: none;
}

h3[aria-expanded=true] .visibility_off {
    display: none;
}
h3[aria-expanded=false] .visibility_on {
    display: none;
}

h3.headLine > a {
    padding-right: 10px;
}

h3.headLine {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

h3.headLine:after {
    content: '';
    border-top: 2px dashed #999;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}

h3.headLine:after {
    margin: 0 0 0 20px;
}

div.elementTitle{
    font-size: 1.5rem;
    font-weight: 500;
    background-color: #e7e7e7;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
}

div.elementTitle div.leftElement {
    text-transform: uppercase;
    text-align: left;
    color: var(--ald-color-primary);
    line-height: 30px;
}

div.elementTitle div.rightElement {
    text-transform: uppercase;
    text-align: right;
    color: var(--ald-color-primary);
    line-height: 30px;
    font-size: 1.2rem;
}

div.elementSubTitle{
    font-size: 1.4rem;
    font-weight: 500;
    background-color: #f3f1f1;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

div.elementSubTitle div.leftElement {
    text-transform: uppercase;
    text-align: left;
    color: #333333;
    line-height: 30px;
}

div.elementSubTitle div.rightElement {
    text-transform: uppercase;
    text-align: right;
    font-size: 1rem;
}
div.colAddOn{
    font-size: 0.7rem;
    font-weight: 500;
    text-align: right;
    color: #333333;
}
div.colLogo {
    text-align: center;
    border-right: 1px solid #eaeaea;
}
div.colTitle {
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;

}
div.colContent {
    border-right: 1px solid #eaeaea;
    border-bottom: none;
}
div.lastColContent {
    border-right: none;
    border-bottom: none;
}
div.colButton {
    text-align: right;
    border-top: 1px solid #eaeaea;
}

@media (max-width: 992px) {
    div.elementTitle {
        font-size: 1.3rem;
    }

    div.elementTitle div.rightElement button {
        width: 100%;
    }

    div.elementTitle div.rightElement {
        text-align: left;
    }
    div.elementSubTitle {
        font-size: 1.2rem;
    }
    div.elementSubTitle div.rightElement {
        text-align: left;
    }
    div.colAddOn{
        text-align: left;
    }
    div.colLogo {
        text-align: left;
    }
    div.colTitle {
        text-align: left;
        padding-top: 5px;
        margin-top: 5px;
    }
    div.colContent {
        border-bottom: 1px solid #eaeaea;
        border-right: none;
    }
    div.lastColContent {
        border-bottom: 1px solid #eaeaea;
        border-right: none;
    }
    div.colButton {
        text-align: center;
        border-top: none;
    }
    div.colButton button {
        width: 100%;
    }
}

.al-row .content-middle {
    align-items: center;
}

h3.dashboard-title {
    padding: 5px 10px;
    margin-top: 0;
    background-color: #e7e7e7;
}
h3.dashboard-title span {
    font-weight: 500;
    color: var(--ald-color-primary);
}
h3.dashboard-title small {
    color:var(--ald-color-primary);
}

h3.dashboard-title small.pull-right {
    font-size: 12px;
    font-weight: 600;
}

h4.dashboard-title {
    padding: 5px 10px;
    margin: 15px 0;
    background-color: #e7e7e7;
}
h4.dashboard-title span {
    font-weight: 500;
}
h4.dashboard-title a{
    margin: 15px 0;
    color: #333333;
}

h4.dashboard-title a:hover{
    color: #000000;
}

h4[aria-expanded=true] .visibility_off {
    display: none;
}
h4[aria-expanded=false] .visibility_on {
    display: none;
}

h4.headLine > a {
    padding-right: 10px;
}

h4.headLine {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

h4.headLine:after {
    content: '';
    border-top: 2px dashed #999;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}

h4.headLine:after {
    margin: 0 0 0 20px;
}

h5[aria-expanded=true] .visibility_off {
    display: none;
}
h5[aria-expanded=false] .visibility_on {
    display: none;
}

h5.headLine > a {
    padding-right: 10px;
}

h5.headLine {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

h5.headLine:after {
    content: '';
    border-top: 2px dashed #999;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}

h5.headLine:after {
    margin: 0 0 0 20px;
}

h6.headLine > a {
    padding-right: 10px;
}

h6[aria-expanded=true] .visibility_off {
    display: none;
}
h6[aria-expanded=false] .visibility_on {
    display: none;
}

h6.headLine {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

h6.headLine:after {
    content: '';
    border-top: 2px dashed #999;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}

h6.headLine:after {
    margin: 0 0 0 20px;
}

.dashboard-advert {
    display: flex;
    flex-flow: column;
    width: auto;
}

.dashboard-advert-removable{
    top: 40px;
    right: 0;
    position: fixed;
    z-index: 1;
    padding: 30px;
    max-width: 500px;
    width: 90%;
}

.dashboard-advert-permanent{
    position: relative;
    width: 100%;
}

.dashboard-advert .alert {
    display: flex;
    flex-flow: row;
    min-height: 90px;
    height: auto;
    background-color: #cecece;
    border-radius: 0;
    color: #fff;
    transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);
    cursor: pointer;
}

.dashboard-advert .dashboard-advert-permanent .alert{
    margin: 0;
    box-shadow: none
}

.dashboard-advert .dashboard-advert-removable .alert{
    box-shadow: 0 10px 46px -21px rgba(0, 0, 0, 0.75);
}

.dashboard-advert .alert-icon {
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    background-color: rgba(0, 0, 0, 0.2);
}

.dashboard-advert .dashboard-advert-permanent .alert-icon {
    width: 10% !important;
}

.dashboard-advert .alert-content {
    position: relative;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-flow: column;
    width: 100%;
}
.dashboard-advert .alert-content .alert-close {
    position: absolute;
    font-size: 12px;
    top: 7px;
    right: 10px;
    cursor: pointer;
}
.dashboard-advert .alert-content .alert-title {
    padding-right: 12px;
    font-size: 14px;
    font-weight: 700;
}
.dashboard-advert .alert-content .alert-subtitle {
    display: flex;
    flex-flow: column;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
    padding: 5px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.3);
    color: black;
    width: 100%;
}
.dashboard-advert .alert-content .alert-subtitle .little-list {
    display: none;
    padding: 10px;
}
.dashboard-advert a:hover{
    color: #fff;
}

.border-dashed {
    border: 1px dashed #999999;
}

div.notification-element {
    background-color: #f9f9f9;
    height: 100% !important;
    width: 100%;
}

div.notification-primary {
    border: 2px solid var(--ald-color-primary) !important;
}

div.notification-secondary {
    border: 2px solid #6c757d !important;
}

div.notification-success {
    border: 2px solid #1ABB9C !important;
}

div.notification-info {
    border: 2px solid #00bcd4 !important;
}

div.notification-warning {
    border: 2px solid #ff9800 !important;
}

div.notification-danger {
    border: 2px solid #f44336 !important;
}

div.notification-primary h4 {
    color: var(--ald-color-primary) !important;
}

div.notification-secondary h4 {
    color: #6c757d !important;
}

div.notification-success h4 {
    color: #1ABB9C !important;
}

div.notification-info h4 {
    color: #00bcd4 !important;
}

div.notification-warning h4 {
    color: #ff9800 !important;
}

div.notification-danger h4 {
    color: #f44336 !important;
}

.inline-icon {
    vertical-align: bottom;
    font-size: 24px !important;
}

@media (max-width: 575px) {
    .d-xs-none {
        display: none !important; }
}

/* ===== Circuit de validation (.ald-circuit-*) ===== */
.ald-circuit-section {
    border-radius: 6px;
    border: 1px solid var(--ald-border);
    background: #fff;
    margin-bottom: 0;
    overflow: hidden;
}

.ald-circuit-section-header {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #fff;
}

.ald-circuit-section-moe .ald-circuit-section-header {
    color: #2196F3;
    border-bottom: 1px solid #eaecef;
}

.ald-circuit-section-moa .ald-circuit-section-header {
    color: #009688;
    border-bottom: 1px solid #eaecef;
}
.ald-circuit-section-email .ald-circuit-section-header {
    color: #78909C;
    border-bottom: 1px solid #eaecef;
}

.ald-circuit-section-body {
    display: flex;
    align-items: stretch;
    padding: 16px;
    gap: 0;
}

.ald-circuit-card {
    flex: 1;
    border: 1px solid var(--ald-border);
    border-radius: 6px;
    padding: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 140px;
    transition: border-color 0.2s;
}

.ald-circuit-card-configured { border-color: var(--ald-success); }
.ald-circuit-card-missing    { border-color: var(--ald-warning); }
.ald-circuit-card-required   { border-color: var(--ald-danger); border-width: 2px; }

.ald-circuit-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ald-circuit-step-badge {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.ald-circuit-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ald-fg-strong);
    flex-grow: 1;
}

/* L'icône porte son infobulle (dxPopover) et devient un widget DevExtreme : ce gris passe après la
   couleur du thème (#333), qui l'écrasait tant que cette règle vivait dans custom.css. */
.ald-circuit-info-icon {
    cursor: pointer;
    color: var(--ald-text-sec);
    font-size: 14px;
    flex-shrink: 0;
}
.ald-circuit-info-icon:hover { color: var(--ald-color-primary); }

.ald-circuit-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.ald-circuit-badge-required { background: #ffebee; color: var(--ald-danger); }
.ald-circuit-badge-optional { background: var(--ald-bg-alt); color: var(--ald-text-sec); }

.ald-circuit-user {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 10px;
}

.ald-circuit-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ald-fg-strong);
}

.ald-circuit-user-role {
    font-size: 12px;
    color: var(--ald-text-sec);
}

.ald-circuit-user-missing {
    font-size: 13px;
    font-weight: 500;
    color: var(--ald-warning);
}

.ald-circuit-user-missing-required {
    color: var(--ald-danger);
}

.ald-circuit-amount {
    font-size: 12px;
    color: var(--ald-text-sec);
    margin-bottom: 8px;
}
.ald-circuit-amount strong { color: var(--ald-fg-strong); }

.ald-circuit-card-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.ald-circuit-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
    color: var(--ald-text-sec);
    font-size: 18px;
}

.ald-circuit-connector-v {
    display: flex;
    justify-content: center;
    padding: 4px 0;
    color: var(--ald-text-sec);
    font-size: 18px;
}

/* ===== Récapitulatif TVA (saisie avancement DPGF) — .vat-recap-* ===== */
.vat-recap-table { width: 100%; border-collapse: collapse; }
.vat-recap-table th { padding: 6px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: #555; border: 1px solid #ddd; }
.vat-recap-table td { padding: 5px 10px; font-size: 12px; border: 1px solid #eee; }
.vat-recap-table .right { text-align: right; }
.vat-recap-table .center { text-align: center; }
.vat-recap-table .label-cell { font-weight: 600; }

/* Colonne Cumul M-1 (gris) */
.vat-recap-table .header-prev { background: var(--vat-recap-prev-header-bg); color: var(--vat-recap-prev-header-fg); }
.vat-recap-table .cell-prev { background: var(--vat-recap-prev-cell-bg); }
.vat-recap-table .total-prev { background: var(--vat-recap-prev-total-bg); }

/* Colonne Période (jaune) */
.vat-recap-table .header-period { background: var(--vat-recap-period-header-bg); color: var(--vat-recap-period-header-fg); }
.vat-recap-table .cell-period { background: var(--vat-recap-period-cell-bg); }
.vat-recap-table .total-period { background: var(--vat-recap-period-total-bg); }

/* Colonne Cumulé (bleu) */
.vat-recap-table .header-cum { background: var(--vat-recap-cum-header-bg); color: var(--vat-recap-cum-header-fg); }
.vat-recap-table .cell-cum { background: var(--vat-recap-cum-cell-bg); }
.vat-recap-table .total-cum { background: var(--vat-recap-cum-total-bg); }

/* Total global — chaque cellule garde sa couleur de colonne (total-prev/period/cum) */
.vat-recap-table .total-row td { padding: 6px 10px; font-size: 12px; font-weight: 700; border: 1px solid #ddd; }
.vat-recap-table .total-row .total-label { background: #F5F5F5; color: #263238; }

/* Ligne Net TTC révisé */
.vat-recap-table .net-row td { padding: 6px 10px; font-size: 12px; font-weight: 700; border: 1px solid #ddd; background: var(--vat-recap-net-bg); color: var(--vat-recap-net-fg); }

/* ===== Détail des lignes de la situation (recap step) ===== */
.recap-lines-table th,
.recap-lines-table td { border-right: 1px solid #E0E6EB; }
.recap-lines-table th:last-child,
.recap-lines-table td:last-child { border-right: none; }
.recap-lines-table { border: 1px solid #E0E6EB; }

/* ===== Coloration colonnes grids Avancement / Recap (mêmes variables que .vat-recap-*) ===== */
/* M-1 → gris | Période → jaune | Cumulé → bleu */
.progress-col-prev   { background: var(--vat-recap-prev-cell-bg) !important; }
.progress-col-period { background: var(--vat-recap-period-cell-bg) !important; }
.progress-col-cum    { background: var(--vat-recap-cum-cell-bg) !important; }
/* Headers (groupe + leaf) reprennent la teinte plus marquée du récap TVA */
.dx-datagrid-headers .progress-col-prev,
.dx-treelist-headers .progress-col-prev   { background: var(--vat-recap-prev-header-bg) !important; color: var(--vat-recap-prev-header-fg); }
.dx-datagrid-headers .progress-col-period,
.dx-treelist-headers .progress-col-period { background: var(--vat-recap-period-header-bg) !important; color: var(--vat-recap-period-header-fg); }
.dx-datagrid-headers .progress-col-cum,
.dx-treelist-headers .progress-col-cum    { background: var(--vat-recap-cum-header-bg) !important; color: var(--vat-recap-cum-header-fg); }

/* ===== Messages / encarts d'information (.ald-callout-*) =====
   Convention ArchiLid pour tout message d'info/avertissement/erreur.
   REMPLACE les classes Bootstrap .alert (proscrites — rendu non conforme). */
.ald-callout {
    --ald-callout-accent: var(--ald-border);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--ald-bg-alt);
    color: var(--ald-text);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
}
/* Le repère de couleur : l'angle haut-gauche du kit (al-accent), plus de liseré gauche */
.ald-callout::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border-top: 3px solid var(--ald-callout-accent);
    border-left: 3px solid var(--ald-callout-accent);
    border-top-left-radius: inherit;
    pointer-events: none;
}
.ald-callout > i { margin-top: 2px; font-size: 15px; }
.ald-callout-title { font-weight: 700; margin-bottom: 2px; }
.ald-callout-info    { background: #E3F2FD; --ald-callout-accent: #1565C0; color: #0D47A1; }
.ald-callout-warning { background: #FFF3E0; --ald-callout-accent: #E65100; color: #7A3B00; }
.ald-callout-danger  { background: #FFEBEE; --ald-callout-accent: #C62828; color: #8E1F1F; }
.ald-callout-success { background: #E8F5E9; --ald-callout-accent: #2E7D32; color: #1B5E20; }
/* Tailles d'un message configurable (messages aux entreprises du module financier).
   Écrites sur develop dans custom.css (9ac81bab1) : reprises ici pour que la fusion ne les perde pas. */
.ald-callout-size-small  { padding: 8px 12px; font-size: 12px; }
.ald-callout-size-medium { font-size: 14px; }
.ald-callout-size-large  { padding: 16px 20px; font-size: 17px; font-weight: 600; }
.ald-callout-size-large > i { font-size: 20px; }

/* ===== Pages 2FA / MFA (espace utilisateur sécurité) ===== */
.mfa-icon-circle {
    width: 60px; height: 60px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #E3F2FD; color: #1565C0; font-size: 24px; margin-bottom: 12px;
}
.mfa-icon-circle.is-muted { background: #ECEFF1; color: #90A4AE; }
.mfa-icon-circle.is-success { background: #E8F5E9; color: #2E7D32; }
.mfa-icon-circle.is-warning { background: #FFF3E0; color: #E65100; }
.mfa-icon-circle.is-danger { background: #FFEBEE; color: #C62828; }
.mfa-icon-circle.is-sm { width: 44px; height: 44px; font-size: 18px; margin-bottom: 6px; }
.mfa-method-card { transition: box-shadow .15s ease, border-color .15s ease; }
.mfa-method-card > .card-body { display: flex; flex-direction: column; }
.mfa-method-card.is-selectable { cursor: pointer; }
.mfa-method-card.is-selectable:hover { border-color: #1565C0; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.mfa-feature-list { list-style: none; padding: 0; margin: 0 0 16px; text-align: left; font-size: 13px; }
.mfa-method-card .mfa-feature-list { flex: 1 1 auto; }
.mfa-feature-list li { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; color: #37474F; }
.mfa-feature-list li > i { margin-top: 3px; font-size: 13px; }
.mfa-feature-list li.is-warning { color: #7A3B00; }
.mfa-section-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #90A4AE; margin-bottom: 10px;
}
.mfa-info-box { border: 1px solid #ECEFF1; border-radius: 8px; padding: 16px 18px; height: 100%; }

/* ----- Page de vérification 2FA au login (verify.html.twig) ----- */
.mfa-verify-card, .auth-card { max-width: 460px; margin: 24px auto; }
.mfa-verify-head { text-align: center; margin-bottom: 8px; }

/* Saisie OTP : 6 cases */
.mfa-otp { display: flex; gap: 8px; justify-content: center; margin: 8px 0 6px; }
.mfa-otp .otp-cell {
    width: 46px; height: 56px; text-align: center;
    font-size: 24px; font-weight: 600; font-family: monospace;
    border: 1px solid #CFD8DC; border-radius: 8px; background: #fff; color: #263238;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.mfa-otp .otp-cell:focus { outline: none; border-color: #1565C0; box-shadow: 0 0 0 3px rgba(21,101,192,.15); }
.mfa-otp .otp-sep { width: 8px; flex: 0 0 auto; }

/* Champ code de secours (mode bascule) */
.mfa-backup-input {
    width: 100%; text-align: center; font-size: 20px; letter-spacing: 3px;
    padding: 12px; border: 1px solid #CFD8DC; border-radius: 8px; color: #263238;
}
.mfa-backup-input:focus { outline: none; border-color: #1565C0; box-shadow: 0 0 0 3px rgba(21,101,192,.15); }

/* Interrupteur (toggle) réutilisable */
.ald-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.ald-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ald-switch .ald-switch-track {
    width: 40px; height: 22px; border-radius: 22px; background: #CFD8DC;
    position: relative; transition: background .15s ease; flex: 0 0 auto;
}
.ald-switch .ald-switch-track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s ease;
}
.ald-switch input:checked + .ald-switch-track { background: #1565C0; }
.ald-switch input:checked + .ald-switch-track::after { transform: translateX(18px); }
.ald-switch input:focus + .ald-switch-track { box-shadow: 0 0 0 3px rgba(21,101,192,.15); }

/* Case à cocher stylée réutilisable */
.ald-checkbox { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.ald-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.ald-checkbox .ald-checkbox-box {
    width: 18px; height: 18px; border-radius: 4px; border: 1px solid #B0BEC5;
    background: #fff; flex: 0 0 auto; position: relative; margin-top: 1px;
    transition: background .12s ease, border-color .12s ease;
}
.ald-checkbox .ald-checkbox-box::after {
    content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
    transition: transform .12s ease;
}
.ald-checkbox input:checked + .ald-checkbox-box { background: #1565C0; border-color: #1565C0; }
.ald-checkbox input:checked + .ald-checkbox-box::after { transform: rotate(45deg) scale(1); }
.ald-checkbox input:focus + .ald-checkbox-box { box-shadow: 0 0 0 3px rgba(21,101,192,.15); }

/* Bouton Vérifier pleine largeur */
.mfa-verify-submit { width: 100%; padding: 11px; font-size: 15px; border-radius: 8px; }

/* Chips « autre méthode » */
.mfa-method-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mfa-method-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
    border: 1px solid #CFD8DC; border-radius: 999px; color: #37474F; background: #fff;
    text-decoration: none; font-size: 14px; transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.mfa-method-chip:hover { border-color: #1565C0; background: #F5F9FF; color: #1565C0; text-decoration: none; }
.mfa-method-chip > i { font-size: 15px; }

/* ----- Page de login (login.html.twig) ----- */
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 13px; font-weight: 600; color: #546E7A; margin-bottom: 5px; }
.auth-input {
    width: 100%; padding: 10px 12px; font-size: 15px;
    border: 1px solid #CFD8DC; border-radius: 8px; color: #263238; background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.auth-input:focus { outline: none; border-color: #1565C0; box-shadow: 0 0 0 3px rgba(21,101,192,.15); }
.auth-tabs { border-bottom: 1px solid #ECEFF1; margin-bottom: 20px; justify-content: center; }
.auth-tabs .nav-item { margin: 0; }
.auth-tabs .nav-link {
    border: none; background: none; color: #78909C; font-weight: 600;
    padding: 10px 18px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.auth-tabs .nav-link:hover { color: #37474F; border-bottom-color: #CFD8DC; }
.auth-tabs .nav-link.active { color: #1565C0; border-bottom-color: #1565C0; background: none; }
.auth-card-wide { max-width: 640px; margin: 24px auto; }
.auth-links { text-align: center; margin-top: 18px; font-size: 14px; }
.auth-links a { margin: 0 6px; white-space: nowrap; }
/* Champ mot de passe avec œil afficher/masquer */
.auth-input-wrap { position: relative; }
.auth-input-wrap .auth-input { padding-right: 40px; }
.auth-input-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    border: none; background: none; color: #90A4AE; cursor: pointer;
    padding: 6px 8px; line-height: 1; font-size: 15px;
}
.auth-input-eye:hover { color: #546E7A; }

/* ═══════════════════════════════════════════════════════════
   Finance Sidebar Navigation
   ═══════════════════════════════════════════════════════════ */

.finance-layout {
    display: flex;
    min-height: calc(100vh - 120px);
    border-radius: var(--ald-radius);
    box-shadow: var(--ald-shadow);
    overflow: hidden;
}

/* ─── Sidebar ─── */
.finance-sidebar {
    width: 220px;
    min-width: 220px;
    background: var(--ald-bg-menu);
    color: var(--ald-fg-strong);
    font-family: 'Roboto', sans-serif;
    overflow-y: auto;
    transition: width 200ms ease, min-width 200ms ease;
}
.finance-sidebar__header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--ald-border);
}
.finance-sidebar__title {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ald-fg);
    margin-bottom: 4px;
}
.finance-sidebar__project {
    font-size: 13px;
    font-weight: 400;
    color: var(--ald-fg-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Groupes ─── */
.finance-sidebar__group {
    border-bottom: 1px solid var(--ald-border);
}
.finance-sidebar__group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ald-fg);
    cursor: pointer;
    user-select: none;
    transition: color 150ms;
}
.finance-sidebar__group-label:hover {
    color: var(--ald-fg-strong);
}
.finance-sidebar__group-label .caret {
    transition: transform 200ms ease;
    font-size: 10px;
    color: var(--ald-text-sec);
}
.finance-sidebar__group.collapsed .caret {
    transform: rotate(-90deg);
}
.finance-sidebar__group-items {
    overflow: hidden;
    max-height: 500px;
    transition: max-height 200ms ease;
}
.finance-sidebar__group.collapsed .finance-sidebar__group-items {
    max-height: 0;
}

/* ─── Items ─── */
.finance-sidebar__item {
    display: flex;
    align-items: center;
    padding: 8px 16px 8px 20px;
    font-size: 13px;
    color: var(--ald-fg-strong);
    cursor: pointer;
    transition: background 150ms, border-left-color 150ms;
    border-left: 3px solid transparent;
}
.finance-sidebar__item:hover {
    background: var(--ald-menu-bg-hover);
    color: var(--ald-menu-text-hover);
}
.finance-sidebar__item.active {
    background: var(--ald-menu-bg-hover);
    color: var(--ald-menu-text-hover);
    border-left-color: var(--ald-fg-strong);
}
.finance-sidebar__item-icon {
    width: 20px;
    margin-right: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--ald-fg);
}
.finance-sidebar__item:hover .finance-sidebar__item-icon,
.finance-sidebar__item.active .finance-sidebar__item-icon {
    color: var(--ald-menu-text-hover);
}
.finance-sidebar__item-label {
    flex: 1;
}
.finance-sidebar__badge {
    background: var(--ald-color-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    min-width: 20px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 10px;
    padding: 0 6px;
}

/* ─── Zone de contenu ─── */
.finance-content {
    flex: 1;
    background: var(--ald-card);
    padding: 20px;
    min-height: 400px;
    overflow-y: auto;
}

/* ─── Responsive < 992px ─── */
@media (max-width: 991px) {
    .finance-sidebar {
        width: 48px;
        min-width: 48px;
    }
    .finance-sidebar__header,
    .finance-sidebar__group-label span,
    .finance-sidebar__item-label,
    .finance-sidebar__badge {
        display: none;
    }
    .finance-sidebar__group-label {
        justify-content: center;
        padding: 10px 0;
    }
    .finance-sidebar__group-label .caret {
        display: none;
    }
    .finance-sidebar__item {
        justify-content: center;
        padding: 10px 0;
        border-left: none;
    }
    .finance-sidebar__item-icon {
        margin-right: 0;
        font-size: 16px;
    }
}
/* Changement d'abonnement (fenêtre DevExtreme) : les erreurs sous la liste des offres */
.subscription-change-errors {
    margin-top: 14px;
    font-size: 13px;
}

/* La barre de menu du haut (#aldMenu) est un dxMenu, construit une fois DevExtreme chargé en fin de
   page : vide avant, 35 px après, elle poussait toute la page vers le bas au chargement.
   Sa hauteur est réservée d'emblée. */
#aldMenu:not(.dx-menu) {
    min-height: 35px;
}

/* ==========================================================================
   Fin de l'héritage — les composants du kit
   ========================================================================== */

/* --- Micro-label : le libellé en capitales au-dessus d'un champ ou d'un bloc ------- */
.al-label {
    font-family: var(--al-font-family);
    font-size: var(--al-label-size);
    font-weight: 700;
    letter-spacing: var(--al-label-tracking);
    text-transform: uppercase;
    color: var(--al-form-label);
}

/* --- Carte : l'objet blanc posé sur le fond teinté ------------------------------- */
.al-card {
    background: var(--al-form-card);
    border: 1px solid var(--al-form-card-border);
    border-radius: var(--al-radius-md);
    padding: 16px;
}
.al-card.flush {
    padding: 0;
    overflow: hidden;
}

/* --- L'ANGLE : le repère de couleur d'une carte ----------------------------------
   REMPLACE LE LISERÉ GAUCHE (demande FP du 18/09) : une barre sur tout le flanc, on la
   voit sur tous les sites, et elle mange l'alignement du texte. L'angle se pose sur le
   coin haut-gauche, là où l'œil entre dans la carte, sans rien décaler.

   Généralisé à tout le site le 24/09/2026 (demande FP) : cartes, encarts d'information,
   cartes d'indicateurs — plus aucun liseré gauche ou haut coloré.

   La couleur se donne par `--al-accent`, sur la carte ou sur un ancêtre :
       <div class="al-card al-accent" style="--al-accent: var(--al-danger)">
   ou par l'une des classes nommées ci-dessous. Sans rien, c'est la couleur de marque.

   `overflow: hidden` sur la carte le couperait : l'angle mord d'un pixel sur la bordure
   pour la recouvrir. Sur une carte `flush`, poser l'angle sur un enfant. */
.al-accent {
    position: relative;
}
.al-accent::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 38px;
    height: 38px;
    border-top: 3px solid var(--al-accent, var(--al-primary));
    border-left: 3px solid var(--al-accent, var(--al-primary));
    /* L'angle épouse l'arrondi de sa carte, quel qu'il soit (4, 8, 12 px…) */
    border-top-left-radius: inherit;
    pointer-events: none;
}
.al-accent.primary { --al-accent: var(--al-primary); }
.al-accent.danger { --al-accent: var(--al-danger); }
.al-accent.warning { --al-accent: var(--al-warning); }
.al-accent.success { --al-accent: var(--al-success); }
.al-accent.info { --al-accent: var(--al-info); }
.al-accent.neutral { --al-accent: var(--al-outline-variant); }
.al-accent.violet { --al-accent: #6a1b9a; }

/* --- Titre de groupe d'une liste : capitales teal, suivi d'un filet --------------- */
.al-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 8px;
    font-family: var(--al-font-family);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--al-primary);
}
.al-group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--al-form-card-border);
}
.al-group-title .al-group-count {
    font-weight: 700;
    color: var(--al-form-muted);
    letter-spacing: 0;
}

/* --- Barre d'une liste : pastilles à gauche, recherche au bout ------------------- */
.al-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.al-toolbar-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.al-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 320px;
    justify-content: flex-end;
}

/* --- Recherche : une pilule bordée, loupe à gauche, croix quand il y a à effacer -- */
.al-search {
    flex: 0 1 380px;
    min-width: 240px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--al-outline-variant);
    background: var(--al-surface-container-lowest);
    border-radius: var(--al-radius-full);
    transition: border-color .15s ease;
}
.al-search.on {
    border-color: var(--al-primary);
}
.al-search-icon {
    font-size: 16px;
    flex: none;
    color: var(--al-on-surface-variant);
}
.al-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--al-on-surface);
    font-family: var(--al-font-family);
    font-size: 14px;
}
.al-search-input::-webkit-search-cancel-button {
    display: none;
}
.al-search-clear {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--al-on-surface-variant);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    flex: none;
    cursor: pointer;
}
.al-search-clear:hover {
    background: var(--al-surface-container);
}
.al-search:not(.on) .al-search-clear {
    visibility: hidden;
}

/* --- Pastille de filtre : rayon COURT (la gélule est réservée aux pastilles d'état) - */
.al-pill {
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--al-outline-variant);
    border-radius: var(--al-radius-sm);
    background: var(--al-surface-container-lowest);
    color: var(--al-on-surface-variant);
    font-family: var(--al-font-family);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.al-pill:hover {
    background: var(--al-surface-container-low);
}
.al-pill.on {
    background: var(--al-primary);
    border-color: var(--al-primary);
    color: var(--al-on-primary);
}
/* Le compteur d'une pastille : discret au repos, lisible sur le plein. */
.al-pill-count {
    font-weight: 700;
    opacity: .75;
}

/* --- Pastille d'état : une gélule teintée de la couleur de l'état ----------------- */
.al-chip {
    --al-chip-color: var(--al-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: var(--al-radius-full);
    font-family: var(--al-font-family);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    color: color-mix(in srgb, var(--al-chip-color) 88%, #000);
    background: color-mix(in srgb, var(--al-chip-color) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--al-chip-color) 45%, transparent);
}

/* --- Interrupteur segmenté : la pastille claire glisse sur un rail teinté --------- */
.al-seg {
    display: inline-flex;
    flex: none;
    padding: 3px;
    border-radius: var(--al-radius-full);
    background: var(--al-surface-container);
}
.al-seg button {
    appearance: none;
    flex: 1 1 0;
    border: none;
    background: transparent;
    color: var(--al-on-surface-variant);
    font-family: var(--al-font-family);
    font-size: 13px;
    font-weight: 700;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--al-radius-full);
    cursor: pointer;
    white-space: nowrap;
}
.al-seg button.on {
    background: var(--al-surface-container-lowest);
    color: var(--al-on-surface);
    box-shadow: 0 1px 3px rgba(15, 40, 42, .12);
}

/* --- Segment de statut (présence) : un choix unique dans un seul cadre bordé -------
   Source : .att-seg de ProjectMeetingAttendeeListItem.vue. Chaque option porte une
   pastille de SA couleur ; l'option choisie se remplit de cette couleur, fournie par
   l'appelant en --al-status-color sur le bouton. */
.al-status-seg {
    flex: none;
    display: inline-flex;
    border: 1px solid var(--al-outline-variant);
    border-radius: var(--al-radius-full);
    overflow: hidden;
    background: var(--al-surface-container-lowest);
}
.al-status-seg-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    border-left: 1px solid var(--al-surface-container);
    background: transparent;
    color: var(--al-on-surface-variant);
    font-family: var(--al-font-family);
    font-size: 12.5px;
    font-weight: 600;
    min-height: 30px;
    padding: 0 11px;
    cursor: pointer;
    white-space: nowrap;
}
.al-status-seg-btn:first-child {
    border-left: none;
}
.al-status-seg-btn:hover {
    background: var(--al-surface-container-low);
}
.al-status-seg-btn.sel {
    background: var(--al-status-color, var(--al-primary));
    color: #fff;
    font-weight: 700;
}
.al-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
    background: var(--al-status-color, var(--al-primary));
}
.al-status-seg-btn.sel .al-status-dot {
    background: rgba(255, 255, 255, .85);
}

/* --- Interrupteur ------------------------------------------------------------ */
.al-switch {
    appearance: none;
    border: none;
    width: 38px;
    height: 22px;
    border-radius: var(--al-radius-full);
    background: var(--al-outline-variant);
    position: relative;
    cursor: pointer;
    transition: background .15s ease;
    flex: none;
    padding: 0;
}
.al-switch.on {
    background: var(--al-primary);
}
.al-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}
.al-switch.on .al-switch-knob {
    transform: translateX(16px);
}

/* --- Heure : une petite gélule bordée (champ natif, format HH:MM) ------------------ */
.al-time {
    box-sizing: border-box;
    border: 1px solid var(--al-outline-variant);
    background: transparent;
    color: var(--al-on-surface-variant);
    font-family: var(--al-font-family);
    font-size: 12px;
    height: 26px;
    padding: 0 8px;
    border-radius: var(--al-radius-full);
}
.al-time:focus {
    outline: none;
    border-color: var(--al-primary);
}

/* --- Champ modifiable EN LIGNE : un texte qui se révèle champ au survol ------------ */
.al-inline-input {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--al-radius-sm);
    padding: 3px 7px;
    font-family: var(--al-font-family);
    font-size: 12.5px;
    color: var(--al-on-surface);
}
.al-inline-input::placeholder {
    color: var(--al-form-muted);
}
.al-inline-input:hover {
    border-color: var(--al-form-card-border);
    background: var(--al-form-field-bg);
}
.al-inline-input:focus {
    outline: none;
    border-color: var(--al-primary);
    background: var(--al-surface-container-lowest);
}

/* --- Ligne de pointage d'un participant -----------------------------------------
   Source : ProjectMeetingAttendeeListItem.vue. Identité à gauche, présence au centre,
   convocation à droite, retrait au bout : tout sur un rang, on la parcourt du regard. */
.al-att-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--al-form-card-border);
}
.al-att-row:first-child {
    border-top: none;
}
.al-att-identity {
    flex: 1 1 auto;
    min-width: 0;
}
.al-att-company {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--al-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.al-att-person {
    margin: 1px 0 0;
    font-size: 12px;
    color: var(--al-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.al-att-sep {
    margin: 0 4px;
}
.al-att-tag {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: var(--al-radius-full);
    background: var(--al-surface-container-high);
    color: var(--al-on-surface-variant);
    white-space: nowrap;
}
.al-att-convoc {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.al-att-convoc-label {
    font-size: 12px;
    color: var(--al-on-surface-variant);
}
/* En-tête d'un groupe de participants : titre, compte, avancement du pointage. */
.al-att-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--al-surface);
    border-bottom: 1px solid var(--al-form-card-border);
}
.al-att-group-title {
    flex: 1;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--al-primary);
}
.al-att-group-progress {
    font-size: 12px;
    color: var(--al-form-muted);
}
@media (max-width: 900px) {
    .al-att-row {
        flex-wrap: wrap;
    }
    .al-att-identity {
        flex-basis: calc(100% - 46px);
    }
}

/* --- Initiales : pastille ronde teintée du nom (teinte stable, cf. alKit.js) ------- */
.al-initials {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--al-font-family);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* --- État vide : une icône, un titre, une phrase. Rien d'autre, pas de bouton. ----- */
.al-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 64px 24px;
    color: var(--al-on-surface-variant);
    font-family: var(--al-font-family);
}
.al-empty-state-icon {
    font-size: 3rem;
    color: var(--al-outline);
}
.al-empty-state-title {
    margin: 12px 0 4px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--al-on-surface);
}
.al-empty-state-message {
    margin: 0;
    font-size: 14px;
    max-width: 420px;
}

/* --- Précédent / suivant (AlNavPair) : parcourir une liste depuis une fiche ------- */
.al-nav-pair {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 0 2px;
    border: 1px solid var(--al-outline-variant);
    border-radius: var(--al-radius-full);
    background: var(--al-surface-container-lowest);
    font-family: var(--al-font-family);
}
.al-nav-pair button {
    appearance: none;
    border: none;
    background: transparent;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--al-on-surface-variant);
    cursor: pointer;
}
.al-nav-pair button:hover:not(:disabled) {
    background: var(--al-surface-container);
}
.al-nav-pair button:disabled {
    opacity: .35;
    cursor: default;
}
.al-nav-pair-label {
    min-width: 44px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--al-on-surface-variant);
    font-variant-numeric: tabular-nums;
}

/* --- Bouton d'action ---------------------------------------------------------- */
.al-btn {
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-family: var(--al-font-family);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
.al-btn:disabled {
    opacity: .5;
    cursor: default;
}
/* Un clic ne doit RIEN épaissir ni RIEN recolorer (retour FP du 18/09) : l'anneau du navigateur
   disparaît à la souris. Au clavier il reste — sans lui on ne sait plus où l'on est — mais il se
   dessine en dehors du bouton, dont la bordure garde son épaisseur et sa couleur. */
.al-btn:focus {
    outline: none;
}
.al-btn:focus-visible {
    outline: 2px solid var(--al-outline-variant);
    outline-offset: 2px;
}
.al-btn.primary {
    border: none;
    background: var(--al-primary);
    color: var(--al-on-primary);
}
.al-btn.ghost {
    border: 1px solid var(--al-outline-variant);
    background: var(--al-surface);
    color: var(--al-primary);
}
/* `danger` retire, `text` accompagne sans peser — la place d'un lien dans une phrase. */
.al-btn.danger {
    border: 1px solid var(--al-danger);
    background: var(--al-surface);
    color: var(--al-danger-shade);
}
.al-btn.text {
    border: none;
    background: transparent;
    padding: 0 6px;
    color: var(--al-primary);
}
/* LA PILULE : la seconde forme du kit, pas une fantaisie locale. Les écrans refaits de l'app
   l'emploient partout où le bouton est POSÉ sur un fond plutôt qu'aligné dans un formulaire —
   barre d'une liste, appel à l'action d'un bloc vide, validation d'une signature. */
.al-btn.pill {
    border-radius: 999px;
    padding: 0 18px;
}
/* Un cran plus haut : le geste principal d'un écran ou d'une fenêtre. */
.al-btn.large {
    height: 46px;
    font-size: 15px;
}
/* Un cran plus bas, pour les actions de second plan logées dans une ligne de liste. */
.al-btn.small {
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
}
.al-btn.icon {
    width: 40px;
    padding: 0;
}
.al-btn.icon.small {
    width: 32px;
}
.al-btn.ghost:hover:not(:disabled) {
    background: var(--al-surface-container-low);
}
.al-btn.primary:hover:not(:disabled) {
    background: var(--al-primary-shade);
}
.al-btn.danger:hover:not(:disabled) {
    background: var(--al-surface-container-low);
}
.al-btn i {
    font-size: 14px;
    line-height: 1;
}
/* --- Une suite de boutons ------------------------------------------------------
   Dans ce kit, l'écart entre deux boutons appartient au CONTENEUR, jamais au bouton :
   la barre d'outils, le pied d'une fenêtre, les actions d'une fiche l'écrivent déjà
   chacun. Une cellule de tableau, elle, n'a pas de conteneur — ses boutons se
   touchaient. En voici un, nommé, pour toutes les suites de boutons qui n'en ont pas.
   (Un `padding-right` sur le bouton lui-même décentrerait l'icône d'un bouton carré et
   laisserait un vide après le dernier, décalant le bord de la colonne.) */
.al-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* --- Bouton à menu (comportement : AlKit.menuButton) ------------------------------ */
.al-menu-chevron {
    margin-left: 2px;
    font-size: 11px !important;
    transition: transform .15s ease;
}
.al-menu-btn.open .al-menu-chevron {
    transform: rotate(180deg);
}
.al-menu {
    position: fixed;
    z-index: 2000;
    min-width: 200px;
    padding: 6px;
    background: var(--al-surface-container-lowest);
    border: 1px solid var(--al-form-card-border);
    border-radius: var(--al-radius-md);
    box-shadow: 0 8px 24px rgba(15, 40, 42, .12);
    font-family: var(--al-font-family);
}
.al-menu-item {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 10px;
    border-radius: var(--al-radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--al-on-surface);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.al-menu-item:hover,
.al-menu-item:focus-visible {
    outline: none;
    background: var(--al-surface-container-low);
}
.al-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--al-on-surface-variant);
}

/* --- Confirmation EN PLACE (comportement : AlKit.confirmButton) --------------------
   1er clic : le bouton s'arme et CHANGE DE SIGNE (libellé ET icône, pas seulement la
   couleur — un aplat rouge se lit mal en plein soleil). 2e clic : l'action part. Un clic
   ailleurs désarme. Préféré à une boîte de dialogue pour les gestes de liste. */
.al-cb {
    appearance: none;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--al-on-surface-variant);
    font-family: var(--al-font-family);
    font-size: 12.5px;
    font-weight: 700;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--al-radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.al-cb i {
    font-size: 15px;
    line-height: 1;
}
.al-cb.compact {
    width: 32px;
    padding: 0;
    justify-content: center;
    gap: 0;
}
.al-cb.danger:hover {
    background: rgba(235, 68, 90, .09);
    color: var(--al-danger-shade);
}
.al-cb.danger.armed {
    background: var(--al-danger-shade);
    border-color: var(--al-danger-shade);
    color: #fff;
}
.al-cb.compact.armed {
    width: 34px;
    height: 34px;
}
.al-cb.armed:active {
    transform: scale(.97);
}
@media (prefers-reduced-motion: reduce) {
    .al-cb,
    .al-search,
    .al-pill,
    .al-switch,
    .al-switch-knob,
    .al-menu-chevron {
        transition: none;
    }
}

/* Pastille portant le LOGO du participant (carte #287) : le logo, cadré sur fond blanc. */
.al-initials.has-logo {
    background: #fff;
    border: 1px solid var(--al-form-card-border);
    overflow: hidden;
}
.al-initials.has-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
}

/* --- Attente bloquante (comportement : AlKit.loading) ------------------------------ */
.al-loading {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(244, 248, 248, .72);
    backdrop-filter: blur(2px);
    font-family: var(--al-font-family);
}
.al-loading-card {
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
    padding: 28px 24px 24px;
    text-align: center;
    background: var(--al-form-card);
    border: 1px solid var(--al-form-card-border);
    border-radius: var(--al-radius-lg);
    box-shadow: 0 12px 32px rgba(15, 40, 42, .12);
}
.al-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 4px solid var(--al-surface-container);
    border-top-color: var(--al-primary);
    animation: al-spin .8s linear infinite;
}
.al-loading-title {
    margin: 16px 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--al-on-surface);
}
.al-loading-message {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--al-on-surface-variant);
}
@keyframes al-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .al-spinner {
        animation-duration: 2.4s;
    }
}

/* --- Infobulle au survol : l'attribut data-tooltip (comportement : alTooltip.js) ----
   <a data-tooltip="Supprimer" class="t-top">…</a> — position : t-top (défaut), t-right,
   t-bottom, t-left. La même carte que les infobulles DevExtreme (§ 8 de al-kit-dx.css) : fond
   blanc, filet discret, coins arrondis, ombre douce. Remplace web/css/ToolTip/tooltip.css.
   La bulle est posée sur <body> par le script : rien ne la rogne. L'élément porteur reste en
   position relative avec le curseur « main », comme avant. */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}
.al-tooltip {
    position: fixed;
    z-index: 30000;
    box-sizing: border-box;
    max-width: 300px;
    padding: 6px 10px;
    border: 1px solid var(--al-form-card-border);
    border-radius: var(--al-radius-sm);
    background: var(--al-surface-container-lowest);
    box-shadow: 0 8px 24px rgba(15, 40, 42, .12);
    color: var(--al-on-surface);
    font-family: var(--al-font-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    white-space: pre-wrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
.al-tooltip.visible {
    opacity: 1;
}

/* --- Suggestions sous un champ (comportement : initInputSuggestions, alSuggest.js) --
   La même carte que les menus : fond blanc, coins de 12 px, ombre douce, options arrondies,
   survol teinté. Au-dessus des fenêtres DevExtreme (le wizard du carnet s'ouvre dans l'une d'elles). */
.al-suggest {
    position: fixed;
    z-index: 20000;
    box-sizing: border-box;
    max-height: 300px;
    margin: 4px 0 0;
    padding: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--al-form-card-border);
    border-radius: var(--al-radius-md);
    box-shadow: 0 8px 24px rgba(15, 40, 42, .12);
    background: var(--al-surface-container-lowest);
    font-family: var(--al-font-family);
    font-size: 13px;
}
.al-suggest-item {
    padding: 8px 10px;
    border-radius: var(--al-radius-sm);
    font-weight: 500;
    line-height: 1.35;
    color: var(--al-on-surface);
    cursor: pointer;
}
.al-suggest-item:hover,
.al-suggest-item.active {
    background: var(--al-surface-container-low);
    color: var(--al-primary);
}

/* --- Barre de notification avec action (comportement : AlKit.snackbar) ------------ */
.al-snackbar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 3100;
    transform: translateX(-50%);
    box-sizing: border-box;
    max-width: calc(100% - 32px);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 10px 10px 18px;
    border-radius: var(--al-radius-md);
    background: #243130;
    color: #fff;
    box-shadow: 0 10px 28px rgba(15, 40, 42, .28);
    font-family: var(--al-font-family);
    font-size: 14px;
}
.al-snackbar-message {
    min-width: 0;
    white-space: pre-line;
}
.al-snackbar-action {
    appearance: none;
    flex: none;
    border: none;
    background: transparent;
    color: #7fd6d9;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: var(--al-radius-sm);
    cursor: pointer;
}
.al-snackbar-action:hover {
    background: rgba(255, 255, 255, .08);
}

/* ==========================================================================
   Fiches, photos, enregistrement (promues des écrans du CR, 18/09/2026)
   --------------------------------------------------------------------------
   Ces motifs vivaient dans report-build.css sous des noms `rb-*` : ils ne
   doivent rien au compte rendu. Ils prennent ici leur nom de kit, et leurs
   valeurs passent par les jetons (elles étaient écrites en dur).
   Noms alignés sur l'app : AlField donne `al-field-label`.
   ========================================================================== */

/* Deux colonnes de champs, dans une fiche. */
.al-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

/* Le libellé d'un champ, son icône devant. */
.al-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

/* Deux colonnes inégales : le texte à gauche, les réglages à droite. */
.al-split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 12px;
}

/* Zone de dépôt de fichiers. */
.al-dropzone {
    border: 2px dashed var(--al-form-card-border);
    border-radius: var(--al-radius-sm);
    padding: 16px;
    text-align: center;
    color: var(--al-form-muted);
    font-size: 13px;
    cursor: default;
}
.al-dropzone i {
    margin-right: 6px;
}

/* Vignettes de photos : la grille, la vignette, et ses deux boutons au survol. */
.al-photo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
.al-photo {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--al-form-card-border);
}
.al-photo img {
    width: 100%;
    height: auto;
    display: block;
}
.al-photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(179, 38, 30, 0.85);
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.al-photo:hover .al-photo-remove {
    opacity: 1;
}
.al-photo-edit {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.al-photo:hover .al-photo-edit {
    display: flex;
}
.al-photo-edit:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* L'état de l'enregistrement automatique : discret, vert quand c'est enregistré,
   rouge et cliquable quand ça a échoué. */
.al-autosave {
    font-size: 12px;
    color: var(--al-form-muted);
    white-space: nowrap;
}
.al-autosave i {
    margin-right: 4px;
}
.al-autosave.saved {
    color: #16a34a;
}
.al-autosave.error {
    color: var(--al-danger-shade);
    cursor: pointer;
    text-decoration: underline;
}

/* Compteur posé sur une entrée de liste ou un onglet. */
.al-badge {
    font-size: 10px;
    background: var(--al-primary);
    color: var(--al-on-primary);
    border-radius: var(--al-radius-full);
    padding: 1px 7px;
    font-weight: 600;
    flex-shrink: 0;
}
.al-badge.small {
    font-size: 9px;
    padding: 0 5px;
    min-width: 18px;
    text-align: center;
}

/* Un intertitre posé dans un panneau à marges internes. */
.al-group-title.inset {
    padding: 14px 20px 10px;
    margin: 0;
}

/* ==========================================================================
   Tableau (transposé de AlDataTable, l'app — 18/09/2026)
   --------------------------------------------------------------------------
   Le tableau de l'app amené au BO, sous les mêmes noms. Ce n'est pas un
   `<table>` : une ligne doit rester cliquable d'un bloc et se replier en carte
   sur téléphone, ce qu'une grille CSS fait mieux.

   Ce que le kit porte ici, c'est le DESSIN. Les règles de gestion (colonnes
   déclarées une fois, mémoire de disposition, repli en cartes, colonnes
   sacrifiables) sont décrites dans la notice du composant, côté Claude Design.

   Les grilles DevExtreme du BO ne sont pas touchées : elles gardent leur
   habillage tant qu'un écran n'est pas repris.
   ========================================================================== */

/* La racine n'empile que deux choses : les filtres actifs, puis le cadre. */
.al-table-root {
    display: flex;
    flex-direction: column;
}

/* LE COMPTEUR d'une liste : ce qu'on voit, et ce qu'il y a. Obligatoire sur toute
   liste du kit — « 9 sur 639 » est la première chose qu'on cherche quand on a filtré. */
.al-table-count {
    font-size: 13px;
    color: var(--al-on-surface-variant);
    margin-bottom: 8px;
}
.al-table-count strong {
    font-weight: 700;
    color: var(--al-on-surface);
}

/* Les filtres actifs se lisent AU-DESSUS du cadre : ils disent ce qu'on a demandé,
   ils ne font pas partie du tableau. */
.al-table-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 0 10px;
}
.al-table-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    border-radius: var(--al-radius-full);
    background: color-mix(in srgb, var(--al-primary) 12%, transparent);
    color: var(--al-primary);
    font-size: 12px;
    line-height: 1.3;
}
.al-table-filter-title {
    opacity: 0.75;
}
.al-table-filter-value {
    font-weight: 600;
}
.al-table-filter-clear {
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    cursor: pointer;
}
.al-table-filter-clear:hover {
    background: color-mix(in srgb, var(--al-primary) 20%, transparent);
}

/* Le cadre. Fond blanc et non la surface : le tableau est un objet posé sur la page,
   c'est le contraste qui lui donne son relief. Aucun overflow ici, sinon l'en-tête
   collant n'aurait plus la page comme repère. */
.al-table {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--al-form-card);
    border: 1px solid var(--al-outline-variant);
    border-radius: var(--al-radius-lg);
}

/* L'en-tête colle en haut : sans lui, on ne sait plus ce qu'on lit. */
.al-table-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--al-on-surface-variant);
    border-bottom: 1px solid var(--al-outline-variant);
    background: var(--al-surface-container-low);
    border-radius: var(--al-radius-lg) var(--al-radius-lg) 0 0;
}
.al-table-head-grid,
.al-table-row {
    display: grid;
    grid-template-columns: var(--al-table-cols);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
}
.al-table-head-grid {
    width: max-content;
    min-width: 100%;
}

/* Le nom d'une colonne est un bouton : c'est là qu'on cherche son tri et son filtre. */
.al-table-th {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.al-table-th.static {
    cursor: default;
}
.al-table-th.right {
    justify-content: flex-end;
    text-align: right;
}
.al-table-th:hover:not(.static),
.al-table-th.on {
    color: var(--al-primary);
}
.al-table-th i {
    font-size: 12px;
    opacity: 0.7;
    flex: none;
}

/* Le bouton des colonnes reste collé au bord droit, même quand le corps défile. */
.al-table-manage {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--al-radius-sm);
    background: transparent;
    color: var(--al-on-surface-variant);
    cursor: pointer;
}
.al-table-manage:hover {
    background: var(--al-surface-container-high);
    color: var(--al-primary);
}

.al-table-body {
    display: flex;
    flex-direction: column;
}
.al-table-row {
    border-bottom: 1px solid var(--al-surface-container);
    cursor: pointer;
}
.al-table-row:last-of-type {
    border-bottom: none;
}
.al-table-row:hover {
    background: var(--al-surface-container-low);
}
.al-table-row.on {
    background: color-mix(in srgb, var(--al-primary) 8%, transparent);
}
.al-table-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.al-table-cell.right {
    text-align: right;
}
.al-table-cell.center {
    text-align: center;
}

/* Repli en cartes : décidé sur la largeur du TABLEAU, pas sur celle de la fenêtre.
   Les colonnes d'identité restent en tête, les autres se lisent en dessous, chacune
   précédée de son nom. */
.al-table.cards .al-table-head {
    display: none;
}
.al-table.cards .al-table-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 12px;
}
.al-table-card-lead {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.al-table-card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--al-form-label);
}
.al-table-card-value {
    white-space: normal;
}

/* ==========================================================================
   Fenêtres, panneaux, champs, cartes, sélection et colonnes
   (transposés de l'app — 18/09/2026)
   --------------------------------------------------------------------------
   Les noms de l'app quand ils existent : al-modal, al-dialog, al-sp (panneau
   latéral), al-sh (en-tête de panneau), al-ff (champ de formulaire), al-card.
   Deux briques de l'app ne portaient pas de nom de kit : le gestionnaire de
   colonnes (acg) et le menu d'une colonne (acm) deviennent al-colmgr et
   al-colmenu ; la barre de sélection multiple (punch-bulk-bar) devient al-bulk.

   Le BO garde ses fenêtres DevExtreme tant qu'un écran n'est pas repris : ce
   qui suit est le dessin cible, et ce que les maquettes utiliseront.
   ========================================================================== */

/* --- Fenêtre ------------------------------------------------------------- */
.al-modal {
    display: flex;
    flex-direction: column;
    width: min(94vw, 560px);
    max-height: min(90vh, 900px);
    background: var(--al-form-card);
    border-radius: var(--al-radius-lg);
    box-shadow: 0 18px 48px rgba(15, 40, 42, 0.22);
    overflow: hidden;
}
.al-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--al-form-card-border);
}
.al-modal-titles {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.al-modal-overline {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--al-form-label);
}
.al-modal-title {
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.al-modal-close {
    appearance: none;
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--al-on-surface-variant);
    font-size: 16px;
    cursor: pointer;
}
.al-modal-scroll {
    overflow-y: auto;
    padding: 16px;
}
/* Les actions de validation vivent en pied de fenêtre, jamais dans le corps. */
.al-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--al-form-card-border);
    background: var(--al-surface-container-lowest);
}

/* --- Demande de confirmation --------------------------------------------- */
.al-dialog-scrim {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12, 28, 28, 0.48);
}
.al-dialog {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 24px;
    background: var(--al-form-card);
    border-radius: var(--al-radius-lg);
    box-shadow: 0 18px 48px rgba(15, 40, 42, 0.24);
}
.al-dialog-icon {
    font-size: 28px;
    color: var(--al-primary);
}
.al-dialog.danger .al-dialog-icon {
    color: var(--al-danger-shade);
}
.al-dialog-title {
    font-size: 16px;
    font-weight: 700;
}
.al-dialog-message {
    color: var(--al-on-surface-variant);
}
.al-dialog-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* --- Panneau latéral ------------------------------------------------------ */
.al-sp {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--al-surface);
    border-left: 1px solid var(--al-outline-variant);
    box-shadow: -8px 0 24px rgba(15, 40, 42, 0.1);
}
.al-sp-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}
.al-sp-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--al-form-card-border);
}
/* L'en-tête d'un panneau colle en haut et laisse deviner ce qui défile dessous. */
.al-sh {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--al-form-card) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--al-form-card-border);
}
.al-sh-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 12px;
}
.al-sh-titles {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.al-sh-overline {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--al-form-label);
}
.al-sh-title {
    font-size: 16px;
    font-weight: 600;
}
.al-sh-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- Champ de formulaire -------------------------------------------------- */
/* Le libellé est POSÉ SUR LE TRAIT du champ : il n'occupe pas de ligne à lui, et ne se
   lit plus comme la légende du champ précédent. */
.al-ff {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    width: 100%;
    text-align: left;
    padding-top: 7px;
    margin-top: 12px;
}
.al-ff-label {
    position: absolute;
    top: 7px;
    left: 10px;
    z-index: 1;
    transform: translateY(-50%);
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
    background: var(--al-form-card);
    color: var(--al-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
    pointer-events: none;
}
.al-ff-req {
    color: var(--al-danger-shade);
    margin-left: 3px;
}
.al-ff-box {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--al-form-card-border);
    border-radius: var(--al-radius-md);
    background: var(--al-form-card);
    color: var(--al-on-surface);
}
.al-ff-box.clickable {
    cursor: pointer;
}
.al-ff-box:focus-within {
    border-color: var(--al-primary);
}
.al-ff-box.due {
    background: var(--al-form-due-bg);
    border-color: var(--al-form-due-border);
    color: var(--al-form-due-fg);
    font-weight: 600;
}
.al-ff-icon {
    flex: none;
    color: var(--al-on-surface-variant);
}
.al-ff-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.al-ff-caret,
.al-ff-clear {
    flex: none;
    color: var(--al-on-surface-variant);
    background: none;
    border: none;
    cursor: pointer;
}
.al-ff.disabled {
    opacity: 0.45;
}

/* --- Carte, en entier ----------------------------------------------------- */
.al-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px 0;
}
.al-card-icon {
    flex: none;
    font-size: 18px;
    line-height: 1;
    color: var(--al-on-surface-variant);
}
.al-card-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--al-form-label);
}
.al-card-req {
    color: var(--al-danger-shade);
    margin-left: 3px;
}
/* L'indice va à droite, et lui seul : c'est ce qu'on veut y lire. */
.al-card-hint {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--al-form-muted);
    font-variant-numeric: tabular-nums;
}
.al-card-body {
    padding: 15px;
}

/* --- Barre de sélection multiple ------------------------------------------ */
.al-bulk {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 8px 7px 16px;
    background: var(--al-surface);
    border: 1px solid var(--al-outline-variant);
    border-radius: var(--al-radius-full);
    box-shadow: 0 12px 32px rgba(15, 74, 74, 0.24);
    max-width: calc(100% - 24px);
}
.al-bulk-count {
    font-size: 14px;
    font-weight: 700;
    margin-right: 6px;
    white-space: nowrap;
}
.al-bulk-action {
    appearance: none;
    border: none;
    background: transparent;
    padding: 8px 12px;
    border-radius: var(--al-radius-full);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.al-bulk-action:hover {
    background: color-mix(in srgb, var(--al-primary) 12%, transparent);
}
.al-bulk-action.danger {
    color: var(--al-danger-shade);
}

/* --- Colonnes : le gestionnaire, et le menu d'une colonne ------------------ */
.al-colmgr,
.al-colmenu {
    min-width: 250px;
    max-width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--al-radius-md);
    background: var(--al-surface);
    border: 1px solid var(--al-outline-variant);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}
.al-colmenu {
    min-width: 210px;
    max-width: 300px;
    max-height: 60vh;
}
.al-colmgr-title,
.al-colmenu-title {
    margin: 4px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--al-form-label);
}
.al-colmgr-item,
.al-colmenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--al-radius-sm);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.al-colmgr-item:hover,
.al-colmenu-item:hover {
    background: var(--al-surface-container-low);
}
.al-colmenu-item.on {
    color: var(--al-primary);
    font-weight: 600;
}
.al-colmgr-grip {
    margin-left: auto;
    color: var(--al-form-muted);
    cursor: grab;
}

/* ==========================================================================
   Titres, barres, phases, replis, frises, feuilles de choix, voiles
   (transposés de l'app — 18/09/2026)
   --------------------------------------------------------------------------
   Noms de l'app conservés : al-page-title, al-fb, al-pp, al-collapse, al-tl,
   al-thumb-*. Deux exceptions, pour lever une collision : dans l'app, `al-ps`
   désigne À LA FOIS la feuille de choix (AlPickerSheet) et le sélecteur de
   phase (AlPhaseSelect). Ici, la feuille est `al-sheet` et le sélecteur
   `al-phase-select`. Le voile d'avancement, nommé `alpo`, devient `al-progress`.
   ========================================================================== */

/* --- Titre de page -------------------------------------------------------- */
.al-page-title {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--al-on-surface);
    font-size: 22px;
    font-weight: 600;
}
.al-page-icon {
    font-size: 0.86em;
    line-height: 1;
    color: var(--al-primary);
}
.al-page-subtitle {
    margin: 0 0 18px;
    color: var(--al-on-surface-variant);
}
.al-page-head.tight .al-page-title {
    margin-bottom: 2px;
}

/* --- Barre de fiche : l'action principale, puis les raccourcis ------------- */
.al-fb {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 12px 10px;
    background: var(--al-surface-container-lowest);
    border-bottom: 1px solid var(--al-outline-variant);
}
/* L'action principale prend la première ligne, les raccourcis la seconde : sinon son
   libellé se tronque pour laisser passer cinq icônes. */
.al-fb-save {
    flex: 1;
    min-width: 150px;
}
.al-fb-save:disabled {
    opacity: 0.5;
    cursor: default;
}
/* La pastille qui dit « il reste quelque chose à enregistrer ». */
.al-fb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--al-primary);
}

/* --- Pastilles de phase --------------------------------------------------- */
.al-pp {
    width: 100%;
    padding: 4px 0 2px;
}
.al-pp-group + .al-pp-group {
    margin-top: 14px;
}
.al-pp-group-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--al-primary);
    margin-bottom: 8px;
}
.al-pp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.al-pp-pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: var(--al-radius-full);
    border: 1.5px solid var(--al-outline-variant);
    background: var(--al-surface);
    color: var(--al-on-surface);
    font: inherit;
    cursor: pointer;
}
.al-pp-pill.on {
    border-color: var(--al-primary);
    background: color-mix(in srgb, var(--al-primary) 10%, transparent);
    color: var(--al-primary);
    font-weight: 600;
}
.al-pp-empty {
    color: var(--al-form-muted);
    font-size: 13px;
}

/* --- Repli ---------------------------------------------------------------- */
.al-collapse {
    background: var(--al-form-card);
    border: 1px solid var(--al-form-card-border);
    border-radius: var(--al-radius-lg);
    overflow: hidden;
}
.al-collapse-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 15px;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.al-collapse-icon {
    flex: none;
    width: 1em;
    font-size: 18px;
    line-height: 1;
    color: var(--al-on-surface-variant);
}
.al-collapse-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--al-form-label);
}
.al-collapse-req {
    color: var(--al-danger-shade);
    margin-left: 3px;
}
.al-collapse-count {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--al-form-muted);
    font-variant-numeric: tabular-nums;
}
.al-collapse-caret {
    flex: none;
    color: var(--al-on-surface-variant);
    transition: transform 0.15s ease;
}
.al-collapse.open .al-collapse-caret {
    transform: rotate(180deg);
}
.al-collapse-body {
    padding: 0 15px 15px;
}

/* --- Frise chronologique -------------------------------------------------- */
.al-tl {
    list-style: none;
    margin: 0;
    padding: 0;
}
.al-tl-item {
    display: flex;
    gap: 12px;
}
.al-tl-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
    width: 16px;
}
.al-tl-dot {
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-radius: 50%;
    flex: none;
    background: var(--al-primary);
}
.al-tl-line {
    flex: 1;
    width: 1px;
    background: var(--al-outline-variant);
}
.al-tl-body {
    padding-bottom: 14px;
    min-width: 0;
}
.al-tl-label {
    font-weight: 600;
}
.al-tl-meta {
    font-size: 12px;
    color: var(--al-form-muted);
}
.al-tl-empty {
    color: var(--al-form-muted);
    font-size: 13px;
}

/* --- Feuille de choix ----------------------------------------------------- */
.al-sheet {
    display: flex;
    flex-direction: column;
    width: min(94vw, 460px);
    max-height: min(88vh, 760px);
    background: var(--al-form-card);
    border-radius: var(--al-radius-lg);
    overflow: hidden;
}
.al-sheet-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
}
.al-sheet-list {
    overflow-y: auto;
    padding: 4px 8px 8px;
}
.al-sheet-group {
    margin: 10px 8px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--al-form-label);
}
.al-sheet-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: var(--al-radius-sm);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.al-sheet-option:hover {
    background: var(--al-surface-container-low);
}
.al-sheet-option.on {
    color: var(--al-primary);
    font-weight: 600;
}
.al-sheet-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--al-form-card-border);
}

/* --- Sélecteur de phase --------------------------------------------------- */
.al-phase-select {
    width: 100%;
}
.al-phase-select-field {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 0;
    min-height: 34px;
}
.al-phase-select-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: var(--al-on-surface);
}
.al-phase-select-panel {
    margin-top: 6px;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--al-radius-md);
    background: var(--al-surface);
    border: 1px solid var(--al-outline-variant);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}

/* --- Voile d'avancement --------------------------------------------------- */
/* Il couvre TOUT, fenêtres comprises : sans cela, un traitement lancé depuis une fiche
   laisse la porte ouverte au second clic qu'on cherche à empêcher. */
.al-progress {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.25);
}
.al-progress-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 26px;
    border-radius: var(--al-radius-lg);
    background: var(--al-form-card);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}
.al-progress-label {
    font-weight: 600;
}
.al-progress-count {
    font-size: 12px;
    color: var(--al-form-muted);
    font-variant-numeric: tabular-nums;
}
.al-progress-track {
    width: 190px;
    height: 4px;
    border-radius: var(--al-radius-full);
    background: var(--al-surface-container-high);
    overflow: hidden;
}
.al-progress-fill {
    height: 100%;
    background: var(--al-primary);
}

/* --- Choix d'une date ----------------------------------------------------- */
.al-date-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.al-date-chip {
    appearance: none;
    padding: 7px 12px;
    border-radius: var(--al-radius-full);
    border: 1px solid var(--al-outline-variant);
    background: var(--al-surface);
    font: inherit;
    cursor: pointer;
}
.al-date-chip.on {
    border-color: var(--al-primary);
    color: var(--al-primary);
    font-weight: 600;
}

/* --- Champ couleur : la pastille qui ouvre le sélecteur, la pipette (AlKit.colorField) ---
   Recette r1 du CR, point 13 : pas de code hexadécimal à l'écran, la pastille s'ouvre au clic. */
.al-color-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.al-color-label {
    font-size: 12px;
    color: var(--al-form-label);
}
.al-color-anchor {
    position: relative;
    display: inline-flex;
}
.al-color-swatch {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .12);
    cursor: pointer;
    transition: box-shadow .15s ease;
}
.al-color-swatch:hover,
.al-color-swatch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-primary) 25%, transparent);
}
/* Le sélecteur, invisible, sous la pastille : sa palette s'ouvre là. */
.al-color-anchor .al-color-box {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}
.al-color-picker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--al-form-card-border);
    border-radius: 8px;
    background: var(--al-form-card);
    color: var(--al-form-label);
    cursor: pointer;
}
.al-color-picker:hover {
    border-color: var(--al-primary);
    color: var(--al-primary);
}

/* --- Vignette en attente d'image ------------------------------------------ */
/* Le logo ne s'étire pas : étiré, il ressemblerait à une photo, ce qu'il n'est pas. */
.al-thumb-empty {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--al-surface-container-low);
}
.al-thumb-logo {
    width: 52%;
    height: 52%;
    object-fit: contain;
    opacity: 0.34;
}
.al-thumb-cam {
    position: absolute;
    right: 6%;
    bottom: 4%;
    font-size: 42%;
    line-height: 1;
    color: var(--al-primary);
}

/* ==========================================================================
   Jauge d'occupation (al-gauge)
   --------------------------------------------------------------------------
   Une valeur sur une limite : utilisateurs de la formule (carnet d'adresses,
   tableau de bord), enveloppe du suivi financier. Tête (icône, titre, compte,
   pourcentage), piste arrondie, message. États : ok (marque), warning (bientôt
   plein), full (atteint). La largeur du remplissage est la seule valeur posée
   en ligne : c'est une donnée, pas un style.
   Variante compacte pour une colonne étroite : --compact.
   ========================================================================== */
.al-gauge {
    --al-gauge-color: var(--al-primary);
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--al-form-card);
    border: 1px solid var(--al-form-card-border);
    border-radius: var(--al-radius-md);
    font-family: var(--al-font-family);
}
.al-gauge--warning { --al-gauge-color: var(--al-warning); }
.al-gauge--full { --al-gauge-color: var(--al-danger-shade); }
.al-gauge__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
}
.al-gauge__icon {
    font-size: 13px;
    color: var(--al-primary);
}
.al-gauge__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--al-on-surface);
}
.al-gauge__count {
    font-size: 13px;
    color: var(--al-form-muted);
    font-variant-numeric: tabular-nums;
}
.al-gauge__count strong {
    font-weight: 700;
    color: var(--al-on-surface);
}
.al-gauge__percent {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--al-radius-full);
    font-size: 11px;
    font-weight: 700;
    background: color-mix(in srgb, var(--al-gauge-color) 14%, #fff);
    color: var(--al-gauge-color);
}
.al-gauge__action {
    margin-left: auto;
}
.al-gauge__track {
    position: relative;
    height: 12px;
    background: var(--al-surface-container);
    border-radius: 6px;
    overflow: hidden;
}
.al-gauge__fill {
    height: 100%;
    border-radius: 6px;
    background: var(--al-gauge-color);
    transition: width .3s ease;
}
.al-gauge__message {
    margin-top: 10px;
    font-size: 12px;
    color: var(--al-on-surface-variant);
}
.al-gauge__message i {
    margin-right: 6px;
    color: var(--al-gauge-color);
}

/* Compacte : dans une carte d'une colonne étroite (tableau de bord) */
.al-gauge--compact {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
.al-gauge--compact .al-gauge__head {
    align-items: baseline;
    gap: 6px;
}
.al-gauge__value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--al-on-surface);
}
.al-gauge__limit {
    font-size: 14px;
    color: var(--al-form-muted);
}
.al-gauge--compact .al-gauge__percent {
    margin-left: auto;
    align-self: center;
}
.al-gauge--compact .al-gauge__track {
    height: 10px;
    border-radius: 5px;
}
.al-gauge__foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--al-form-muted);
}
.al-gauge__foot strong {
    color: var(--al-gauge-color);
    font-weight: 600;
}

/* ==========================================================================
   La grille : al-row, al-col-… (1er/10/2026)
   --------------------------------------------------------------------------
   La grille de Bootstrap 4 reprise à l'identique sous les noms du kit, pour que
   material-dashboard puisse partir : 12 colonnes, gouttières de 15 px, points de
   rupture sm 576 / md 768 / lg 992 / xl 1200 px ; al-offset-…, al-order-…,
   al-no-gutters. Les gabarits ont été convertis tels quels (row → al-row,
   col-sm-6 → al-col-sm-6) : même mise en page au pixel.
   Un écran retravaillé n'a pas à s'en servir : une mise en page sur mesure
   (al-grid, al-flex, gap) lui va souvent mieux.
   ========================================================================== */
.al-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.al-no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.al-no-gutters>.al-col,
.al-no-gutters>[class*=al-col-] {
    padding-right: 0;
    padding-left: 0;
}
.al-col,
.al-col-1,
.al-col-2,
.al-col-3,
.al-col-4,
.al-col-5,
.al-col-6,
.al-col-7,
.al-col-8,
.al-col-9,
.al-col-10,
.al-col-11,
.al-col-12,
.al-col-auto,
.al-col-lg,
.al-col-lg-1,
.al-col-lg-2,
.al-col-lg-3,
.al-col-lg-4,
.al-col-lg-5,
.al-col-lg-6,
.al-col-lg-7,
.al-col-lg-8,
.al-col-lg-9,
.al-col-lg-10,
.al-col-lg-11,
.al-col-lg-12,
.al-col-lg-auto,
.al-col-md,
.al-col-md-1,
.al-col-md-2,
.al-col-md-3,
.al-col-md-4,
.al-col-md-5,
.al-col-md-6,
.al-col-md-7,
.al-col-md-8,
.al-col-md-9,
.al-col-md-10,
.al-col-md-11,
.al-col-md-12,
.al-col-md-auto,
.al-col-sm,
.al-col-sm-1,
.al-col-sm-2,
.al-col-sm-3,
.al-col-sm-4,
.al-col-sm-5,
.al-col-sm-6,
.al-col-sm-7,
.al-col-sm-8,
.al-col-sm-9,
.al-col-sm-10,
.al-col-sm-11,
.al-col-sm-12,
.al-col-sm-auto,
.al-col-xl,
.al-col-xl-1,
.al-col-xl-2,
.al-col-xl-3,
.al-col-xl-4,
.al-col-xl-5,
.al-col-xl-6,
.al-col-xl-7,
.al-col-xl-8,
.al-col-xl-9,
.al-col-xl-10,
.al-col-xl-11,
.al-col-xl-12,
.al-col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.al-col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
.al-col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
.al-col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}
.al-col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}
.al-col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}
.al-col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.al-col-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}
.al-col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}
.al-col-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}
.al-col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}
.al-col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}
.al-col-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}
.al-col-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}
.al-col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}
.al-order-first {
    order: -1;
}
.al-order-last {
    order: 13;
}
.al-order-0 {
    order: 0;
}
.al-order-1 {
    order: 1;
}
.al-order-2 {
    order: 2;
}
.al-order-3 {
    order: 3;
}
.al-order-4 {
    order: 4;
}
.al-order-5 {
    order: 5;
}
.al-order-6 {
    order: 6;
}
.al-order-7 {
    order: 7;
}
.al-order-8 {
    order: 8;
}
.al-order-9 {
    order: 9;
}
.al-order-10 {
    order: 10;
}
.al-order-11 {
    order: 11;
}
.al-order-12 {
    order: 12;
}
.al-offset-1 {
    margin-left: 8.333333%;
}
.al-offset-2 {
    margin-left: 16.666667%;
}
.al-offset-3 {
    margin-left: 25%;
}
.al-offset-4 {
    margin-left: 33.333333%;
}
.al-offset-5 {
    margin-left: 41.666667%;
}
.al-offset-6 {
    margin-left: 50%;
}
.al-offset-7 {
    margin-left: 58.333333%;
}
.al-offset-8 {
    margin-left: 66.666667%;
}
.al-offset-9 {
    margin-left: 75%;
}
.al-offset-10 {
    margin-left: 83.333333%;
}
.al-offset-11 {
    margin-left: 91.666667%;
}
@media (min-width:576px) {
    .al-col-sm {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }
    .al-col-sm-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }
    .al-col-sm-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .al-col-sm-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .al-col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .al-col-sm-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .al-col-sm-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .al-col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .al-col-sm-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .al-col-sm-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .al-col-sm-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    .al-col-sm-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .al-col-sm-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .al-col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .al-order-sm-first {
        order: -1;
    }
    .al-order-sm-last {
        order: 13;
    }
    .al-order-sm-0 {
        order: 0;
    }
    .al-order-sm-1 {
        order: 1;
    }
    .al-order-sm-2 {
        order: 2;
    }
    .al-order-sm-3 {
        order: 3;
    }
    .al-order-sm-4 {
        order: 4;
    }
    .al-order-sm-5 {
        order: 5;
    }
    .al-order-sm-6 {
        order: 6;
    }
    .al-order-sm-7 {
        order: 7;
    }
    .al-order-sm-8 {
        order: 8;
    }
    .al-order-sm-9 {
        order: 9;
    }
    .al-order-sm-10 {
        order: 10;
    }
    .al-order-sm-11 {
        order: 11;
    }
    .al-order-sm-12 {
        order: 12;
    }
    .al-offset-sm-0 {
        margin-left: 0;
    }
    .al-offset-sm-1 {
        margin-left: 8.333333%;
    }
    .al-offset-sm-2 {
        margin-left: 16.666667%;
    }
    .al-offset-sm-3 {
        margin-left: 25%;
    }
    .al-offset-sm-4 {
        margin-left: 33.333333%;
    }
    .al-offset-sm-5 {
        margin-left: 41.666667%;
    }
    .al-offset-sm-6 {
        margin-left: 50%;
    }
    .al-offset-sm-7 {
        margin-left: 58.333333%;
    }
    .al-offset-sm-8 {
        margin-left: 66.666667%;
    }
    .al-offset-sm-9 {
        margin-left: 75%;
    }
    .al-offset-sm-10 {
        margin-left: 83.333333%;
    }
    .al-offset-sm-11 {
        margin-left: 91.666667%;
    }
}
@media (min-width:768px) {
    .al-col-md {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }
    .al-col-md-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }
    .al-col-md-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .al-col-md-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .al-col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .al-col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .al-col-md-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .al-col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .al-col-md-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .al-col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .al-col-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    .al-col-md-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .al-col-md-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .al-col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .al-order-md-first {
        order: -1;
    }
    .al-order-md-last {
        order: 13;
    }
    .al-order-md-0 {
        order: 0;
    }
    .al-order-md-1 {
        order: 1;
    }
    .al-order-md-2 {
        order: 2;
    }
    .al-order-md-3 {
        order: 3;
    }
    .al-order-md-4 {
        order: 4;
    }
    .al-order-md-5 {
        order: 5;
    }
    .al-order-md-6 {
        order: 6;
    }
    .al-order-md-7 {
        order: 7;
    }
    .al-order-md-8 {
        order: 8;
    }
    .al-order-md-9 {
        order: 9;
    }
    .al-order-md-10 {
        order: 10;
    }
    .al-order-md-11 {
        order: 11;
    }
    .al-order-md-12 {
        order: 12;
    }
    .al-offset-md-0 {
        margin-left: 0;
    }
    .al-offset-md-1 {
        margin-left: 8.333333%;
    }
    .al-offset-md-2 {
        margin-left: 16.666667%;
    }
    .al-offset-md-3 {
        margin-left: 25%;
    }
    .al-offset-md-4 {
        margin-left: 33.333333%;
    }
    .al-offset-md-5 {
        margin-left: 41.666667%;
    }
    .al-offset-md-6 {
        margin-left: 50%;
    }
    .al-offset-md-7 {
        margin-left: 58.333333%;
    }
    .al-offset-md-8 {
        margin-left: 66.666667%;
    }
    .al-offset-md-9 {
        margin-left: 75%;
    }
    .al-offset-md-10 {
        margin-left: 83.333333%;
    }
    .al-offset-md-11 {
        margin-left: 91.666667%;
    }
}
@media (min-width:992px) {
    .al-col-lg {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }
    .al-col-lg-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }
    .al-col-lg-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .al-col-lg-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .al-col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .al-col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .al-col-lg-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .al-col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .al-col-lg-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .al-col-lg-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .al-col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    .al-col-lg-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .al-col-lg-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .al-col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .al-order-lg-first {
        order: -1;
    }
    .al-order-lg-last {
        order: 13;
    }
    .al-order-lg-0 {
        order: 0;
    }
    .al-order-lg-1 {
        order: 1;
    }
    .al-order-lg-2 {
        order: 2;
    }
    .al-order-lg-3 {
        order: 3;
    }
    .al-order-lg-4 {
        order: 4;
    }
    .al-order-lg-5 {
        order: 5;
    }
    .al-order-lg-6 {
        order: 6;
    }
    .al-order-lg-7 {
        order: 7;
    }
    .al-order-lg-8 {
        order: 8;
    }
    .al-order-lg-9 {
        order: 9;
    }
    .al-order-lg-10 {
        order: 10;
    }
    .al-order-lg-11 {
        order: 11;
    }
    .al-order-lg-12 {
        order: 12;
    }
    .al-offset-lg-0 {
        margin-left: 0;
    }
    .al-offset-lg-1 {
        margin-left: 8.333333%;
    }
    .al-offset-lg-2 {
        margin-left: 16.666667%;
    }
    .al-offset-lg-3 {
        margin-left: 25%;
    }
    .al-offset-lg-4 {
        margin-left: 33.333333%;
    }
    .al-offset-lg-5 {
        margin-left: 41.666667%;
    }
    .al-offset-lg-6 {
        margin-left: 50%;
    }
    .al-offset-lg-7 {
        margin-left: 58.333333%;
    }
    .al-offset-lg-8 {
        margin-left: 66.666667%;
    }
    .al-offset-lg-9 {
        margin-left: 75%;
    }
    .al-offset-lg-10 {
        margin-left: 83.333333%;
    }
    .al-offset-lg-11 {
        margin-left: 91.666667%;
    }
}
@media (min-width:1200px) {
    .al-col-xl {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }
    .al-col-xl-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }
    .al-col-xl-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }
    .al-col-xl-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .al-col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .al-col-xl-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .al-col-xl-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .al-col-xl-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .al-col-xl-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .al-col-xl-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .al-col-xl-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    .al-col-xl-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .al-col-xl-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
    .al-col-xl-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .al-order-xl-first {
        order: -1;
    }
    .al-order-xl-last {
        order: 13;
    }
    .al-order-xl-0 {
        order: 0;
    }
    .al-order-xl-1 {
        order: 1;
    }
    .al-order-xl-2 {
        order: 2;
    }
    .al-order-xl-3 {
        order: 3;
    }
    .al-order-xl-4 {
        order: 4;
    }
    .al-order-xl-5 {
        order: 5;
    }
    .al-order-xl-6 {
        order: 6;
    }
    .al-order-xl-7 {
        order: 7;
    }
    .al-order-xl-8 {
        order: 8;
    }
    .al-order-xl-9 {
        order: 9;
    }
    .al-order-xl-10 {
        order: 10;
    }
    .al-order-xl-11 {
        order: 11;
    }
    .al-order-xl-12 {
        order: 12;
    }
    .al-offset-xl-0 {
        margin-left: 0;
    }
    .al-offset-xl-1 {
        margin-left: 8.333333%;
    }
    .al-offset-xl-2 {
        margin-left: 16.666667%;
    }
    .al-offset-xl-3 {
        margin-left: 25%;
    }
    .al-offset-xl-4 {
        margin-left: 33.333333%;
    }
    .al-offset-xl-5 {
        margin-left: 41.666667%;
    }
    .al-offset-xl-6 {
        margin-left: 50%;
    }
    .al-offset-xl-7 {
        margin-left: 58.333333%;
    }
    .al-offset-xl-8 {
        margin-left: 66.666667%;
    }
    .al-offset-xl-9 {
        margin-left: 75%;
    }
    .al-offset-xl-10 {
        margin-left: 83.333333%;
    }
    .al-offset-xl-11 {
        margin-left: 91.666667%;
    }
}
.al-form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.al-form-row>.al-col,
.al-form-row>[class*=al-col-] {
    padding-right: 5px;
    padding-left: 5px;
}

/* ==========================================================================
   Utilitaires (24/09/2026)
   --------------------------------------------------------------------------
   Pour qu'il n'y ait plus de style="…" dans les écrans : les réglages de mise
   en page ponctuels passent par ces classes, les couleurs par les jetons.
   Préfixe al- : ne dépendent pas de Bootstrap (material-dashboard partira).
   Posés en fin de fichier : ils l'emportent sur les composants du kit.

   al-hide n'est pas en !important : un .show() jQuery doit pouvoir l'annuler
   (il pose display en ligne). Il doit pourtant l'emporter sur toute règle de
   classe qui fixe display, même dans une feuille chargée après le kit (feuille
   de page) : d'où le :not(#…) qui lui donne le poids d'un identifiant.
   Les e-mails et les PDF ne sont pas concernés : leurs styles restent sur
   l'élément (messageries, wkhtmltopdf).
   ========================================================================== */

/* Affichage */
.al-hide:not(#al-hide-weight) { display: none; }
.al-block { display: block; }
.al-inline-block { display: inline-block; }
.al-flex { display: flex; }
.al-inline-flex { display: inline-flex; }
.al-grid { display: grid; }

/* Flex */
.al-items-start { align-items: flex-start; }
.al-items-center { align-items: center; }
.al-items-end { align-items: flex-end; }
.al-justify-start { justify-content: flex-start; }
.al-justify-center { justify-content: center; }
.al-justify-end { justify-content: flex-end; }
.al-justify-between { justify-content: space-between; }
.al-wrap { flex-wrap: wrap; }
.al-column { flex-direction: column; }
.al-flex-1 { flex: 1 1 0; min-width: 0; }
.al-shrink-0 { flex-shrink: 0; }
.al-ml-auto { margin-left: auto; }

/* Écarts (px) */
.al-gap-4 { gap: 4px; }
.al-gap-6 { gap: 6px; }
.al-gap-8 { gap: 8px; }
.al-gap-10 { gap: 10px; }
.al-gap-12 { gap: 12px; }
.al-gap-16 { gap: 16px; }
.al-gap-24 { gap: 24px; }

/* Marges et retraits (px) */
.al-m-0 { margin: 0; }
.al-mx-auto { margin-left: auto; margin-right: auto; }
.al-mx-12 { margin-left: 12px; margin-right: 12px; }
.al-mt-0 { margin-top: 0; }
.al-mt-4 { margin-top: 4px; }
.al-mt-8 { margin-top: 8px; }
.al-mt-12 { margin-top: 12px; }
.al-mt-16 { margin-top: 16px; }
.al-mt-24 { margin-top: 24px; }
.al-mb-0 { margin-bottom: 0; }
.al-mb-4 { margin-bottom: 4px; }
.al-mb-8 { margin-bottom: 8px; }
.al-mb-12 { margin-bottom: 12px; }
.al-mb-16 { margin-bottom: 16px; }
.al-mb-24 { margin-bottom: 24px; }
.al-p-0 { padding: 0; }
.al-p-8 { padding: 8px; }
.al-p-12 { padding: 12px; }
.al-p-16 { padding: 16px; }

/* Marges latérales et retraits par côté (px). Échelle du kit : 4/8/12/16/24 — les 10 px
   de l'existant sont arrondis à 8 ou 12 (décision FP du 24/09/2026). */
.al-ml-0 { margin-left: 0; }
.al-ml-4 { margin-left: 4px; }
.al-ml-8 { margin-left: 8px; }
.al-ml-12 { margin-left: 12px; }
.al-ml-16 { margin-left: 16px; }
.al-ml-24 { margin-left: 24px; }
.al-mr-0 { margin-right: 0; }
.al-mr-4 { margin-right: 4px; }
.al-mr-8 { margin-right: 8px; }
.al-mr-12 { margin-right: 12px; }
.al-mr-16 { margin-right: 16px; }
.al-mr-24 { margin-right: 24px; }
.al-my-8 { margin-top: 8px; margin-bottom: 8px; }
.al-my-16 { margin-top: 16px; margin-bottom: 16px; }
.al-my-24 { margin-top: 24px; margin-bottom: 24px; }
.al-mt-32 { margin-top: 32px; }
.al-mb-32 { margin-bottom: 32px; }
.al-p-4 { padding: 4px; }
.al-p-24 { padding: 24px; }
.al-pt-0 { padding-top: 0; }
.al-pt-4 { padding-top: 4px; }
.al-pt-8 { padding-top: 8px; }
.al-pt-12 { padding-top: 12px; }
.al-pt-16 { padding-top: 16px; }
.al-pt-24 { padding-top: 24px; }
.al-pt-32 { padding-top: 32px; }
.al-pb-0 { padding-bottom: 0; }
.al-pb-4 { padding-bottom: 4px; }
.al-pb-8 { padding-bottom: 8px; }
.al-pb-12 { padding-bottom: 12px; }
.al-pb-16 { padding-bottom: 16px; }
.al-pb-24 { padding-bottom: 24px; }
.al-pl-0 { padding-left: 0; }
.al-pl-4 { padding-left: 4px; }
.al-pl-8 { padding-left: 8px; }
.al-pl-12 { padding-left: 12px; }
.al-pl-16 { padding-left: 16px; }
.al-pr-0 { padding-right: 0; }
.al-pr-4 { padding-right: 4px; }
.al-pr-8 { padding-right: 8px; }
.al-pr-12 { padding-right: 12px; }
.al-pr-16 { padding-right: 16px; }
.al-px-8 { padding-left: 8px; padding-right: 8px; }
.al-px-12 { padding-left: 12px; padding-right: 12px; }
.al-px-16 { padding-left: 16px; padding-right: 16px; }
.al-py-4 { padding-top: 4px; padding-bottom: 4px; }
.al-py-8 { padding-top: 8px; padding-bottom: 8px; }
.al-py-12 { padding-top: 12px; padding-bottom: 12px; }
.al-py-16 { padding-top: 16px; padding-bottom: 16px; }

/* Largeurs (colonnes de tableaux comprises) */
.al-w-100 { width: 100%; }
.al-w-3 { width: 3%; }
.al-w-4 { width: 4%; }
.al-w-5 { width: 5%; }
.al-w-8 { width: 8%; }
.al-w-12 { width: 12%; }
.al-w-10 { width: 10%; }
.al-w-15 { width: 15%; }
.al-w-20 { width: 20%; }
.al-w-25 { width: 25%; }
.al-w-30 { width: 30%; }
.al-w-40 { width: 40%; }
.al-w-50 { width: 50%; }
.al-w-auto { width: auto; }
.al-w-fit { width: max-content; }
.al-h-100 { height: 100%; }
.al-min-w-0 { min-width: 0; }

/* Texte */
.al-text-left { text-align: left; }
.al-text-center { text-align: center; }
.al-text-right { text-align: right; }
.al-nowrap { white-space: nowrap; }
.al-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-break { overflow-wrap: anywhere; }
.al-uppercase { text-transform: uppercase; letter-spacing: var(--al-label-tracking); }
.al-fw-400 { font-weight: 400; }
.al-fw-500 { font-weight: 500; }
.al-fw-600 { font-weight: 600; }
.al-fw-700 { font-weight: 700; }
.al-fs-10 { font-size: 10px; }
.al-fs-11 { font-size: 11px; }
.al-fs-12 { font-size: 12px; }
.al-fs-13 { font-size: 13px; }
.al-fs-14 { font-size: 14px; }
.al-fs-16 { font-size: 16px; }
.al-fs-18 { font-size: 18px; }
.al-tabular { font-variant-numeric: tabular-nums; }

/* Couleurs de texte : les jetons du kit, jamais une valeur en dur */
.al-text-strong { color: var(--al-on-surface); }
.al-text-body { color: var(--al-on-surface-variant); }
.al-text-label { color: var(--al-form-label); }
.al-text-muted { color: var(--al-form-muted); }
.al-text-primary { color: var(--al-primary); }
.al-text-success { color: var(--al-success); }
.al-text-warning { color: var(--al-warning); }
.al-text-danger { color: var(--al-danger-shade); }
.al-text-info { color: var(--al-info); }

/* Position et débordement */
.al-relative { position: relative; }
.al-absolute { position: absolute; }
.al-overflow-auto { overflow: auto; }
.al-overflow-hidden { overflow: hidden; }
.al-float-right { float: right; }
.al-float-left { float: left; }
.al-clear { clear: both; }
.al-vtop { vertical-align: top; }
.al-vmiddle { vertical-align: middle; }

/* Divers */
.al-pointer { cursor: pointer; }
.al-rounded { border-radius: var(--al-radius-sm); }
.al-rounded-full { border-radius: var(--al-radius-full); }