/* ==============================================================
   AFEBAS – STYLE UNIFIÉ
   Version : 2025.12
   Auteur : Sébastien Sabourin
   Compatibilité : toutes pages intranet AFEBAS (anciens et nouveaux formats)
   ============================================================== */

/* --------------------------------------------------------------
   VARIABLES & RESET
   -------------------------------------------------------------- */
:root {
  --afebas-blue: #153b6f;
  --afebas-accent: #ffd447;
  --afebas-blue-soft: #e6edf8;
  --afebas-bg: #f5f7fb;
  --afebas-text: #202433;
  --afebas-muted: #6b7280;
  --afebas-border: #d1d5e5;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.08);
  --transition: 0.15s ease-in-out;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--afebas-text);
  background-color: var(--afebas-bg);
}

/* --------------------------------------------------------------
   TYPOGRAPHIE
   -------------------------------------------------------------- */
p { margin: 0 0 10px; }
h1, h2, h3, h4, h5, h6 {
  color: var(--afebas-blue);
  margin: 10px 0 6px;
  font-weight: 600;
}
h1 { font-size: 1.8rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

a {
  color: var(--afebas-blue);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: #0f2c4f; text-decoration: underline; }

blockquote {
  background: var(--afebas-blue-soft);
  border-left: 4px solid var(--afebas-blue);
  padding: 10px 15px;
  border-radius: var(--radius-md);
  margin: 10px 0;
}

/* --------------------------------------------------------------
   STRUCTURE DE PAGE
   -------------------------------------------------------------- */
#wrap { margin: 0 auto; padding: 10px; }
#top {
  background: linear-gradient(90deg, var(--afebas-blue) 0%, #0d1b3b 100%);
  color: white;
  padding: 20px;
  text-align: center;
}
#footer {
  text-align: center;
  border-top: 1px dotted #aaa;
  margin-top: 40px;
  padding: 10px 0;
  font-size: 0.8rem;
  color: var(--afebas-muted);
}

/* --------------------------------------------------------------
   TABLES GÉNÉRIQUES
   -------------------------------------------------------------- */
table {
  border-collapse: collapse;
  width: 100%;
}

#table, #tablea {
  width: 100%;
  background: white;
  border: 1px solid var(--afebas-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 10px auto;
}

#table tr:nth-child(even),
#tablea tr:nth-child(even) { background-color: #f9fafb; }
#table tr:nth-child(odd),
#tablea tr:nth-child(odd) { background-color: #ffffff; }

#legend, #table thead tr, #tablea thead tr {
  background-color: var(--afebas-blue);
  color: white;
  text-align: center;
  font-weight: 600;
}

#table th, #table td,
#tablea th, #tablea td {
  border-bottom: 1px solid #e5e7eb;
  padding: 6px 8px;
  font-size: 0.85rem;
}

#table tr:hover { background: #eef4ff; }

/* Petits masquages mobiles */
@media screen and (max-width: 750px) {
  tr.taille, td.taille, br.taille { display: none; }
}
@media screen and (max-width: 1000px) {
  tr.taille2, td.taille2, br.taille2 { display: none; }
}

/* --------------------------------------------------------------
   BOUTONS & ACTIONS
   -------------------------------------------------------------- */
a.button, .btn01, .btn02, .btn03, .btn04, .btn05, .btn06 {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: white;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}

.btn01, a.btn01 { background: var(--afebas-blue); }
.btn02, a.btn02 { background: #4b5563; }
.btn03, a.btn03 { background: #9ca3af; }
.btn04, a.btn04 { background: #dc2626; }
.btn05, a.btn05 { background: #6b7280; }
.btn06, a.btn06 { background: #16a34a; }

a.button:hover,
.btn01:hover, .btn02:hover, .btn03:hover, .btn04:hover, .btn05:hover, .btn06:hover {
  filter: brightness(1.1);
}

/* Boutons avec icônes */
#btn_back, #btn_del, #btn_pdf, #btn_trn, #btn_exl, #btn_vecto, #btn_ajout, #btn_exp, #btn_key, #btn_mail {
  padding-left: 22px;
  background-repeat: no-repeat;
  background-position: left center;
  line-height: 18px;
  display: inline-block;
}
#btn_back  { background-image: url(../img/table_row_insert.png); }
#btn_del   { background-image: url(../img/cross.png); }
#btn_pdf   { background-image: url(../img/page_white_acrobat.png); }
#btn_trn   { background-image: url(../img/8ball.png); }
#btn_exl   { background-image: url(../img/page_excel.png); }
#btn_vecto { background-image: url(../img/script_palette.png); }
#btn_ajout { background-image: url(../img/pencil_go.png); }
#btn_exp   { background-image: url(../img/page_refresh.png); }
#btn_key   { background-image: url(../img/password.webp); }
#btn_mail  { background-image: url(../img/mail.png); }

/* --------------------------------------------------------------
   MISE EN PAGE TABLEAUX MODERNES AFEBAS
   -------------------------------------------------------------- */
.afebas-dashboard {
  max-width: 1200px;
  margin: 20px auto 40px;
  padding: 0 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.afebas-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.afebas-page-header h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--afebas-blue);
}

.afebas-page-subtitle {
  font-size: 0.9rem;
  color: var(--afebas-muted);
  margin-top: 3px;
}

.afebas-page-badge {
  background: var(--afebas-blue);
  color: white;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .afebas-page-header { flex-direction: column; align-items: flex-start; }
  .afebas-page-badge { align-self: flex-start; }
}

/* KPIs */
.afebas-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.afebas-kpi-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 10px 14px 12px;
  border: 1px solid var(--afebas-border);
  box-shadow: var(--shadow-soft);
}

.afebas-kpi-label {
  font-size: 0.78rem;
  color: var(--afebas-muted);
}

.afebas-kpi-value {
  font-size: 1.4rem;
  font-weight: 600;
}

.afebas-kpi-sub {
  font-size: 0.78rem;
  color: var(--afebas-muted);
}

/* Bloc de section */
.afebas-block {
  background: white;
  border-radius: var(--radius-xl);
  padding: 16px 18px 20px;
  border: 1px solid var(--afebas-border);
  box-shadow: var(--shadow-soft);
  margin-bottom: 20px;
}

.afebas-block-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.afebas-block-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--afebas-blue);
}

.afebas-block-header small {
  font-size: 0.78rem;
  color: var(--afebas-muted);
}

.afebas-highlight-text { font-size: 0.95rem; }

/* Table moderne */
.afebas-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--afebas-border);
  margin-top: 6px;
}

.afebas-table-wrapper table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  background: #fff;
}

.afebas-table-wrapper thead {
  background: var(--afebas-blue);
  color: white;
}

.afebas-table-wrapper th,
.afebas-table-wrapper td {
  padding: 6px 8px;
  font-size: 0.78rem;
  border-bottom: 1px solid #e5e7f0;
}

.afebas-table-wrapper tbody tr:nth-child(even) {
  background: #f9fafb;
}

.afebas-table-wrapper tbody tr:hover {
  background: #eef4ff;
}

/* Étiquettes */
.afebas-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.74rem;
  border: 1px solid rgba(21, 59, 111, 0.18);
  background: white;
}

/* Indicateurs */

.stat-positive { color: #0a8f3c; }
.stat-negative { color: #c0392b; }

/* --------------------------------------------------------------
   FACTURATION & DOCUMENTS
   -------------------------------------------------------------- */
.facture { font-family: Verdana, Geneva, sans-serif; font-size: 14px; }
.facture tr td {
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  padding: 5px 10px;
}
.facture tr td.noborder { border: none; }

/* --------------------------------------------------------------
   BRACKETS TOURNOIS (compatibilité ancienne)
   -------------------------------------------------------------- */
#container { width: 800px; height: 600px; float: left; }
section { width: 130px; height: 520px; float: left; }
section > div {
  width: 100px;
  margin: 10px auto;
  background: #a4ceec;
  font-weight: bold;
  color: black;
  padding: 10px 10px 10px 20px;
  border: 1px solid #000;
  border-radius: 6px;
}




/* ============================================================
   PAGE : Comptes par association (INTRAFEBAS)
   Spécifique aux classes .afebas-*
   ============================================================ */

:root {
    --afebas-blue: #153b6f;
    --afebas-accent: #ffd447;
    --afebas-blue-soft: #e6edf8;
    --afebas-bg: #f5f7fb;
    --afebas-text: #202433;
    --afebas-muted: #6b7280;
    --afebas-border: #d1d5e5;
}

/* Conteneur principal de la page */
.afebas-dashboard {
    max-width: 1200px;
    margin: 20px auto 40px;
    padding: 0 16px 32px;
    background: var(--afebas-bg);
    color: var(--afebas-text);
}

/* IMPORTANT : on neutralise les vieux styles "section" 
   à l'intérieur du dashboard uniquement */
.afebas-dashboard section {
    width: 100% !important;
    height: auto !important;
    float: none !important;
}

/* Et on réinitialise les <div> directs de ces sections
   pour ne pas subir le vieux "section>div" (tournois) */
.afebas-dashboard section > div {
    width: auto !important;
    height: auto !important;
    border: none !important;
    margin: 0 0 10px 0 !important;
    background: transparent !important;
    font-weight: normal !important;
    color: inherit !important;
    padding: 0 !important;
}

/* Header de page : titre + badge date */
.afebas-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.afebas-page-header h1 {
    margin: 0;
    font-size: 1.7rem;
    font-weight: bold;
    color: var(--afebas-blue);
}

.afebas-page-subtitle {
    margin: 3px 0 0;
    font-size: 0.9rem;
    color: var(--afebas-muted);
}

.afebas-page-badge {
    background: var(--afebas-blue);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

/* KPIs (tuiles en haut de page) */
.afebas-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 18px;

    /* override des vieux styles section */
    width: 100% !important;
    height: auto !important;
    float: none !important;
}

.afebas-kpi-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 14px 12px;
    border: 1px solid var(--afebas-border);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.afebas-kpi-label {
    font-size: 0.78rem;
    color: var(--afebas-muted);
    margin-bottom: 2px;
}

.afebas-kpi-value {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.afebas-kpi-sub {
    font-size: 0.78rem;
    color: var(--afebas-muted);
}

/* Indicateurs texte */
.stat-positive {
    color: #0a8f3c;
    font-weight: 600;
}

.stat-negative {
    color: #c0392b;
    font-weight: 600;
}

/* Bloc blanc (évolution globale, répartition, tranches d’âge) */
.afebas-block {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 18px 20px;
    border: 1px solid var(--afebas-border);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    margin-bottom: 20px;

    /* override section */
    width: 100% !important;
    float: none !important;
    height: auto !important;
    box-sizing: border-box;
}

.afebas-block-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.afebas-block-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--afebas-blue);
}

.afebas-block-header small {
    font-size: 0.78rem;
    color: var(--afebas-muted);
}

.afebas-block p {
    margin: 4px 0;
    font-size: 0.9rem;
}

.afebas-highlight-text {
    font-size: 0.95rem;
}

/* Wrapper de tableaux (scroll horizontal + cadre) */
.afebas-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--afebas-border);
    margin-top: 6px;
    background: #ffffff;
}

/* Tableau principal par association
   (on cible #table dans le contexte dashboard pour ne
   pas casser les autres usages de #table) */
.afebas-dashboard #table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    font-size: 0.78rem;
    margin: 0;
    border-width: 0;
}

.afebas-dashboard #table thead tr:first-child {
    background: var(--afebas-blue);
    color: #ffffff;
}

.afebas-dashboard #table thead tr:nth-child(2) {
    background: #1f4e8c;
    color: #ffffff;
}

.afebas-dashboard #table th,
.afebas-dashboard #table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e5e7f0;
    white-space: nowrap;
}

.afebas-dashboard #table tbody tr:nth-child(even) {
    background: #f9fafb;
}

.afebas-dashboard #table tbody tr:nth-child(odd) {
    background: #ffffff;
}

.afebas-dashboard #table tbody tr:hover {
    background: #eef4ff;
}

/* Tableau des tranches d’âge */
.afebas-dashboard #table-age {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
    background: #ffffff;
}

.afebas-dashboard #table-age th,
.afebas-dashboard #table-age td {
    padding: 6px 8px;
    font-size: 0.8rem;
    border-bottom: 1px solid #e5e7f0;
    text-align: center;
}

.afebas-dashboard #table-age thead tr {
    background: var(--afebas-blue);
    color: #ffffff;
}

/* Pastille Id asso */
.afebas-chip {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.74rem;
    border: 1px solid rgba(21, 59, 111, 0.18);
    background: #ffffff;
}

/* Différences positives */
/* Cellule positive dans les tableaux "Comptes par association"  */
.afebas-dashboard td#positif {
    color: #0a8f3c;
    font-weight: 600;
    background-color: #e6f7ec;
    /* on NE TOUCHE PAS au display, le td reste table-cell */
}

/* Masquage des colonnes "taille" pour mobile (logique existante) */
@media screen and (max-width: 750px) {
    tr.taille,
    td.taille,
    br.taille {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    tr.taille2,
    td.taille2,
    br.taille2 {
        display: none;
    }

    .afebas-table-wrapper #table,
    .afebas-table-wrapper #table-age {
        min-width: 900px;
    }
}

/* Comportement mobile header + KPIs */
@media (max-width: 768px) {
    .afebas-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .afebas-page-badge {
        align-self: flex-start;
    }

    .afebas-kpi-row {
        grid-template-columns: 1fr;
    }
}



/* =========================
   Boutons AFEBAS (liens .button)
   ========================== */

a.button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    min-height: 32px;
    min-width: 140px;

    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;

    color: #ffffff;
    background: #153b6f;              /* bleu AFEBAS */
    border: 1px solid #0f2a4b;
    border-radius: 999px;             /* pill button */

    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.1s ease,
        color 0.18s ease;
}

a.button:hover,
.button:hover {
    background: #1b4785;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
    color: #ffffff;
}

a.button:active,
.button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

a.button:focus-visible,
.button:focus-visible {
    outline: 2px solid #ffd447;       /* jaune AFEBAS */
    outline-offset: 2px;
}


/* ====== Footer INTRAFEBAS ====== */

#footer {
    background: linear-gradient(135deg, #143b6b 0%, #0b2a4d 60%, #08182f 100%);
    color: #e5e7eb;
    padding: 10px 18px;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.25);
    font-size: 12px;
    margin-top: 24px;
}

#footer .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

#footer .footer-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#footer .footer-brand {
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 11px;
    color: #f9fafb;
}

#footer .footer-date {
    font-size: 12px;
    color: #cbd5f5;
}

#footer .footer-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#footer .footer-copy {
    font-weight: 500;
    color: #e5e7eb;
}

#footer .footer-links {
    font-size: 11px;
    color: #cbd5f5;
}

#footer .footer-links a {
    color: #cbd5f5;
    text-decoration: none;
    font-weight: 500;
}

#footer .footer-links a:hover {
    text-decoration: underline;
}

#footer .footer-sep {
    margin: 0 6px;
    opacity: 0.7;
}

/* Responsive footer */
@media (max-width: 700px) {
    #footer .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    #footer .footer-right {
        text-align: left;
        align-items: flex-start;
    }
}