/* ============================================================
   TOASTS — notifications flottantes (charte ACB)
   ============================================================ */
.tf-toast-stack {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10500;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 420px;
    width: calc(100% - 48px);
    pointer-events: none;
}
.tf-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 44px 16px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(26, 77, 143, 0.18), 0 2px 8px rgba(0,0,0,0.06);
    pointer-events: auto;
    overflow: hidden;
    border-left: 5px solid #1a4d8f;
    animation: tfToastIn 0.45s cubic-bezier(0.22, 1.2, 0.36, 1) both;
    transition: transform 0.35s, opacity 0.35s;
}
.tf-toast.tf-toast--leaving {
    transform: translateX(110%);
    opacity: 0;
}
.tf-toast__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.tf-toast__body { flex: 1; min-width: 0; }
.tf-toast__title {
    font-weight: 700;
    font-size: 14px;
    color: #1a4d8f;
    margin-bottom: 2px;
    letter-spacing: 0.3px;
}
.tf-toast__msg {
    font-size: 14px;
    line-height: 1.5;
    color: #5a6b80;
    word-wrap: break-word;
}
.tf-toast__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    color: #9aa6b8;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.tf-toast__close:hover {
    background: #f0f3f7;
    color: #1a4d8f;
}
.tf-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, currentColor, transparent);
    transform-origin: left center;
    animation: tfToastProgress 5s linear forwards;
    opacity: 0.55;
}

/* Variantes par type — couleur de la bordure, de l'icône et du fond d'icône */
.tf-toast--success { border-left-color: #28a745; color: #28a745; }
.tf-toast--success .tf-toast__icon { background: linear-gradient(135deg, #34c759, #28a745); }
.tf-toast--success .tf-toast__title { color: #1e7e34; }

.tf-toast--danger  { border-left-color: #dc3545; color: #dc3545; }
.tf-toast--danger .tf-toast__icon  { background: linear-gradient(135deg, #ef5350, #dc3545); }
.tf-toast--danger .tf-toast__title { color: #b02a37; }

.tf-toast--warning { border-left-color: #f4d35e; color: #d29900; }
.tf-toast--warning .tf-toast__icon { background: linear-gradient(135deg, #f7dc6f, #d29900); }
.tf-toast--warning .tf-toast__title { color: #8a6d00; }

.tf-toast--info    { border-left-color: #2c7da0; color: #2c7da0; }
.tf-toast--info .tf-toast__icon    { background: linear-gradient(135deg, #1a4d8f, #2c7da0); }
.tf-toast--info .tf-toast__title   { color: #1a4d8f; }

@keyframes tfToastIn {
    0%   { transform: translateX(120%); opacity: 0; }
    60%  { transform: translateX(-6px); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes tfToastProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (max-width: 576px) {
    .tf-toast-stack { top: 12px; right: 12px; left: 12px; max-width: none; width: auto; }
    .tf-toast { padding: 14px 40px 14px 14px; }
    .tf-toast__icon { width: 32px; height: 32px; font-size: 15px; }
}

/* ============================================================
   ICÔNE WHATSAPP — utilisable inline dans les boutons verts
   ============================================================ */
.tf-wa-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    flex-shrink: 0;
}
.tf-btn-wa {
    background: #25d366 !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
    transition: background 0.2s, transform 0.2s;
    border: none;
}
.tf-btn-wa:hover {
    background: #1da851 !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.tf-btn-wa.tf-btn-wa--full {
    width: 100%;
}

/* ============================================================
   HEADER — avatar utilisateur + bouton logout icône
   Spécificité élevée pour passer au-dessus du style Eduna sur
   .ed-topbar__info-buttons a / button.
   ============================================================ */
.ed-topbar__info-buttons .tf-header-user,
.tf-header-user {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ed-topbar__info-buttons .tf-header-avatar,
a.tf-header-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #1a4d8f, #2c7da0) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border: 2px solid #fff !important;
    box-shadow: none !important;
    transition: transform 0.25s, box-shadow 0.25s !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.ed-topbar__info-buttons .tf-header-avatar:hover,
a.tf-header-avatar:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: none !important;
    color: #fff !important;
    background: linear-gradient(135deg, #1a4d8f, #2c7da0) !important;
}
.ed-topbar__info-buttons .tf-header-avatar--admin,
a.tf-header-avatar--admin {
    background: linear-gradient(135deg, #f4d35e, #d29900) !important;
    box-shadow: none !important;
}
.ed-topbar__info-buttons .tf-header-avatar--admin:hover,
a.tf-header-avatar--admin:hover {
    background: linear-gradient(135deg, #f4d35e, #d29900) !important;
    box-shadow: none !important;
}

.ed-topbar__info-buttons .tf-header-logout,
a.tf-header-logout {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #f6f8fb !important;
    color: #1a4d8f !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border: 1px solid #e0e6ee !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s !important;
}
.ed-topbar__info-buttons .tf-header-logout i,
a.tf-header-logout i {
    line-height: 1 !important;
    color: inherit !important;
}
.ed-topbar__info-buttons .tf-header-logout:hover,
a.tf-header-logout:hover {
    background: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
    transform: scale(1.06) !important;
}

@media (max-width: 576px) {
    .ed-topbar__info-buttons .tf-header-avatar,
    a.tf-header-avatar { width: 38px !important; height: 38px !important; min-width: 38px !important; font-size: 16px !important; }
    .ed-topbar__info-buttons .tf-header-logout,
    a.tf-header-logout { width: 36px !important; height: 36px !important; min-width: 36px !important; font-size: 14px !important; }
    .tf-header-user { gap: 8px !important; }
}

/* ACB — overrides légers */
.tf-verse {
    font-style: italic;
    color: #f4d35e;
    font-size: 18px;
    margin: 16px 0;
    display: block;
}
.tf-pilier-card {
    background: #fff;
    border-radius: 18px;
    padding: 35px 28px;
    box-shadow: 0 10px 40px rgba(26, 77, 143, 0.08);
    transition: transform .3s, box-shadow .3s;
    height: 100%;
}
.tf-pilier-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(26, 77, 143, 0.15); }
.tf-pilier-card .num {
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(135deg, #1a4d8f, #2c7da0);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 22px; margin-bottom: 22px;
}
.tf-pilier-card h4 { color: #1a4d8f; margin-bottom: 8px; font-weight: 700; }
.tf-pilier-card .subtitle { color: #2c7da0; font-weight: 600; margin-bottom: 14px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.tf-pilier-card .objective {
    margin-top: 18px; padding-top: 18px; border-top: 1px dashed #d0d8e2;
    font-size: 14px; color: #5a6b80; font-style: italic;
}
.tf-parcours-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    transition: transform .3s;
    height: 100%;
    display: flex; flex-direction: column;
}
.tf-parcours-card:hover { transform: translateY(-6px); }
.tf-parcours-card .badge-code {
    display:inline-block; padding:4px 12px; border-radius:20px;
    background:#1a4d8f; color:#fff; font-weight:700; font-size:13px;
    letter-spacing:1px;
}
.tf-parcours-card .body { padding: 25px; flex: 1; display:flex; flex-direction:column; }
.tf-parcours-card h4 { color:#1a4d8f; margin: 12px 0 6px; }
.tf-parcours-card .theme { color:#2c7da0; font-style:italic; font-size:14px; margin-bottom:14px; }
.tf-parcours-card .meta { font-size:13px; color:#7a8a9c; margin-bottom:14px; }
.tf-parcours-card .meta span { margin-right:14px; }
.tf-parcours-card .cta { margin-top:auto; }

.tf-section-verse {
    text-align:center; font-style:italic; color:#7a8a9c;
    font-size:16px; max-width:720px; margin: 0 auto 30px;
}
.tf-breadcrumb {
    background: linear-gradient(135deg, #1a4d8f 0%, #2c7da0 100%);
    padding: 80px 0 60px; color:#fff; text-align:center;
}
.tf-breadcrumb h1 { color:#fff; margin-bottom: 10px; }
.tf-breadcrumb .crumb { color: rgba(255,255,255,0.85); }
.tf-breadcrumb .crumb a { color:#f4d35e; }

.tf-form { background:#fff; padding:35px; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,0.06); }
.tf-form label { display:block; font-weight:600; color:#1a4d8f; margin-bottom:6px; font-size:14px; }
.tf-form input[type=text], .tf-form input[type=email], .tf-form input[type=tel], .tf-form input[type=number],
.tf-form select, .tf-form textarea {
    width:100%; padding:12px 14px; border:1px solid #d8dde5; border-radius:8px;
    font-size:15px; margin-bottom:18px; background:#fafbfc;
}
.tf-form textarea { min-height:110px; resize:vertical; }
.tf-form input:focus, .tf-form select:focus, .tf-form textarea:focus { outline:none; border-color:#1a4d8f; background:#fff; }
.tf-form .check { display:flex; align-items:flex-start; gap:10px; margin-bottom:18px; font-size:14px; color:#5a6b80; }
.tf-form .check input { margin-top:4px; }
.tf-form .btn-submit {
    background: linear-gradient(135deg, #1a4d8f 0%, #2c7da0 100%);
    color:#fff; border:none; padding:14px 32px; border-radius:8px;
    font-weight:600; font-size:16px; cursor:pointer; width:100%;
}
.tf-form .btn-submit:hover { opacity:.92; }

/* Section "Nos formations" — laisser le template Eduna gérer (titre peut wrap sur 2 lignes) */

/* ============================================================
   Formulaire d'auth/inscription : harmoniser selects et checks
   ============================================================ */

/* Selects natifs : même look que les inputs du modal */
.ed-auth__modal-form .form-group select {
    width: 100%;
    height: 56px;
    padding: 0 22px;
    border: 1px solid #e0e6ee;
    border-radius: 50px;
    background: #f6f8fb;
    font-size: 15px;
    color: #3a4a5e;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231a4d8f' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 22px center;
}
.ed-auth__modal-form .form-group select:focus {
    outline: none;
    border-color: #1a4d8f;
    background-color: #fff;
}
.ed-auth__modal-form .form-group textarea {
    min-height: 110px;
    border-radius: 22px;
    padding: 16px 22px;
}

/* Nice Select transformé : prendre toute la largeur et même hauteur */
.ed-auth__modal-form .form-group .nice-select {
    width: 100% !important;
    height: 56px;
    line-height: 54px;
    padding: 0 22px;
    border-radius: 50px;
    border: 1px solid #e0e6ee;
    background: #f6f8fb;
    font-size: 15px;
    color: #3a4a5e;
}
.ed-auth__modal-form .form-group .nice-select .list { width: 100%; }
.ed-auth__modal-form .form-group .nice-select::after {
    border-bottom-color: #1a4d8f;
    border-right-color: #1a4d8f;
    right: 22px;
}

/* Les .row à l'intérieur du form gardent un gutter normal */
.ed-auth__modal-form .row > [class*="col-"] {
    margin-bottom: 0;
}

/* Form-check : éviter le chevauchement checkbox/label */
.ed-auth__modal-form .form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-left: 0;
    margin: 18px 0 22px;
}
.ed-auth__modal-form .form-check .form-check-input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0 0;
    flex-shrink: 0;
    position: static;
    cursor: pointer;
}
.ed-auth__modal-form .form-check .form-check-label {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    color: #5a6b80;
    margin: 0;
    padding-left: 0;
    cursor: pointer;
}

/* Plus d'air entre les .form-group dans les .row */
.ed-auth__modal-form .row .form-group { margin-bottom: 14px; }

/* Cellule cards */
.tf-cellule-card {
    background:#fff; border-radius:14px; padding:24px; box-shadow:0 8px 24px rgba(0,0,0,0.05);
    border-left:4px solid #1a4d8f; margin-bottom:20px;
}
.tf-cellule-card h5 { color:#1a4d8f; margin-bottom:8px; }
.tf-cellule-card .meta { color:#7a8a9c; font-size:14px; }
.tf-cellule-card .meta i { margin-right:6px; color:#2c7da0; }

/* ============================================================
   Header — Circle Avatar + User display
   ============================================================ */
.tf-header-user {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tf-header-user__link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 6px 16px 6px 6px;
    border-radius: 52px;
    background: linear-gradient(135deg, rgba(26,77,143,0.08) 0%, rgba(44,125,160,0.08) 100%);
    transition: all 0.3s ease;
    border: 1px solid rgba(26,77,143,0.1);
}
.tf-header-user__link:hover {
    background: linear-gradient(135deg, rgba(26,77,143,0.14) 0%, rgba(44,125,160,0.14) 100%);
    border-color: rgba(26,77,143,0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26,77,143,0.12);
}
.tf-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a4d8f, #2c7da0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(26,77,143,0.25);
}
.tf-header-avatar--admin {
    background: linear-gradient(135deg, #dc3545, #c82333);
    box-shadow: 0 2px 8px rgba(220,53,69,0.25);
}
.tf-header-user__name {
    font-size: 14px;
    font-weight: 600;
    color: #1a4d8f;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

/* Responsive: hide name on smaller screens, keep avatar */
@media (max-width: 1399px) {
    .tf-header-user__name { display: none; }
    .tf-header-user__link { padding: 5px; }
}
@media (max-width: 991px) {
    .tf-header-user { gap: 6px; }
    .tf-header-avatar { width: 32px; height: 32px; font-size: 13px; }
}

/* ============================================================
   Profil — Password change form
   ============================================================ */
.tf-password-card {
    background: #fff;
    border-radius: 14px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    margin-bottom: 25px;
}
.tf-password-card h4 {
    color: #1a4d8f;
    margin-bottom: 18px;
}
.tf-password-card h4 i {
    margin-right: 8px;
}
.tf-password-form .tf-form-group {
    margin-bottom: 18px;
}
.tf-password-form .tf-form-group label {
    display: block;
    font-weight: 600;
    color: #1a4d8f;
    margin-bottom: 6px;
    font-size: 14px;
}
.tf-password-form .tf-form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d8dde5;
    border-radius: 10px;
    font-size: 15px;
    background: #fafbfc;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.tf-password-form .tf-form-group input:focus {
    outline: none;
    border-color: #1a4d8f;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26,77,143,0.08);
}
.tf-password-form .tf-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #1a4d8f, #2c7da0);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.tf-password-form .tf-btn-save:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(26,77,143,0.25);
}
.tf-password-hint {
    font-size: 13px;
    color: #7a8a9c;
    margin-top: 4px;
}