/*
 * Style moderne commun aux écrans migrés de l'admin, dans l'esprit de l'accueil : cartes
 * arrondies, pastilles d'icône, couleurs douces, boutons arrondis.
 * Activé par la classe racine .c2c-ui posée sur la vue (C2cUiAsset, chargé après AdminLTE :
 * à spécificité égale, ces règles l'emportent). Le reste de l'admin garde le style AdminLTE.
 * Les feuilles des widgets peuvent passer après celle-ci (kartik, Select2, et bootstrap.css
 * réinjecté par les réponses renderAjax, comme la fiche dépliée de Mes adhérents) : les
 * sélecteurs sont donc plus spécifiques que les leurs, sans compter sur l'ordre.
 * Charte et recette : « Charte graphique admin C2C.md » à la racine du monorepo.
 */

/* jetons sur :root : une variable ne dessine rien, et elles servent aussi hors de la racine
   (fil d'Ariane, messages flash) */
:root {
    --c2c-navy: #173a5e;
    --c2c-blue: #2f7fc1;
    --c2c-blue-dark: #1f5f99;
    --c2c-blue-soft: #eaf2fb;
    --c2c-ink: #1f2937;
    --c2c-text: #4b5563;
    --c2c-muted: #6b7280;
    --c2c-line: #e6ebf1;
    --c2c-line-soft: #f0f3f7;
    --c2c-soft: #f6f8fb;
}

/* ------------------------------------------------------------------ */
/* Titre de page et onglets                                           */
/* ------------------------------------------------------------------ */
/* titre de fiche ou de tableau de bord, actions à droite ; le titre peut rester un h4
   (la fiche adhérent : adherents-tour.js lit le premier h4 de la page) */
.c2c-ui .c2c-page-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    margin: 6px 0 18px;
}
.c2c-ui .c2c-page-head__title {
    min-width: 0;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--c2c-ink);
    overflow-wrap: anywhere;
}
.c2c-ui .c2c-page-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

/* onglets (Tabs::widget, ul.nav-tabs) : sélecteur segmenté, à toute profondeur, qui passe à
   la ligne s'il le faut ; les encarts à onglets d'AdminLTE (nav-tabs-custom) sont exclus */
.c2c-ui .nav-tabs:not(.nav-tabs-custom > .nav-tabs) {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: #e3e9f0;
}
/* clearfix de Bootstrap : éléments flexibles vides sinon */
.c2c-ui .nav-tabs:not(.nav-tabs-custom > .nav-tabs)::before,
.c2c-ui .nav-tabs:not(.nav-tabs-custom > .nav-tabs)::after {
    content: none;
}
.c2c-ui .nav-tabs:not(.nav-tabs-custom > .nav-tabs) > li {
    float: none;
    margin: 0;
}
/* onglet inactif en --c2c-text (6,2:1 sur le rail) plutôt qu'en --c2c-muted comme sur
   l'accueil (4,0:1) */
.c2c-ui .nav-tabs:not(.nav-tabs-custom > .nav-tabs) > li > a {
    margin: 0;
    padding: 7px 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-weight: 600;
    line-height: 1.43;
    color: var(--c2c-text);
    transition: background-color .15s ease, color .15s ease;
}
.c2c-ui .nav-tabs:not(.nav-tabs-custom > .nav-tabs) > li > a:hover,
.c2c-ui .nav-tabs:not(.nav-tabs-custom > .nav-tabs) > li > a:focus {
    border: 0;
    background: rgba(255, 255, 255, .6);
    color: var(--c2c-ink);
}
.c2c-ui .nav-tabs:not(.nav-tabs-custom > .nav-tabs) > li > a:focus-visible {
    outline: 3px solid rgba(47, 127, 193, .35);
    outline-offset: 1px;
}
.c2c-ui .nav-tabs:not(.nav-tabs-custom > .nav-tabs) > li.active > a,
.c2c-ui .nav-tabs:not(.nav-tabs-custom > .nav-tabs) > li.active > a:hover,
.c2c-ui .nav-tabs:not(.nav-tabs-custom > .nav-tabs) > li.active > a:focus {
    border: 0;
    background: #fff;
    color: var(--c2c-ink);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}

/* ------------------------------------------------------------------ */
/* Encarts                                                            */
/* ------------------------------------------------------------------ */
.c2c-ui .box {
    margin-bottom: 18px;
    border: 1px solid var(--c2c-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px -10px rgba(16, 24, 40, .16);
}
.c2c-ui .box-header {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 16px 6px;
}
/* le clearfix d'AdminLTE deviendrait un élément flexible (décalage du titre) */
.c2c-ui .box-header::before,
.c2c-ui .box-header::after {
    content: none;
}
.c2c-ui .box-header.with-border {
    border-bottom: 0;
}
.c2c-ui .box-header > .box-title {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c2c-ink);
}
.c2c-ui .box-header > .box-title > a {
    display: inline-flex;
    align-items: center;
    color: inherit;
}
.c2c-ui .box-header > .box-title > a:hover,
.c2c-ui .box-header > .box-title > a:focus {
    color: var(--c2c-blue);
}
.c2c-ui .box-header > .box-tools {
    position: static;
    margin-left: auto;
}
/* titre nu (<h3> ou <h4> sans .box-title, dans les vues partagées qu'on ne retouche pas) :
   même rendu que .box-title */
.c2c-ui .box-header > h3:not(.box-title),
.c2c-ui .box-header > h4:not(.box-title) {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c2c-ink);
}
/* sous-titre d'encart (date, décompte), sous le titre :
   <h4 class="box-title"><i class="fa …"></i><span>Titre <small>précision</small></span></h4> */
.c2c-ui .box-header > .box-title > span > small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--c2c-muted);
}
/* pastille d'icône du titre (encart ou grille kartik), colorée selon le type d'encart */
.c2c-ui .box-header > .box-title .fa:first-child,
.c2c-ui .box-header > h3 > .fa:first-child,
.c2c-ui .box-header > h4 > .fa:first-child,
.c2c-ui .box > .panel-heading > .panel-title > .fa:first-child {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    border-radius: 10px;
    background: var(--c2c-blue-soft);
    font-size: 15px;
    color: var(--c2c-blue);
}
.c2c-ui .box-warning > .box-header > .box-title .fa:first-child,
.c2c-ui .box-warning > .panel-heading > .panel-title > .fa:first-child {
    background: #fff1e0;
    color: #d9730d;
}
.c2c-ui .box-success > .box-header > .box-title .fa:first-child,
.c2c-ui .box-success > .panel-heading > .panel-title > .fa:first-child {
    background: #e7f6ee;
    color: #12a150;
}
.c2c-ui .box-danger > .box-header > .box-title .fa:first-child,
.c2c-ui .box-danger > .panel-heading > .panel-title > .fa:first-child {
    background: #fdecea;
    color: #d92d20;
}
.c2c-ui .box-body {
    padding: 8px 16px 16px;
    color: var(--c2c-text);
}
/* encart sans en-tête */
.c2c-ui .box > .box-body:first-child {
    padding-top: 16px;
}
.c2c-ui .box-footer {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--c2c-line-soft);
    border-radius: 0 0 12px 12px;
    background: transparent;
}
.c2c-ui .box .text-muted {
    color: var(--c2c-muted);
}
/* séparateurs : AdminLTE les trace en gris foncé (#555) */
.c2c-ui hr {
    border-top-color: var(--c2c-line);
}
/* chargement d'un encart (AJAX) */
.c2c-ui .box .overlay {
    border-radius: 12px;
}
.c2c-ui .box .overlay > .fa {
    margin: -11px 0 0 -11px;
    font-size: 22px;
    color: var(--c2c-blue);
}

/* ------------------------------------------------------------------ */
/* Badges, pilules d'état, petits intitulés                           */
/* ------------------------------------------------------------------ */
/* badges (« Nouveau »…) : pilules, couleurs AdminLTE */
.c2c-ui .label {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
}
/* état lisible dans une liste (admin\classes\StatusPill) : fond pâle, texte foncé */
.c2c-ui .c2c-pill {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 2px 9px;
    border-radius: 99px;
    background: var(--c2c-line-soft);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: var(--c2c-text);
    white-space: nowrap;
}
.c2c-ui .c2c-pill--blue {
    background: var(--c2c-blue-soft);
    color: var(--c2c-blue-dark);
}
.c2c-ui .c2c-pill--green {
    background: #ecfdf3;
    color: #05603a;
}
.c2c-ui .c2c-pill--orange {
    background: #fffaeb;
    color: #93370d;
}
.c2c-ui .c2c-pill--red {
    background: #fef3f2;
    color: #912018;
}
/* personne dans une liste (admin\classes\AdherentAvatar) : pastille ronde devant le nom, la photo
   d'identité, sinon un rond gris avec une silhouette (des initiales répéteraient le nom écrit
   juste après) ; .c2c-avatar est dans header.css */
.c2c-ui .c2c-person {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    vertical-align: middle; /* sur la ligne de base, la pastille grandissait la ligne de 5 px */
}
.c2c-ui .c2c-avatar--sm {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    font-size: 10.5px;
}
.c2c-ui .c2c-avatar--empty {
    border: 1px solid var(--c2c-line);
    background: var(--c2c-soft);
    color: #9aa5b4;
}
.c2c-ui .c2c-avatar--empty > .fa {
    font-size: 13px;
}
.c2c-ui img.c2c-avatar {
    object-fit: cover;
    object-position: 50% 25%; /* le visage, dans le haut d'une photo d'identité */
    background: var(--c2c-blue-soft);
}
/* intitulé de section en petites capitales */
.c2c-ui .c2c-section-title {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c2c-muted);
}

/* ------------------------------------------------------------------ */
/* Boutons                                                            */
/* ------------------------------------------------------------------ */
.c2c-ui .btn {
    border-radius: 8px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.c2c-ui .btn-sm {
    padding: 7px 12px;
    font-size: 13px;
}
.c2c-ui .btn-xs {
    border-radius: 6px;
}
/* colonne étroite : le libellé passe à la ligne plutôt que d'être coupé */
.c2c-ui .btn-block {
    white-space: normal;
}
.c2c-ui .btn-primary,
.c2c-ui .btn-success,
.c2c-ui .btn-warning,
.c2c-ui .btn-danger {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}
.c2c-ui .btn:focus-visible {
    outline: 3px solid rgba(47, 127, 193, .35);
    outline-offset: 1px;
}
/* bouton blanc (celui du menu du compte) à la place du gris d'AdminLTE */
.c2c-ui .btn-default {
    border-color: #e3e8ef;
    background-color: #fff;
    color: #374151;
}
.c2c-ui .btn-default:hover,
.c2c-ui .btn-default:focus,
.c2c-ui .btn-default:active,
.c2c-ui .btn-default.active,
.c2c-ui .open > .dropdown-toggle.btn-default,
.c2c-ui .open > .dropdown-toggle.btn-default:hover,
.c2c-ui .open > .dropdown-toggle.btn-default:focus {
    border-color: #cfdae6;
    background-color: var(--c2c-soft);
    color: var(--c2c-ink);
}
.c2c-ui .btn-default:active,
.c2c-ui .open > .dropdown-toggle.btn-default {
    box-shadow: none;
}
/* action secondaire : fond bleu léger plutôt qu'un aplat. Un btn-info est toujours une action
   secondaire (charte § 4.4), et son aplat cyan n'offre que 2,2:1 au texte blanc : il prend ce
   style partout (les menus d'actions et le bouton Tutoriel ont leurs propres règles) */
.c2c-ui .c2c-btn-soft,
.c2c-ui .btn-info {
    border-color: transparent;
    background: var(--c2c-blue-soft);
    color: var(--c2c-blue-dark);
}
.c2c-ui .c2c-btn-soft:hover,
.c2c-ui .c2c-btn-soft:focus,
.c2c-ui .c2c-btn-soft:active,
.c2c-ui .btn-info:hover,
.c2c-ui .btn-info:focus,
.c2c-ui .btn-info:active,
.c2c-ui .btn-info.active,
.c2c-ui .open > .dropdown-toggle.btn-info {
    border-color: transparent;
    background: #dbe9f7;
    color: #174b7a;
}
/* bouton Tutoriel : tous les écrans suivent la convention id="tour-<écran>-btn" */
.c2c-ui [id^="tour-"][id$="-btn"] {
    border: 1px solid var(--c2c-line);
    background: #fff;
    font-weight: 600;
    color: var(--c2c-blue);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.c2c-ui [id^="tour-"][id$="-btn"]:hover,
.c2c-ui [id^="tour-"][id$="-btn"]:focus,
.c2c-ui [id^="tour-"][id$="-btn"]:active {
    border-color: #c9d9ea;
    background: var(--c2c-soft);
    color: var(--c2c-blue-dark);
}

/* ------------------------------------------------------------------ */
/* Panneaux, textes, chiffres clés, libellé / valeur                  */
/* ------------------------------------------------------------------ */
/* panneaux à l'intérieur d'un encart */
.c2c-ui .c2c-panel {
    position: relative;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--c2c-line);
    border-radius: 10px;
    background: var(--c2c-soft);
}
.c2c-ui .c2c-panel:last-child {
    margin-bottom: 0;
}
.c2c-ui .c2c-panel--green {
    border-color: #cdeedb;
    background: #f2fbf6;
}
.c2c-ui .c2c-panel--orange {
    border-color: #f6dcb0;
    background: #fff8ec;
    color: #7a4b0f;
}
.c2c-ui .c2c-panel__title {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--c2c-ink);
}
.c2c-ui .c2c-panel--orange .c2c-panel__title {
    color: #93370d;
}
.c2c-ui .c2c-panel > .label {
    position: absolute;
    top: 12px;
    right: 12px;
}
.c2c-ui .c2c-panel p {
    margin: 0 0 10px;
}
.c2c-ui .c2c-panel ul {
    margin: 6px 0 0;
    padding-left: 18px;
}
.c2c-ui .c2c-panel li + li {
    margin-top: 3px;
}
.c2c-ui .c2c-lead {
    margin: 0 0 12px;
    color: var(--c2c-text);
}
/* note d'information sous un encart (conteneur flex : le texte va dans un <span>) */
.c2c-ui .c2c-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid #d5e7f6;
    border-radius: 12px;
    background: #eef6fc;
    font-size: 13px;
    line-height: 1.45;
    color: #1e4e79;
}
.c2c-ui .c2c-note .fa {
    margin-top: 2px;
    color: var(--c2c-blue);
}
/* lien dans la note : comme dans les alertes (le bleu d'AdminLTE n'a que 3,4:1 sur ce fond) */
.c2c-ui .c2c-note a {
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
}
/* en fin d'encart, la marge du corps suffit */
.c2c-ui .box-body > .c2c-note:last-child {
    margin-bottom: 0;
}
/* chiffres clés */
.c2c-ui .c2c-stats {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.c2c-ui .c2c-stats > li {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--c2c-line-soft);
}
.c2c-ui .c2c-stats > li:first-child {
    padding-top: 2px;
}
.c2c-ui .c2c-stats > li:last-child {
    border-bottom: 0;
}
.c2c-ui .c2c-stats__icon {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 10px;
    background: #fff1e0;
    font-size: 16px;
    color: #d9730d;
}
.c2c-ui .c2c-stats__icon--blue {
    background: var(--c2c-blue-soft);
    color: var(--c2c-blue);
}
.c2c-ui .c2c-stats__icon--green {
    background: #e7f6ee;
    color: #12a150;
}
.c2c-ui .c2c-stats__icon--red {
    background: #fdecea;
    color: #d92d20;
}
.c2c-ui .c2c-stats__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--c2c-text);
}
.c2c-ui .c2c-stats__text strong {
    color: var(--c2c-ink);
}
.c2c-ui .c2c-stats__num {
    margin-right: 3px;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}
.c2c-ui .c2c-stats__text small {
    margin-top: 1px;
    font-size: 12px;
    color: var(--c2c-muted);
}
.c2c-ui .c2c-foot-note {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--c2c-muted);
}
/* paires libellé / valeur */
.c2c-ui .c2c-kv {
    margin: 0 0 12px;
    padding: 4px 14px;
    border: 1px solid var(--c2c-line);
    border-radius: 10px;
    background: var(--c2c-soft);
}
.c2c-ui .c2c-kv > div {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 13px;
}
.c2c-ui .c2c-kv > div + div {
    border-top: 1px solid #e9eef4;
}
.c2c-ui .c2c-kv dt {
    font-weight: 400;
    color: var(--c2c-muted);
}
.c2c-ui .c2c-kv dd {
    font-weight: 700;
    color: var(--c2c-ink);
    text-align: right;
}
/* jauge décorative devant un pourcentage écrit (<span class="c2c-meter" aria-hidden="true">
   <span style="width: 60%"></span></span>) : rail et bleu des barres de l'accueil */
.c2c-ui .c2c-meter {
    display: inline-block;
    width: 72px;
    height: 6px;
    margin-right: 8px;
    overflow: hidden;
    border-radius: 99px;
    background: #eef2f6;
    vertical-align: middle;
}
.c2c-ui .c2c-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--c2c-blue);
}
/* vignette d'image (photo d'identité…) */
.c2c-ui .thumbnail {
    border-color: var(--c2c-line);
    border-radius: 10px;
}

/* ------------------------------------------------------------------ */
/* Alertes douces (et messages flash, rendus juste avant la vue)      */
/* ------------------------------------------------------------------ */
/* AdminLTE colore les alertes en !important : seule une règle !important les adoucit */
.c2c-ui .alert,
.content:has(> .c2c-ui) > .alert {
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px;
}
.c2c-ui .alert h4,
.content:has(> .c2c-ui) > .alert h4 {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
}
.c2c-ui .alert a,
.content:has(> .c2c-ui) > .alert a {
    color: inherit !important;
    font-weight: 600;
    text-decoration: underline;
}
.c2c-ui .alert.alert-dismissible,
.content:has(> .c2c-ui) > .alert.alert-dismissible {
    padding-right: 36px;
}
.c2c-ui .alert .close,
.content:has(> .c2c-ui) > .alert .close {
    color: inherit;
    text-shadow: none;
    opacity: .5;
}
.c2c-ui .alert-danger,
.content:has(> .c2c-ui) > .alert-danger {
    border-color: #fecdca;
    background: #fef3f2 !important;
    color: #912018 !important;
}
.c2c-ui .alert-warning,
.content:has(> .c2c-ui) > .alert-warning {
    border-color: #fbe1a9;
    background: #fffaeb !important;
    color: #93370d !important;
}
.c2c-ui .alert-success,
.content:has(> .c2c-ui) > .alert-success {
    border-color: #abefc6;
    background: #ecfdf3 !important;
    color: #05603a !important;
}
.c2c-ui .alert-info,
.content:has(> .c2c-ui) > .alert-info {
    border-color: #b2ddff;
    background: #eff8ff !important;
    color: #175cd3 !important;
}

/* fil d'Ariane (layouts/content.php, hors de la racine) */
.content-wrapper:has(.c2c-ui) > .content-header > .breadcrumb {
    font-size: 12.5px;
    color: var(--c2c-muted);
}
.content-wrapper:has(.c2c-ui) > .content-header > .breadcrumb > li > a {
    color: var(--c2c-blue-dark);
}
.content-wrapper:has(.c2c-ui) > .content-header > .breadcrumb > .active {
    font-weight: 600;
    color: var(--c2c-ink);
}

/* ------------------------------------------------------------------ */
/* Tableaux                                                           */
/* ------------------------------------------------------------------ */
.c2c-ui .box .table {
    margin-bottom: 0;
}
.c2c-ui .box .table-bordered,
.c2c-ui .box .table-bordered > thead > tr > th,
.c2c-ui .box .table-bordered > thead > tr > td,
.c2c-ui .box .table-bordered > tbody > tr > th,
.c2c-ui .box .table-bordered > tbody > tr > td,
.c2c-ui .box .table-bordered > tfoot > tr > td,
.c2c-ui .box .table-bordered > tfoot > tr > th {
    border-right: 0;
    border-left: 0;
}
.c2c-ui .box .table-bordered {
    border-top: 0;
    border-bottom: 0;
}
.c2c-ui .box .table > thead > tr > th {
    border-bottom: 1px solid var(--c2c-line);
    background: transparent;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c2c-muted);
}
.c2c-ui .box .table > tbody > tr > td,
.c2c-ui .box .table > tbody > tr > th,
.c2c-ui .box .table > tfoot > tr > td,
.c2c-ui .box .table > tfoot > tr > th {
    border-top: 1px solid var(--c2c-line-soft);
}
.c2c-ui .box .table-striped > tbody > tr:nth-of-type(odd) {
    background: transparent;
}
.c2c-ui .box .table-hover > tbody > tr:hover {
    background: var(--c2c-soft);
}
.c2c-ui .box .table > tfoot > tr > td,
.c2c-ui .box .table > tfoot > tr > th,
.c2c-ui .box .kv-page-summary {
    background: var(--c2c-soft);
    font-weight: 700;
    color: var(--c2c-ink);
}
/* ligne de total de kartik ('showPageSummary') : posée en `warning`, que Bootstrap colore en jaune
   sur les cellules (survol compris), sous un double trait de 4 px (kv-grid.css) ; même fond doux
   qu'un pied de tableau, trait simple */
.c2c-ui .box .table > tbody > tr.kv-page-summary {
    border-top: 1px solid var(--c2c-line);
}
.c2c-ui .box .table > tbody > tr.kv-page-summary > td,
.c2c-ui .box .table-hover > tbody > tr.kv-page-summary:hover > td {
    border-top: 1px solid var(--c2c-line);
    background: var(--c2c-soft);
}

/* ------------------------------------------------------------------ */
/* Grilles kartik dans un encart ('panelPrefix' => 'box box-')        */
/* ------------------------------------------------------------------ */
/* en-tête : titre avec pastille à gauche, « Affichage de 1-20 sur 35 » à droite */
.c2c-ui .box > .panel-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
    padding: 14px 16px 10px;
    border-bottom: 0;
}
.c2c-ui .box > .panel-heading > .clearfix {
    display: none; /* sinon élément flexible vide */
}
.c2c-ui .box > .panel-heading > .panel-title {
    display: inline-flex;
    flex: 1 1 auto;
    order: -1; /* le résumé précède le titre dans le balisage */
    align-items: center;
    min-width: 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c2c-ink);
}
.c2c-ui .box > .panel-heading > .pull-right {
    font-size: 12.5px;
    color: var(--c2c-muted);
}
.c2c-ui .box > .panel-heading > .pull-right b {
    font-weight: 700;
    color: var(--c2c-text);
}

/* au-dessus du tableau : contenu de « before » à gauche, barre d'outils à droite */
.c2c-ui .box > .kv-panel-before {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    padding: 0 16px 14px;
    border-bottom: 0;
}
.c2c-ui .box > .kv-panel-before > .clearfix {
    display: none;
}
.c2c-ui .box > .kv-panel-before > .kv-grid-toolbar {
    order: 2;
    margin-left: auto;
}
.c2c-ui .kv-grid-toolbar > .btn-group {
    margin-left: 6px;
}
.c2c-ui .kv-grid-toolbar > .btn-group:first-child {
    margin-left: 0;
}
.c2c-ui .box > .kv-panel-after {
    padding: 12px 16px;
    border-top: 1px solid var(--c2c-line-soft);
}
.c2c-ui .box > .kv-panel-after:empty {
    display: none;
}

/* menus déroulants : carte blanche */
.c2c-ui .dropdown-menu {
    padding: 6px;
    border: 1px solid var(--c2c-line);
    border-radius: 12px;
    box-shadow: 0 12px 28px -10px rgba(16, 24, 40, .28);
}
.c2c-ui .dropdown-menu > li > a {
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--c2c-ink);
}
.c2c-ui .dropdown-menu > li > a:hover,
.c2c-ui .dropdown-menu > li > a:focus {
    background: var(--c2c-soft);
    color: var(--c2c-ink);
}
.c2c-ui .dropdown-menu > li > a > .fa,
.c2c-ui .dropdown-menu > li > a > .glyphicon {
    width: 16px;
    margin-right: 6px;
    text-align: center;
}
.c2c-ui .dropdown-menu > .divider {
    margin: 6px 4px;
    background: var(--c2c-line-soft);
}
/* choix des colonnes à exporter (kartik ExportMenu) */
.c2c-ui .kv-checkbox-list > li > .checkbox {
    margin: 0;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 13px;
}
.c2c-ui .kv-checkbox-list > li > .checkbox:hover {
    background: var(--c2c-soft);
}
/* menu « Actions » fait de boutons (li > .btn) : des entrées de menu, la couleur passe sur
   l'icône ; les entrées « (cochés) » désactivées restent grisées */
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn {
    display: flex;
    float: none; /* .btn-toolbar .btn flotte : l'entrée surlignée par un tutoriel (overflow
                    hidden posé par driver.js sur son parent) était écrasée à côté des autres */
    gap: 8px;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--c2c-ink);
    text-align: left;
    white-space: nowrap;
}
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn:hover,
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn:focus {
    background: var(--c2c-soft);
    color: var(--c2c-ink);
}
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn > .fa,
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn > .glyphicon {
    flex: 0 0 16px;
    margin-right: 0; /* AdminLTE en met 10 px aux icônes des liens de menu */
    text-align: center;
    color: var(--c2c-blue);
}
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn-success > .fa,
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn-success > .glyphicon {
    color: #12a150;
}
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn-warning > .fa,
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn-warning > .glyphicon {
    color: #d9730d;
}
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn-danger,
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn-danger:hover,
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn-danger:focus,
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn-danger > .fa,
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn-danger > .glyphicon {
    color: #b42318;
}
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn-danger:hover,
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn-danger:focus {
    background: #fef3f2;
}
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn[disabled],
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn[disabled]:hover,
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn[disabled] > .fa,
.c2c-ui .kv-grid-toolbar .dropdown-menu > li > .btn[disabled] > .glyphicon {
    background: transparent;
    color: #9aa5b4;
    opacity: 1;
}

/* le tableau : plus dense, cellules centrées verticalement, chiffres alignés */
.c2c-ui .kv-grid-table > thead > tr > th,
.c2c-ui .kv-grid-table > tbody > tr > td {
    vertical-align: middle;
}
.c2c-ui .kv-grid-table > tbody > tr > td {
    padding: 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--c2c-text);
}
.c2c-ui .box .kv-grid-table > thead > tr > th > a {
    color: inherit;
}
.c2c-ui .box .kv-grid-table > thead > tr > th > a:hover,
.c2c-ui .box .kv-grid-table > thead > tr > th > a:focus,
.c2c-ui .box .kv-grid-table > thead > tr > th > a.asc,
.c2c-ui .box .kv-grid-table > thead > tr > th > a.desc {
    color: var(--c2c-ink);
    text-decoration: none;
}
/* lien principal d'une ligne (nom…) : bleu foncé, lisible en petit corps */
.c2c-ui .kv-grid-table > tbody > tr > td > a {
    font-weight: 600;
    color: var(--c2c-blue-dark);
}
.c2c-ui .kv-grid-table > tbody > tr > td > a:hover,
.c2c-ui .kv-grid-table > tbody > tr > td > a:focus {
    color: var(--c2c-blue);
}
/* en-tête et ligne de filtres sur un même fond doux (les colonnes à cocher, à déplier et
   d'actions fusionnent les deux lignes) ; un seul trait, sous l'ensemble */
.c2c-ui .box .kv-grid-table > thead > tr > th {
    background: var(--c2c-soft);
}
.c2c-ui .box .kv-grid-table > thead > tr:not(:last-child) > th:not(.kv-merged-header) {
    border-bottom-color: transparent;
}
.c2c-ui .box .kv-grid-table > thead > tr.filters > td {
    padding: 0 8px 8px;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--c2c-line);
    border-left: 0;
    background: var(--c2c-soft);
}
.c2c-ui .box .kv-grid-table > thead > tr.filters .form-control {
    font-size: 13px;
}
/* cases à cocher et ligne cochée ('rowSelectedClass' => GridView::TYPE_SUCCESS) */
.c2c-ui input[type="checkbox"],
.c2c-ui input[type="radio"] {
    accent-color: var(--c2c-blue);
}
.c2c-ui .box .kv-grid-table > tbody > tr.success > td {
    background: #eef6fc;
}
/* colonne d'actions (kartik ActionColumn, cellule .skip-export) : icônes en pastilles */
.c2c-ui .kv-grid-table > tbody > tr > td.skip-export > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--c2c-muted);
    transition: background-color .15s ease, color .15s ease;
}
.c2c-ui .kv-grid-table > tbody > tr > td.skip-export > a:hover,
.c2c-ui .kv-grid-table > tbody > tr > td.skip-export > a:focus {
    background: var(--c2c-blue-soft);
    color: var(--c2c-blue-dark);
}
/* suppression : par data-method (corbeille de kartik), ou c2c-action-danger quand la corbeille
   mène à un écran de confirmation (retrait de saison de Mes adhérents) */
.c2c-ui .kv-grid-table > tbody > tr > td.skip-export > a[data-method]:hover,
.c2c-ui .kv-grid-table > tbody > tr > td.skip-export > a[data-method]:focus,
.c2c-ui .kv-grid-table > tbody > tr > td.skip-export > a.c2c-action-danger:hover,
.c2c-ui .kv-grid-table > tbody > tr > td.skip-export > a.c2c-action-danger:focus {
    background: #fef3f2;
    color: #d92d20;
}
/* lignes dépliables (kartik ExpandRowColumn) */
.c2c-ui .kv-grid-table .kv-expand-icon-cell,
.c2c-ui .kv-grid-table .kv-expand-header-cell {
    font-size: 13px;
    color: var(--c2c-muted);
}
.c2c-ui .kv-grid-table .kv-expand-icon-cell:hover,
.c2c-ui .kv-grid-table .kv-expand-icon-cell:focus {
    background-color: var(--c2c-blue-soft) !important; /* kartik l'impose en bleu ciel */
    color: var(--c2c-blue-dark);
}
.c2c-ui .box .kv-grid-table > tbody > tr.kv-expand-detail-row > td {
    padding: 16px;
    background: var(--c2c-soft);
}

/* pied : pagination en pastilles */
.c2c-ui .box > .panel-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--c2c-line-soft);
    border-radius: 0 0 12px 12px;
    background: transparent;
}
/* pied vide (une seule page, pas de 'footer' configuré) : 59 px blancs sous le tableau */
.c2c-ui .box > .panel-footer:not(:has(.pagination)):not(:has(> :not(.kv-panel-pager, .clearfix))) {
    display: none;
}
.c2c-ui .kv-panel-pager .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
}
.c2c-ui .kv-panel-pager .pagination > li > a,
.c2c-ui .kv-panel-pager .pagination > li > span {
    min-width: 32px;
    margin: 0;
    padding: 5px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-weight: 600;
    color: var(--c2c-text);
    text-align: center;
}
.c2c-ui .kv-panel-pager .pagination > li > a:hover,
.c2c-ui .kv-panel-pager .pagination > li > a:focus {
    background: var(--c2c-soft);
    color: var(--c2c-ink);
}
.c2c-ui .kv-panel-pager .pagination > .active > a,
.c2c-ui .kv-panel-pager .pagination > .active > span,
.c2c-ui .kv-panel-pager .pagination > .active > a:hover,
.c2c-ui .kv-panel-pager .pagination > .active > span:hover,
.c2c-ui .kv-panel-pager .pagination > .active > a:focus {
    background: var(--c2c-blue-soft);
    color: var(--c2c-blue-dark);
}
.c2c-ui .kv-panel-pager .pagination > .disabled > a,
.c2c-ui .kv-panel-pager .pagination > .disabled > span,
.c2c-ui .kv-panel-pager .pagination > .disabled > a:hover {
    background: transparent;
    color: #9aa5b4;
}

/* ------------------------------------------------------------------ */
/* Formulaires (hauteurs Bootstrap gardées pour rester alignées avec  */
/* Select2, les groupes et les sélecteurs de date)                    */
/* ------------------------------------------------------------------ */
.c2c-ui .form-control {
    border-color: #cfdae6;
    border-radius: 8px;
    box-shadow: none;
    color: var(--c2c-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.c2c-ui .form-control:focus {
    border-color: #9cc3e6;
    box-shadow: 0 0 0 3px rgba(47, 127, 193, .15);
}
.c2c-ui .form-control[disabled],
.c2c-ui .form-control[readonly] {
    background-color: var(--c2c-soft);
    color: var(--c2c-muted);
}
.c2c-ui .control-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--c2c-ink);
}
.c2c-ui .help-block,
.c2c-ui .hint-block {
    font-size: 12px;
    color: var(--c2c-muted);
}
.c2c-ui .form-group.has-error .form-control {
    border-color: #d92d20;
}
.c2c-ui .form-group.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .15);
}
.c2c-ui .form-group.has-error .control-label,
.c2c-ui .form-group.has-error .help-block {
    color: #b42318;
}
/* champ validé : AdminLTE passe libellé et bordure en vert après chaque saisie ; seule
   l'erreur se signale */
.c2c-ui .form-group.has-success .control-label {
    color: var(--c2c-ink);
}
.c2c-ui .form-group.has-success label:not(.control-label),
.c2c-ui .form-group.has-success .help-block {
    color: inherit;
}
.c2c-ui .form-group.has-success .form-control,
.c2c-ui .form-group.has-success .input-group-addon {
    border-color: #cfdae6;
}
.c2c-ui .form-group.has-success .form-control:focus {
    border-color: #9cc3e6;
    box-shadow: 0 0 0 3px rgba(47, 127, 193, .15);
}
/* résumé des erreurs ($form->errorSummary) : alerte douce rouge */
.c2c-ui .error-summary {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #fecdca;
    border-radius: 12px;
    background: #fef3f2;
    font-size: 13px;
    color: #912018;
}
.c2c-ui .row > .error-summary {
    margin-right: 15px; /* posé directement dans une .row (fiche adhérent) */
    margin-left: 15px;
}
.c2c-ui .error-summary p {
    margin: 0 0 4px;
    font-weight: 700;
}
.c2c-ui .error-summary ul {
    margin: 0;
    padding-left: 18px;
}
/* groupes avec un addon : seuls les coins extérieurs s'arrondissent */
.c2c-ui .input-group-addon {
    border-color: #cfdae6;
    background: var(--c2c-soft);
    color: var(--c2c-muted);
}
.c2c-ui .input-group-addon:first-child {
    border-radius: 8px 0 0 8px;
}
.c2c-ui .input-group-addon:last-child {
    border-radius: 0 8px 8px 0;
}
/* Select2 (thème krajee par défaut, bootstrap sur quelques vues) : le champ seulement,
   la liste ouverte est attachée au <body> et garde son thème */
.c2c-ui .select2-container .select2-selection {
    border-color: #cfdae6;
    border-radius: 8px;
}
.c2c-ui .select2-container.select2-container--focus .select2-selection,
.c2c-ui .select2-container.select2-container--open .select2-selection {
    border-color: #9cc3e6;
    box-shadow: 0 0 0 3px rgba(47, 127, 193, .15);
}
/* choix multiple : une étiquette longue (nom d'équipe) passe à la ligne au lieu de déborder du
   champ, sous le × de retrait qui flotte à droite */
.c2c-ui .select2-container .select2-selection--multiple .select2-selection__rendered,
.c2c-ui .select2-container .select2-selection--multiple .select2-selection__choice {
    white-space: normal;
}
.c2c-ui .select2-container .select2-selection--multiple .select2-selection__choice {
    max-width: 100%;
}
/* bouton « tout retirer » (allowClear), posé en absolu à droite : il chevauchait le × de la
   première étiquette quand elle occupe toute la ligne (colonne étroite) ; sa place est réservée */
.c2c-ui .select2-container .select2-selection--multiple .select2-selection__rendered:has(> .select2-selection__clear) {
    padding-right: 24px;
}

/* ------------------------------------------------------------------ */
/* Fenêtres BootstrapDialog (kartik Dialog)                           */
/* ------------------------------------------------------------------ */
/* créées en JavaScript et attachées au <body>, hors de la racine : visées par
   body:has(.c2c-ui), donc sur les écrans migrés seulement (Mes adhérents : mails, bordereau,
   confirmation de l'export Excel). Modèle : la fenêtre de l'appli sur l'accueil, sans dégradé ;
   l'en-tête perd l'aplat de couleur du type (info, warning…), le bouton d'action garde la sienne.
   Plus spécifiques que bootstrap-dialog-bs3.css (.bootstrap-dialog.type-info .modal-header,
   .size-large qui passe le titre à 24 px et le texte à 18 px) */
body:has(.c2c-ui) .bootstrap-dialog .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .45);
}
body:has(.c2c-ui) .bootstrap-dialog .modal-header {
    padding: 20px 26px 8px;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: #fff;
}
body:has(.c2c-ui) .bootstrap-dialog .bootstrap-dialog-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c2c-ink);
}
body:has(.c2c-ui) .bootstrap-dialog .bootstrap-dialog-close-button {
    font-size: 24px;
    opacity: 1;
}
body:has(.c2c-ui) .bootstrap-dialog .bootstrap-dialog-close-button .close {
    font-size: inherit;
    line-height: 1;
    color: var(--c2c-muted);
    text-shadow: none;
    opacity: .7;
}
body:has(.c2c-ui) .bootstrap-dialog .bootstrap-dialog-close-button .close:hover,
body:has(.c2c-ui) .bootstrap-dialog .bootstrap-dialog-close-button .close:focus {
    color: var(--c2c-ink);
    opacity: 1;
}
body:has(.c2c-ui) .bootstrap-dialog .modal-body {
    padding: 12px 26px 22px;
}
body:has(.c2c-ui) .bootstrap-dialog .bootstrap-dialog-message {
    font-size: 14px;
    line-height: 1.5;
    color: var(--c2c-text);
}
/* liens du message (bordereaux de la sélection) : bleu foncé, lisible en petit corps */
body:has(.c2c-ui) .bootstrap-dialog .bootstrap-dialog-message a {
    font-weight: 600;
    color: var(--c2c-blue-dark);
}
body:has(.c2c-ui) .bootstrap-dialog .bootstrap-dialog-message a:hover,
body:has(.c2c-ui) .bootstrap-dialog .bootstrap-dialog-message a:focus {
    color: var(--c2c-blue);
}
body:has(.c2c-ui) .bootstrap-dialog .modal-footer {
    padding: 12px 26px;
    border-top: 1px solid var(--c2c-line-soft);
    border-radius: 0 0 14px 14px;
    background: #fafbfc;
}
/* boutons : mêmes formes que dans la racine, bouton blanc pour btn-default */
body:has(.c2c-ui) .bootstrap-dialog .btn {
    border-radius: 8px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body:has(.c2c-ui) .bootstrap-dialog .btn:focus-visible {
    outline: 3px solid rgba(47, 127, 193, .35);
    outline-offset: 1px;
}
/* en grande taille, BootstrapDialog passe ses boutons en btn-lg (18 px) */
body:has(.c2c-ui) .bootstrap-dialog .btn-lg {
    padding: 7px 14px;
    font-size: 14px;
    line-height: 1.43;
}
body:has(.c2c-ui) .bootstrap-dialog .btn-primary,
body:has(.c2c-ui) .bootstrap-dialog .btn-success,
body:has(.c2c-ui) .bootstrap-dialog .btn-warning,
body:has(.c2c-ui) .bootstrap-dialog .btn-danger {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}
body:has(.c2c-ui) .bootstrap-dialog .btn-default {
    border-color: #e3e8ef;
    background-color: #fff;
    color: #374151;
}
body:has(.c2c-ui) .bootstrap-dialog .btn-default:hover,
body:has(.c2c-ui) .bootstrap-dialog .btn-default:focus,
body:has(.c2c-ui) .bootstrap-dialog .btn-default:active {
    border-color: #cfdae6;
    background-color: var(--c2c-soft);
    color: var(--c2c-ink);
}
/* zone de texte (adresses à copier ; largeur en ligne, posée par le contrôleur) */
body:has(.c2c-ui) .bootstrap-dialog textarea {
    display: block;
    min-height: 160px;
    padding: 8px 10px;
    border: 1px solid #cfdae6;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--c2c-ink);
    resize: vertical;
}
body:has(.c2c-ui) .bootstrap-dialog textarea:focus {
    border-color: #9cc3e6;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(47, 127, 193, .15);
}

@media (prefers-reduced-motion: reduce) {
    .c2c-ui .btn,
    .c2c-ui .form-control,
    .c2c-ui .nav-tabs:not(.nav-tabs-custom > .nav-tabs) > li > a,
    .c2c-ui .kv-grid-table > tbody > tr > td.skip-export > a,
    body:has(.c2c-ui) .bootstrap-dialog .btn {
        transition: none;
    }
}