/*====================================================================
  VARIABLES CSS - COULEURS CENTRALISÉES
  ====================================================================

  Ce fichier centralise toutes les couleurs utilisées dans l'application.

  UTILISATION:
    • Pour utiliser une couleur: var(--nom-variable)
      Exemple: background-color: var(--statut-ok);

    • Pour une transparence avec color-mix():
      Exemple: background: color-mix(in srgb, var(--statut-ok) 30%, transparent);

  MODIFICATION:
    • Modifiez uniquement les valeurs dans :root ci-dessous
    • Les changements seront appliqués automatiquement partout

  THÈMES:
    • Pour créer un thème alternatif, dupliquez ce bloc :root
    • Appliquez-le avec une classe parent (ex: .theme-dark :root { ... })

  ====================================================================*/
:root {
    /* Couleurs de statut des adhérents (utilisées pour lignes tableau, filtres, tags) */
    --statut-ok: #d5e776;              /* Vert clair - Adhérent à jour */
    --statut-ok-hover: #9eb616;        /* Vert foncé - Hover */
    --statut-prospect: #fde56e;        /* Jaune - Nouveau membre / Prospect */
    --statut-prospect-hover: #e5cd62;  /* Jaune foncé - Hover */
    --statut-echu: #ff8f8f;            /* Rouge clair - Adhérent échu */
    --statut-echu-hover: #e58080;      /* Rouge foncé - Hover */
    --statut-relance: #fda96e;         /* Orange - Relance */
    --statut-relance-hover: #e59862;   /* Orange foncé - Hover */
    --statut-sorti: #e6e6e6;           /* Gris - Adhérent sorti */
    --statut-sorti-hover: #c0c0c0;     /* Gris foncé - Hover */
    --statut-attente: #fda76e;         /* Orange - À confirmer / En attente */

    /* Couleurs de statut des transactions/inscriptions */
    --inscription-validee: #c5e41c;    /* Vert - Inscription validée */
    --inscription-preinscrit: #fde56e; /* Jaune - Préinscription */
    --inscription-attente: #fda76e;    /* Orange - En attente validation */
    --inscription-desinscrit: #e6e6e6; /* Gris - Désinscrit */

    /* Couleurs des filtres et tags */
    --filtre-periode-bg: #e7f1ff;
    --filtre-periode-border: #0d6efd;
    --filtre-statut-bg: #d1e7dd;
    --filtre-statut-border: #198754;
    --filtre-type-bg: #ffe5d0;
    --filtre-type-border: #fd7e14;
    --filtre-recherche-bg: #e2d9f3;
    --filtre-recherche-border: #6f42c1;

    /* Couleurs UI générales */
    --text-color: #2e2e2e;
    --border-color: #ced4da;
    --bg-hover: #f9fafb;
    --bg-selected: #eff6ff;

    /* Couleurs des boutons d'action */
    --action-editer-bg: #939393;
    --action-editer-hover-bg: #767676;
    --action-valider-bg: #ff8f4e;
    --action-valider-hover-bg: #476500;
    --action-devalider-bg: #476500;
    --action-devalider-hover-bg: #ff8f4e;
    --action-attente-bg: #a8c3ff;
    --action-attente-hover-bg: #729cf9;
    --action-danger-bg: rgba(255, 0, 0, 0.65);
    --action-danger-hover-bg: rgba(255, 0, 0, 1);
    --action-reactiver-bg: #ff9800;
    --action-reactiver-hover-bg: #f57c00;
}

/* Le squelette-dist conserve une largeur minimale de 375 px pour `.page`.
 * Son padding horizontal de 20 px sur body crée sinon un débordement sur les
 * téléphones de 375 à 414 px. */
@media (max-width: 415px) {
    html body {
        padding-right: 0;
        padding-left: 0;
    }
}

/*====================================================================
  HARMONISATION DU BACKOFFICE AVEC LE SITE
  ====================================================================*/
body.navigation_avec_icones #page {
    font-family: 'Segoe UI', 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    color: var(--text-color);
}
.tableau_asso tbody tr:nth-child(even) td,
.tableau_asso tbody tr:nth-child(even) th,
.tableau_asso tbody tr.even td,
.tableau_asso tbody tr.even th {
    background: inherit
}
.tableau_asso tbody tr:nth-child(even) td,
.tableau_asso tbody tr:nth-child(even) th,
.tableau_asso tbody tr.even td,
tbody tr.even th {
    background: inherit
}
div.table_page {
    /*background-color: white;*/
}
.table_page ul.bandeau_actions {
    clear: both;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: min(100%, 760px);
    margin: 24px auto 32px;
    padding: 0;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}
.table_page ul.bandeau_actions li {
    display: block;
    min-width: 0;
    margin: 0;
    vertical-align: middle;
    text-align: center;
}
.table_page ul.bandeau_actions li a {
    display: block;
    min-height: 72px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    padding: 42px 8px 10px;
    background-position: center 10px;
    background-size: 25px;
    overflow-wrap: anywhere;
}
.table_page ul.bandeau_actions li.on a {
    background-color: #afce00;
    color: white;
}
.table_page ul.bandeau_actions li a:hover,
.table_page ul.bandeau_actions li a:focus-visible {
    text-decoration: none;
    background-color: rgba(118, 139, 0, 0.2);
    outline: 2px solid #768b00;
    outline-offset: -2px;
}
.table_page ul.bandeau_actions li.on a:hover,
.table_page ul.bandeau_actions li.on a:focus-visible {
    color: white;
    background-color: #8ba300;
}
.table_page .bandeau_actions li a span.label {
    display: block;
    font-size: 1.1em;
    line-height: 1.2;
}

@media (max-width: 760px) {
    .table_page ul.bandeau_actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 16px auto 24px;
    }
}

@media (max-width: 420px) {
    .table_page ul.bandeau_actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .table_page ul.bandeau_actions li a {
        min-height: 64px;
        padding: 36px 6px 8px;
        background-position-y: 7px;
        background-size: 22px;
    }

    .table_page .bandeau_actions li a span.label {
        font-size: 1em;
    }
}


/*Style des tableaux */
.tableau_asso {
    border: white 1px solid;
    position: relative;
    z-index: 1;
}

/* ==================================================================
   FILTRES ACTIFS BREADCRUMB
   Affichage des filtres/recherches actifs avec tags cliquables
   ================================================================== */

.filtres-actifs-breadcrumb {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px 20px;
    margin-bottom: 20px;
}

.filtres-actifs-breadcrumb .titre-filtres-actifs {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tags-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tag {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 13px;
    color: #495057;
    transition: all 0.2s ease;
}

.tag:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

/* Tags par type de filtre */
.tag-periode {
    border-color: var(--filtre-periode-border);
    background: var(--filtre-periode-bg);
    color: var(--filtre-periode-border);
}

.tag-statut {
    border-color: var(--filtre-statut-border);
    background: var(--filtre-statut-bg);
    color: var(--filtre-statut-border);
}

/* Tags de statut avec code couleur spécifique */
.tag-statut-ok {
    border-color: var(--statut-ok-hover);
    background: color-mix(in srgb, var(--statut-ok) 30%, transparent);
    color: #7a9011;
}

.tag-statut-prospect {
    border-color: var(--statut-prospect-hover);
    background: color-mix(in srgb, var(--statut-prospect) 40%, transparent);
    color: #8b7a3a;
}

.tag-statut-echu {
    border-color: var(--statut-echu-hover);
    background: color-mix(in srgb, var(--statut-echu) 40%, transparent);
    color: #b55050;
}

.tag-statut-relance {
    border-color: var(--statut-relance-hover);
    background: color-mix(in srgb, var(--statut-relance) 40%, transparent);
    color: #b5743a;
}

.tag-statut-sorti {
    border-color: var(--statut-sorti-hover);
    background: color-mix(in srgb, var(--statut-sorti) 60%, transparent);
    color: #6b7280;
}

.tag-type {
    border-color: var(--filtre-type-border);
    background: var(--filtre-type-bg);
    color: var(--filtre-type-border);
}

.tag-recherche {
    border-color: var(--filtre-recherche-border);
    background: var(--filtre-recherche-bg);
    color: var(--filtre-recherche-border);
}

.tag-label {
    margin-right: 6px;
}

/* Bouton de suppression d'un tag */
.tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    transition: background 0.2s ease;
}

.tag-remove:hover {
    background: rgba(0,0,0,0.2);
    color: inherit;
}

/* Bouton de réinitialisation de tous les filtres */
.btn-reset-all-filters {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: #dc3545;
    color: #fff !important;
    border: 1px solid #dc3545;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.btn-reset-all-filters:hover {
    background: #c82333;
    border-color: #bd2130;
    color: #fff !important;
}

/* Responsive */
@media (max-width: 768px) {
    .filtres-actifs-breadcrumb {
        padding: 12px 15px;
    }

    .tags-filtres {
        gap: 6px;
    }

    .tag {
        font-size: 12px;
        padding: 5px 10px;
    }

    .btn-reset-all-filters {
        font-size: 12px;
        padding: 5px 12px;
        margin-left: 0;
        margin-top: 6px;
        width: 100%;
        justify-content: center;
    }
}

.tableau_asso tr {
    border-bottom: rgba(255, 255, 255, 0.4) 1px solid;
}
.tableau_asso th {
    font-size: 15px;
    padding: 5px;
    text-align: center;
    font-weight: 600;
    border-right: rgba(255, 255, 255, 0.2) solid 1px;
    background-color: #444444;
    color: white;
    vertical-align: middle;
}
.tableau_asso th a {
    color: white;
    text-decoration: underline;
}
.tableau_asso th a:hover {}
.tableau_asso  {
    font-size: 13px;
    font-weight: 600;
    padding: 5px;
    text-align: center;
    color: #383838;
    border-right: rgba(253, 253, 253, 0.2) solid 1px;
    vertical-align: middle;
}
.tableau_asso  *{
    box-sizing: initial;
}

/* Conteneur responsive commun a tous les tableaux metier du plugin. */
.tableau-association-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
}

.tableau-association-scroll.tableau-association-deborde {
    box-shadow: inset -12px 0 12px -12px rgba(0, 0, 0, 0.38);
}

.tableau-association-scroll:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

.tableau-association-scroll > .tableau_asso {
    width: 100%;
    min-width: var(--association-table-min-width, 100%);
    margin: 0;
    border-collapse: collapse;
    table-layout: auto;
}

.tableau-association-scroll > .tableau_asso *,
.tableau-association-scroll > .tableau_asso *::before,
.tableau-association-scroll > .tableau_asso *::after {
    box-sizing: border-box;
}

.tableau-association-scroll > .tableau_asso :is(th, td) {
    min-width: 4.5rem;
    overflow-wrap: normal;
    word-break: normal;
}

.tableau-association-scroll > .tableau_asso :is(.id, .nb, .nombre, .date) {
    white-space: nowrap;
}

.tableau-association-scroll > .tableau_asso td.actions {
    display: table-cell;
}
.tableau_asso a.lien_fa,
.tableau_asso a.bouton_editer {
    text-align: center;
    background: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-radius: 5px;
    margin: 5px;
    font-size: 13px;
    padding: 10px 7px;
    display: inline-block;
}
.tableau_asso a.lien_fa {
    margin: 3px;
    font-size: 15px;
    color: #444444;
    padding: 5px;
    width: auto;
    text-align: center;
}
.tableau_asso  a.lien_fa i {
    width: 15px;
    height: 15px;
    margin: auto;
}
.tableau_asso  a.lien_fa:hover,
.tableau_asso  a.bouton_editer:hover {
    background: rgba(255, 255, 255, 1);
    text-decoration: none;
}

.tableau_asso .mode .tooltip i{
    height: inherit;
    width: inherit;
    font-size: 22px;
}

.tableau_asso .actions {/*
    min-width: 100px;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-content: center;
    align-items: center;*/
}

.tableau_asso .actions_wrap {
    min-width: 100px;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

.tableau_asso .actions_wrap > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 4px;
    background: rgba(255, 255, 255, 0.68);
    border-radius: 8px;
}

.tableau_asso .actions_wrap > a > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
}

.tableau_asso .actions_wrap > a:focus-visible {
    outline: 3px solid #315b75;
    outline-offset: 2px;
}


.tableau_asso .actions a.lien_fa,
.tableau_asso .actions a.lien_fa:hover {
    background-color: transparent;
    padding: 0;
    margin: 3px;
}
.tableau_asso .actions a.lien_fa i {
    background-color: var(--action-editer-bg);
    width: 15px;
    height: 15px;
    padding: 8px;
    color: white;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tableau_asso .actions .actions_wrap > a.lien_fa > i {
    width: 32px;
    height: 32px;
    padding: 0;
}
.tableau_asso .actions a.lien_fa:hover .fa-toggle-off:before {
    content: "\f205";
}
.tableau_asso .actions a.lien_fa:hover .fa-toggle-on:before {
    content: "\f204";
}

/* Boutons d'action - Couleurs uniformisées */
.tableau_asso .actions a.lien_fa.action-editer i,
.tableau_asso a.lien_fa.action-editer i {
    /*background-color: var(--action-editer-bg);*/
}
.tableau_asso .actions a.lien_fa.action-editer:hover i,
.tableau_asso a.lien_fa.action-editer:hover i {
    /*background-color: var(--action-editer-hover-bg);*/
}
.tableau_asso .actions a.lien_fa.action-valider i {
    background-color: var(--action-valider-bg);
}
.tableau_asso .actions a.lien_fa.action-valider:hover i {
    background-color: var(--action-valider-hover-bg);
}
.tableau_asso .actions a.lien_fa.action-devalider i,
.tableau_asso .actions a.lien_fa.action-preinscrire i {
    background-color: var(--action-devalider-bg);
}
.tableau_asso .actions a.lien_fa.action-devalider:hover i,
.tableau_asso .actions a.lien_fa.action-preinscrire:hover i {
    background-color: var(--action-devalider-hover-bg);
}
.tableau_asso .actions a.lien_fa.action-attente i {
    background-color: var(--action-attente-bg);
}
.tableau_asso .actions a.lien_fa.action-attente:hover i {
    background-color: var(--action-attente-hover-bg);
}
.tableau_asso .actions a.lien_fa.action-desinscrire i,
.tableau_asso .actions a.lien_fa.action-supprimer i {
    background-color: var(--action-danger-bg);
}
.tableau_asso .actions a.lien_fa.action-desinscrire:hover i,
.tableau_asso .actions a.lien_fa.action-supprimer:hover i {
    background-color: var(--action-danger-hover-bg);
}
.tableau_asso .actions a.lien_fa.action-reactiver i {
    background-color: var(--action-reactiver-bg);
}
.tableau_asso .actions a.lien_fa.action-reactiver:hover i {
    background-color: var(--action-reactiver-hover-bg);
}
.tableau_asso .actions a.lien_fa.action-reactiver-attente i {
    background-color: var(--action-attente-bg);
}
.tableau_asso .actions a.lien_fa.action-reactiver-attente:hover i {
    background-color: var(--action-attente-hover-bg);
}
.formulaire_asso .boutons {
    text-align: left;
}
.tableau_asso .bouton_supprimer {
    /*display: flex;*/
}
.tableau_asso .bouton_supprimer a.lien_fa {
    background-color: rgba(255, 0, 0, 0.65);
    color: white;
}
.tableau_asso .bouton_supprimer a.lien_fa:hover {
    background-color: rgba(255, 0, 0, 1);
}
.tableau_asso .id,
.tableau_asso .nb,
.tableau_asso .date,
.tableau_asso .titre {
    text-align: left;
}
.tableau_asso .id,
.tableau_asso .date{
    font-size: .85em;
    color: #999;
}
.tableau_asso .quota {
    min-width: 170px;
}
.tableau_asso .gis i{
}
.tableau_asso .gis i.fa-location-pin-lock{
    color: #919191;
}
.tableau_asso .gis i.fa-location-pin{
     color: #f37c7c;
}
/* PAGE ASSOCIATION */
.association .tableau_asso tr {
    background-color: #e7f4a4;
}
.association .tableau_asso tr:nth-child(2n-1) {
    background-color: #d0e469;
}
.association .tableau_asso  ul {
    text-align: left;
    font-size: .9em;
}
.association .tableau_asso  ul a {
    color: #383838;
}
.tableau_asso tr{
    border : #FFFFFF 1px solid;
}
.tableau_asso .recette{
    background-color: #c8fdff;
}
.tableau_asso .depense{
    background-color: #ffe0e0;
}

.liste_statuts li {
    width: 100%;
}
.liste_statuts li a {
    display: block;
    color: #353535;
    padding: .3em .5em;
    font-weight: 600;
}
.liste_statuts li a:hover {
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.15);
}
.liste_statuts li span.nb_adherent {
    float: right;
    font-weight: 600;
}
li.ok,
tr.ok,
.liste_statuts li.ok,
.tooltip.inscrit {
    background-color: var(--statut-ok);
}
li.prospect,
tr.prospect,

.liste_statuts li.prospect,
.tooltip.preinscrit {
    background-color: var(--statut-prospect);
}
li.prospect.8aconfirmer,
tr.prospect.8aconfirmer,
.liste_statuts li.prospect.8aconfirmer {
    background-color: var(--statut-attente);
}
li.echu,
tr.echu,
.liste_statuts li.echu {
    background-color: var(--statut-echu);
}
li.relance,
tr.relance,
.liste_statuts li.relance {
    background-color: var(--statut-relance);
}
.liste_statuts li.sorti {
    background-color: var(--statut-sorti);
}
.tooltip.attente {
    background-color: #a8c3ff;
}
tr.echec {
    background-color: #ff9999;
}
.tableau_asso .nom a.bouton_editer {
    display: table;
    margin: 5px;
    padding: 0;
    width: 100%;
    text-transform: inherit;
    width: calc( 100% - 10px);
}
.tableau_asso .nom > a > span {
    display: table-cell;
    padding: 5px;
    vertical-align: middle;
    text-align: left;
}
.tableau_asso .nom .logo_auteur,
.tableau_asso .nom .logo_evenement {
    width: 64px;
    position: relative;
}
.tableau_asso .nom .logo_evenement i{
    position: absolute;
    color: white;
    font-size: 12px;
    padding: 3px;
    border-radius: 5px;
    background-color: #00000094;

}.tableau_asso .nom .logo_evenement i.fa-sync-alt{
    right: 18px;
    top: 5px;


}.tableau_asso .nom .logo_evenement i.fa-star{
    left: -5px;
    top: 0;
    opacity: 0.9;
    color: yellow;
    font-size: 10px;
    color: #FF0;
    text-shadow: 1px 1px 5px #333;
}
.tableau_asso .logo_auteur img {
    /*border-radius: 50%;*/
    border: 3px solid white;
    background-color: #909090;
    display: block;
}
.tableau_asso a.ok .logo_auteur img {
    border-color: #c5e41b;
}
.tableau_asso a.prospect .logo_auteur img {
    border-color: #fde56d;
}
.tableau_asso a.relance .logo_auteur img {
    border-color: var(--statut-relance);
}
.tableau_asso a.echu .logo_auteur img {
    border-color: var(--statut-echu);
}
.tableau_asso a.sorti .logo_auteur img {
    border-color: #bdbdbd;
}
.tableau_asso .nom.conjoint,
.tableau_asso .nom {
    min-width: inherit;
    text-align: left;
    padding: 0;
}
.tableau_asso .nom {
    min-width: 200px;
}
.tableau_asso .nom.conjoint > span {
    margin: 10px 5px
}
.tableau_asso .nom a span.logo_auteur {
    padding: 3px;
    width: 50px;
}
.tableau_asso .nom a span.logo_auteur {
    padding: 3px;
    width: 50px;
}
.tableau_asso .nom a span.logo_auteur i{
    padding: 3px;
    border-radius: 15px;
    height: 15px;
    width: 15px;
    position: absolute;
    top: 3px;
    right: -7px;
    background-color: #858585;
    color: white;
    text-align: center;
    font-size: 12px;
}
.tableau_asso .nom a .nom_prenom {
    padding: 5px 10px;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}



.tableau_asso .left{
    text-align: left;
}
.tableau_asso .right{
    text-align: right;
}
.tableau_asso .center{
    text-align: center;
}
.tableau_asso p{
    margin: 0;
}
.raccourcis ul.liste_raccourcis{
    margin: 0;
    padding-left: 0;
}
.liste_raccourcis li {
    margin: 0 0 6px 0;
}
.liste_raccourcis li a {
    display: flex;
    align-items: stretch;
    margin: 0;
    color: black;
    font-weight: 600;
    font-size: 13px;
    width: 100%;
    background-color: #ced6a2;
    border-radius: 4px;
    overflow: hidden;
}
.liste_raccourcis li a span {
    display: block;
    padding: 5px 10px;
}
.liste_raccourcis li a span.fa_icone {
    padding: 8px 6px;
    background-color: #849814;
    color: white;
    width: 26px;
    font-size: 16px;
    text-align: center;
    flex: 0 0 26px;
}
.liste_raccourcis li a.disabled {
    pointer-events: none;
    opacity: 0.75;
}
.liste_raccourcis li a.email {
    background-color: #ecd29a;
}
.liste_raccourcis li a.email span.fa_icone {
    background-color: #cc8c04;
}
.liste_raccourcis li a.download {
    background-color: #ccdcff;
}
.liste_raccourcis li a.download span.fa_icone {
    background-color: #5783e5;
}
.liste_raccourcis li a.lien_vip {
    background-color: #f9d8ff;
}
.liste_raccourcis li a.lien_vip span.fa_icone {
    background-color: #e860ff;
}
.nodisplay {
    display: none;
}
.export_csv {
    text-align: left;
    padding: 20px
}
.export_csv h3 {
    text-transform: uppercase;
    padding: .5em 0 1em 0;
    border-bottom: 1px solid #CCC;
    margin: 0 auto 1em auto;
    line-height: 1.5em;
}
.export_csv .input_text label {
    padding: 0 0 1em 0;
    display: block;
    font-size: 1.1em;
    font-weight: 600;
}
.export_csv .input_text input {
    padding: .5em 5%;
    display: block;
    font-size: 1.1em;
    border-radius: 5px;
    width: auto;
    border: none;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
}
.export_csv .input_text input[type=text]:focus,
.export_csv .input_text input[type=checkbox]:active {
    padding: .5em 5%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    border: none;
    outline: none;
}
.export_csv h4 {
    margin: 1em 0;
}
.export_csv form .input_checkbox {
    float: left;
    margin: 5px;
    background-color: white;
}
.export_csv form .input_checkbox label {
    padding: .5em 1em;
    display: block;
    cursor: pointer;
    background-color: white;
    border-radius: 3px;
}
.export_csv form .input_checkbox label:hover,
.export_csv form .input_checkbox input[type=checkbox]:checked + label {
    background-color: var(--statut-ok);
}
.export_csv form .input_checkbox input {
    display: none;
}
#input_id_auteur {
    clear: both;
}
input.fondo {
    margin: 1em;
    padding: .5em 1em;
}
li.editer {
    list-style: none;
}
/*
.bouton.option {
  display: block;
  text-align: right;
  font-size: 18px;
}
.bouton.option p {
  margin-bottom: 0px;
}
*/
h5.message {
    margin-top: 10px;
}
.recherche {
    margin-left: auto;
    display: block;
    padding: 4px 8px;
    margin-bottom: 10px;
    margin-right: 10px;
}
.message-content {
    display: none;
}
.asso_main_block .box {
    /* width: 640px; */
    margin: 0;
}
/*
MESSAGE DE RELANCE
*/
.relance-content {
    padding-top: 10px;
}
.relance-content legend {
    padding-top: 12px;
    text-align: center;
    width: 100%;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 15px;
}
.relance-content .entete {
    padding-bottom: 15px;
}
.relance-content .entete input {
    width: 75%;
}
.relance-content .entete label {
    width: 75%;
}
.relance-content .message textarea {
    width: 100%;
}
.formulaire_general label {
    width: 45%;
    display: block;
    margin-bottom: 3px;
}
.formulaire_general input {
    width: 55%;
    margin-bottom: 5px;
}
.formulaire_general input[type="checkbox" i] {
    width: 10%;
}
.formulaire_general textarea {
    width: 75%;
}
.formulaire_general input.fondo {
    width: 100%;
}
#contenu .formulaire_asso ul {
/*    padding: 0;
    display: table;
    width: 100%;*/
}
#contenu fieldset {
    border: 0;
    width: auto;
    border-top: 0px;
    margin-top: 0;
    padding-bottom: 0.34625em;
}
ul {
    margin-left: 0;
    margin-right: 0;
}
.tooltip {
    position: relative;
    display: inline-block;
    background-color: rgba(255, 255, 255, .5);
    padding: 7px;
    border-radius: 6px;
    margin: 3px;
}
.tooltip i {
    height: 15px;
    width: 15px;
}
.tooltip.preinscrit {
    min-width: 25px
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #444444;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    font-size: 13px;
    border-radius: 5px;
    border-top-left-radius: 0;
}
.tooltip:hover {
    background-color: #444444;
    color: white;
    font-weight: 600;
    border-radius: 5px;
    border-bottom-left-radius: 0;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/*Bouton*/
/*PERSONNALISATION DES FORMULAIRES */
.formulaire_asso {
    padding: 20px;
    max-width: 780px;
}
.traitement_lots {
    background-color: var(--statut-ok);
    font-size: 14px;
    padding: 15px;
}
.traitement_lots h2.h2 {
    margin: 0;
}
.traitement_lots table {
    margin: 0;
}
.traitement_lots table td {
    margin: 0;
    font-size: 14px;
    vertical-align: top;
    min-width: 150px;
}
.traitement_lots .actions_inscription select {
    margin: 1em;
    width: 95%;
    height: 48px;
    padding: 5px 1em;
    font-size: 15px;
}
form.formulaire_asso {
    margin: 20px 0;
    clear: both;
}

.configurer_association #navigation ul.sous_navigation {
    padding-left: 0;
}

.configurer_association #contenu form.formulaire_asso {
    padding: 20px;
}

.configurer_association #contenu form.formulaire_asso fieldset {
    margin: 0 0 20px;
    padding: 0;
}

.configurer_association #contenu form.formulaire_asso fieldset > legend {
    margin: 0 0 12px;
    padding: 0;
}

.configurer_association #contenu form.formulaire_asso .editer {
    margin: 0 0 14px;
}

.configurer_association #contenu form.formulaire_asso .editer :is(input, select, textarea) {
    max-width: 100%;
    box-sizing: border-box;
}

.configurer_association #contenu form.formulaire_asso .choix {
    display: flex;
    align-items: center;
    gap: 8px;
}

.configurer_association #contenu form.formulaire_asso fieldset.editer {
    display: block;
    width: 100%;
    padding-left: 0;
}

.configurer_association #contenu form.formulaire_asso fieldset.editer > legend.editer-label {
    position: static;
    display: block;
    float: none;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
}

.configurer_association #contenu form.formulaire_asso fieldset.editer > .explication {
    width: auto;
    margin: 0 0 8px;
}

.configurer_association #contenu form.formulaire_asso fieldset.editer > .choix {
    width: 100%;
    margin: 6px 0;
}

.configurer_association #contenu form.formulaire_asso .choix > :is(input[type="radio"], input[type="checkbox"]) {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

.configurer_association #contenu form.formulaire_asso .choix > label {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
}

@media (max-width: 640px) {
    .configurer_association #contenu form.formulaire_asso {
        padding: 16px;
    }
}
.formulaire_asso > div {
    display: table-row;
    clear: both;
}
.formulaire_asso > form > div {
    /*display: table-row;*/
    clear: both;
    padding: 20px;
}
.formulaire_asso fieldset {
    border: none
}
.formulaire_asso > div,
.formulaire_asso .gauche {
    padding-left: inherit;
}
/* et le redefaire pour les listes spip :( */
.formulaire_asso .spip li {
    padding: 0;
    clear: none;
    overflow: visible;
}
.formulaire_asso > div label,
.formulaire_asso .gauche label {
    color: #444;
    width: auto;
    float: none;
    margin-left: inherit;
    text-align: left;
    display: table-cell;
    vertical-align: middle;
    padding: .5em 5% .5em 0;
}
.formulaire_asso .formulaire_spip .checkbox label {
    width: 100%;
    display: block;
    clear: both;
    /*margin-bottom: 1em;*/
}
.formulaire_asso th.checkbox label {
    color: white;
}
.formulaire_asso .formulaire_spip .checkbox .choix {
    float: left;
    width: 33%;
    display: block;
    background-color: transparent;
    border: none;
    padding: 0;
}
.formulaire_asso .formulaire_spip .choix:last-of-type,
.formulaire_asso .formulaire_spip .choix:last-child{
    /*border: none;*/
}
.formulaire_asso .formulaire_spip .checkbox.gis .choix{
    float: none;
    width: auto;
}
.formulaire_spip.formulaire_recherche_rapide{
    border : none;
    padding: 0;
    margin: 0;
}
.formulaire_spip.formulaire_recherche_rapide .bouton{
    float: left;
    background-color: #fdfefb;
}
.formulaire_spip.formulaire_recherche_rapide .boutons a{
    display: table;
    background-color: inherit;
}
.formulaire_spip.formulaire_recherche_rapide .boutons a:hover{
    display: table;
    background-color: inherit;
}
.formulaire_spip.formulaire_recherche_rapide .boutons a span{
    padding: 5px 6px;
    display: table-cell;
}
.formulaire_spip.formulaire_recherche_rapide .boutons input{
    margin: 0;
    border-radius: 5px;
    padding: 5px 10px;
}

.formulaire_asso input,
.formulaire_asso input.text,
.formulaire_asso input.email,
.formulaire_asso textarea,
.formulaire_asso select {
    display: table-cell;
    margin: 0 0 1.5em 0;
    padding: 1em 2.5% .8em 2.5%;
    width: 95%;
    vertical-align: middle;
}
.formulaire_asso textarea {
    width: 100%;
}
.formulaire_asso select {
    margin: 0 0 1.5em 0;
    height: 44px;
    padding: 0 .5em;
    width: 100%;
    /*width: calc( 100% - 1em);*/
}
.formulaire_asso select[multiple="multiple"] {
    height: auto;
}
.formulaire_asso li .edition {
    margin: 1.5em 0;
}
.formulaire_asso option {
    display: block;
    line-height: 1.5em;
    padding: .5em;
    margin: 0;
    border: none;
    width: 100%;
    max-width: 100%;
}
.formulaire_asso .explication {
    padding: 10px;
    background-color: #f3f3f3;
}
.formulaire_asso h3.legend {
    background-color: #e9e9e9;
    margin: 1em 0;
    padding: 1em .5em;
    clear: both;
}
.formulaire_asso *:active,
.formulaire_asso *:focus,
.formulaire_asso *:focus-visible,
.formulaire_asso *.sffocus,
.export_csv *:active,
.export_csv *:focus,
.export_csv *:focus-visible {
    outline: none !important;
}
.formulaire_asso input[type=button],
.formulaire_asso input[type=submit] {
    padding: .6em 2em .8em 2em;
    margin: 1em 0;
    font-size: 1.2em;
    cursor: pointer;
    width: auto;
}
.formulaire_asso input[type=button]:active {}
.formulaire_asso input[type=radio],
.formulaire_asso input[type=checkbox] {
    width: 40px;
}
.formulaire_asso hr {
    border-top: 1px dashed black;
}
.tableau_asso .checkbox input[type=checkbox],
/* to hide the checkbox itself */
.formulaire_asso .checkbox input[type=checkbox] {
    display: none;
}
/* to hide the checkbox itself */
.tableau_asso .checkbox input[type=checkbox] + label:before,
.formulaire_asso .checkbox input[type=checkbox] + label:before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 6 Free";
    /* updated font-family */
    font-weight: normal;
    /* regular style/weight */
    padding: 10px;
}
.tableau_asso .checkbox input[type=checkbox] + label:before,
.formulaire_asso .checkbox input[type=checkbox] + label:before {
    content: "\f0c8";
}
/* unchecked icon */
.tableau_asso .checkbox input[type=checkbox] + label:before,
.formulaire_asso .checkbox input[type=checkbox] + label:before {
    width: 15px;
    height: 15px;
    font-size: 20px;
    text-shadow : 0 0 2px black;
    color: white;
}
/* space between checkbox and label */
.tableau_asso .checkbox input[type=checkbox]:checked + label:before,
.formulaire_asso .checkbox input[type=checkbox]:checked + label:before {
    content: "\f14a";
}
/* checked icon */
.tableau_asso .checkbox input[type=checkbox]:checked + label:before,
.formulaire_asso .checkbox input[type=checkbox]:checked + label:before {
    ;
}
.formulaire_asso .formulaire_erreur,
.formulaire_asso .erreur_message {
    color: red;
    font-size: 1.1em;
}
/* allow space for check mark */
.filtre span {
    font-weight: 700;
}
.filtre.statut_interne {
    display: table;
}
.filtre.statut_interne > * {
    display: table-cell;
    vertical-align: middle;
}
.filtre.statut_interne a,
.filtre.statut_interne span {
    padding: 15px 5px;
    display: block;
}
.filtre.statut_interne .selected {
    text-decoration: underline;
}
/* Boutons de réactivation */
.tableau_asso .lien_fa.reactiver {
    color: inherit;
}
.tableau_asso .lien_fa.reactiver:hover {
    color: inherit;
}
.tableau_asso .lien_fa.reactiver i {
    color: white;
}
.tableau_asso .lien_fa.reactiver:hover i {
    color: white;
}

/*HACK ok mais pour quoi faire? ju desactive 19052025*/
#contenu .formulaire_asso .markItUpContainer ul ul {
    /*display: none;*/

}

.formulaire_asso tbody tr:nth-child(even) td,
.formulaire_asso tbody tr:nth-child(even) th,
.formulaire_asso tbody tr.even td,
.formulaire_asso tbody tr.even th {
    background: transparent;
}

/* ==================================================================
   FILTRES (PÉRIODE, STATUT, TYPE)
   Design compact, lumineux et minimaliste
   ================================================================== */

/* Conteneur principal des filtres */
.asso-filtres {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8em;
    margin-bottom: 1.5em;
    background: #fff;
    border-radius: 4px;
    padding: 1em;
    border: 1px solid #e5e7eb;
}

@media (min-width: 768px) {
    .asso-filtres {
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
    }
}

@media (min-width: 1200px) {
    .asso-filtres {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2em;
    }
}

/* Groupe de filtres individuel */
.filtre-groupe {
    background: transparent;
    padding: 0;
}

/* Label du groupe */
.filtre-groupe label {
    display: block;
    font-weight: 500;
    font-size: 0.8em;
    margin-bottom: 0.5em;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Icône dans le label (si présent) */
.filtre-groupe label .fa,
.filtre-groupe label i {
    margin-right: 0.3em;
    opacity: 0.7;
}

/* Container des options */
.filtre-groupe .options {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    max-height: 250px;
    overflow: auto;
}

/* Style des options individuelles */
.filtre-groupe .options .option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4em 0.6em;
    border-radius: 3px;
    background: transparent;
    color: #374151;
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
    cursor: pointer;
}

.filtre-groupe .options .option:hover {
    background: #f9fafb;
    border-left-color: #d1d5db;
    padding-left: 0.7em;
}

/* Option sélectionnée */
.filtre-groupe .options .option.selected {
    background: #eff6ff;
    color: #1e40af;
    font-weight: 500;
    border-left-color: #3b82f6;
}

.filtre-groupe .options .option.selected:hover {
    background: #dbeafe;
}

/* Badge "en cours" pour période active */
.filtre-groupe .options .option.encours {
    background: #f0fdf4;
    color: #166534;
    font-weight: 500;
    border-left-color: #22c55e;
}

.filtre-groupe .options .option.encours:hover {
    background: #dcfce7;
}

/* ==================================================================
   INTEGRATION AU PRIVE SPIP 4

   La suite conserve ses informations metier et ses pictogrammes, mais reprend
   la densite, les contrastes, les formulaires et les tableaux du prive SPIP.
   Ces regles sont volontairement placees en fin de feuille pour neutraliser
   progressivement les styles historiques sans imposer de surcharge au core.
   ================================================================== */

:root {
    --statut-ok: #f1f8dd;
    --statut-ok-hover: #718600;
    --statut-prospect: #fff8d7;
    --statut-prospect-hover: #9a7b00;
    --statut-echu: #fff0f0;
    --statut-echu-hover: #b42318;
    --statut-relance: #fff3e8;
    --statut-relance-hover: #b54708;
    --statut-sorti: #f2f4f7;
    --statut-sorti-hover: #667085;
    --statut-attente: #fff3e8;
    --association-prive-border: #d9d9d9;
    --association-prive-muted: #666;
    --association-prive-surface: #fff;
    --association-prive-surface-alt: #f6f6f6;
    --association-prive-accent: var(--spip-color-theme, #385b7b);
}

body.navigation_avec_icones #page {
    font-family: inherit;
    font-weight: normal;
    font-size: inherit;
    color: inherit;
}

/* Le menu metier reste un raccourci utile, sous la forme d'onglets sobres. */
.table_page ul.bandeau_actions {
    grid-template-columns: repeat(7, minmax(6.5rem, 1fr));
    width: 100%;
    margin: 0 0 1.5rem;
    border-color: var(--association-prive-border);
    border-radius: .35rem;
    box-shadow: none;
    overflow-x: auto;
}

.table_page ul.bandeau_actions li a {
    min-height: 4.6rem;
    padding: 2.7rem .5rem .55rem;
    background-position: center .55rem;
    background-size: 1.55rem;
    color: inherit;
    font-weight: normal;
}

.table_page ul.bandeau_actions li.on a {
    background-color: var(--association-prive-accent);
    color: #fff;
}

.table_page ul.bandeau_actions li a:hover,
.table_page ul.bandeau_actions li a:focus-visible {
    background-color: var(--association-prive-surface-alt);
    outline: 2px solid var(--association-prive-accent);
}

.table_page ul.bandeau_actions li.on a:hover,
.table_page ul.bandeau_actions li.on a:focus-visible {
    background-color: var(--association-prive-accent);
}

.table_page .bandeau_actions li a span.label {
    font-size: .92em;
}

/* Tableaux historiques alignes sur `table.spip.liste`. */
.tableau_asso {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid var(--association-prive-border);
    border-collapse: collapse;
    background: var(--association-prive-surface);
    color: inherit;
    font-size: inherit;
    font-weight: normal;
    text-align: left;
}

.tableau_asso *,
.tableau_asso *::before,
.tableau_asso *::after {
    box-sizing: border-box;
}

.tableau_asso tr {
    border: 0;
    border-bottom: 1px solid var(--association-prive-border);
    background: var(--association-prive-surface);
}

.tableau_asso tbody tr:nth-child(even),
.tableau_asso tbody tr.even {
    background: var(--association-prive-surface-alt);
}

.tableau_asso th,
.tableau_asso td {
    padding: .55rem .6rem;
    border: 0;
    border-right: 1px solid #e9e9e9;
    vertical-align: middle;
    text-align: left;
}

.tableau_asso th {
    background: #eee;
    color: inherit;
    font-size: .95em;
    font-weight: 600;
}

.tableau_asso th a {
    color: inherit;
    text-decoration: none;
}

.tableau_asso th a:hover,
.tableau_asso th a:focus-visible {
    text-decoration: underline;
}

.tableau_asso tbody tr:hover {
    box-shadow: inset .2rem 0 var(--association-prive-accent);
}

/* La couleur porte une information secondaire : teinte legere + liseré. */
.tableau_asso tbody tr.ok,
.tableau_asso tbody tr.prospect,
.tableau_asso tbody tr.echu,
.tableau_asso tbody tr.relance,
.tableau_asso tbody tr.sorti,
.tableau_asso tbody tr.echec {
    background: var(--association-prive-surface);
}

.tableau_asso tbody tr.ok { box-shadow: inset .22rem 0 var(--statut-ok-hover); }
.tableau_asso tbody tr.prospect { box-shadow: inset .22rem 0 var(--statut-prospect-hover); }
.tableau_asso tbody tr.echu,
.tableau_asso tbody tr.echec { box-shadow: inset .22rem 0 var(--statut-echu-hover); }
.tableau_asso tbody tr.relance { box-shadow: inset .22rem 0 var(--statut-relance-hover); }
.tableau_asso tbody tr.sorti { box-shadow: inset .22rem 0 var(--statut-sorti-hover); }

.tableau_asso .nom a.bouton_editer {
    display: inline-flex;
    width: auto;
    margin: 0;
    padding: .25rem .4rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-transform: none;
}

.tableau_asso .nom > a > span,
.tableau_asso .nom a .nom_prenom {
    display: inline-flex;
    padding: .2rem .35rem;
    align-items: center;
}

/* Font Awesome est conserve comme langage d'action, dans un bouton SPIP. */
.tableau_asso a.lien_fa,
.tableau_asso a.bouton_editer,
.tableau_asso .actions a.lien_fa,
.tableau_asso .actions a.lien_fa:hover {
    display: inline-flex;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    margin: .12rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--association-prive-border);
    border-radius: .25rem;
    background: var(--association-prive-surface);
    color: #444;
    text-transform: none;
}

.tableau_asso a.lien_fa:hover,
.tableau_asso a.lien_fa:focus-visible,
.tableau_asso a.bouton_editer:hover,
.tableau_asso a.bouton_editer:focus-visible {
    border-color: var(--association-prive-accent);
    background: var(--association-prive-surface-alt);
    color: var(--association-prive-accent);
    outline: 2px solid transparent;
    text-decoration: none;
}

.tableau_asso .actions a.lien_fa i,
.tableau_asso .actions .actions_wrap > a.lien_fa > i,
.tableau_asso a.lien_fa i {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    color: currentColor;
}

.tableau_asso .actions a:is(.action-supprimer,.action-desinscrire) {
    color: #b42318;
}

.tableau_asso .actions a:is(.action-valider,.action-reactiver) {
    color: #587000;
}

.tableau_asso .actions_wrap {
    min-width: 0;
    gap: .2rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Les formulaires CVT gardent la structure et les interactions natives. */
.formulaire_asso,
form.formulaire_asso,
#contenu .formulaire_asso {
    max-width: 48rem;
    margin: 1rem 0;
    padding: 0;
}

.formulaire_asso > form > div,
.formulaire_asso form > div {
    padding: 0;
}

.formulaire_asso fieldset,
#contenu .formulaire_asso fieldset {
    width: auto;
    margin: 0 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--association-prive-border);
}

.formulaire_asso fieldset > legend,
.formulaire_asso h3.legend {
    width: auto;
    margin: 0;
    padding: 0 .35rem;
    background: transparent;
    font-size: 1.1em;
    font-weight: 600;
    text-transform: none;
}

.formulaire_asso .editer,
.formulaire_asso li.editer {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.formulaire_asso :is(input.text,input.email,input[type="text"],input[type="email"],input[type="number"],input[type="date"],input[type="url"],select,textarea) {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: .3rem 0 0;
    padding: .55rem .65rem;
    box-sizing: border-box;
}

.formulaire_asso :is(input[type="radio"],input[type="checkbox"]),
.tableau_asso .checkbox input[type="checkbox"],
.formulaire_asso .checkbox input[type="checkbox"] {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 .35rem 0 0;
    accent-color: var(--association-prive-accent);
}

.tableau_asso .checkbox input[type="checkbox"] + label::before,
.formulaire_asso .checkbox input[type="checkbox"] + label::before {
    content: none;
}

.formulaire_asso *:focus,
.formulaire_asso *:focus-visible,
.export_csv *:focus,
.export_csv *:focus-visible {
    outline: 2px solid var(--association-prive-accent) !important;
    outline-offset: 1px;
}

.formulaire_asso .explication {
    margin: .35rem 0;
    padding: .5rem .65rem;
    border-left: .2rem solid var(--association-prive-border);
    background: var(--association-prive-surface-alt);
    color: var(--association-prive-muted);
}

.formulaire_asso .boutons {
    text-align: right;
}

.tableau-association-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--association-prive-border);
    border-radius: .25rem;
}

.tableau-association-scroll > .tableau_asso {
    border: 0;
}

.tableau-association-scroll > table.spip.liste {
    width: 100%;
    min-width: 48rem;
    margin: 0;
}

/* Les audits injectés avant le tableau principal peuvent eux aussi être larges. */
.notifications-content {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 900px) {
    .table_page ul.bandeau_actions {
        grid-template-columns: repeat(4, minmax(6rem, 1fr));
    }

    .tableau-association-scroll > .tableau_asso {
        min-width: var(--association-table-min-width, 44rem);
    }
}

@media (max-width: 520px) {
    .table_page ul.bandeau_actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .formulaire_asso fieldset,
    #contenu .formulaire_asso fieldset {
        padding: .75rem;
    }
}

.filtre-groupe .options .option.encours .badge-encours {
    margin-left: 0.4em;
    color: #22c55e;
    font-size: 0.7em;
}

/* Styles des options de statut avec code couleur */
.filtre-groupe .options .option.ok {
    background: color-mix(in srgb, var(--statut-ok) 20%, transparent);
    border-left-color: var(--statut-ok);
}

.filtre-groupe .options .option.ok:hover {
    background: color-mix(in srgb, var(--statut-ok) 30%, transparent);
}

.filtre-groupe .options .option.ok.selected {
    background: color-mix(in srgb, var(--statut-ok) 40%, transparent);
    border-left-color: var(--statut-ok-hover);
}

.filtre-groupe .options .option.prospect {
    background: color-mix(in srgb, var(--statut-prospect) 30%, transparent);
    border-left-color: var(--statut-prospect);
}

.filtre-groupe .options .option.prospect:hover {
    background: color-mix(in srgb, var(--statut-prospect) 45%, transparent);
}

.filtre-groupe .options .option.prospect.selected {
    background: color-mix(in srgb, var(--statut-prospect) 60%, transparent);
    border-left-color: var(--statut-prospect-hover);
}

.filtre-groupe .options .option.echu {
    background: color-mix(in srgb, var(--statut-echu) 30%, transparent);
    border-left-color: var(--statut-echu);
}

.filtre-groupe .options .option.echu:hover {
    background: color-mix(in srgb, var(--statut-echu) 45%, transparent);
}

.filtre-groupe .options .option.echu.selected {
    background: color-mix(in srgb, var(--statut-echu) 60%, transparent);
    border-left-color: var(--statut-echu-hover);
}

.filtre-groupe .options .option.relance {
    background: color-mix(in srgb, var(--statut-relance) 30%, transparent);
    border-left-color: var(--statut-relance);
}

.filtre-groupe .options .option.relance:hover {
    background: color-mix(in srgb, var(--statut-relance) 45%, transparent);
}

.filtre-groupe .options .option.relance.selected {
    background: color-mix(in srgb, var(--statut-relance) 60%, transparent);
    border-left-color: var(--statut-relance-hover);
}

.filtre-groupe .options .option.sorti {
    background: color-mix(in srgb, var(--statut-sorti) 50%, transparent);
    border-left-color: var(--statut-sorti);
    color: #6b7280;
}

.filtre-groupe .options .option.sorti:hover {
    background: color-mix(in srgb, var(--statut-sorti) 70%, transparent);
}

.filtre-groupe .options .option.sorti.selected {
    background: color-mix(in srgb, var(--statut-sorti) 90%, transparent);
    border-left-color: var(--statut-sorti-hover);
}

/* Label de la période dans l'option */
.filtre-groupe .options .option .periode-libelle {
    flex: 1;
}

/* Badge de compteur (nombre d'adhérents) */
.filtre-groupe .options .option .badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 0.4em;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 9px;
    font-size: 0.75em;
    font-weight: 500;
    margin-left: 0.5em;
}

.filtre-groupe .options .option.selected .badge-count {
    background: #bfdbfe;
    color: #1e40af;
}

.filtre-groupe .options .option.encours .badge-count {
    background: #bbf7d0;
    color: #166534;
}

/* Montant (si présent) */
.filtre-groupe .options .option .montant {
    font-size: 0.8em;
    color: #9ca3af;
    margin-left: 0.4em;
}

/* Style alternatif : Pills (optionnel) */
.filtre-groupe.style-pills .options {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4em;
}

.filtre-groupe.style-pills .options .option {
    flex: 0 0 auto;
    border-radius: 16px;
    padding: 0.35em 0.8em;
    border-left: none;
    border: 1px solid #e5e7eb;
}

.filtre-groupe.style-pills .options .option:hover {
    border-color: #d1d5db;
    padding-left: 0.8em;
}

.filtre-groupe.style-pills .options .option.selected {
    border-color: #3b82f6;
}

/* États de chargement (AJAX) */
.filtre-groupe.loading {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.filtre-groupe.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid #3b82f6;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive : Mobile */
@media (max-width: 767px) {
    .asso-filtres {
        grid-template-columns: 1fr;
        gap: 0.8em;
        padding: 0.8em;
    }

    .filtre-groupe label {
        font-size: 0.75em;
        margin-bottom: 0.4em;
    }

    .filtre-groupe .options .option {
        font-size: 0.85em;
        padding: 0.35em 0.5em;
    }

    .filtre-groupe .options .option .badge-count {
        min-width: 18px;
        height: 16px;
        font-size: 0.7em;
    }
}

/* Style du conteneur des actions */
.asso-actions {
  margin: 1.5em 0;
  display: flex;
  justify-content: flex-end;
}

.asso-actions .bouton {
  margin: 0.5em 1em;
}

/* Style du bouton d'export */
.asso-actions .btn-export {
  display: flex;
  align-items: center;
  background-color: #9dba00;
  color: white;
  padding: 0;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.asso-actions .btn-export:hover {
  background-color: #8aa800;
}

.asso-actions .btn-export .fa_icone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.asso-actions .btn-export span:not(.fa_icone) {
  padding: 8px 12px;
  font-weight: 500;
  font-size: 0.95em;
}

/* Animation au survol */
.asso-actions .btn-export:hover .fa_icone {
  transform: translateY(-1px);
}