/**
 * Academy — UI moderne (partagé)
 * Composants préfixés .ft- (en-tête de page, fil d’Ariane, cartes, tableaux).
 * Inclure après bootstrap + custom.css : <link rel="stylesheet" href="css/ui-modern.css" />
 */

/* ---------- En-tête de page & fil d’Ariane ---------- */

.ft-page-head {
   margin-bottom: 1.25rem;
   padding: 1rem 0 0.25rem 0;
}

.ft-breadcrumb {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.35rem 0.5rem;
   font-size: 0.8125rem;
   margin-bottom: 0.35rem;
}

.ft-breadcrumb__link {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   color: #64748b !important;
   text-decoration: none !important;
   font-weight: 500;
   transition: color 0.15s ease;
}

.ft-breadcrumb__link:hover {
   color: #2563eb !important;
}

.ft-breadcrumb__link .fa {
   font-size: 0.9em;
   opacity: 0.85;
}

.ft-breadcrumb__sep {
   color: #cbd5e1;
   font-weight: 600;
   user-select: none;
   font-size: 0.75rem;
}

.ft-breadcrumb__current {
   color: #0f172a;
   font-weight: 600;
}

.ft-page-title {
   margin: 0;
   font-size: 1.65rem;
   font-weight: 700;
   letter-spacing: -0.02em;
   color: #0f172a;
   line-height: 1.2;
}

.ft-page-title__sub {
   margin: 0.35rem 0 0 0;
   font-size: 0.9rem;
   color: #64748b;
   font-weight: 400;
   max-width: 42rem;
}

@media (max-width: 575px) {
   .ft-page-title {
      font-size: 1.35rem;
   }
}

/* ---------- Cartes & listes ---------- */

.ft-card {
   background: #fff;
   border-radius: 14px;
   box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
   border: 1px solid rgba(15, 23, 42, 0.06);
   overflow: hidden;
   margin-bottom: 1.5rem;
}

/* Menus déroulants (ex. Actions) : éviter que overflow:hidden masque le menu */
.ft-card.ft-card--overflow-visible {
   overflow: visible;
}

/* Candidats : le wrapper .table-responsive coupe les dropdowns sans ce correctif */
.ft-card.ft-card--overflow-visible .ft-cand-table-responsive.table-responsive {
   overflow: visible !important;
}

.ft-cand-table-responsive .dropdown {
   position: relative;
}

.ft-cand-table-responsive .dropdown-menu.show {
   display: block;
   z-index: 1060;
   /* position/top/left gérés en JS (fixed) pour rester dans le viewport */
}

.ft-cand-table-responsive .dropdown-menu {
   min-width: 11rem;
   max-width: min(18rem, calc(100vw - 1rem));
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
   border: 1px solid #e2e8f0;
   border-radius: 10px;
}

.ft-toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 1.1rem 1.35rem;
   background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
   border-bottom: 1px solid #e2e8f0;
}

.ft-toolbar__title {
   margin: 0;
   font-size: 1.15rem;
   font-weight: 700;
   color: #0f172a;
}

.ft-toolbar__hint {
   margin: 0.15rem 0 0 0;
   font-size: 0.8rem;
   color: #64748b;
}

.ft-toolbar__actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
}

.ft-btn-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 10px;
   background: #fff;
   border: 1px solid #e2e8f0;
   color: #475569 !important;
   transition: background 0.15s, border-color 0.15s;
}

.ft-btn-icon:hover {
   background: #f8fafc;
   border-color: #cbd5e1;
   color: #0f172a !important;
}

.ft-btn-add {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   border-radius: 10px;
   padding: 0.5rem 1rem;
   font-weight: 600;
   font-size: 0.9rem;
   background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
   color: #fff !important;
   border: none !important;
   box-shadow: 0 2px 12px rgba(37, 99, 235, 0.35);
}

.ft-btn-add:hover {
   filter: brightness(1.06);
   color: #fff !important;
}

/* Toolbar sur 2 lignes (ex. candidats.html) */
.ft-toolbar.ft-toolbar--stack {
   flex-direction: column;
   align-items: stretch;
   gap: 0;
}

.ft-toolbar__row {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: space-between;
   gap: 1rem;
   width: 100%;
}

.ft-toolbar__sub {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.65rem 1rem;
   padding-top: 0.85rem;
   margin-top: 0.85rem;
   border-top: 1px solid #e2e8f0;
}

.ft-toolbar-date-input {
   width: auto;
   min-width: 10.5rem;
   max-width: 220px;
   border-radius: 10px !important;
   border: 1px solid #cbd5e1 !important;
   font-size: 0.875rem;
   padding: 0.45rem 0.75rem;
}

.ft-paiement-total {
   margin-left: auto;
}

/* Liste formateurs (formation_add.html) */
.ft-formation-formateur-box {
   max-width: 100%;
   width: 100%;
   max-height: 420px;
   min-height: 160px;
   overflow: auto;
   padding: 0.65rem 0.75rem;
   border: 1px solid #e2e8f0;
   border-radius: 10px;
   background: #f8fafc;
}

.ft-formation-formateur-box .ft-formation-formateur-table {
   margin-bottom: 0;
   font-size: 0.875rem;
}

.ft-formation-formateur-box .ft-formation-formateur-input {
   max-width: 7.5rem;
   border-radius: 8px;
}

/* Fiche formation (formation_info.html) */
.ft-formation-info-card .ft-formation-info-body {
   padding: 0 1.35rem 1.35rem;
}

@media (max-width: 767px) {
   .ft-formation-info-card .ft-formation-info-body {
      padding: 0 1rem 1.25rem;
   }
}

.ft-formation-info-title {
   margin: 0;
   font-size: 1.5rem;
   font-weight: 700;
   color: #0f172a;
   letter-spacing: -0.02em;
}

.ft-formation-info-list li {
   padding: 0.35rem 0;
   font-size: 0.9375rem;
   color: #334155;
   border-bottom: 1px solid #f1f5f9;
}

.ft-formation-info-list li:last-child {
   border-bottom: none;
}

.ft-formation-info-section {
   margin-top: 1.75rem;
   padding-top: 1.25rem;
   border-top: 1px solid #e2e8f0;
}

.ft-formation-info-section__title {
   margin: 0 0 0.85rem 0;
   font-size: 1.05rem;
   font-weight: 700;
   color: #0f172a;
}

.ft-formation-info-formateurs {
   height: 100%;
}

@media (min-width: 768px) {
   .ft-formation-info-summary > .col-md-4 ~ .col-md-4 {
      border-left: 1px solid #e2e8f0;
      padding-left: 0.85rem;
   }
}

.ft-formation-info-formateurs__table {
   max-height: 280px;
   overflow: auto;
}

.ft-formation-info-formateurs__table table.ft-table {
   margin-bottom: 0;
   font-size: 0.8125rem;
}

.ft-formation-info-formateurs__table table.ft-table thead th {
   padding: 0.55rem 0.45rem;
   font-size: 0.62rem;
}

.ft-formation-info-formateurs__table table.ft-table tbody td {
   padding: 0.5rem 0.45rem;
}

.ft-cand-filters {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   flex-wrap: wrap;
}

.ft-cand-label {
   margin: 0;
   font-size: 0.8rem;
   font-weight: 600;
   color: #64748b;
   white-space: nowrap;
}

.ft-cand-select {
   min-width: 200px;
   max-width: 100%;
   border-radius: 8px !important;
   border: 1px solid #cbd5e1 !important;
   font-size: 0.875rem;
}

.ft-stat-pill {
   display: inline-flex;
   align-items: center;
   padding: 0.35rem 0.75rem;
   border-radius: 999px;
   font-size: 0.78rem;
   font-weight: 700;
   white-space: nowrap;
}

.ft-stat-pill--total {
   background: #f1f5f9;
   color: #334155;
}

.ft-stat-pill--active {
   background: #d1fae5;
   color: #065f46;
}

.ft-stat-pill--annul {
   background: #fee2e2;
   color: #991b1b;
}

.ft-cand-search {
   display: flex;
   align-items: center;
   gap: 0.35rem;
   flex: 1 1 200px;
   min-width: 180px;
   max-width: 340px;
}

.ft-cand-search .form-control {
   border-radius: 8px !important;
   border: 1px solid #cbd5e1 !important;
   font-size: 0.875rem;
}

/*
 * Loupe recherche : bouton dédié sans .ft-btn-icon (évite background #fff de .ft-btn-icon).
 * Même esprit que .ft-btn-add.
 */
.ft-cand-search button.ft-btn-search,
#content .midde_cont .ft-cand-search button.ft-btn-search {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   width: 2.5rem;
   height: 2.5rem;
   padding: 0 !important;
   margin: 0;
   border: none !important;
   border-radius: 10px;
   cursor: pointer;
   background-color: #2563eb !important;
   background-image: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
   color: #fff !important;
   box-shadow: 0 2px 12px rgba(37, 99, 235, 0.35) !important;
   -webkit-appearance: none;
   appearance: none;
   flex-shrink: 0;
}

.ft-cand-search button.ft-btn-search .fa,
#content .midde_cont .ft-cand-search button.ft-btn-search .fa {
   color: #fff !important;
   font-size: 0.95rem;
   line-height: 1;
}

.ft-cand-search button.ft-btn-search:hover,
.ft-cand-search button.ft-btn-search:focus,
#content .midde_cont .ft-cand-search button.ft-btn-search:hover,
#content .midde_cont .ft-cand-search button.ft-btn-search:focus {
   filter: brightness(1.06);
   color: #fff !important;
   background-color: #1d4ed8 !important;
   background-image: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
}

.ft-cand-pagination {
   display: flex;
   align-items: center;
   gap: 0.35rem;
   list-style: none;
   padding: 0;
   margin: 0;
   margin-left: auto;
}

.ft-cand-pageinfo {
   font-size: 0.8rem;
   color: #64748b;
   font-weight: 600;
   margin-right: 0.25rem;
}

.ft-cand-pagination .np-btn {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   width: 2.25rem;
   height: 2.25rem;
   border-radius: 8px;
   background: #fff;
   border: 1px solid #e2e8f0;
   color: #475569 !important;
}

.ft-cand-pagination .np-btn:hover {
   background: #f8fafc;
   border-color: #cbd5e1;
}

.ft-card-footer {
   padding: 0.75rem 1rem 1rem;
   background: #fafbfc;
   border-top: 1px solid #f1f5f9;
}

.ft-row--warn {
   background-color: rgba(246, 151, 131, 0.38) !important;
}

.ft-row--warn:hover {
   background-color: rgba(246, 151, 131, 0.52) !important;
}

.ft-phone-link {
   color: #2563eb !important;
   text-decoration: none !important;
   font-weight: 500;
}

.ft-phone-link:hover {
   text-decoration: underline !important;
}

.ft-table-responsive {
   padding: 0;
}

.ft-table.table {
   width: 100%;
   margin-bottom: 0;
   border-collapse: separate;
   border-spacing: 0;
   font-size: 0.9rem;
   border: none;
}

.ft-table.table thead th,
.ft-table.table tbody td {
   border-top: none;
}

.ft-table thead th {
   background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6a 100%);
   color: #fff;
   font-weight: 600;
   font-size: 0.68rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   padding: 0.9rem 1rem;
   border: none;
   vertical-align: middle;
   white-space: nowrap;
}

.ft-table thead th:first-child {
   padding-left: 1.25rem;
}

.ft-table thead th:last-child {
   padding-right: 1.25rem;
}

.ft-table tbody td {
   padding: 0.85rem 1rem;
   border-bottom: 1px solid #f1f5f9;
   vertical-align: middle;
   color: #334155;
}

.ft-table tbody td:first-child {
   padding-left: 1.25rem;
}

.ft-table tbody td:last-child {
   padding-right: 1.25rem;
}

.ft-table tbody tr.ft-row:hover {
   background: #f8fafc;
}

.ft-table tbody tr:last-child td {
   border-bottom: none;
}

.ft-id {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 2.25rem;
   padding: 0.25rem 0.6rem;
   background: #e0e7ff;
   color: #3730a3;
   border-radius: 8px;
   font-weight: 700;
   font-size: 0.82rem;
}

.ft-name-link {
   font-weight: 600;
   color: #2563eb !important;
   text-decoration: none !important;
}

.ft-name-link:hover {
   color: #1d4ed8 !important;
   text-decoration: underline !important;
}

.ft-name-text {
   font-weight: 600;
   color: #0f172a;
}

.ft-cell-muted {
   color: #64748b;
   font-size: 0.88rem;
}

.ft-badge-num {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 2rem;
   padding: 0.2rem 0.65rem;
   background: #ecfdf5;
   color: #047857;
   border-radius: 999px;
   font-weight: 700;
   font-size: 0.85rem;
}

.ft-badge-neutral {
   background: #f1f5f9;
   color: #475569;
}

.ft-dropdown-btn {
   border-radius: 8px !important;
   font-weight: 600;
   font-size: 0.8rem;
   padding: 0.35rem 0.75rem !important;
   border: 1px solid #cbd5e1 !important;
   background: #fff !important;
   color: #334155 !important;
}

.ft-dropdown-btn:hover,
.ft-dropdown-btn:focus {
   background: #f8fafc !important;
   color: #0f172a !important;
}

/* Icônes dans le menu Actions (table formateurs, etc.) */
.ft-dropdown-item i {
   display: inline-block;
   width: 1.35rem;
   margin-right: 0.5rem;
   text-align: center;
   color: #64748b;
}

.ft-empty {
   text-align: center;
   padding: 2.5rem 1rem !important;
   color: #94a3b8;
   font-size: 0.95rem;
}

@media (max-width: 991px) {
   .ft-table thead th,
   .ft-table tbody td {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      font-size: 0.82rem;
   }
}

/* =============================================================================
   Relooking global — pages qui utilisent encore le HTML du thème d’origine
   (white_shd, table.table, thead-dark). Aucune classe .ft- requise.
   Limité à #content .midde_cont pour ne pas toucher login / pages hors layout.
   ============================================================================= */

#content .midde_cont .white_shd {
   border-radius: 14px;
   box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
   border: 1px solid rgba(15, 23, 42, 0.06);
   overflow: hidden;
   background: #fff;
}

#content .midde_cont .page_title h2 {
   font-size: 1.35rem;
   font-weight: 700;
   color: #0f172a;
   margin: 0 0 0.25rem 0;
   line-height: 1.3;
}

#content .midde_cont .page_title h2 a {
   color: #2563eb !important;
   text-decoration: none !important;
   font-weight: 600;
}

#content .midde_cont .page_title h2 a:hover {
   text-decoration: underline !important;
   color: #1d4ed8 !important;
}

/* Barre au-dessus des tableaux (ex- mail-option) : même esprit que .ft-toolbar */
#content .midde_cont .ft-card .mail-option,
#content .midde_cont .table_section.padding_infor_info .mail-option {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem 1rem;
   padding: 1rem 1.25rem;
   background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
   border-bottom: 1px solid #e2e8f0;
}

#content .midde_cont .ft-card .mail-option .btn-group,
#content .midde_cont .table_section.padding_infor_info .mail-option .btn-group {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
}

#content .midde_cont table.table {
   margin-bottom: 0;
   border-collapse: separate;
   border-spacing: 0;
   font-size: 0.9rem;
   border: none;
}

#content .midde_cont table.table thead th,
#content .midde_cont table.table thead.thead-dark th {
   background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6a 100%) !important;
   color: #fff !important;
   font-weight: 600;
   font-size: 0.68rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 0.85rem 0.75rem;
   border: none !important;
   vertical-align: middle;
}

#content .midde_cont table.table tbody td {
   padding: 0.75rem 0.75rem;
   border-top: none !important;
   border-bottom: 1px solid #f1f5f9;
   vertical-align: middle;
   color: #334155;
}

#content .midde_cont table.table tbody tr:hover {
   background: #f8fafc;
}

#content .midde_cont table.table tbody tr:last-child td {
   border-bottom: none;
}

@media (max-width: 991px) {
   #content .midde_cont table.table thead th,
   #content .midde_cont table.table tbody td {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      font-size: 0.82rem;
   }
}

/* ---------- Formulaires (pages ajout / fiche) ---------- */

.ft-form-body {
   padding: 1.35rem 1.35rem 1.5rem;
}

@media (max-width: 767px) {
   .ft-form-body {
      padding: 1rem 1rem 1.25rem;
   }
}

/* Carré fixe + object-fit : sans cela, img-fluid (height:auto) donne une ellipse avec rounded-circle */
.ft-form-avatar {
   width: 140px;
   height: 140px;
   max-width: 140px;
   min-width: 140px;
   min-height: 140px;
   border: 3px solid #e2e8f0;
   border-radius: 50%;
   box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
   object-fit: cover;
   object-position: center;
   flex-shrink: 0;
}

.ft-form-body .form-group label {
   font-weight: 600;
   font-size: 0.875rem;
   color: #334155;
   margin-bottom: 0.35rem;
}

.ft-form-body .form-control {
   border-radius: 10px;
   border: 1px solid #e2e8f0;
   padding: 0.55rem 0.85rem;
   font-size: 0.9375rem;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ft-form-body .form-control:focus {
   border-color: #2563eb;
   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.ft-form-body textarea.form-control {
   min-height: 6rem;
   resize: vertical;
}

.ft-form-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
   gap: 0.75rem;
   margin-top: 0.5rem;
   padding-top: 1.25rem;
   border-top: 1px solid #f1f5f9;
}

.ft-btn-save {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.45rem;
   min-width: 160px;
   padding: 0.6rem 1.25rem;
   font-weight: 600;
   font-size: 0.9rem;
   border-radius: 10px;
   border: none;
   background: linear-gradient(135deg, #2563eb, #1d4ed8);
   color: #fff !important;
   box-shadow: 0 2px 12px rgba(37, 99, 235, 0.35);
   cursor: pointer;
   transition: filter 0.15s ease;
}

.ft-btn-save:hover {
   filter: brightness(1.06);
   color: #fff !important;
}

.ft-form-status {
   text-align: center;
   margin-top: 1rem;
}

.ft-form-status #saving {
   font-size: 0.8125rem;
   color: #059669;
}

.ft-form-status #erreur {
   margin-top: 0.35rem;
}

/* ---------- Modales (formulaires) ---------- */

.modal.ft-modal .modal-content {
   border: none;
   border-radius: 14px;
   box-shadow: 0 12px 48px rgba(15, 23, 42, 0.2);
   overflow: hidden;
}

.modal.ft-modal .modal-header.ft-modal__header {
   flex-wrap: nowrap;
   align-items: flex-start;
   gap: 1rem;
   padding: 1.15rem 1.35rem;
   background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
   border-bottom: 1px solid #e2e8f0;
}

.modal.ft-modal .ft-modal__head-text {
   flex: 1;
   min-width: 0;
}

.modal.ft-modal .ft-modal__title {
   margin: 0;
   font-size: 1.2rem;
   font-weight: 700;
   color: #0f172a;
   letter-spacing: -0.02em;
}

.modal.ft-modal .ft-modal__hint {
   margin: 0.35rem 0 0 0;
   font-size: 0.8125rem;
   color: #64748b;
   line-height: 1.45;
   max-width: 36rem;
}

.modal.ft-modal .ft-modal__close {
   margin: 0;
   padding: 0.35rem 0.5rem;
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1;
   color: #64748b;
   opacity: 1;
   text-shadow: none;
}

.modal.ft-modal .ft-modal__close:hover {
   color: #0f172a;
}

.modal.ft-modal .modal-body.ft-modal__body {
   padding: 1.35rem 1.35rem 1rem;
}

.modal.ft-modal .modal-body .form-group label {
   font-weight: 600;
   font-size: 0.875rem;
   color: #334155;
   margin-bottom: 0.35rem;
}

.modal.ft-modal .ft-modal__control {
   border-radius: 10px;
   border: 1px solid #e2e8f0;
   padding: 0.55rem 0.85rem;
   font-size: 0.9375rem;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modal.ft-modal .ft-modal__control:focus {
   border-color: #2563eb;
   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.modal.ft-modal .modal-footer.ft-modal__footer {
   padding: 1rem 1.35rem 1.25rem;
   border-top: 1px solid #f1f5f9;
   background: #fafbfc;
   gap: 0.5rem;
}

.modal.ft-modal .ft-modal__btn-cancel {
   border-radius: 10px;
   padding: 0.5rem 1.1rem;
   font-weight: 600;
   font-size: 0.875rem;
   border: 1px solid #e2e8f0;
   background: #fff;
   color: #475569 !important;
}

.modal.ft-modal .ft-modal__btn-cancel:hover {
   background: #f8fafc;
   border-color: #cbd5e1;
   color: #0f172a !important;
}

.modal.ft-modal .ft-modal__btn-submit {
   border-radius: 10px;
   padding: 0.5rem 1.15rem;
   font-weight: 600;
   font-size: 0.875rem;
   border: none;
   background: linear-gradient(135deg, #2563eb, #1d4ed8);
   color: #fff !important;
   box-shadow: 0 2px 12px rgba(37, 99, 235, 0.35);
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
}

.modal.ft-modal .ft-modal__btn-submit:hover {
   filter: brightness(1.06);
   color: #fff !important;
}

/* ---------- Fiche candidat — formations (fonds dynamiques conservés en inline style) ---------- */

.ft-cand-formations-page-title {
   font-size: 0.88rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: #64748b;
}

.ft-cand-formation-shell .ft-cand-formation-card {
   border: 1px solid rgba(15, 23, 42, 0.1);
   border-radius: 14px;
   padding: 1.25rem 1.35rem;
   margin-bottom: 1.25rem;
   box-shadow: 0 4px 20px rgba(15, 23, 42, 0.07);
}

.ft-cand-formation-shell .ft-cand-formation-card:last-child {
   margin-bottom: 0;
}

.ft-cand-formation-shell .ft-cand-formation-card__head {
   margin-bottom: 1rem;
   padding-bottom: 0.75rem;
   border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.ft-cand-formation-shell .ft-cand-formation-card__title {
   margin: 0;
   font-size: 1.28rem;
   font-weight: 700;
   color: #0f172a;
   line-height: 1.35;
}

.ft-cand-formation-shell .ft-cand-formation-card__title a {
   color: inherit;
   text-decoration: none;
}

.ft-cand-formation-shell .ft-cand-formation-card__title a:hover {
   color: #1d4ed8;
}

.ft-cand-formation-shell .ft-cand-formation-details {
   font-size: 0.94rem;
   color: #1e293b;
   line-height: 1.7;
}

.ft-cand-formation-shell .ft-cand-formation-details strong {
   font-weight: 600;
   color: #0f172a;
}

.ft-cand-formation-shell .ft-cand-formation-details__price-link {
   color: #1d4ed8;
   font-weight: 600;
   text-decoration: none;
}

.ft-cand-formation-shell .ft-cand-formation-details__price-link:hover {
   text-decoration: underline;
}

.ft-cand-formation-shell .ft-cand-formation-details .ft-cand-reste {
   color: #dc3545;
   font-weight: 700;
}

.ft-cand-formation-shell .ft-cand-formation-payments {
   margin-top: 1.15rem;
}

.ft-cand-formation-shell .ft-cand-formation-payments__title {
   font-size: 0.78rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: #64748b;
   margin: 0 0 0.7rem 0;
}

.ft-cand-formation-shell .ft-cand-formation-layout {
   display: grid;
   grid-template-columns: 1fr minmax(200px, 280px);
   gap: 1.25rem;
   align-items: start;
}

@media (max-width: 991px) {
   .ft-cand-formation-shell .ft-cand-formation-layout {
      grid-template-columns: 1fr;
   }
}

.ft-cand-formation-shell .ft-cand-month-panel {
   background: rgba(255, 255, 255, 0.55);
   border: 1px solid rgba(15, 23, 42, 0.08);
   border-radius: 12px;
   padding: 0.85rem 0.9rem;
   backdrop-filter: blur(4px);
}

.ft-cand-formation-shell .ft-cand-formation-month-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 0.55rem;
   align-items: flex-start;
   justify-content: flex-start;
}

.ft-cand-formation-shell .ft-cand-month-btn {
   --ft-month-bg: #dc3545;
   --ft-month-fg: #fff;
   border: 2px solid rgba(255, 255, 255, 0.35);
   border-radius: 12px;
   padding: 0.5rem 0.75rem;
   min-width: 6rem;
   min-height: 3.35rem;
   cursor: pointer;
   font-size: 0.88rem;
   font-weight: 700;
   line-height: 1.25;
   background-color: var(--ft-month-bg) !important;
   color: var(--ft-month-fg) !important;
   box-shadow: 0 2px 0 rgba(15, 23, 42, 0.12), 0 4px 14px rgba(15, 23, 42, 0.1);
   transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
   white-space: normal;
   text-align: center;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   vertical-align: top;
}

.ft-cand-formation-shell .ft-cand-month-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 3px 0 rgba(15, 23, 42, 0.1), 0 8px 20px rgba(15, 23, 42, 0.14);
   filter: brightness(1.03);
}

.ft-cand-formation-shell .ft-cand-month-btn:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45), 0 4px 14px rgba(15, 23, 42, 0.12);
}

.ft-cand-formation-shell .ft-cand-month-btn--muted {
   border-color: rgba(15, 23, 42, 0.12);
   box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.ft-cand-formation-shell .ft-cand-month-btn__name {
   display: block;
   width: 100%;
   letter-spacing: 0.02em;
}

.ft-cand-formation-shell .ft-cand-month-btn__amt {
   display: block;
   width: 100%;
   font-size: 0.74rem;
   font-weight: 600;
   opacity: 0.92;
   margin-top: 0.2rem;
   line-height: 1.2;
}

.ft-cand-formation-shell .ft-cand-formation-actions {
   display: flex;
   flex-direction: column;
   gap: 0;
   background: rgba(255, 255, 255, 0.45);
   border: 1px solid rgba(15, 23, 42, 0.08);
   border-radius: 12px;
   padding: 0.85rem 0.9rem;
}

.ft-cand-formation-shell .ft-cand-formation-actions__title {
   font-size: 0.78rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: #64748b;
   margin: 0 0 0.65rem 0;
}

.ft-cand-formation-shell .ft-cand-action-stack {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.ft-cand-formation-shell .ft-cand-action-btn {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   gap: 0.65rem;
   width: 100%;
   margin: 0;
   padding: 0.55rem 0.85rem;
   border: none;
   border-radius: 12px;
   font-size: 0.8125rem;
   font-weight: 600;
   line-height: 1.35;
   text-align: left;
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
   transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
   color: #fff !important;
}

.ft-cand-formation-shell .ft-cand-action-btn:hover {
   transform: translateY(-1px);
   filter: brightness(1.05);
   box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
   color: #fff !important;
}

.ft-cand-formation-shell .ft-cand-action-btn:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35), 0 4px 14px rgba(15, 23, 42, 0.12);
   color: #fff !important;
}

.ft-cand-formation-shell .ft-cand-action-btn__icon {
   flex: 0 0 auto;
   width: 2.1rem;
   height: 2.1rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.2);
   font-size: 0.95rem;
}

.ft-cand-formation-shell .ft-cand-action-btn__text {
   flex: 1;
   min-width: 0;
}

.ft-cand-formation-shell .ft-cand-action-btn--unlink {
   background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}

.ft-cand-formation-shell .ft-cand-action-btn--leave {
   background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
}

.ft-cand-formation-shell .ft-cand-action-btn--note {
   background: linear-gradient(135deg, #f59e0b, #d97706) !important;
   color: #fff !important;
}

.ft-cand-formation-shell .ft-cand-formation-remark {
   margin-top: 1rem;
   padding-top: 1rem;
   border-top: 1px dashed rgba(15, 23, 42, 0.14);
}

.ft-cand-formation-shell .ft-cand-formation-remark__label {
   font-size: 0.72rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: #dc3545;
   margin: 0 0 0.35rem 0;
}

.ft-cand-formation-shell .ft-cand-formation-remark__text {
   font-size: 0.94rem;
   color: #0f172a;
   font-weight: 600;
   margin: 0;
   word-break: break-word;
}