/* FTAK Adhérents – thème Bootstrap 5 inspiré de SB Admin 2, aux couleurs de ftak.fr */
@font-face { font-family: 'Inter'; src: url(vendor/fonts/inter-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url(vendor/fonts/oswald-latin-wght-normal.woff2) format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; }

:root {
  --ftk-bleu: #1423a0; --ftk-bleu-fonce: #0f1a76; --ftk-rouge: #dc2d5a; --ftk-rouge-fonce: #a32143;
  --ftk-noir: #111111; --ftk-gris: #767676; --ftk-gris-clair: #f4f4f4; --ftk-bordure: #e3e3e3;
  --ftk-vert: #1b7f3b; --ftk-orange: #c77700;
  --ftk-titre: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --sidebar-w: 15rem;

  --bs-primary: #1423a0; --bs-primary-rgb: 20, 35, 160;
  --bs-danger: #dc2d5a; --bs-danger-rgb: 220, 45, 90;
  --bs-primary-text-emphasis: #0f1a76; --bs-primary-bg-subtle: #e7e9f7; --bs-primary-border-subtle: #b9bee6;
  --bs-danger-text-emphasis: #a32143; --bs-danger-bg-subtle: #fbe8ee; --bs-danger-border-subtle: #f2b5c5;
  --bs-link-color: #1423a0; --bs-link-color-rgb: 20, 35, 160; --bs-link-hover-color: #0f1a76; --bs-link-hover-color-rgb: 15, 26, 118;
  --bs-body-font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; --bs-body-font-size: .94rem;
  --bs-body-color: #1f2330; --bs-body-bg: #f4f4f4; --bs-border-color: #e3e3e3; --bs-secondary-color: #767676;
  --bs-focus-ring-color: rgba(20, 35, 160, .25);
}

/* Boutons et contrôles aux couleurs du club */
.btn-primary { --bs-btn-bg: #1423a0; --bs-btn-border-color: #1423a0; --bs-btn-hover-bg: #0f1a76; --bs-btn-hover-border-color: #0f1a76; --bs-btn-active-bg: #0f1a76; --bs-btn-active-border-color: #0f1a76; --bs-btn-disabled-bg: #1423a0; --bs-btn-disabled-border-color: #1423a0; --bs-btn-focus-shadow-rgb: 20, 35, 160; }
.btn-outline-primary { --bs-btn-color: #1423a0; --bs-btn-border-color: #1423a0; --bs-btn-hover-bg: #1423a0; --bs-btn-hover-border-color: #1423a0; --bs-btn-active-bg: #0f1a76; --bs-btn-active-border-color: #0f1a76; --bs-btn-focus-shadow-rgb: 20, 35, 160; }
.btn-danger { --bs-btn-bg: #dc2d5a; --bs-btn-border-color: #dc2d5a; --bs-btn-hover-bg: #a32143; --bs-btn-hover-border-color: #a32143; --bs-btn-active-bg: #a32143; --bs-btn-active-border-color: #a32143; --bs-btn-focus-shadow-rgb: 220, 45, 90; }
.btn-outline-danger { --bs-btn-color: #dc2d5a; --bs-btn-border-color: #dc2d5a; --bs-btn-hover-bg: #dc2d5a; --bs-btn-hover-border-color: #dc2d5a; --bs-btn-active-bg: #a32143; --bs-btn-active-border-color: #a32143; --bs-btn-focus-shadow-rgb: 220, 45, 90; }
.btn-link { --bs-btn-color: #1423a0; --bs-btn-hover-color: #0f1a76; text-decoration: none; }
.btn-link.text-danger:hover { color: var(--ftk-rouge-fonce) !important; }
.pagination { --bs-pagination-color: #1423a0; --bs-pagination-hover-color: #0f1a76; --bs-pagination-active-bg: #1423a0; --bs-pagination-active-border-color: #1423a0; --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(20, 35, 160, .25); }
.form-control:focus, .form-select:focus, .form-check-input:focus,
.form input:focus, .form select:focus, .form textarea:focus { border-color: #8a91d0; outline: 0; box-shadow: 0 0 0 .25rem rgba(20, 35, 160, .2); }
.form-check-input:checked { background-color: #1423a0; border-color: #1423a0; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .nav-link:hover, .dropdown-item:hover, .page-link:hover { text-decoration: none; }

/* Typographie */
h1, h2, h3, .h1, .h2, .h3, .page-title, .card-title-ftk { font-family: var(--ftk-titre); letter-spacing: .01em; }
.page-title { font-size: 1.65rem; font-weight: 600; color: var(--ftk-noir); text-transform: uppercase; margin: 0; }
.page-title .count { font-family: var(--bs-body-font-family); font-size: .9rem; font-weight: 600; vertical-align: middle; background: var(--bs-primary-bg-subtle); color: var(--ftk-bleu); border-radius: 999px; padding: .15rem .65rem; text-transform: none; }
h3, .h3-ftk { font-size: 1rem; font-weight: 600; margin: 1.1rem 0 .6rem; color: var(--ftk-noir); text-transform: uppercase; }
.muted { color: var(--bs-secondary-color); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

/* Mise en page : menu latéral + barre du haut */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { --bs-offcanvas-width: var(--sidebar-w); width: var(--sidebar-w); flex-shrink: 0; color: #fff;
  background-color: var(--ftk-bleu); background-image: linear-gradient(180deg, var(--ftk-bleu) 10%, var(--ftk-bleu-fonce) 100%); }
.sidebar .offcanvas-header { padding: .75rem 1rem 0; justify-content: flex-end; }
.sidebar-inner { display: flex; flex-direction: column; min-height: 100%; width: 100%; }
.sidebar-brand { display: block; padding: 1.4rem 1.25rem .9rem; text-align: center; }
.sidebar-brand img { max-width: 100%; height: auto; max-height: 64px; }
.sidebar-sub { text-align: center; font-family: var(--ftk-titre); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: rgba(255, 255, 255, .65); padding-bottom: 1rem; }
.sidebar hr { margin: 0 1rem; border-top: 1px solid rgba(255, 255, 255, .2); opacity: 1; }
.sidebar-heading { padding: 1rem 1.25rem .35rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .45); }
.sidebar .nav-link { display: flex; align-items: center; gap: .7rem; color: rgba(255, 255, 255, .82); padding: .62rem 1.25rem; font-weight: 500; border-left: 4px solid transparent; }
.sidebar .nav-link i { font-size: 1.05rem; opacity: .7; width: 1.2rem; text-align: center; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.sidebar .nav-link:hover i { opacity: 1; }
.sidebar .nav-link.active { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .1); border-left-color: var(--ftk-rouge); }
.sidebar .nav-link.active i { opacity: 1; }
.sidebar-foot { margin-top: auto; padding: 1rem 1.25rem; font-size: .75rem; color: rgba(255, 255, 255, .5); }
.sidebar-foot a { color: rgba(255, 255, 255, .75); }
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1020; height: 4.1rem; background: #fff; box-shadow: 0 .15rem 1.2rem rgba(17, 17, 17, .07); padding: 0 1rem; display: flex; align-items: center; gap: .8rem; }
.topbar .saison-switch { display: flex; align-items: center; gap: .45rem; margin: 0; }
.topbar .saison-switch label { font-size: .8rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.topbar .user-toggle { color: var(--ftk-noir); display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.topbar .avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--ftk-bleu); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.topbar .vr { height: 2rem; align-self: center; }
.app-content { flex: 1 1 auto; padding: 1.5rem; }
.app-footer { padding: 1rem 1.5rem; font-size: .8rem; color: var(--bs-secondary-color); text-align: center; }
@media (max-width: 575.98px) { .app-content { padding: 1rem; } .topbar .saison-switch label { display: none; } }

.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.4rem; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Cartes */
.card { border: 0; box-shadow: 0 .15rem 1.2rem rgba(17, 17, 17, .07); margin-bottom: 1.5rem; }
.row > * > .card { margin-bottom: 0; }
.card-header { background: #fff; border-bottom: 1px solid var(--ftk-bordure); padding: .9rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.card-header h2, .card-header .card-title-ftk { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--ftk-bleu); text-transform: uppercase; letter-spacing: .03em; }
.card-body > :last-child { margin-bottom: 0; }
.card.narrow { max-width: 30rem; margin-left: auto; margin-right: auto; }
.card.warnbox { border-left: .25rem solid var(--ftk-orange); }

/* Indicateurs du tableau de bord */
.kpi { border-left: .28rem solid var(--kpi, var(--ftk-bleu)) !important; height: 100%; }
.kpi .card-body { padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.kpi-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--kpi, var(--ftk-bleu)); margin-bottom: .2rem; }
.kpi-value { font-size: 1.4rem; font-weight: 700; color: #2c2f3a; line-height: 1.2; }
.kpi small { display: block; color: var(--bs-secondary-color); font-size: .78rem; margin-top: .15rem; }
.kpi .kpi-icon { margin-left: auto; font-size: 2rem; color: #d6d8e0; }
.kpi-bleu { --kpi: var(--ftk-bleu); } .kpi-vert { --kpi: var(--ftk-vert); } .kpi-rouge { --kpi: var(--ftk-rouge); } .kpi-orange { --kpi: var(--ftk-orange); } .kpi-noir { --kpi: #4a4f5e; }

/* Tableaux */
.table { --bs-table-hover-bg: #f5f6fc; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); font-weight: 700; background: #fafafa; white-space: nowrap; }
.table tfoot th { background: var(--bs-primary-bg-subtle); color: var(--ftk-noir); }
.table-sm > :not(caption) > * > * { padding: .4rem .6rem; }
.num { text-align: right; white-space: nowrap; }
.c { text-align: center; }
.neg { color: var(--ftk-rouge); font-weight: 600; }
.pos { color: var(--ftk-vert); font-weight: 600; }
tr[data-href] { cursor: pointer; }
.table-edit input:not([type=checkbox]), .table-edit select { width: 100%; min-width: 4rem; }
.table-edit tr.new td { background: #f8f9fe; }
.table.calc > :not(caption) > * > * { border: 0; padding: .35rem .2rem; background: transparent; }
.table.calc tr.red td { color: var(--ftk-vert); }
.table.calc tr.tot td { border-top: 1px solid var(--ftk-bordure); font-weight: 700; }
.table.calc tr.foyer td { font-size: .85rem; color: var(--bs-secondary-color); }

/* Pastilles */
.tag { display: inline-block; font-size: .74rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: #eceef3; color: #4b5366; vertical-align: middle; line-height: 1.3; }
.tag.ok { background: #e3f4e8; color: var(--ftk-vert); }
.tag.warn { background: #fff1db; color: #9a5b00; }
.tag.info { background: var(--bs-primary-bg-subtle); color: var(--ftk-bleu); }

/* Formulaires : libellé au-dessus du champ, rendu identique à .form-control de Bootstrap */
.form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; color: #3d4250; margin-bottom: .9rem; }
.form label small { color: var(--bs-secondary-color); font-weight: 400; }
.form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), .form select, .form textarea,
.table-edit input:not([type=checkbox]), .table-edit select, .inline input:not([type=hidden]), .inline select {
  display: block; padding: .42rem .7rem; font: inherit; font-size: .92rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color);
  background-color: #fff; border: 1px solid #d5d8e0; border-radius: .4rem; transition: border-color .15s, box-shadow .15s; max-width: 100%; }
.form select, .table-edit select, .inline select { padding-right: 2rem; appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 14px 10px; }
.form input[type=file] { font-size: .9rem; }
.form input[readonly] { background-color: #f1f2f5; color: var(--bs-secondary-color); }
.form label.check, .check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 500; }
.form input[type=checkbox], .table-edit input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--ftk-bleu); }
.form-line { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-line > label { flex: 1 1 200px; }
.form-line > label.w-s { flex: 0 1 140px; }
.form .full { width: 100%; }
.w-xxs { width: 4.5rem !important; } .w-xs { width: 6.5rem !important; } .w-s { width: 8.5rem; } .w-m { width: 13rem !important; }
fieldset.card { padding: 0; min-width: 0; }
fieldset.card > legend { float: none; width: auto; margin: 0; padding: .9rem 1.25rem; font-family: var(--ftk-titre); font-size: 1.02rem; font-weight: 600; color: var(--ftk-bleu); text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--ftk-bordure); display: block; width: 100%; }
fieldset.card > .card-body { padding-top: 1.1rem; }
form.inline { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.filters .form-control[type=search] { flex: 1 1 260px; width: auto; }
.filters .form-select { width: auto; }
.reds { border-top: 1px dashed var(--ftk-bordure); margin-top: .5rem; padding-top: .3rem; }
.red-line { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .25rem 0; }
.red-line label { margin: 0 !important; flex: 1 1 auto; }
.red-line small { color: var(--bs-secondary-color); margin-left: .3rem; font-weight: 400; }
.total-preview { margin: 1rem 0; padding: .75rem 1rem; background: var(--bs-primary-bg-subtle); border-left: .25rem solid var(--ftk-bleu); border-radius: .4rem; }
.total-preview strong { font-size: 1.2rem; color: var(--ftk-bleu); }
.form-actions { display: flex; gap: 1rem; align-items: center; margin-bottom: 2rem; }
.pay-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed var(--ftk-bordure); }
.pay-form label { margin: 0; flex: 1 1 150px; }

/* Fiche adhérent */
.fiche-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; gap: .5rem; flex-wrap: wrap; }
.fiche-nav span { display: flex; gap: .5rem; align-items: center; }
.dl { display: grid; grid-template-columns: 9rem 1fr; gap: .45rem .9rem; margin: 0 0 1rem; }
.dl dt { color: var(--bs-secondary-color); font-size: .85rem; font-weight: 500; }
.dl dd { margin: 0; }
.obs { background: #fafafa; border-left: 3px solid var(--ftk-rouge); padding: .6rem .9rem; border-radius: 0 .3rem .3rem 0; }
.danger-zone { display: flex; gap: 1.5rem; justify-content: flex-end; margin: 0 0 2rem; font-size: .9rem; }
.page-title .tag { font-family: var(--bs-body-font-family); text-transform: none; }

/* Connexion / installation */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background-color: var(--ftk-bleu); background-image: linear-gradient(180deg, var(--ftk-bleu) 10%, var(--ftk-bleu-fonce) 100%); }
.auth-card { width: 100%; max-width: 27rem; border-radius: .6rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25); margin: 0; }
.auth-card .card-body { padding: 2.25rem 2rem; }
.auth-logo { display: block; width: 5.5rem; height: auto; margin: 0 auto 1rem; }
.auth-card h1 { text-align: center; font-size: 1.45rem; font-weight: 600; text-transform: uppercase; color: var(--ftk-noir); margin-bottom: .25rem; }
.auth-card .auth-sub { text-align: center; color: var(--bs-secondary-color); margin-bottom: 1.6rem; font-size: .9rem; }
.auth-card .btn { width: 100%; padding: .6rem; }
.auth-page .alert { width: 100%; max-width: 27rem; }

@media (max-width: 767.98px) {
  .dl { grid-template-columns: 7rem 1fr; }
}
@media print {
  .sidebar, .topbar, .app-footer, .actions, .filters, .pay-form, .danger-zone, .fiche-nav, .btn { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}
