/* Palette Halfmoon personnalisée (teintes plus foncées / moins vives).
   Définie dans halfmoon-palette.css, partagée avec les pages autonomes. */
@import url("halfmoon-palette.d1ebe6a9486e.css");


/* Réserve toujours la place de l'ascenseur vertical, même quand la page est
   assez courte pour ne pas en avoir besoin : sans ça, les pages avec les
   onglets "classeur" (centrés dans la largeur disponible) se décalent d'une
   quinzaine de pixels selon que la page précédente était haute (ascenseur
   affiché) ou courte (pas d'ascenseur), donnant l'impression que les
   onglets « sautent » d'une page à l'autre. */
html {
    scrollbar-gutter: stable;
    /* Firefox */
    scrollbar-color: var(--lag-navbar-color, #aad7ff) transparent;
}

/* Chrome / Edge / Safari — même teinte que la sidebar (--lag-navbar-color,
   exposée par base_admin.html), au lieu de l'ascenseur gris par défaut. */
html::-webkit-scrollbar {
    width: 10px;
}
html::-webkit-scrollbar-track {
    background: transparent;
}
html::-webkit-scrollbar-thumb {
    background-color: var(--lag-navbar-color, #aad7ff);
    border-radius: 5px;
}
html::-webkit-scrollbar-thumb:hover {
    opacity: .85;
}

/* Cases à cocher / interrupteurs (form-check, form-switch — ex. getAccountNotifications,
   toggle "Mode test") : même couleur que les onglets actifs/pastilles
   (--lag-active-color, configurable dans Configurations interface) au lieu du
   bleu Bootstrap par défaut. */
.form-check-input:checked {
    background-color: var(--lag-active-color, #aad7ff);
    border-color: var(--lag-active-color, #aad7ff);
}

/* Page active des boutons de pagination : même couleur que les onglets
   actifs/pastilles (--lag-active-color) au lieu du bleu par défaut. */
.page-link.active,
.active > .page-link {
    background-color: var(--lag-active-color, #aad7ff);
    border-color: var(--lag-active-color, #aad7ff);
}

/* Bulle de notification du nombre d'articles dans le panier (shop.html) :
   même couleur que les onglets actifs/pastilles (--lag-active-color)
   au lieu du bleu Bootstrap par défaut (text-bg-primary). */
.lag-cart-badge {
    background-color: var(--lag-active-color, #aad7ff) !important;
}

body {
    background-color: #f7f7f7;
    margin: 0 ;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lag-sidebar {
    background-color: #aad7ff !important;
}

.lag-font-bold {
    font-weight: bolder;
}

.lag-container-padding-20 {
    padding-top: 20px;
    margin-top: 20px;
}

/* Conteneur élargi (ex. cartes de commandes sur getAccountPayments) : le
   `.container` Bootstrap standard (max-width ≤ 1320px) serre les tableaux de
   paiements imbriqués (Statut/Montant/Dû le/Payé le) — on lui donne plus
   d'air sur grand écran, sans passer en pleine largeur (container-fluid). */
.container.lag-container-wide {
    max-width: 1600px;
}


.nav-pills .nav-link.green, .nav-pills .show>.nav-link {
    color: #ffffff;
    background-color: #257446;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}


.lag-navbar {
    margin: 0;
    padding: 0;
    /* -webkit-fill-available est peu fiable sur un élément fixed (largeur
       parfois calculée bien au-delà du viewport) : on ancre plutôt la barre
       des deux côtés, ce qui la force à occuper exactement la largeur visible. */
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
}

.lag-menu {
    margin: 0;
    padding: 0;

    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: #ddefff;
    border-right: 1px solid #aad7ff ;
    border-left: 1px solid #aad7ff ;

    margin-left: 70px;
    width: 0px;
    height:100%;
    position: fixed;
    display: none;
}

.lag-menu h2 {
    text-align: center;
    font-size: larger;
    margin-top: 20px;
}

.lag-menu ul {
    text-align: center;
    padding-inline-start: 0px;

}

.lag-menu ul>li {
     list-style-type: none;
    margin: 5px;

}

.lag-menu ul>li>a {

    color: #2a844f;
    text-decoration: none;
}

.lag_menu_shadow {
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #2a844f);
}

.lag-content{
    /*margin-top: 55px;*/
    /* Marge blanche en bas de page : évite que les tableaux soient collés
       au bord inférieur de la fenêtre. */
    padding-bottom: 60px;
}

.lag-content-user{
    margin-top: 66px;
    flex: 1 0 auto;
}

.lag-account-infoline {
    margin: 0;
    font-size: 1rem;
    text-align: center;
    color: #999999;
}

/* Le conteneur qui n'enveloppe plus que la ligne d'info compte n'a plus
   besoin de l'espace au-dessus prévu par .lag-container-padding-20 pour
   l'ancien bloc de champs. */
.lag-container-padding-20:has(> .lag-account-infoline) {
    padding-top: 0;
}

.lag-footer-copyright {
    flex-shrink: 0;
    text-align: right;
    padding: 12px 20px 16px;
    font-size: 12px;
    color: #999999;
}


.lag-pill-bg-purple {
    --bs-color-hsl: var(--bs-danger-foreground-hsl);
    color: #000000; !important;
    background-color: #eee5fe; !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
}

.lag-pill-bg-grey {
    --bs-color-hsl: var(--bs-danger-foreground-hsl);
    color: #000000; !important;
    background-color: #e2e3e5; !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
}

.lag-pill-bg-blue {
    --bs-color-hsl: var(--bs-danger-foreground-hsl);
    color: #000000; !important;
    background-color: #c2e8f0; !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
}

.lag-pill-bg-green {
    --bs-color-hsl: var(--bs-danger-foreground-hsl);
    color: #000000; !important;
    background-color: #d4f9db; !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
}

.lag-pill-bg-red {
    --bs-color-hsl: var(--bs-danger-foreground-hsl);
    color: #000000; !important;
    background-color: #fbdce2; !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
}

.lag-pill-bg-yellow {
    --bs-color-hsl: var(--bs-danger-foreground-hsl);
    color: #000000; !important;
    background-color: #f0f0c2; !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
}

.lag-pill-bg-orange {
    --bs-color-hsl: var(--bs-danger-foreground-hsl);
    color: #000000; !important;
    background-color: #ffe5cc; !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
}


.lag_menu_drop {
    position: fixed !important;
    z-index: 2147483647 !important;
}

.lag_nav_div {
        display: flex !important;
        flex-basis: auto;
        flex-wrap: nowrap !important;
}

.lag_navbar_div {
        flex-wrap: nowrap;
        justify-content: flex-start;

}

.lag_nav_link {

    padding: 6px;
}

.lag_nav_brand {
    height: 40px;
    border: 5px;
    border-color: white;
    border-style: solid;
    border-radius: 5px;
    padding: 0px;
}

@media (max-width: 500px) {
	.lag_nav_brand {
		display: none;
	}

	.lag_nav_link img {
		height: 24px;
	}

	/* Le 1er .lag_nav_div (icônes principales) est en largeur "fill-available"
	   en desktop : en mobile, combiné au nowrap du conteneur, ça pousse le 2e
	   .lag_nav_div (FAQ / contact / déconnexion) hors de l'écran. */
	.lag_nav_div {
		width: auto !important;
	}
}


.lag_mobile_button {
    height: 40px;
    align-content: space-evenly;
    font-size: medium;
}

.lag_mobile_input {
    font-size: large;
    place-items: center;
}

.lag-sort-link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.lag-sort-link:hover {
    text-decoration: underline;
}

.lag_mobile_label {
    font-size: large;
}

.lag_mobile_title {
    font-size: large !important;
}



/* ─────────────────────────────────────────────────────────────────────
   Boutons sémantiques configurables (Configurations interface).
   Couleurs pilotées via les variables --lag-btn-*-* déclarées dans
   base_admin.html / base_user.html (elles-mêmes lues depuis web.config).
   Pour appliquer : classe "btn" + une de ces classes, ex. <button class="btn btn-lag-ok">
   ───────────────────────────────────────────────────────────────────── */
.btn-lag-ok {
    --bs-btn-color: var(--lag-btn-ok-text, #ffffff);
    --bs-btn-bg: var(--lag-btn-ok-free, #0d6efd);
    --bs-btn-border-color: #00000000;
    --bs-btn-hover-color: var(--lag-btn-ok-text, #ffffff);
    --bs-btn-hover-bg: var(--lag-btn-ok-pressed, #0a58ca);
    --bs-btn-hover-border-color: #00000000;
    --bs-btn-focus-shadow-hsl: #ffffff;
    --bs-btn-active-color: var(--lag-btn-ok-text, #ffffff);
    --bs-btn-active-bg: var(--lag-btn-ok-pressed, #0a58ca);
    --bs-btn-active-border-color: #00000000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--lag-btn-ok-text, #ffffff);
    --bs-btn-disabled-bg: var(--lag-btn-ok-free, #0d6efd);
    --bs-btn-disabled-border-color: #00000000;
    --bs-btn-bg-clip: border-box;
}

.btn-lag-ko {
    --bs-btn-color: var(--lag-btn-ko-text, #ffffff);
    --bs-btn-bg: var(--lag-btn-ko-free, #198754);
    --bs-btn-border-color: #00000000;
    --bs-btn-hover-color: var(--lag-btn-ko-text, #ffffff);
    --bs-btn-hover-bg: var(--lag-btn-ko-pressed, #146c43);
    --bs-btn-hover-border-color: #00000000;
    --bs-btn-focus-shadow-hsl: #ffffff;
    --bs-btn-active-color: var(--lag-btn-ko-text, #ffffff);
    --bs-btn-active-bg: var(--lag-btn-ko-pressed, #146c43);
    --bs-btn-active-border-color: #00000000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--lag-btn-ko-text, #ffffff);
    --bs-btn-disabled-bg: var(--lag-btn-ko-free, #198754);
    --bs-btn-disabled-border-color: #00000000;
    --bs-btn-bg-clip: border-box;
}

.btn-lag-cancel {
    --bs-btn-color: var(--lag-btn-cancel-text, #ffffff);
    --bs-btn-bg: var(--lag-btn-cancel-free, #dc3545);
    --bs-btn-border-color: #00000000;
    --bs-btn-hover-color: var(--lag-btn-cancel-text, #ffffff);
    --bs-btn-hover-bg: var(--lag-btn-cancel-pressed, #b02a37);
    --bs-btn-hover-border-color: #00000000;
    --bs-btn-focus-shadow-hsl: #ffffff;
    --bs-btn-active-color: var(--lag-btn-cancel-text, #ffffff);
    --bs-btn-active-bg: var(--lag-btn-cancel-pressed, #b02a37);
    --bs-btn-active-border-color: #00000000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--lag-btn-cancel-text, #ffffff);
    --bs-btn-disabled-bg: var(--lag-btn-cancel-free, #dc3545);
    --bs-btn-disabled-border-color: #00000000;
    --bs-btn-bg-clip: border-box;
}

.btn-lag-show {
    --bs-btn-color: var(--lag-btn-show-text, #ffffff);
    --bs-btn-bg: var(--lag-btn-show-free, #6c757d);
    --bs-btn-border-color: #00000000;
    --bs-btn-hover-color: var(--lag-btn-show-text, #ffffff);
    --bs-btn-hover-bg: var(--lag-btn-show-pressed, #565e64);
    --bs-btn-hover-border-color: #00000000;
    --bs-btn-focus-shadow-hsl: #ffffff;
    --bs-btn-active-color: var(--lag-btn-show-text, #ffffff);
    --bs-btn-active-bg: var(--lag-btn-show-pressed, #565e64);
    --bs-btn-active-border-color: #00000000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--lag-btn-show-text, #ffffff);
    --bs-btn-disabled-bg: var(--lag-btn-show-free, #6c757d);
    --bs-btn-disabled-border-color: #00000000;
    --bs-btn-bg-clip: border-box;
}

.btn-lag-purple {
    --bs-btn-color: #ffffff ;
    --bs-btn-bg: #a336dd;
    --bs-btn-border-color: #00000000;
    --bs-btn-hover-color: #ffffff ;
    --bs-btn-hover-bg: #7b26a9;
    --bs-btn-hover-border-color: #00000000;
    --bs-btn-focus-shadow-hsl: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #531773;
    --bs-btn-active-border-color: #00000000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #ffffff ;
    --bs-btn-disabled-bg: #ca9adc;
    --bs-btn-disabled-border-color: #00000000;
    --bs-btn-bg-clip: border-box;
}

.btn-lag-turquoise {
    --bs-btn-color: #ffffff ;
    --bs-btn-bg: #16bba9;
    --bs-btn-border-color: #00000000;
    --bs-btn-hover-color: #ffffff ;
    --bs-btn-hover-bg: #1c998b;
    --bs-btn-hover-border-color: #00000000;
    --bs-btn-focus-shadow-hsl: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #157c70;
    --bs-btn-active-border-color: #00000000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #ffffff ;
    --bs-btn-disabled-bg: #16bba9;
    --bs-btn-disabled-border-color: #00000000;
    --bs-btn-bg-clip: border-box;
}

.btn-lag-blue {
    --bs-btn-color: #ffffff ;
    --bs-btn-bg: #264ac7;
    --bs-btn-border-color: #00000000;
    --bs-btn-hover-color: #ffffff ;
    --bs-btn-hover-bg: #1b3691;
    --bs-btn-hover-border-color: #00000000;
    --bs-btn-focus-shadow-hsl: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0f2057;
    --bs-btn-active-border-color: #00000000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #ffffff ;
    --bs-btn-disabled-bg: #264ac7;
    --bs-btn-disabled-border-color: #00000000;
    --bs-btn-bg-clip: border-box;
}

.btn-lag-blue2 {
    --bs-btn-color: #ffffff ;
    --bs-btn-bg: #516ac1;
    --bs-btn-border-color: #00000000;
    --bs-btn-hover-color: #ffffff ;
    --bs-btn-hover-bg: #34447d;
    --bs-btn-hover-border-color: #00000000;
    --bs-btn-focus-shadow-hsl: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #1b2341;
    --bs-btn-active-border-color: #00000000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #ffffff ;
    --bs-btn-disabled-bg: #516ac1;
    --bs-btn-disabled-border-color: #00000000;
    --bs-btn-bg-clip: border-box;
}

.btn-lag-orange {
    --bs-btn-color: #ffffff ;
    --bs-btn-bg: #dd8911;
    --bs-btn-border-color: #00000000;
    --bs-btn-hover-color: #ffffff ;
    --bs-btn-hover-bg: #a9690d;
    --bs-btn-hover-border-color: #00000000;
    --bs-btn-focus-shadow-hsl: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #613c07;
    --bs-btn-active-border-color: #00000000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #ffffff ;
    --bs-btn-disabled-bg: #dd8911;
    --bs-btn-disabled-border-color: #00000000;
    --bs-btn-bg-clip: border-box;
}

.btn-lag-pink {
    --bs-btn-color: #ffffff ;
    --bs-btn-bg: #f904bc;
    --bs-btn-border-color: #00000000;
    --bs-btn-hover-color: #ffffff ;
    --bs-btn-hover-bg: #c10592;
    --bs-btn-hover-border-color: #00000000;
    --bs-btn-focus-shadow-hsl: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #7d015e;
    --bs-btn-active-border-color: #00000000;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #ffffff ;
    --bs-btn-disabled-bg: #f904bc;
    --bs-btn-disabled-border-color: #00000000;
    --bs-btn-bg-clip: border-box;
}

/* ─────────────────────────────────────────────────────────────────────
   Essai : reprise du template de tableau de getBillStats (bill_stats.html)
   sur les listes admin. Appliqué via la classe .lag-list-table.
   Pour annuler l'essai : retirer ce bloc + la classe sur les templates.
   ───────────────────────────────────────────────────────────────────── */
table.lag-list-table {
    --bs-table-bg: transparent;
    width: 100%;
    /* neutralise le padding de .row > * quand le tableau est dans un <form class="row"> */
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
    border-radius: 10px;
    overflow: hidden;
}

table.lag-list-table > thead > tr > th {
    background: #f3f4f6;
    color: #374151;
    font-weight: 700;
    text-align: left;
    padding: 9px 10px;
    border: none;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

table.lag-list-table > thead > tr > th a {
    color: inherit;
    text-decoration: none;
}

table.lag-list-table > thead > tr > th a:hover {
    color: #2563eb;
}

table.lag-list-table > tbody > tr > td,
table.lag-list-table > tbody > tr > th {
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    background: #fff;
    box-shadow: none;
    vertical-align: middle;
}

table.lag-list-table > tbody > tr:last-child > td,
table.lag-list-table > tbody > tr:last-child > th {
    border-bottom: none;
}

table.lag-list-table > tbody > tr:hover > td,
table.lag-list-table > tbody > tr:hover > th {
    background: #f9fafb;
}

table.lag-list-table > tbody > tr > td a:not(.btn) {
    color: #111827;
    text-decoration: none;
}

table.lag-list-table > tbody > tr > td a:not(.btn):hover {
    color: #2563eb;
}

/* Ligne « N résultat(s) » affichée au-dessus des tableaux de listes. */
.lag-list-count {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
}

/* ─────────────────────────────────────────────────────────────────────
   Carte encadrant un formulaire (même ombre / rayon que .lag-list-table).
   ───────────────────────────────────────────────────────────────────── */
.lag-form-card {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
    scroll-margin-top: 20px;
}

.lag-form-card__title {
    font-weight: 700;
    color: #374151;
    font-size: 1rem;
    margin-bottom: 18px;
}

.lag-form-msg {
    margin: 12px 0 0 0;
    font-weight: 700;
}

.lag-form-msg--ok  { color: #15803d; }
.lag-form-msg--err { color: #b91c1c; }


/* ─────────────────────────────────────────────────────────────────────
   Onglets "intercalaires de classeur" (fiche compte et pages dérivées).
   S'applique à la barre `<ul class="nav nav-pills nav-fill lag-tabs-binder">` :
   les onglets débordent légèrement au-dessus d'une ligne de reliure, l'onglet
   actif se détache en blanc (même surface que .lag-form-card qui suit),
   les autres restent en retrait, gris, comme des intercalaires fermés.
   ───────────────────────────────────────────────────────────────────── */
/* Le conteneur Bootstrap `.container` est centré avec une largeur max : sans
   ce déplafonnage, le trait sous les onglets s'arrête à cette largeur au lieu
   d'aller jusqu'au bord de la fenêtre. Seul le conteneur des onglets est
   concerné (celui du contenu en dessous reste centré normalement).
   Il passe aussi en fond blanc, pour se distinguer du fond de page (#f7f7f7)
   qui se poursuit sous les onglets.

   #lag_content est décalé de la sidebar (65px de large) par une marge de
   80px, plus grande que la sidebar elle-même : la bande grise du fond de
   page entre les deux (65 → 80px) restait visible à gauche du blanc. On
   fait donc déborder la boîte de 80px vers la gauche (jusqu'au bord de la
   fenêtre, caché derrière la sidebar qui est opaque et au-dessus en
   z-index), avec un padding-left de 80px en compensation pour que les
   onglets gardent leur position d'origine. Le margin-top de
   .lag-container-padding-20 est lui aussi ramené à 0 et reporté sur le
   padding-top (sans ça, ce margin — hors de la boîte, donc non couvert par
   le fond blanc — laissait une bande grise entre le haut de #lag_content et
   le début du blanc). */
.container.lag-tabs-fullbleed {
    max-width: none;
    margin-right: 0;
    margin-top: 0;
    margin-left: -80px;
    width: calc(100% + 80px);
    padding-right: 0;
    padding-left: 80px;
    padding-top: 40px;
    background-color: #ffffff;
    /* La ligne de reliure est portée ici (plutôt que par ul.lag-tabs-binder
       plus bas) car le padding-left:80px ci-dessus, nécessaire pour garder
       les onglets à leur place, aurait aussi rétréci d'autant la largeur du
       ul — et donc de son propre border-bottom — l'empêchant d'atteindre le
       bord gauche comme le fond blanc. */
    border-bottom: 2px solid #e5e7eb;
    /* Rogne les "jambes" des onglets (voir .nav-link::after plus bas) pile à
       la ligne de reliure, quel que soit le nombre de lignes d'onglets. */
    overflow: hidden;
}

/* Même débordement en haut, mais seulement quand la topbar existe (elle
   ajoute alors une marge de 52px à #lag_content, plus grande que ses propres
   42px de hauteur ; #lag-header-shadow n'est rendu qu'avec elle). */
body:has(#lag-header-shadow) .container.lag-tabs-fullbleed {
    margin-top: -52px;
    padding-top: 70px;
}

/* Variante pour les pages utilisateur (ex. getUserAccount) : mêmes onglets
   "classeur" que sur la fiche compte admin. Contrairement à l'admin, il n'y a
   pas de sidebar à compenser : .lag-content-user (base_user.html) n'a pas de
   padding horizontal, donc max-width:none + width:100% suffisent à amener le
   fond blanc jusqu'aux bords de la fenêtre, sans le calcul -80px/+80px ni les
   artefacts du hack margin -50vw (barre de défilement). Le margin-top est
   négatif pour que le blanc touche directement la navbar fixe au-dessus : le
   décalage de 66px de .lag-content-user est un peu plus grand que la hauteur
   réellement rendue de la navbar (~61-62px), d'où ces quelques px à rattraper
   (même principe que le -52px de .lag-tabs-fullbleed côté admin). */
.container.lag-tabs-binder-wrap {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: -5px;
    padding-top: 20px;
    background-color: #ffffff;
    border-bottom: 2px solid #e5e7eb;
    overflow: hidden;
}

ul.lag-tabs-binder {
    /* La ligne de reliure pleine largeur est portée par .lag-tabs-fullbleed
       ci-dessus, pas par ce ul (voir le commentaire associé). */
    justify-content: center;
    gap: 3px;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 0;
}

ul.lag-tabs-binder.nav-fill > li.nav-item,
ul.lag-tabs-binder > li.nav-item {
    display: flex;
    flex: 0 0 auto;
    position: relative;
}

/* Écran étroit : les onglets passent sur 2 lignes (flex-wrap). Sans ça, la
   ligne du dessus s'arrête net et la ligne du dessous flotte seule en
   dessous — pas beau. On prolonge chaque onglet vers le bas avec une
   "jambe" de sa propre couleur (::after), rognée pile à la ligne de reliure
   par l'overflow:hidden de .lag-tabs-fullbleed : les onglets de la ligne du
   dessus paraissent ainsi continuer derrière ceux de la ligne du dessous
   (comme des intercalaires de classeur empilés). Le pseudo-élément est porté
   par le <li> (jamais de z-index propre) plutôt que par .nav-link (dont
   .active a un z-index:1) : sans quoi la jambe d'un onglet actif de la 1re
   ligne passerait AU-DESSUS des onglets de la 2e ligne au lieu de se cacher
   derrière — l'ordre naturel du DOM (1re ligne avant 2e ligne) suffit alors
   à faire peindre la 2e ligne par-dessus. */
ul.lag-tabs-binder li.nav-item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 100px;
    background: #eef0f2;
    border-left: 1px solid var(--lag-active-color, #aad7ff);
    border-right: 1px solid var(--lag-active-color, #aad7ff);
}

ul.lag-tabs-binder li.nav-item:has(> .nav-link.text-light)::after {
    background: #e5e8eb;
    border-color: var(--lag-active-color, #aad7ff);
}

ul.lag-tabs-binder li.nav-item:has(> .nav-link.active)::after {
    background: var(--lag-active-color, #aad7ff);
    border-color: var(--lag-active-color, #aad7ff);
}

ul.lag-tabs-binder .nav-link {
    background: #eef0f2;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.74rem;
    text-align: center;
    border: 1px solid var(--lag-active-color, #aad7ff);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 6px 12px 5px;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

ul.lag-tabs-binder .nav-link:hover {
    background: #f7f8f9;
    color: #374151;
}

ul.lag-tabs-binder .nav-link.active {
    background: var(--lag-active-color, #aad7ff);
    color: var(--lag-navbar-text-color, #111827);
    border-color: var(--lag-active-color, #aad7ff);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .06);
    position: relative;
    z-index: 1;
}

/* Pseudo-onglet non cliquable ("Membre : ") utilisé comme séparateur :
   garde la forme d'un onglet mais dans un gris plus clair que les onglets
   inactifs normaux (#eef0f2), pour bien le distinguer comme non actionnable
   tant qu'aucun membre n'est sélectionné. */
ul.lag-tabs-binder .nav-link.text-light {
    background: #e5e8eb;
    border-color: var(--lag-active-color, #aad7ff);
    color: #9ca3af !important;
    font-weight: 400;
    box-shadow: none;
    cursor: default;
}

/* Onglet "membre sélectionné" (#tab0) : largeur FIXE (proche d'un onglet
   normal), identique vide ou avec un prénom, pour que le reste de la barre ne
   se décale jamais en changeant de page. Un prénom trop long est tronqué
   avec "…" plutôt que d'élargir l'onglet. */
ul.lag-tabs-binder #tab0 {
    min-width: 70px;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────────────
   Onglets internes des blocs « Membres » / « Représentants légaux »
   (fiche compte, getAccount) : ils permettent de choisir quel membre /
   représentant afficher dans la carte, sans quitter la page. Même
   vocabulaire visuel que les onglets « classeur » (lag-tabs-binder), en
   plus discret puisqu'ils vivent à l'intérieur d'une .lag-form-card plutôt
   qu'en pleine largeur de page (pas de "jambe" ni de ligne de reliure
   pleine largeur — un simple trait sous la rangée suffit ici). Le titre du
   bloc ("Membres"/"Représentants légaux") reste un texte gras classique
   (.lag-form-card__title) à gauche ; les onglets, eux, sont alignés à
   droite du bloc. */
.lag-member-tabs-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    column-gap: 12px;
    margin-bottom: 32px;
    border-bottom: 2px solid #e5e7eb;
}

.lag-member-tabs-header .lag-form-card__title {
    margin-bottom: 8px;
}

ul.lag-member-tabs {
    justify-content: flex-end;
    gap: 4px;
    row-gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

ul.lag-member-tabs .nav-link {
    background: #eef0f2;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.8rem;
    border: 1px solid var(--lag-active-color, #aad7ff);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 6px 14px;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

ul.lag-member-tabs .nav-link:hover {
    background: #f7f8f9;
    color: #374151;
}

ul.lag-member-tabs .nav-link.active {
    background: var(--lag-active-color, #aad7ff);
    color: var(--lag-navbar-text-color, #111827);
}

/* Onglet actif d'un membre invité / inactif : même couleur que les boutons
   d'action correspondants (.btn-lag-ko / .btn-lag-show) pour rester cohérent
   avec le reste de l'interface. */
ul.lag-member-tabs .nav-link.lag-member-tab-guest.active {
    background: var(--lag-btn-ko-free, #198754);
    color: var(--lag-btn-ko-text, #ffffff);
    border-color: var(--lag-btn-ko-free, #198754);
}

ul.lag-member-tabs .nav-link.lag-member-tab-inactive.active {
    background: var(--lag-btn-show-free, #6c757d);
    color: var(--lag-btn-show-text, #ffffff);
    border-color: var(--lag-btn-show-free, #6c757d);
}

/* Dernier onglet ("Ajouter") : même forme que les autres, mais toujours
   dans la couleur du bouton .btn-lag-ok (action de création), pas celle
   des onglets actifs/pastilles — il n'est jamais "sélectionné". */
ul.lag-member-tabs .lag-member-tab-add {
    background: var(--lag-btn-ok-free, #0d6efd);
    color: var(--lag-btn-ok-text, #ffffff);
    border-color: var(--lag-btn-ok-free, #0d6efd);
}

ul.lag-member-tabs .lag-member-tab-add:hover {
    background: var(--lag-btn-ok-pressed, #0a58ca);
    color: var(--lag-btn-ok-text, #ffffff);
    border-color: var(--lag-btn-ok-pressed, #0a58ca);
}

/* Lignes pleine largeur du formulaire membre (commentaires, antécédents
   médicaux, détails) : largeur de label choisie pour que son bord droit
   (donc le début du champ) tombe exactement à la même position que celui
   de « Nom »/« Prénom » au-dessus (label col-sm-5 imbriqué dans un
   col-sm-6, soit 5/12 d'une demi-largeur = 2.5/12 de la largeur totale,
   inatteignable avec les classes col-sm-* entières de Bootstrap). */
.lag-perf-label-wide {
    flex: 0 0 auto;
    width: 20.8333%;
}

.lag-perf-field-wide {
    flex: 0 0 auto;
    width: 79.1667%;
}

.planning-pill {
    border-radius: var(--bs-border-radius-pill) !important;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
}