/* =========================================================
   VARIABLES – CONFORMES MAQUETTE
========================================================= */
:root {
    --cisoba-blue: #01056A;
    /* Bleu principal */
    --cisoba-dark-blue: #000044;
    /* Hover adhésion */
    --nav-text-dark: #111827;
    /* Liens non actifs */
    --lang-dark: #1E1E1E;
    /* FR actif */
    --lang-light: #3E3E3E;
    /* EN */
}

/* =========================================================
   HEADER – FIXÉ AU SCROLL
========================================================= */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background-color: #ffffff;
    padding: 0 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    height: 82px;
}

/* =========================================================
   LOGO
========================================================= */
.header-logo {
    height: 64px;
    width: 49px;
    margin-left: 20px;
}

/* =========================================================
   NAVIGATION LINKS
========================================================= */
.navbar-nav .nav-link {
    color: var(--nav-text-dark);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 0.5rem 1.2rem !important;
    transition: color 0.3s ease;
}

/* Lien actif (Accueil) */
.navbar-nav .nav-link.active {
    color: var(--cisoba-blue);
}

/* Hover */
.navbar-nav .nav-link:hover {
    color: var(--cisoba-blue);
}

/* =========================================================
   DROPDOWN
========================================================= */
.dropdown-menu {
    background-color: var(--cisoba-blue);
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 10px;
}

.dropdown-item {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    padding: 15px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: var(--cisoba-dark-blue);
    color: #ffffff;
}

/* Garder le dropdown ouvert au hover */
.navbar-nav .nav-link.dropdown-toggle:hover ~ .dropdown-menu,
.dropdown-menu:hover {
    display: block !important;
}

/* =========================================================
   LANG SWITCHER
========================================================= */
.lang-switcher {
    background-color: #f0f0f0;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #ddd;
    display: flex;
    gap: 4px;
}

.lang-item {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--lang-light);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
}

/* Lang active (FR) */
.lang-item.active {
    color: var(--lang-dark);
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   ACTION BUTTONS
========================================================= */
.btn-connexion {
    border: 1px solid var(--cisoba-blue);
    color: var(--cisoba-blue);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
    padding: 8px 24px;
    background-color: transparent;
    transition: all 0.3s ease;
}

.btn-connexion:hover {
    background-color: var(--cisoba-blue);
    color: #ffffff;
}

.btn-adhesion {
    background-color: var(--cisoba-blue);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
    padding: 8px 24px;
    border: none;
    transition: background-color 0.3s ease;
    margin-right: 50px;
}

.btn-adhesion:hover {
    background-color: var(--cisoba-dark-blue);
}

/* =========================================================
   MOBILE ADJUSTMENTS
========================================================= */
@media (max-width: 991.98px) {
    .header-actions {
        margin-top: 20px;
        flex-direction: column;
        align-items: stretch !important;
    }

    .lang-switcher {
        margin-bottom: 15px;
    }

    .btn-connexion,
    .btn-adhesion {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
}

.navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: var(--bs-navbar-color);
    background-color: transparent;
    border: var(--bs-border-width);
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}

/* ABOUT MODEL */

/* Variables limitées au scope de la page */
.page-cisoba-action {
    --cisoba-navy: #000066;
    --cisoba-orange: #f29400;
    --cisoba-beige: #fdf2e9;
    --cisoba-lavender: #ebf1ff;
    --cisoba-green: #008f68;

    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--cisoba-navy);
    overflow-x: hidden;
}

/* ========================================
   IMAGE MOBILE UNIQUE - Visible uniquement sur mobile
   ======================================== */
.page-cisoba-action .mobile-full-image {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
}

.page-cisoba-action .mobile-full-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   CONTENU DESKTOP - Caché sur mobile
   ======================================== */
.page-cisoba-action .desktop-content {
    display: none;
}

/* ========================================
   HERO SECTION
   ======================================== */
.page-cisoba-action .hero-custom {
    background-color: var(--cisoba-navy);
    position: relative;
    margin-bottom: 60px;
    overflow: hidden;
}

.page-cisoba-action .hero-desktop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 312px;
    padding: 0 5%;
}

.page-cisoba-action .hero-title {
    color: var(--cisoba-orange);
    font-weight: 800;
    font-size: 2.2rem;
    margin: 0;
}

.page-cisoba-action .hero-img {
    max-height: 300px;
    object-fit: contain;
    margin-left: auto;
}

/* ========================================
   SECTION LEVIERS
   ======================================== */
.page-cisoba-action .levier-card {
    background-color: var(--cisoba-beige);
    border: none;
    border-radius: 12px;
    padding: 45px 30px;
    height: 100%;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

.page-cisoba-action .levier-card:hover {
    transform: scale(1.04);
    box-shadow:
        0 0 0 2px rgba(30, 64, 175, 0.15),
        0 0 25px rgba(56, 189, 248, 0.35),
        0 0 45px rgba(56, 189, 248, 0.25);
}

.page-cisoba-action .icon-box {
    width: 45px;
    height: 45px;
    background-color: var(--cisoba-navy);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: white;
}

/* Typographie des cartes leviers */
.page-cisoba-action .levier-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.3;
}

.page-cisoba-action .levier-text {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 0;
    color: #6c757d;
}

/* ========================================
   SECTION PHASES
   ======================================== */
.page-cisoba-action .action-model-section {
    background-color: var(--cisoba-lavender);
    padding: 80px 0;
}

.page-cisoba-action .section-main-title {
    font-weight: 800;
    font-size: 1.4rem;
    margin-bottom: 50px;
    color: var(--cisoba-navy);
}

.page-cisoba-action .phase-card {
    background-color: var(--cisoba-beige);
    border-radius: 12px;
    padding: 40px 35px;
    height: 100%;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    text-align: left;
}

.page-cisoba-action .phase-number {
    font-weight: 800;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 10px;
    color: var(--cisoba-navy);
}

.page-cisoba-action .phase-subtitle {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.page-cisoba-action .phase-text {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0;
    color: var(--cisoba-navy);
}

/* ========================================
   SCHÉMA FLOW
   ======================================== */
.page-cisoba-action .flow-box {
    background-color: var(--cisoba-navy);
    color: white;
    border-radius: 6px;
    padding: 18px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    height: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   RESPONSIVE - DESKTOP (≥ 992px)
   ======================================== */
@media (min-width: 992px) {

    /* Cacher l'image mobile, afficher le contenu desktop */
    .page-cisoba-action .mobile-full-image {
        display: none;
    }

    .page-cisoba-action .desktop-content {
        display: block;
    }
}

/* ========================================
   RESPONSIVE - DESKTOP LARGE (≥ 1200px)
   ======================================== */
@media (min-width: 1200px) {
    .page-cisoba-action .hero-desktop {
        padding: 0 8%;
    }

    .page-cisoba-action .hero-title {
        font-size: 2.5rem;
    }

    .page-cisoba-action .hero-img {
        max-height: 320px;
    }

    .page-cisoba-action .levier-card {
        padding: 50px 35px;
    }

    .page-cisoba-action .phase-card {
        padding: 45px 40px;
    }
}


/* ABOUT ORG */

/* Variables de thème isolées */
.page-cisoba-gov {
    --cisoba-green: #14660a;
    --cisoba-orange: #ff8c00;
    --cisoba-red: #e62e1d;
    --cisoba-navy: #1a1a7a;
    --cisoba-bg-gray: #f0f4f5;
    font-family: sans-serif;
}

/* ========================================
   HERO SECTION - VERSION DESKTOP PAR DÉFAUT
   ======================================== */
.page-cisoba-gov .hero-banner {
    background-color: var(--cisoba-green);
    min-height: 250px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* Desktop : afficher la version texte + image */
.page-cisoba-gov .hero-desktop {
    width: 100%;
    display: block;
}

.page-cisoba-gov .hero-mobile {
    display: none;
    /* Cachée sur desktop */
}

.page-cisoba-gov .hero-title {
    color: var(--cisoba-orange);
    font-weight: bold;
    font-size: 2.2rem;
    margin: 0;
}

.page-cisoba-gov .hero-img {
    max-height: 300px;
    max-width: 100%;
    object-fit: contain;
}

.page-cisoba-gov .hero-mobile-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   GOVERNANCE LIST
   ======================================== */
.page-cisoba-gov .gov-card {
    background-color: var(--cisoba-bg-gray);
    border: none;
    border-left: 6px solid var(--cisoba-navy);
    border-radius: 8px;
    margin-bottom: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.page-cisoba-gov .gov-card:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.page-cisoba-gov .gov-title {
    color: var(--cisoba-navy);
    font-weight: 700;
    font-size: 1rem;
    min-width: 250px;
    flex-shrink: 0;
}

.page-cisoba-gov .gov-desc {
    color: #444;
    font-size: 0.95rem;
    flex: 1;
}

/* ========================================
   ORGANIZATIONAL CHART
   ======================================== */
.page-cisoba-gov .org-title {
    color: var(--cisoba-navy);
    font-weight: bold;
    font-size: 1.8rem;
    margin: 50px 0 30px 0;
}

.page-cisoba-gov .org-chart-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.page-cisoba-gov .org-chart-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Afficher desktop par défaut, cacher mobile */
.page-cisoba-gov .org-chart-desktop {
    display: block;
}

.page-cisoba-gov .org-chart-mobile {
    display: none;
}

.page-cisoba-gov .org-box {
    color: white;
    padding: 15px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.page-cisoba-gov .bg-orange {
    background-color: var(--cisoba-orange);
}

.page-cisoba-gov .bg-red {
    background-color: var(--cisoba-red);
}

/* Lines Connection System */
.page-cisoba-gov .tree-line-main {
    width: 2px;
    height: 40px;
    background: var(--cisoba-orange);
    margin: 0 auto;
}

.page-cisoba-gov .tree-line-horizontal {
    width: 75%;
    height: 2px;
    background: var(--cisoba-orange);
    margin: 0 auto;
}

.page-cisoba-gov .tree-line-vertical {
    width: 2px;
    height: 30px;
    background: var(--cisoba-orange);
    margin: 0 auto;
}

/* ========================================
   RESPONSIVE - MOBILE FIRST
   ======================================== */

/* --- TABLETTE ET MOBILE (< 992px) : Afficher image mobile --- */
@media (max-width: 991.98px) {

    /* HERO : Cacher desktop, afficher mobile */
    .page-cisoba-gov .hero-banner {
        background-color: transparent;
        min-height: auto;
        padding: 0;
    }

    .page-cisoba-gov .hero-desktop {
        display: none;
    }

    .page-cisoba-gov .hero-mobile {
        display: block;
        width: 100%;
    }

    .page-cisoba-gov .hero-mobile-img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        max-height: 300px;
    }

    /* Gov Cards */
    .page-cisoba-gov .gov-card {
        padding: 15px;
        flex-direction: column;
        align-items: flex-start;
    }

    .page-cisoba-gov .gov-title {
        min-width: 100%;
        margin-bottom: 8px;
        font-size: 1.05rem;
    }

    .page-cisoba-gov .gov-desc {
        font-size: 0.9rem;
    }

    /* Organisation */
    .page-cisoba-gov .org-title {
        font-size: 1.5rem;
        margin: 35px 0 25px 0;
    }

    .page-cisoba-gov .org-chart-wrapper {
        padding: 15px;
    }

    /* Basculer vers l'image mobile pour le schéma organisationnel */
    .page-cisoba-gov .org-chart-desktop {
        display: none;
    }

    .page-cisoba-gov .org-chart-mobile {
        display: block;
    }
}

/* --- MOBILE (< 768px) --- */
@media (max-width: 767.98px) {

    /* Hero Mobile */
    .page-cisoba-gov .hero-mobile-img {
        max-height: 250px;
    }

    /* Gov Cards */
    .page-cisoba-gov .gov-card {
        padding: 12px 15px;
        margin-bottom: 12px;
    }

    .page-cisoba-gov .gov-title {
        font-size: 1rem;
    }

    .page-cisoba-gov .gov-desc {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* Organisation */
    .page-cisoba-gov .org-title {
        font-size: 1.3rem;
        margin: 30px 0 20px 0;
    }

    .page-cisoba-gov .org-chart-wrapper {
        padding: 10px;
    }

    /* Tree boxes */
    .page-cisoba-gov .org-box {
        font-size: 0.75rem;
        padding: 10px 8px;
        min-height: 60px;
    }

    .page-cisoba-gov .tree-line-horizontal {
        display: none;
    }
}

/* --- PETIT MOBILE (< 576px) --- */
@media (max-width: 575.98px) {

    /* Hero Mobile */
    .page-cisoba-gov .hero-mobile-img {
        max-height: 220px;
        margin-top: 10px;
    }

    /* Gov Cards */
    .page-cisoba-gov .gov-card {
        padding: 10px 12px;
        border-left-width: 4px;
    }

    .page-cisoba-gov .gov-title {
        font-size: 0.95rem;
        font-weight: 600;
    }

    .page-cisoba-gov .gov-desc {
        font-size: 0.8rem;
    }

    /* Organisation */
    .page-cisoba-gov .org-title {
        font-size: 1.2rem;
        margin: 25px 0 15px 0;
    }

    .page-cisoba-gov .org-box {
        font-size: 0.7rem;
        padding: 8px 6px;
        min-height: 50px;
    }
}

/* --- DESKTOP LARGE (> 1200px) --- */
@media (min-width: 1200px) {
    .page-cisoba-gov .hero-banner {
        min-height: 280px;
    }

    .page-cisoba-gov .hero-title {
        font-size: 2.5rem;
    }

    .page-cisoba-gov .hero-img {
        max-height: 320px;
        margin-top: 20px;
        margin-left: -150px;
    }

    .page-cisoba-gov .gov-card {
        padding: 22px 25px;
    }

    .page-cisoba-gov .gov-title {
        min-width: 280px;
        font-size: 1.1rem;
    }

    .page-cisoba-gov .org-title {
        font-size: 2rem;
        margin: 60px 0 40px 0;
    }
}

/* ============================================
   ABOUT WHY - VARIABLES
   ============================================ */
.page-pourquoi-cisoba {
    --cisoba-orange: #f39200;
    --cisoba-green: #08a16c;
    --cisoba-dark-blue: #000066;
    --cisoba-light-green: #a8e6cf;
}

.page-pourquoi-cisoba {
    font-family: 'Inter', sans-serif;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ============================================
   IMAGE MOBILE UNIQUE - Visible uniquement sur mobile
   ============================================ */
.page-pourquoi-cisoba .mobile-full-image {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
}

.page-pourquoi-cisoba .mobile-full-image img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* ============================================
   CONTENU DESKTOP - Caché sur mobile
   ============================================ */
.page-pourquoi-cisoba .desktop-content {
    display: none;
}

/* ============================================
   HERO SECTION
   ============================================ */
.page-pourquoi-cisoba .hero-banner {
    background-color: var(--cisoba-orange);
    min-height: 300px;
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.page-pourquoi-cisoba .hero-desktop-content {
    display: block;
    width: 100%;
    height: 100%;
}

.page-pourquoi-cisoba .hero-title {
    color: var(--cisoba-dark-blue);
    font-weight: 800;
    font-size: 2.5rem;
}

.page-pourquoi-cisoba .hero-img {
    max-height: 350px;
    position: absolute;
    right: 3%;
    bottom: 0;
    margin-bottom: -20px;
}

/* ============================================
   CONTENT SECTIONS
   ============================================ */
.page-pourquoi-cisoba .content-section {
    padding: 40px 0;
}

.page-pourquoi-cisoba .section-headline {
    color: var(--cisoba-dark-blue);
    font-weight: 700;
    font-size: 1.40rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.page-pourquoi-cisoba .text-content {
    font-size: 0.95rem;
    color: black;
    text-align: justify;
    line-height: 1.7;
}

/* ============================================
   IMAGES
   ============================================ */
.page-pourquoi-cisoba .rounded-img-wrapper {
    border: 2px solid #555;
    border-radius: 20px;
    overflow: hidden;
    display: block;
    line-height: 0;
    width: 100%;
    margin: 0 auto;
}

.page-pourquoi-cisoba .rounded-img-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Logo box */
.page-pourquoi-cisoba .logo-box {
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    height: 100%;
}

.page-pourquoi-cisoba .logo-box img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ============================================
   MEDIA QUERIES - DESKTOP (≥ 992px)
   ============================================ */
@media (min-width: 992px) {

    /* Cacher l'image mobile, afficher le contenu desktop */
    .page-pourquoi-cisoba .mobile-full-image {
        display: none;
    }

    .page-pourquoi-cisoba .desktop-content {
        display: block;
    }
}

/* ============================================
   MEDIA QUERIES - LARGE DESKTOP (≥ 1200px)
   ============================================ */
@media (min-width: 1200px) {
    .page-pourquoi-cisoba .hero-title {
        font-size: 2.8rem;
    }

    .page-pourquoi-cisoba .section-headline {
        font-size: 1.5rem;
    }

    .page-pourquoi-cisoba .text-content {
        font-size: 1rem;
    }
}

/* ============================================
   MEDIA QUERIES - EXTRA LARGE (≥ 1400px)
   ============================================ */
@media (min-width: 1400px) {
    .page-pourquoi-cisoba .hero-title {
        font-size: 3rem;
    }
}

/* ========================================
   ADHERENTS INSCRIPTION - RESPONSIVE
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ========================================
   VARIABLES & BASE
   ======================================== */
.page-cisoba-registration {
    --bg-page: #E0F5EE;
    --navy-dark: #05016A;
    --text-muted: #67748E;
    --border-color: #E2E8F0;
    --mint-icon-bg: #E6F6F1;
    --error-color: #E53E3E;
    --success-color: #38A169;

    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-page);
    color: #2D3748;
    font-size: 0.9rem;
    overflow-x: hidden;
}

.page-cisoba-registration .container {
    font-size: 16px;
    padding-left: 15px;
    padding-right: 15px;
}

.page-cisoba-registration .fw-800 {
    font-size: 20px;
    font-weight: 800;
}

/* ========================================
   STEPPER
   ======================================== */
.page-cisoba-registration .stepper-container {
    max-width: 853px;
    margin: 0 auto 2rem auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-cisoba-registration .step-circle,
.page-cisoba-registration .step-circle-active {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    z-index: 2;
    position: relative;
}

.page-cisoba-registration .step-circle {
    background-color: #2D3748;
    color: white;
}

.page-cisoba-registration .step-circle-active {
    background-color: var(--navy-dark);
    color: white;
}

.page-cisoba-registration .step-label,
.page-cisoba-registration .step-label-active {
    margin-left: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.page-cisoba-registration .step-label {
    color: #757575;
}

.page-cisoba-registration .step-label-active {
    color: var(--navy-dark);
}

.page-cisoba-registration .step-line {
    flex-grow: 1;
    height: 2px;
    background-color: #757575;
    margin: 0 10px;
}

.page-cisoba-registration .step-line.active {
    background-color: #757575;
}

/* ========================================
   CARDS
   ======================================== */
.page-cisoba-registration .card-custom {
    background: white;
    border-radius: 16px;
    border: none;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    max-width: 853px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.page-cisoba-registration .card-icon-box {
    width: 42px;
    height: 42px;
    min-width: 42px;
    background: var(--mint-icon-bg);
    color: var(--navy-dark);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 15px;
}

.page-cisoba-registration .check-icon-box {
    background: #E6F6F1;
}

.page-cisoba-registration .card-title-area {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.page-cisoba-registration .card-title-area h4 {
    margin: 0;
    font-weight: 800;
    font-size: 20px;
    color: #1A202C;
    line-height: 1.3;
}

.page-cisoba-registration .card-subtitle {
    color: var(--text-muted);
    font-size: 16px;
    margin-left: 57px;
    margin-bottom: 25px;
    display: block;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.page-cisoba-registration .form-label {
    font-weight: 700;
    font-size: 14px;
    color: #757575;
    margin-bottom: 8px;
}

.page-cisoba-registration .form-control,
.page-cisoba-registration .form-select {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: #2D3748;
    width: 100%;
    height: 53.64px;
    transition: border-color 0.2s ease;
}

.page-cisoba-registration .form-control:focus,
.page-cisoba-registration .form-select:focus {
    border-color: var(--navy-dark);
    box-shadow: 0 0 0 0.2rem rgba(5, 1, 106, 0.1);
    outline: none;
}

/* ========================================
   PLUGIN TELEPHONE INTERNATIONAL
   ======================================== */
.page-cisoba-registration .iti {
    width: 100%;
    display: block;
}

.page-cisoba-registration .iti__flag-container {
    padding: 0;
}

.page-cisoba-registration .iti__selected-flag {
    padding: 12px 16px;
    border-radius: 10px 0 0 10px;
    background: white;
    border: 1px solid var(--border-color);
    border-right: none;
}

.page-cisoba-registration .iti__country-list {
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    font-size: 0.9rem;
}

.page-cisoba-registration #telephone {
    padding-left: 85px;
    border-radius: 10px;
    height: 53.64px;
}

.page-cisoba-registration .iti--allow-dropdown input {
    border-radius: 10px;
}

/* Info Alert */
.page-cisoba-registration .info-alert {
    background: #EDF2F7;
    border-left: 4px solid var(--navy-dark);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Checkboxes */
.page-cisoba-registration .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.page-cisoba-registration .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 2px solid #CBD5E0;
    flex-shrink: 0;
    cursor: pointer;
}

.page-cisoba-registration .form-check-input:checked {
    background-color: var(--navy-dark);
    border-color: var(--navy-dark);
}

.page-cisoba-registration .form-check-label {
    padding-left: 0;
    font-size: 0.85rem;
    color: #4A5568;
    font-weight: 500;
    cursor: pointer;
}

/* ========================================
   BOUTON SUIVANT
   ======================================== */
.page-cisoba-registration .btn-next {
    background: var(--navy-dark);
    color: white;
    border-radius: 10px;
    padding: 12px 35px;
    font-weight: 700;
    border: none;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 306px;
    height: 54px;
    display: block;
    cursor: pointer;
}

.page-cisoba-registration .btn-next:hover:not(:disabled) {
    background: #2821ee;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5, 1, 106, 0.3);
}

.page-cisoba-registration .btn-next:disabled {
    background: #CBD5E0;
    color: #A0AEC0;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ========================================
   UTILS
   ======================================== */
.page-cisoba-registration .required {
    color: var(--error-color);
}

.page-cisoba-registration .text-navy {
    color: var(--navy-dark);
}

.page-cisoba-registration .text-muted {
    color: var(--text-muted);
}

/* ========================================
   MEDIA QUERIES - TABLETTE
   ======================================== */
@media (max-width: 991px) {
    .page-cisoba-registration .stepper-container {
        padding: 0 10px;
    }

    .page-cisoba-registration .card-custom {
        padding: 28px;
    }
}

/* ========================================
   MEDIA QUERIES - MOBILE LARGE
   ======================================== */
@media (max-width: 768px) {
    .page-cisoba-registration .card-custom {
        padding: 24px;
    }

    .page-cisoba-registration .step-label,
    .page-cisoba-registration .step-label-active {
        font-size: 0.8rem;
        margin-left: 5px;
    }

    .page-cisoba-registration .card-subtitle {
        margin-left: 0;
        margin-top: 10px;
        font-size: 14px;
    }
}

/* ========================================
   MEDIA QUERIES - MOBILE STRICT
   ======================================== */
@media (max-width: 576px) {
    .page-cisoba-registration .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .page-cisoba-registration .card-custom {
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 20px;
    }

    .page-cisoba-registration .step-label,
    .page-cisoba-registration .step-label-active {
        display: none;
    }

    .page-cisoba-registration .step-line {
        margin: 0 5px;
    }

    .page-cisoba-registration .step-circle,
    .page-cisoba-registration .step-circle-active {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        font-size: 12px;
    }

    .page-cisoba-registration .fw-800 {
        font-size: 18px;
    }

    .page-cisoba-registration .card-title-area h4 {
        font-size: 16px;
    }

    .page-cisoba-registration .card-subtitle {
        font-size: 13px;
        margin-left: 0;
    }

    .page-cisoba-registration .card-icon-box {
        width: 36px;
        height: 36px;
        min-width: 36px;
        margin-right: 10px;
        font-size: 1rem;
    }

    .page-cisoba-registration .form-label {
        font-size: 13px;
    }

    .page-cisoba-registration .form-control,
    .page-cisoba-registration .form-select {
        font-size: 0.85rem;
        padding: 10px 12px;
        height: 48px;
    }

    .page-cisoba-registration #telephone {
        padding-left: 75px;
        font-size: 0.85rem;
        height: 48px;
    }

    .page-cisoba-registration .iti__selected-flag {
        padding: 10px 12px;
    }

    .page-cisoba-registration .btn-next {
        font-size: 15px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .page-cisoba-registration .form-check-label {
        font-size: 0.8rem;
    }

    .page-cisoba-registration .info-alert {
        font-size: 0.8rem;
        padding: 12px;
    }
}

@media (max-width: 375px) {
    .page-cisoba-registration .card-custom {
        padding: 16px;
    }

    .page-cisoba-registration .card-title-area h4 {
        font-size: 15px;
    }

    .page-cisoba-registration .form-control,
    .page-cisoba-registration .form-select {
        height: 45px;
        font-size: 0.8rem;
    }

    .page-cisoba-registration #telephone {
        padding-left: 70px;
        height: 45px;
    }
}

/* ADHERENTS PAIE - RESPONSIVE UPDATE */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

.page-cisoba-payment {
    --bg-page: #E0F5EE;
    --navy-dark: #05016A;
    --text-muted: #67748E;
    --border-color: #E2E8F0;
    --mint-icon-bg: #E6F6F1;

    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-page);
    color: #2D3748;
    font-size: 0.9rem;
    overflow-x: hidden;
}

.page-cisoba-payment .container {
    font-size: 16px;
    padding-left: 15px;
    padding-right: 15px;
}

/* --- TITRES RESPONSIVE --- */
.page-cisoba-payment .fw-800 {
    font-size: clamp(20px, 4vw, 28px);
    /* S'adapte automatiquement */
    font-weight: 800;
}

.page-cisoba-payment h5 {
    font-size: clamp(16px, 3vw, 20px);
}

.page-cisoba-payment h6 {
    font-size: clamp(14px, 2.5vw, 16px);
}

.page-cisoba-payment .subtitle {
    font-size: clamp(13px, 2vw, 15px);
    color: #6b7280;
    margin-bottom: 20px;
    padding: 0 10px;
}

/* --- Stepper Custom --- */
.page-cisoba-payment .stepper-container {
    max-width: 853px;
    margin: 0 auto 2rem auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.page-cisoba-payment .step-circle,
.page-cisoba-payment .step-circle-active {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    z-index: 2;
    position: relative;
}

.page-cisoba-payment .step-circle {
    background-color: #2D3748;
    color: white;
}

.page-cisoba-payment .step-circle-active {
    background-color: var(--navy-dark);
    color: white;
}

.page-cisoba-payment .step-label,
.page-cisoba-payment .step-label-active {
    margin-left: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.page-cisoba-payment .step-label {
    color: #757575;
}

.page-cisoba-payment .step-label-active {
    color: var(--navy-dark);
}

.page-cisoba-payment .step-line,
.page-cisoba-payment .step-line-active {
    flex-grow: 1;
    height: 2px;
    margin: 0 10px;
}

.page-cisoba-payment .step-line {
    background-color: #757575;
}

.page-cisoba-payment .step-line-active {
    background-color: var(--navy-dark);
}

/* --- Payment Card --- */
.page-cisoba-payment .card-payment {
    max-width: 853px;
    width: 100%;
    margin: 20px auto;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

.page-cisoba-payment .payment-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    gap: 15px;
    /* Espacement fluide */
}

.page-cisoba-payment .payment-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    background-color: var(--bg-page);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-dark);
    flex-shrink: 0;
    /* Empêche la compression */
}

.page-cisoba-payment .payment-icon i {
    font-size: 24px;
}

.page-cisoba-payment .info-alert {
    background: var(--bg-page);
    border-left: 4px solid var(--navy-dark);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: clamp(14px, 2.5vw, 16px);
    font-weight: 500;
    color: var(--navy-dark);
    word-wrap: break-word;
    /* Évite débordement */
}

.page-cisoba-payment .info-alert i {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* --- OPTIONS RADIO AMÉLIORÉES --- */
.page-cisoba-payment .radio-option {
    border: 2px solid #d1d5db;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: flex-start;
    /* Alignement haut pour texte long */
    gap: 12px;
}

.page-cisoba-payment .radio-option:hover {
    border-color: var(--navy-dark);
    background-color: #f9fafb;
}

.page-cisoba-payment .radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    /* Taille fixe */
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--navy-dark);
    cursor: pointer;
}

.page-cisoba-payment .radio-label {
    flex: 1;
    cursor: pointer;
    margin: 0;
}

.page-cisoba-payment .radio-label strong {
    font-size: clamp(14px, 2.5vw, 16px);
    line-height: 1.4;
}

.page-cisoba-payment .radio-label small {
    font-size: clamp(12px, 2vw, 13px);
    line-height: 1.3;
}

/* --- Grille des méthodes de paiement --- */
.page-cisoba-payment .payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* Auto-responsive */
    gap: 15px;
    margin-top: 25px;
}

.page-cisoba-payment .payment-method {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 25px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: white;
}

.page-cisoba-payment .payment-method:hover,
.page-cisoba-payment .payment-method.active {
    border-color: var(--navy-dark);
    transform: translateY(-2px);
    background-color: #f8fafc;
}

.page-cisoba-payment .payment-method-icon {
    width: 50px;
    height: 50px;
    background-color: var(--bg-page);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-dark);
    font-size: 24px;
    margin: 0 auto 12px;
}

/* --- RECAP SECTION RESPONSIVE --- */
.page-cisoba-payment .recap-section {
    background-color: #f9fafb;
    border-radius: 10px;
    padding: 20px;
    margin-top: 30px;
}

.page-cisoba-payment .recap-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    font-size: clamp(13px, 2.5vw, 15px);
    gap: 10px;
    /* Évite collision texte */
    flex-wrap: wrap;
    /* Passe à la ligne si nécessaire */
}

.page-cisoba-payment .recap-row span:first-child {
    flex: 1;
    min-width: 120px;
}

.page-cisoba-payment .recap-row span:last-child {
    text-align: right;
    white-space: nowrap;
}

.page-cisoba-payment .recap-row.total {
    font-weight: bold;
    font-size: clamp(14px, 3vw, 16px);
    padding-top: 12px;
    border-top: 2px solid #d1d5db;
    color: var(--navy-dark);
}

/* --- BOUTON VALIDATE --- */
.page-cisoba-payment .btn-validate {
    background-color: var(--navy-dark);
    color: white;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: clamp(14px, 2.5vw, 16px);
    font-weight: 700;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(5, 1, 106, 0.2);
}

.page-cisoba-payment .btn-validate:hover {
    background-color: #2821ee;
    transform: translateY(-2px);
}

.page-cisoba-payment .btn-validate:active {
    transform: translateY(0);
}

.page-cisoba-payment .security-note {
    text-align: center;
    color: #6b7280;
    font-size: clamp(12px, 2vw, 13px);
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

.page-cisoba-payment .text-navy {
    color: var(--navy-dark);
}

/* =========================================
   MEDIA QUERIES (APPROCHE MOBILE-FIRST)
   ========================================= */

/* --- TABLETTE (768px - 991px) --- */
@media (max-width: 991px) {
    .page-cisoba-payment .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .page-cisoba-payment .card-payment {
        padding: 25px;
    }
}

/* --- MOBILE LARGE (576px - 767px) --- */
@media (max-width: 767px) {
    .page-cisoba-payment .payment-methods {
        grid-template-columns: 1fr;
        /* 1 colonne */
    }

    .page-cisoba-payment .step-label,
    .page-cisoba-payment .step-label-active {
        font-size: 0.75rem;
        margin-left: 6px;
    }

    .page-cisoba-payment .card-payment {
        padding: 22px;
        margin: 15px auto;
    }
}

/* --- MOBILE STRICT (< 576px) --- */
@media (max-width: 575px) {

    .page-cisoba-payment .container {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .page-cisoba-payment .card-payment {
        padding: 18px;
        margin: 10px auto;
        border-radius: 12px;
    }

    /* Stepper : Masquer les labels texte */
    .page-cisoba-payment .step-label,
    .page-cisoba-payment .step-label-active {
        display: none;
    }

    .page-cisoba-payment .step-circle,
    .page-cisoba-payment .step-circle-active {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        font-size: 12px;
    }

    .page-cisoba-payment .step-line,
    .page-cisoba-payment .step-line-active {
        margin: 0 5px;
    }

    /* Header icône plus petite */
    .page-cisoba-payment .payment-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    .page-cisoba-payment .payment-icon i {
        font-size: 20px;
    }

    .page-cisoba-payment .payment-header {
        gap: 10px;
    }

    /* Info alert plus compact */
    .page-cisoba-payment .info-alert {
        padding: 12px;
        gap: 10px;
    }

    .page-cisoba-payment .info-alert i {
        font-size: 18px;
    }

    /* Radio options */
    .page-cisoba-payment .radio-option {
        padding: 12px;
        gap: 10px;
    }

    .page-cisoba-payment .radio-option input[type="radio"] {
        width: 16px;
        height: 16px;
        min-width: 16px;
    }

    /* Recap section */
    .page-cisoba-payment .recap-section {
        padding: 15px;
        margin-top: 20px;
    }

    /* Bouton */
    .page-cisoba-payment .btn-validate {
        padding: 13px;
        margin-top: 15px;
    }

    .page-cisoba-payment .security-note {
        margin-top: 12px;
    }
}

/* --- TRÈS PETITS MOBILES (< 380px) --- */
@media (max-width: 379px) {

    .page-cisoba-payment .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .page-cisoba-payment .card-payment {
        padding: 15px;
    }

    .page-cisoba-payment .step-circle,
    .page-cisoba-payment .step-circle-active {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
        font-size: 11px;
    }

    .page-cisoba-payment .recap-row {
        font-size: 13px;
    }

    .page-cisoba-payment .recap-row span:first-child {
        min-width: 100px;
    }
}

/* ADHERENTS VAL - RESPONSIVE UPDATE */
/* --- Variables et Fond de Page --- */
.page-cisoba-validation {
    --cisoba-navy: #050164;
    --cisoba-green: #009b72;
    --cisoba-bg: #eefbf6;
    --cisoba-purple-bg: #dce0ff;
    --cisoba-red-bg: #ffdad6;
    --cisoba-red-text: #ba1a1a;

    --bg-page: #E0F5EE;
    --navy-dark: #05016A;
    --text-muted: #67748E;
    --border-color: #E2E8F0;
    --mint-icon-bg: #E6F6F1;

    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-page);
    color: #2D3748;
    font-size: 0.9rem;
    overflow-x: hidden;
    /* Évite le scroll horizontal */
}

.page-cisoba-validation .container {
    font-size: 16px;
    padding-left: 15px;
    padding-right: 15px;
}

.page-cisoba-validation .text-navy {
    color: var(--navy-dark);
}

.page-cisoba-validation .fw-800 {
    font-weight: 800;
    font-size: 28px;
    /* Augmenté pour desktop */
}

/* --- Titre Principal Responsive --- */
@media (max-width: 768px) {
    .page-cisoba-validation .fw-800 {
        font-size: 22px;
        /* Plus petit sur mobile */
    }
}

@media (max-width: 576px) {
    .page-cisoba-validation .fw-800 {
        font-size: 20px;
        /* Encore plus petit sur petit mobile */
    }
}

/* --- Stepper Wrapper (Responsive Container) --- */
.page-cisoba-validation .stepper-wrapper {
    width: 100%;
    max-width: 853px;
    margin: 0 auto;
    padding: 0 15px;
    /* Respire sur mobile */
}

/* --- Stepper Container --- */
.page-cisoba-validation .stepper-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    /* Espacement entre éléments */
}

.page-cisoba-validation .step-item {
    flex-shrink: 0;
    /* Empêche la compression */
}

/* --- Cercles des Étapes --- */
.page-cisoba-validation .step-circle,
.page-cisoba-validation .step-circle-active {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    z-index: 2;
    position: relative;
}

.page-cisoba-validation .step-circle {
    background-color: #2D3748;
    color: white;
}

.page-cisoba-validation .step-circle-active {
    background-color: var(--navy-dark);
    color: white;
}

/* --- Labels des Étapes --- */
.page-cisoba-validation .step-label,
.page-cisoba-validation .step-label-active {
    margin-left: 10px;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
}

.page-cisoba-validation .step-label {
    color: #757575;
}

.page-cisoba-validation .step-label-active {
    color: var(--navy-dark);
    font-weight: 600;
}

/* --- Lignes de Connexion --- */
.page-cisoba-validation .step-line,
.page-cisoba-validation .step-line-active {
    flex-grow: 1;
    height: 2px;
    min-width: 20px;
    /* Assure une largeur minimale */
}

.page-cisoba-validation .step-line {
    background-color: #C7C7C7;
}

.page-cisoba-validation .step-line-active {
    background-color: var(--navy-dark);
}

/* --- Card de Confirmation --- */
.page-cisoba-validation .confirmation-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: none;
    padding: 3rem;
    max-width: 853px;
    width: 100%;
    margin: 0 auto 24px auto;
}

/* --- Alert Custom Purple --- */
.page-cisoba-validation .alert-custom-purple {
    background-color: var(--cisoba-purple-bg);
    border: none;
    border-left: 5px solid var(--cisoba-navy);
    color: var(--cisoba-navy);
    font-weight: 600;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.page-cisoba-validation .alert-custom-purple i {
    flex-shrink: 0;
    font-size: 1.5rem;
    /* Icône plus visible */
}

/* --- Lignes de Données (Récapitulatif) --- */
.page-cisoba-validation .recap-data {
    max-width: 100%;
}

.page-cisoba-validation .data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 0;
    border-bottom: 1px solid #E8E8E8;
    gap: 15px;
    /* Espace entre label et valeur */
}

.page-cisoba-validation .data-row:last-child {
    border-bottom: none;
    /* Supprime bordure du dernier */
}

.page-cisoba-validation .data-label {
    color: #666;
    font-size: 0.9rem;
    text-align: left;
    flex-shrink: 0;
    /* Empêche la compression */
}

.page-cisoba-validation .data-value {
    font-weight: 600;
    color: #000;
    text-align: right;
    word-break: break-word;
    flex-grow: 1;
    /* Prend l'espace disponible */
}

/* --- Badge Status --- */
.page-cisoba-validation .badge-incomplet {
    background-color: var(--cisoba-red-bg);
    color: var(--cisoba-red-text);
    font-weight: 600;
    padding: 0.5em 1em;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 0.85rem;
}

.page-cisoba-validation .dot-red {
    width: 8px;
    height: 8px;
    background-color: #db342a;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* --- Bouton Action Principal --- */
.page-cisoba-validation .btn-action-main {
    background-color: var(--cisoba-navy);
    color: white;
    font-weight: 600;
    padding: 14px 48px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
}

.page-cisoba-validation .btn-action-main:hover {
    transform: translateY(-2px);
    background-color: #2029ad;
    color: white;
    text-decoration: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* =========================================
   MEDIA QUERIES - TABLETTE (768px - 991px)
   ========================================= */
@media (max-width: 991px) and (min-width: 768px) {
    .page-cisoba-validation .stepper-wrapper {
        padding: 0 20px;
    }

    .page-cisoba-validation .confirmation-card {
        padding: 2.5rem;
    }

    .page-cisoba-validation .step-label,
    .page-cisoba-validation .step-label-active {
        font-size: 0.85rem;
    }
}

/* =========================================
   MEDIA QUERIES - MOBILE LARGE (577px - 767px)
   ========================================= */
@media (max-width: 767px) and (min-width: 577px) {
    .page-cisoba-validation .stepper-wrapper {
        padding: 0 15px;
    }

    .page-cisoba-validation .step-label,
    .page-cisoba-validation .step-label-active {
        font-size: 0.8rem;
        margin-left: 8px;
    }

    .page-cisoba-validation .step-circle,
    .page-cisoba-validation .step-circle-active {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 14px;
    }

    .page-cisoba-validation .confirmation-card {
        padding: 2rem;
    }

    .page-cisoba-validation .alert-custom-purple {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .page-cisoba-validation .btn-action-main {
        padding: 14px 40px;
    }
}

/* =========================================
   MEDIA QUERIES - MOBILE STRICT (≤ 576px)
   ========================================= */
@media (max-width: 576px) {

    /* --- Stepper Compact (Masquer les labels) --- */
    .page-cisoba-validation .step-label,
    .page-cisoba-validation .step-label-active {
        display: none;
        /* Cache les textes sur petit mobile */
    }

    .page-cisoba-validation .stepper-wrapper {
        padding: 0 10px;
    }

    .page-cisoba-validation .stepper-container {
        justify-content: center;
        gap: 8px;
    }

    .page-cisoba-validation .step-circle,
    .page-cisoba-validation .step-circle-active {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        font-size: 14px;
    }

    .page-cisoba-validation .step-line,
    .page-cisoba-validation .step-line-active {
        min-width: 15px;
        margin: 0 5px;
    }

    /* --- Carte Compacte --- */
    .page-cisoba-validation .confirmation-card {
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }

    .page-cisoba-validation .confirmation-card h4 {
        font-size: 1.25rem;
    }

    .page-cisoba-validation .confirmation-card h6 {
        font-size: 1rem;
    }

    /* --- Alert Mobile --- */
    .page-cisoba-validation .alert-custom-purple {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        gap: 8px;
        font-size: 0.9rem;
    }

    .page-cisoba-validation .alert-custom-purple i {
        font-size: 1.8rem;
    }

    /* --- Data Rows en Colonne sur Mobile --- */
    .page-cisoba-validation .data-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 1rem 0;
    }

    .page-cisoba-validation .data-label {
        font-size: 0.85rem;
        color: #888;
    }

    .page-cisoba-validation .data-value {
        text-align: left;
        width: 100%;
        font-size: 0.95rem;
    }

    /* --- Badge Mobile --- */
    .page-cisoba-validation .badge-incomplet {
        padding: 0.4em 0.9em;
        font-size: 0.8rem;
    }

    /* --- Bouton Full Width Mobile --- */
    .page-cisoba-validation .btn-action-main {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        font-size: 1rem;
        border-radius: 8px;
    }
}

/* =========================================
   MEDIA QUERIES - TRÈS PETIT MOBILE (≤ 380px)
   ========================================= */
@media (max-width: 380px) {
    .page-cisoba-validation .confirmation-card {
        padding: 1.2rem;
    }

    .page-cisoba-validation .confirmation-card h4 {
        font-size: 1.1rem;
    }

    .page-cisoba-validation .step-circle,
    .page-cisoba-validation .step-circle-active {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        font-size: 12px;
    }

    .page-cisoba-validation .alert-custom-purple {
        font-size: 0.85rem;
        padding: 0.8rem;
    }
}

/* ============================================
   BLOG DETAIL - RESPONSIVE (MOBILE-FIRST)
   ============================================ */

/* Isolation par la classe .page-cisoba-blog */
.page-cisoba-blog {
    font-family: 'Inter', sans-serif;
    color: #4a4a4a;
    line-height: 1.6;
    background-color: #fff;
}

/* ============================================
   CONTAINER - RESPONSIVE
   ============================================ */
.page-cisoba-blog .blog-container {
    max-width: 929px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .page-cisoba-blog .blog-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ============================================
   TYPOGRAPHIE - RESPONSIVE
   ============================================ */
.page-cisoba-blog .main-title {
    font-weight: 700;
    color: #212529;
    font-size: 1.5rem;
    /* Mobile : 24px */
    margin-bottom: 15px;
    line-height: 1.3;
}

@media (min-width: 576px) {
    .page-cisoba-blog .main-title {
        font-size: 1.75rem;
        /* Tablette : 28px */
    }
}

@media (min-width: 768px) {
    .page-cisoba-blog .main-title {
        font-size: 2rem;
        /* Desktop : 32px */
        margin-bottom: 20px;
    }
}

.page-cisoba-blog .section-title {
    font-weight: 700;
    font-size: 1.1rem;
    /* Mobile : 17.6px */
    color: #333;
    margin-top: 30px;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .page-cisoba-blog .section-title {
        font-size: 1.25rem;
        /* Desktop : 20px */
        margin-top: 40px;
        margin-bottom: 20px;
    }
}

/* Paragraphes */
.page-cisoba-blog p {
    font-size: 1rem;
    /* Mobile : 16px */
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {

    .page-cisoba-blog>main>main>p,
    .page-cisoba-blog p {
        font-size: 1.125rem;
        /* Desktop : 18px */
    }
}

/* ============================================
   BADGE ET META INFO - RESPONSIVE
   ============================================ */
.page-cisoba-blog .badge-finance {
    background-color: #009669;
    color: white;
    font-weight: normal;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 0.75rem;
    margin-bottom: 12px;
    display: inline-block;
}

@media (min-width: 768px) {
    .page-cisoba-blog .badge-finance {
        margin-bottom: 15px;
    }
}

.page-cisoba-blog .meta-info {
    font-size: 0.8rem;
    /* Mobile : 12.8px */
    color: #6c757d;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .page-cisoba-blog .meta-info {
        font-size: 0.85rem;
        /* Desktop : 13.6px */
        margin-bottom: 30px;
    }
}

.page-cisoba-blog .author-img {
    width: 28px;
    /* Mobile : réduit */
    height: 28px;
    border-radius: 50%;
    margin-right: 8px;
    background: #ddd;
    flex-shrink: 0;
    /* Empêche la compression */
}

@media (min-width: 768px) {
    .page-cisoba-blog .author-img {
        width: 32px;
        /* Desktop : taille originale */
        height: 32px;
        margin-right: 10px;
    }
}

/* ============================================
   IMAGES - RESPONSIVE
   ============================================ */
.page-cisoba-blog .featured-image {
    width: 100%;
    height: auto;
    /* IMPORTANT : hauteur automatique */
    max-height: 250px;
    /* Mobile : limite la hauteur */
    object-fit: cover;
    /* Conserve les proportions */
    border-radius: 12px;
    margin-bottom: 25px;
}

@media (min-width: 576px) {
    .page-cisoba-blog .featured-image {
        max-height: 350px;
        /* Tablette */
        border-radius: 15px;
        margin-bottom: 30px;
    }
}

@media (min-width: 768px) {
    .page-cisoba-blog .featured-image {
        max-height: 452px;
        /* Desktop : taille originale */
        margin-bottom: 40px;
    }
}

/* ============================================
   QUOTE BOX - RESPONSIVE
   ============================================ */
.page-cisoba-blog .quote-box {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 20px 15px;
    /* Mobile : padding réduit */
    margin: 25px 0;
    font-style: italic;
    text-align: center;
    color: #4a4a4a;
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .page-cisoba-blog .quote-box {
        border-radius: 12px;
        padding: 30px;
        margin: 40px 0;
        font-size: 1rem;
    }
}

/* ============================================
   PUBLICITÉ - RESPONSIVE
   ============================================ */
.page-cisoba-blog .ad-placeholder {
    background-color: #e9ecef;
    height: 60px;
    /* Mobile : hauteur réduite */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #6c757d;
    margin: 25px 0;
    font-size: 0.85rem;
}

@media (min-width: 768px) {
    .page-cisoba-blog .ad-placeholder {
        height: 80px;
        /* Desktop : taille originale */
        border-radius: 8px;
        margin: 40px 0;
        font-size: 1rem;
    }
}

/* ============================================
   BOUTON - RESPONSIVE
   ============================================ */
.page-cisoba-blog .btn-custom-green {
    background-color: #009669;
    color: white;
    border: none;
    padding: 12px 30px;
    /* Mobile : padding adapté */
    border-radius: 8px;
    transition: background-color 0.2s;
    font-size: 1rem;
    width: 100%;
    /* Mobile : pleine largeur */
    max-width: 307px;
    /* Limite la largeur max */
    height: auto;
    /* Hauteur flexible */
    min-height: 50px;
    /* Hauteur minimum */
    cursor: pointer;
    font-weight: 500;
}

@media (min-width: 576px) {
    .page-cisoba-blog .btn-custom-green {
        width: auto;
        /* Tablette : largeur auto */
        padding: 10px 60px;
    }
}

@media (min-width: 768px) {
    .page-cisoba-blog .btn-custom-green {
        width: 307px;
        /* Desktop : largeur fixe */
        height: 50.17px;
    }
}

.page-cisoba-blog .btn-custom-green:hover {
    background-color: #007d57;
}

.page-cisoba-blog .btn-custom-green:active {
    transform: scale(0.98);
}

/* ============================================
   TEXTE SPÉCIFIQUE - RESPONSIVE
   ============================================ */
.page-cisoba-blog .text-muted-small {
    font-size: 0.8rem;
    /* Mobile : 12.8px */
    color: #6c757d;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .page-cisoba-blog .text-muted-small {
        font-size: 0.85rem;
        /* Desktop : 13.6px */
    }
}

/* ============================================
   ESPACEMENT GÉNÉRAL - RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
    .page-cisoba-blog .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .page-cisoba-blog .my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
}

/* ============================================
   AMÉLIORATION UX MOBILE
   ============================================ */
@media (max-width: 767px) {

    /* Empêche le zoom sur les inputs (si formulaires ajoutés) */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Améliore la lisibilité sur mobile */
    .page-cisoba-blog {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}


/* ========================================
   BLOG - ISOLATION GLOBALE (INCHANGÉ)
   ======================================== */
.page-cisoba-blog-list {
    font-family: 'Inter', sans-serif;
    background-color: #fcfdfd !important;
    color: #1a1a1a;
    --cisoba-green: #08a16c;
    --cisoba-dark-blue: #000066;
    --cisoba-light-green: #e6f7f2;
}

/* ========================================
   HERO SECTION DESKTOP (100% INCHANGÉ)
   ======================================== */
.page-cisoba-blog-list .hero-section {
    /* position: relative; */
    border-radius: 15px;
    overflow: hidden;
    margin-top: 20px;
    height: 500px;
}

.page-cisoba-blog-list .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-cisoba-blog-list .hero-card {
    position: absolute;
    top: 370px;
    left: 170px;
    background-color: var(--cisoba-green);
    color: black;
    padding: 40px;
    border: solid 1px white;
    border-radius: 15px;
    max-width: 600px;
}

.page-cisoba-blog-list .hero-card .badge {
    background-color: rgba(0, 0, 0, 0.8);
    margin-bottom: 15px;
    padding: 8px 12px;
}

/* ========================================
   HERO SECTION MOBILE (NOUVEAU)
   ======================================== */
.page-cisoba-blog-list .hero-section-mobile {
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
    overflow: hidden;
}

.page-cisoba-blog-list .hero-img-mobile {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   SECTION TITLE (100% INCHANGÉ)
   ======================================== */
.page-cisoba-blog-list .section-title {
    font-weight: 700;
    font-size: 28px;
    margin: 90px 0 30px 0;
}

/* ========================================
   ARTICLES GRID (100% INCHANGÉ DESKTOP)
   ======================================== */
.page-cisoba-blog-list .article-card {
    border: none;
    border-radius: 15px;
    background-color: var(--cisoba-light-green);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.page-cisoba-blog-list .article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.page-cisoba-blog-list .article-img-container {
    height: 200px;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
}

.page-cisoba-blog-list .article-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.page-cisoba-blog-list .article-card:hover .article-img {
    transform: scale(1.1);
}

.page-cisoba-blog-list .card-body {
    padding: 25px;
}

.page-cisoba-blog-list .card-category {
    background-color: var(--cisoba-green);
    color: white;
    font-size: 0.8rem;
    padding: 5px 12px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 15px;
}

.page-cisoba-blog-list .card-category a {
    color: white;
    font-size: 0.8rem;
    display: inline-block;
    text-decoration: none;
}

.page-cisoba-blog-list .card-title {
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.4;
    margin-bottom: 20px;
    min-height: 3em;
    color: #1a1a1a;
}

/* ========================================
   METADATA INFO (100% INCHANGÉ)
   ======================================== */
.page-cisoba-blog-list .author-info {
    align-items: center;
    font-size: 0.9rem;
}

.page-cisoba-blog-list .author-img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
    border: 2px solid white;
}

.page-cisoba-blog-list .publish-date {
    color: black;
    margin-left: 15px;
}

/* ========================================
   RESPONSIVE - MOBILE & TABLETTE
   ======================================== */

/* TABLETTE (768px - 991px) : 2 colonnes */
@media (min-width: 768px) and (max-width: 991px) {

    /* Section title : espacement réduit */
    .page-cisoba-blog-list .section-title {
        margin: 60px 0 25px 0;
    }
}

/* MOBILE (< 768px) */
@media (max-width: 767px) {

    /* Container : padding réduit */
    .page-cisoba-blog-list .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Section title : espacement mobile */
    .page-cisoba-blog-list .section-title {
        font-size: 24px;
        margin: 40px 0 20px 0;
    }

    /* Article cards : ajustements mobile */
    .page-cisoba-blog-list .article-img-container {
        height: 180px;
    }

    .page-cisoba-blog-list .card-body {
        padding: 20px;
    }

    .page-cisoba-blog-list .card-title {
        font-size: 1rem;
        min-height: auto;
    }

    /* Author info : responsive */
    .page-cisoba-blog-list .author-info {
        font-size: 0.85rem;
        flex-wrap: wrap;
    }

    .page-cisoba-blog-list .author-img {
        width: 30px;
        height: 30px;
    }

    .page-cisoba-blog-list .publish-date {
        margin-left: 0;
        flex-basis: 100%;
        margin-top: 5px;
    }

    /* Hover désactivé sur mobile */
    .page-cisoba-blog-list .article-card:hover {
        transform: none;
    }

    .page-cisoba-blog-list .article-card:hover .article-img {
        transform: none;
    }
}

/* PETIT MOBILE (< 576px) */
@media (max-width: 575px) {
    .page-cisoba-blog-list .section-title {
        font-size: 22px;
        margin: 30px 0 15px 0;
    }

    .page-cisoba-blog-list .article-img-container {
        height: 160px;
    }

    .page-cisoba-blog-list .card-body {
        padding: 18px;
    }

    .page-cisoba-blog-list .card-title {
        font-size: 0.95rem;
    }
}


/* CONNEXION - FIX RESPONSIVE SANS TOUCHER AU HEADER */

.page-cisoba-login {
    background-color: #f5f5f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    /* On retire le flex ici pour ne pas impacter le header */
    min-height: 100vh;
}

/* --- Layout --- */
.page-cisoba-login .login-container {
    display: flex;
    justify-content: center;
    /* On garde l'alignement pour le contenu sous le header */
    padding: 20px;
}

.page-cisoba-login .login-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 3rem;
    /* Espace par rapport au header */

    /* MODIFICATION : On remplace la largeur fixe par une largeur max */
    width: 100%;
    max-width: 505px;
    height: auto;
    /* On laisse la hauteur s'adapter au contenu */
    min-height: 499px;

    padding: 29px 2.5rem !important;
    box-sizing: border-box;
}

/* --- Typography --- */
.page-cisoba-login .login-title {
    color: #059669;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5rem;
}

.page-cisoba-login .login-subtitle {
    text-align: center;
    color: #000000;
    font-size: 18px;
    margin-bottom: 2rem;
}

/* --- Form Elements --- */
.page-cisoba-login .form-label {
    color: #333;
    font-size: 16.41px;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.page-cisoba-login .form-control {
    border: 1.82px solid #059669;
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    font-size: 16px;
    color: #059669;
    /* ✅ AJOUTÉ : texte vert par défaut */

    width: 100%;
    max-width: 435px;
    height: 53.64px;
    box-sizing: border-box;
}

.page-cisoba-login .form-control::placeholder {
    color: #059669;
    opacity: 1;
    /* Pour s'assurer que la couleur est bien visible */
}

.page-cisoba-login .form-control:focus {
    border-color: #00a651;
    box-shadow: 0 0 0 0.2rem rgba(0, 166, 81, 0.15);
    outline: none;
}


/* --- Buttons --- */
.page-cisoba-login .btn-submit {
    background-color: #01056A;
    color: white;

    /* MODIFICATION : Largeur adaptative */
    width: 100%;
    max-width: 435px;
    height: 50px;

    padding: 0.7rem;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 1.5rem;
    cursor: pointer;
}

.page-cisoba-login .btn-submit:hover {
    background-color: #0808a1;
}

/* --- Links & Secondary Texts --- */
.page-cisoba-login .forgot-password {
    text-align: center;
    margin-top: 1rem;
}

.page-cisoba-login .forgot-password a {
    color: #059669;
    text-decoration: none;
    font-size: 14px;
}

.page-cisoba-login .signup-link {
    text-align: center;
    margin-top: 1rem;
    font-size: 14px;
    color: #666;
}

.page-cisoba-login .signup-link a {
    color: #00a651;
    text-decoration: none;
    font-weight: 500;
}

/* --- Helper Classes --- */
.page-cisoba-login .lang-selector {
    font-size: 14px;
    text-align: center;
    margin-top: 1rem;
}

.page-cisoba-login .lang-selector a {
    color: #666;
    text-decoration: none;
    margin: 0 0.3rem;
}

/* =========================================
   MEDIA QUERIES (MOBILE)
   ========================================= */
@media (max-width: 576px) {
    .page-cisoba-login .login-card {
        padding: 20px 1.5rem !important;
        margin-top: 2rem;
        min-height: auto;
    }

    /* On s'assure que les éléments prennent toute la largeur sur petit mobile */
    .page-cisoba-login .form-control,
    .page-cisoba-login .btn-submit {
        max-width: 100%;
    }
}

/* ========================================
   CONTACT PAGE - RESPONSIVE & MODERN
   ======================================== */

/* --- Variables & Base Scope --- */
.page-cisoba-contact {
    --cisoba-navy: #01056A;
    --cisoba-green: #009b72;
    --cisoba-orange: #f38e00;
    --bg-light: #E0F5EE;

    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-cisoba-contact .head-title {
    color: var(--cisoba-navy);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* --- Contact Card --- */
.page-cisoba-contact .contact-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: none;
    margin-top: 3rem;
}

/* ========================================
   SIDEBAR INFORMATIONS (Desktop uniquement)
   ======================================== */
.page-cisoba-contact .contact-info-side {
    background-color: var(--cisoba-navy);
    color: white;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    border-radius: 15px !important;
    min-height: 600px;
}

/* Wrapper pour le contenu (permet de positionner les social-links en bas) */
.page-cisoba-contact .contact-info-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Cercles décoratifs superposés (2 cercles comme sur la maquette) */
.page-cisoba-contact .circle-decoration {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 1;
}

.page-cisoba-contact .circle-1 {
    bottom: -80px;
    right: -80px;
    width: 250px;
    height: 250px;
    opacity: 0.8;
}

.page-cisoba-contact .circle-2 {
    bottom: 30px;
    right: 50px;
    width: 180px;
    height: 180px;
    opacity: 0.5;
}

.page-cisoba-contact .info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 15px;
}

.page-cisoba-contact .info-item i {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.page-cisoba-contact .info-item p {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.9;
    line-height: 1.5;
}

/* Social Icons (Desktop) - POSITIONNÉS EN BAS */
.page-cisoba-contact .social-links {
    display: flex;
    gap: 15px;
    margin-top: auto;
    /* CRITICAL : pousse les icônes tout en bas */
}

.page-cisoba-contact .social-links a {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.page-cisoba-contact .social-links a:hover {
    background: var(--cisoba-orange);
    transform: translateY(-3px);
}

/* ========================================
   FORMULAIRE DE CONTACT
   ======================================== */
.page-cisoba-contact .contact-form-side {
    padding: 3rem;
}

.page-cisoba-contact .form-label {
    font-weight: 500;
    font-size: 14px;
    color: #333;
    margin-bottom: 0.5rem;
}

.page-cisoba-contact .required-star {
    color: #ff4d4d;
    margin-left: 3px;
}

.page-cisoba-contact .form-control {
    border: 1px solid #ddd;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    color: #666;
    height: 53.64px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.page-cisoba-contact .form-control:focus {
    border-color: var(--cisoba-orange);
    box-shadow: 0 0 0 0.2rem rgba(243, 142, 0, 0.15);
    outline: none;
}

.page-cisoba-contact .form-control::placeholder {
    color: #bbb;
}

.page-cisoba-contact textarea.form-control {
    height: 132px !important;
    resize: vertical;
}

.page-cisoba-contact .btn-send {
    background-color: var(--cisoba-orange);
    color: white;
    border: none;
    padding: 12px 35px;
    border-radius: 8px;
    font-weight: 600;
    float: right;
    box-shadow: 0 4px 10px rgba(243, 142, 0, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.page-cisoba-contact .btn-send:hover {
    background-color: #d97d00;
    box-shadow: 0 6px 15px rgba(243, 142, 0, 0.4);
    transform: translateY(-2px);
}

/* ========================================
   SECTION MOBILE - CARD DE CONTACT
   ======================================== */
.page-cisoba-contact .contact-info-mobile-card {
    background: var(--cisoba-navy);
    padding: 2rem;
    border-radius: 15px;
    color: white;
    box-shadow: 0 10px 30px rgba(1, 5, 106, 0.2);
    position: relative;
    overflow: hidden;
}

/* Titre principal mobile - 16px */
.page-cisoba-contact .contact-info-mobile-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-align: left;
}

/* Sous-titre mobile - 12px */
.page-cisoba-contact .subtitle-mobile {
    font-size: 12px;
    opacity: 0.75;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.page-cisoba-contact .info-item-mobile {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 1.5rem;
}

/* Icônes blanches - pas orange */
.page-cisoba-contact .info-item-mobile i {
    font-size: 1.1rem;
    color: white;
    flex-shrink: 0;
}

.page-cisoba-contact .info-item-mobile p {
    margin: 0;
    font-size: 12px;
    opacity: 0.95;
    line-height: 1.6;
}

.page-cisoba-contact .social-links-mobile {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 2rem;
    padding-top: 0;
    border-top: none;
    position: relative;
    z-index: 2;
}

/* Styles spécifiques pour chaque réseau social selon la maquette */
.page-cisoba-contact .social-links-mobile a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

/* Twitter - fond orange, icône blanche */
.page-cisoba-contact .social-twitter {
    background: var(--cisoba-orange);
    color: white;
}

/* Instagram - fond blanc, icône navy */
.page-cisoba-contact .social-instagram {
    background: white;
    color: var(--cisoba-navy);
}

/* Discord - fond orange, icône blanche */
.page-cisoba-contact .social-discord {
    background: var(--cisoba-orange);
    color: white;
}

.page-cisoba-contact .social-links-mobile a:hover {
    transform: scale(1.1);
}

/* Cercles décoratifs mobiles */
.page-cisoba-contact .circle-decoration-mobile {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.page-cisoba-contact .circle-mobile-1 {
    bottom: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    opacity: 0.8;
}

.page-cisoba-contact .circle-mobile-2 {
    bottom: 20px;
    right: 40px;
    width: 120px;
    height: 120px;
    opacity: 0.5;
}

/* ========================================
   MEDIA QUERIES - RESPONSIVE DESIGN
   ======================================== */

/* --- TABLETTE (768px - 991px) --- */
@media (max-width: 991.98px) and (min-width: 768px) {
    .page-cisoba-contact .contact-card {
        margin-top: 2rem;
    }

    .page-cisoba-contact .contact-form-side {
        padding: 2.5rem;
    }

    .page-cisoba-contact .contact-info-mobile-card {
        padding: 2.5rem;
    }

    /* Tailles de police pour tablette */
    .page-cisoba-contact .contact-info-mobile-card h4 {
        font-size: 16px;
    }

    .page-cisoba-contact .subtitle-mobile {
        font-size: 12px;
    }

    .page-cisoba-contact .info-item-mobile p {
        font-size: 12px;
    }
}

/* --- MOBILE (< 768px) --- */
@media (max-width: 767.98px) {
    .page-cisoba-contact .head-title {
        font-size: 1.75rem;
    }

    .page-cisoba-contact .contact-card {
        padding: 1rem !important;
        margin-top: 1.5rem;
        border-radius: 12px;
    }

    .page-cisoba-contact .contact-form-side {
        padding: 1.5rem;
    }

    /* Tailles de police strictes pour mobile */
    .page-cisoba-contact .contact-info-mobile-card h4 {
        font-size: 16px;
    }

    .page-cisoba-contact .subtitle-mobile {
        font-size: 12px;
    }

    .page-cisoba-contact .info-item-mobile p {
        font-size: 12px;
    }

    /* Labels et inputs à 14px */
    .page-cisoba-contact .form-label {
        font-size: 14px;
    }

    .page-cisoba-contact .form-control {
        font-size: 14px;
        padding: 14px 16px;
    }

    /* Bouton centré sur mobile */
    .page-cisoba-contact .btn-send {
        float: none;
        width: 100%;
        margin-top: 1rem;
    }

    /* Card mobile des infos de contact */
    .page-cisoba-contact .contact-info-mobile-card {
        padding: 1.5rem;
    }

    .page-cisoba-contact .info-item-mobile {
        margin-bottom: 1.2rem;
    }

    .page-cisoba-contact .social-links-mobile {
        margin-top: 1.5rem;
        padding-top: 0;
    }
}

/* --- TRÈS PETIT MOBILE (< 400px) --- */
@media (max-width: 399.98px) {
    .page-cisoba-contact .contact-form-side {
        padding: 1rem;
    }

    /* Maintenir les tailles strictes même sur très petit mobile */
    .page-cisoba-contact .form-label {
        font-size: 14px;
    }

    .page-cisoba-contact .form-control {
        font-size: 14px;
    }

    .page-cisoba-contact .contact-info-mobile-card h4 {
        font-size: 16px;
    }

    .page-cisoba-contact .subtitle-mobile {
        font-size: 12px;
    }

    .page-cisoba-contact .info-item-mobile p {
        font-size: 12px;
    }

    .page-cisoba-contact .btn-send {
        padding: 14px 20px;
        font-size: 0.9rem;
    }

    .page-cisoba-contact .contact-info-mobile-card {
        padding: 1.25rem;
    }
}

/* ========================================
   AMÉLIORATION ACCESSIBILITÉ
   ======================================== */
.page-cisoba-contact .form-control:focus-visible {
    outline: 2px solid var(--cisoba-orange);
    outline-offset: 2px;
}

.page-cisoba-contact .btn-send:focus-visible {
    outline: 3px solid var(--cisoba-navy);
    outline-offset: 3px;
}

/* Évite le scroll horizontal sur tout écran */
.page-cisoba-contact main {
    overflow-x: hidden;
}


/* LANDING_NY */
/* --- Global Scope --- */
.page-cisoba-maintenance {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* --- Hero Section --- */
.page-cisoba-maintenance .hero-section {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
}

/* --- Image Container --- */
.page-cisoba-maintenance .hero-img-wrapper {
    /* Alignement bas sur desktop */
    align-items: flex-end;
}

.page-cisoba-maintenance .hero-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* --- Text Container --- */
.page-cisoba-maintenance .hero-text-wrapper {
    padding: 2rem 1rem;
}

/* --- Typography --- */
.page-cisoba-maintenance .oups-text {
    font-weight: 700;
    font-size: 2.5rem;
    color: #000;
    margin: 0;
    line-height: 1.2;
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
======================================== */

/* --- MOBILE (< 576px) --- */
@media (max-width: 575.98px) {
    .page-cisoba-maintenance .hero-section {
        min-height: 100vh;
        padding-top: 1.5rem;
    }

    .page-cisoba-maintenance .hero-text-wrapper {
        padding: 2rem 1.5rem;
        text-align: center;
    }

    .page-cisoba-maintenance .oups-text {
        font-size: 1.75rem;
        /* 28px - plus lisible sur petit écran */
    }

    .page-cisoba-maintenance .hero-img-wrapper {
        align-items: center;
        /* Centrage image sur mobile */
        padding: 1rem;
    }

    .page-cisoba-maintenance .hero-img {
        max-width: 90%;
    }
}

/* --- TABLETTE (576px - 767.98px) --- */
@media (min-width: 576px) and (max-width: 767.98px) {
    .page-cisoba-maintenance .hero-section {
        padding-top: 2rem;
    }

    .page-cisoba-maintenance .hero-text-wrapper {
        padding: 2.5rem 2rem;
        text-align: center;
    }

    .page-cisoba-maintenance .oups-text {
        font-size: 2rem;
        /* 32px - taille intermédiaire */
    }

    .page-cisoba-maintenance .hero-img-wrapper {
        align-items: center;
        padding: 1.5rem;
    }

    .page-cisoba-maintenance .hero-img {
        max-width: 85%;
    }
}

/* --- DESKTOP (≥ 768px) --- */
@media (min-width: 768px) {
    .page-cisoba-maintenance .hero-section {
        min-height: calc(100vh - 80px);
    }

    .page-cisoba-maintenance .hero-text-wrapper {
        padding: 3rem;
        text-align: left;
    }

    .page-cisoba-maintenance .oups-text {
        font-size: 2.5rem;
        /* 40px - taille originale */
    }

    .page-cisoba-maintenance .hero-img-wrapper {
        align-items: flex-end;
        /* Alignement bas restauré */
        padding: 0;
    }

    .page-cisoba-maintenance .hero-img {
        max-width: 100%;
    }
}

/* --- LARGE DESKTOP (≥ 1200px) --- */
@media (min-width: 1200px) {
    .page-cisoba-maintenance .oups-text {
        font-size: 3rem;
        /* 48px - encore plus grand sur grand écran */
    }

    .page-cisoba-maintenance .hero-text-wrapper {
        padding-left: 4rem;
    }
}


/* LANDING */
/* --- Root & Scope --- */
.page-cisoba-home {
    --cisoba-blue: #05016A;
    --cisoba-light-blue: #E6F5F1;
    --cisoba-green: #1a6d00;
    --cisoba-footer-green: #009966;
    --cisoba-orange: #F97316;
    font-family: 'Inter', sans-serif;
    color: black;
}

/* --- Helpers --- */
.page-cisoba-home .text-cisoba-blue {
    color: var(--cisoba-blue);
}

.page-cisoba-home .bg-cisoba-blue {
    background-color: var(--cisoba-blue);
}

.page-cisoba-home .fondateur.bg-cisoba-blue {
    background-color: #01056A;
    position: relative;
    background: url('/static/accueil/img/back-pattern.jpeg') #1b20bbfd;
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    color: white;
    padding: 2rem;
}

.page-cisoba-home .constructeur {
    background-color: #01056A;
    position: relative;
    background: url('/static/accueil/img/back-pattern.jpeg') #1b20bb8c;
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    color: white;
    padding: 2rem;
}

.page-cisoba-home .bg-cisoba-light {
    background-color: var(--cisoba-light-blue);
}

/* --- Hero Section --- */
.page-cisoba-home .hero-section {
    padding: 59px 0 75px;
    background-color: var(--cisoba-light-blue);
}

.page-cisoba-home .hero-img {
    border-radius: 20px;
    width: 100%;
    max-width: 492px;
    height: auto;
    aspect-ratio: 492 / 433;
    margin: 0 auto;
    display: block;
}

.page-cisoba-home .text-cisoba-orange {
    color: var(--cisoba-orange);
}

.page-cisoba-home .hero-description {
    font-size: 1rem;
    color: black;
}

/* --- Generic Sections --- */
.page-cisoba-home .section-padding {
    padding: 80px 0;
}

.page-cisoba-home .process-section-bg {
    background-color: #FEF2E6;
}

.page-cisoba-home .card-process {
    background-color: var(--cisoba-blue);
    color: white;
    border-radius: 8px;
    padding: 25px;
    height: 100%;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.page-cisoba-home .why-description {
    opacity: 0.9;
    max-width: 550px;
}

/* --- Valeurs --- */
.page-cisoba-home .value-card {
    border-radius: 12px;
    padding: 30px;
    color: white;
    text-align: center;
    transition: transform 0.3s;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page-cisoba-home .val-impact {
    background-color: #ff4d4d;
}

.page-cisoba-home .val-solidarite {
    background-color: #F97316;
}

.page-cisoba-home .val-innovation {
    background-color: #0b3d1f;
}

.page-cisoba-home .val-responsabilite {
    background-color: #007a3d;
}

.page-cisoba-home .val-integrite {
    background-color: #1565c0;
}

.page-cisoba-home .value-card:hover {
    transform: translateY(-5px);
}

/* --- Membre Fondateur Section --- */
.page-cisoba-home .bg-fondateur {
    background-color: var(--cisoba-green);
    border-radius: 20px;
    color: white;
}

.page-cisoba-home .img-fondateur {
    border-radius: 15px;
    width: 100%;
    max-width: 374px;
    height: auto;
    aspect-ratio: 374 / 470;
    display: block;
}

.page-cisoba-home .special-card {
    height: auto;
    min-height: 212px;
    padding: 16px 23px !important;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
    will-change: transform;
}

.page-cisoba-home .special-card:hover {
    transform: scale(1.05);
    background-color: var(--cisoba-blue);
    color: white;
}

.page-cisoba-home .btn-outline-cisoba-blue {
    border-color: var(--cisoba-blue);
    color: var(--cisoba-blue);
    border-radius: 9px;
    border-width: 2px;
    height: 48px !important;
    width: 100%;
    max-width: 298px;
    padding: 10px !important;
}

.page-cisoba-home .btn-outline-cisoba-blue:hover,
.page-cisoba-home .btn-outline-cisoba-blue:active,
.page-cisoba-home .btn-outline-cisoba-blue:focus-visible {
    border-color: var(--cisoba-blue) !important;
    color: var(--cisoba-light-blue) !important;
    border-radius: 9px !important;
    border-width: 2px !important;
    background-color: var(--cisoba-blue) !important;
}

.page-cisoba-home .btn-cisoba {
    border-radius: 9px;
    border-width: 2px;
    height: 48px !important;
    width: 100%;
    max-width: 298px;
    padding: 10px !important;
}

.page-cisoba-home .btn-cisoba:hover {
    border-radius: 9px;
    border-color: var(--cisoba-orange) !important;
    color: white !important;
    border-width: 2px;
    height: 48px !important;
    width: 100%;
    max-width: 298px;
    padding: 10px !important;
    background-color: var(--cisoba-orange) !important;
}

/* ===================================== */
/* SYSTÈME D'AFFICHAGE MOBILE/DESKTOP */
/* ===================================== */

/* Titre "Notre Vision et Mission" - uniquement mobile */
.page-cisoba-home .mobile-only-title {
    display: block;
    color: #000066;
}

/* Par défaut sur mobile : afficher les images, masquer le contenu desktop */
.page-cisoba-home .mobile-only-image {
    display: block;
}

.page-cisoba-home .desktop-only-content {
    display: none;
}

/* Sur mobile, les images remplacent complètement les sections */
/* Retirer le padding et le background de la section sur mobile */
.page-cisoba-home .process-section-wrapper,
.page-cisoba-home .values-section-wrapper,
.page-cisoba-home .impact-section-wrapper {
    padding: 0 !important;
}

.page-cisoba-home .process-section-wrapper {
    background-color: transparent !important;
}

.page-cisoba-home .impact-section-wrapper {
    background: none !important;
}

/* Les images mobiles doivent couvrir toute la largeur sans marge */
.page-cisoba-home .mobile-only-image {
    width: 100%;
    margin: 0;
    padding: 0;
}

.page-cisoba-home .mobile-only-image img {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

/* À partir de 768px (tablette et desktop) : masquer les images et titre mobile, afficher le contenu */
@media (min-width: 768px) {
    .page-cisoba-home .mobile-only-title {
        display: none;
    }

    .page-cisoba-home .mobile-only-image {
        display: none;
    }

    .page-cisoba-home .desktop-only-content {
        display: block;
    }

    /* Restaurer le padding et background sur desktop */
    .page-cisoba-home .process-section-wrapper,
    .page-cisoba-home .values-section-wrapper,
    .page-cisoba-home .impact-section-wrapper {
        padding: 80px 0 !important;
    }

    .page-cisoba-home .process-section-wrapper {
        background-color: #FEF2E6 !important;
    }

    .page-cisoba-home .impact-section-wrapper {
        background-color: #01056A !important;
        background: url('/static/accueil/img/back-pattern.jpeg') #1b20bb8c !important;
        background-blend-mode: overlay !important;
        background-size: cover !important;
        background-position: center !important;
    }
}

/* ===================================== */
/* RESPONSIVE MEDIA QUERIES - MOBILE FIRST */
/* ===================================== */

/* Mobile par défaut (320px - 767px) */
@media (max-width: 767px) {
    /* ===================================== */
    /* TYPOGRAPHIE MOBILE */
    /* ===================================== */

    /* Grands titres H2 à 18px */
    .page-cisoba-home h2,
    .page-cisoba-home .hero-section h2 {
        font-size: 18px !important;
        margin-top: -30px;
    }

    /* Sous-titres H3 à 12px */
    .page-cisoba-home h3 {
        font-size: 12px !important;
    }

    /* Tous les paragraphes et textes à 12px */
    .page-cisoba-home p,
    .page-cisoba-home .lead,
    .page-cisoba-home .hero-description,
    .page-cisoba-home .why-description,
    .page-cisoba-home li,
    .page-cisoba-home .btn,
    .page-cisoba-home .special-card p {
        font-size: 12px !important;
    }

    /* ===================================== */
    /* LAYOUT MOBILE */
    /* ===================================== */

    /* Hero Section */
    .page-cisoba-home .hero-section {
        padding: 30px 0 40px;
    }

    .page-cisoba-home .hero-img {
        max-width: 100%;
        margin-bottom: 25px;
        border-radius: 15px;
    }

    .page-cisoba-home .hero-description {
        width: 100% !important;
    }

    /* Sections génériques */
    .page-cisoba-home .section-padding {
        padding: 40px 0;
    }

    /* Section Vision/Mission garde son padding sur mobile */
    .page-cisoba-home .vision-mission-section {
        padding: 40px 0 !important;
    }

    /* Section "Pourquoi CISOBA" */
    .page-cisoba-home .why-description {
        width: 100% !important;
    }

    .page-cisoba-home .img-fondateur {
        max-width: 100%;
        margin-bottom: 20px;
    }

    /* Images mobiles - pas de style supplémentaire car déjà géré dans le système mobile/desktop */

    /* Cartes Processus (masquées sur mobile) */
    .page-cisoba-home .card-process {
        padding: 20px;
        min-height: 100px;
    }

    /* Cartes Valeurs (masquées sur mobile) */
    .page-cisoba-home .value-card {
        padding: 20px;
        min-height: 130px;
        margin-bottom: 15px;
    }

    /* Sections avec background */
    .page-cisoba-home .fondateur.bg-cisoba-blue,
    .page-cisoba-home .constructeur {
        padding: 1.5rem 1rem;
        border-radius: 15px;
    }

    .page-cisoba-home .bg-fondateur {
        border-radius: 15px;
        padding: 2rem 1.5rem !important;
    }

    /* Boutons */
    .page-cisoba-home .btn-outline-cisoba-blue,
    .page-cisoba-home .btn-cisoba {
        max-width: 100%;
        height: 44px !important;
    }

    /* Special Cards */
    .page-cisoba-home .special-card {
        min-height: 180px;
        padding: 14px 18px !important;
    }
}

/* Tablettes (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .page-cisoba-home .hero-section {
        padding: 40px 0 50px;
    }

    .page-cisoba-home .hero-img {
        max-width: 400px;
    }

    .page-cisoba-home .section-padding {
        padding: 60px 0;
    }

    .page-cisoba-home .img-fondateur {
        max-width: 300px;
        margin: 0 auto 20px;
    }

    .page-cisoba-home .value-card {
        padding: 25px;
        min-height: 140px;
    }

    .page-cisoba-home .card-process {
        min-height: 120px;
    }

    .page-cisoba-home .fondateur.bg-cisoba-blue,
    .page-cisoba-home .constructeur {
        padding: 1.5rem;
    }
}

/* Desktop (1024px et plus) */
@media (min-width: 1024px) {
    .page-cisoba-home .hero-description {
        width: 97%;
    }

    .page-cisoba-home .why-description {
        width: 110%;
    }

    /* Float pour image "Impact attendu" desktop uniquement */
    .page-cisoba-home .constructeur .img-fondateur {
        float: right;
    }

    /* Float pour dernière image desktop */
    .page-cisoba-home .bg-fondateur .img-fondateur {
        max-width: 388px;
        height: 345px !important;
    }
}

/* Très petits mobiles (moins de 360px) */
@media (max-width: 359px) {
    /* La typographie reste la même (18px titres, 12px textes) */

    .page-cisoba-home .hero-section {
        padding: 20px 0 30px;
    }

    .page-cisoba-home .section-padding {
        padding: 30px 0;
    }

    /* Section Vision/Mission garde son padding sur très petits mobiles */
    .page-cisoba-home .vision-mission-section {
        padding: 30px 0 !important;
    }

    .page-cisoba-home .card-process {
        padding: 15px;
        min-height: 90px;
    }

    .page-cisoba-home .value-card {
        padding: 18px 12px;
        min-height: 120px;
    }

    .page-cisoba-home .fondateur.bg-cisoba-blue,
    .page-cisoba-home .constructeur {
        padding: 1rem 0.8rem;
        border-radius: 12px;
        margin-bottom: 20px;
    }

    .page-cisoba-home .bg-fondateur {
        padding: 1.5rem 1rem !important;
        border-radius: 12px;
    }

    .page-cisoba-home .btn-outline-cisoba-blue,
    .page-cisoba-home .btn-cisoba {
        height: 40px !important;
        padding: 8px !important;
        border-radius: 8px;
    }

    .page-cisoba-home .special-card {
        min-height: auto;
        padding: 16px !important;
    }
}



/* ========================================
   VERSION SANS CONTAINER BOOTSTRAP
   Solution alternative si Bootstrap pose problème
======================================== */

.page-cisoba-success {
    --cisoba-navy: #030844;
    --cisoba-success: #2d7a00;
    --bg-body: #ffffff;

    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

/* ========================================
   HEADER / FOOTER
======================================== */

header:not(.header-logo),
body>header:not(.header-logo),
.page-cisoba-success header:not(.header-logo),
body.page-cisoba-success header:not(.header-logo) {
    display: block;
    width: 100%;
}

footer,
body>footer,
.page-cisoba-success footer,
body.page-cisoba-success footer {
    display: block;
    width: 100%;
}

/* ========================================
   LOGO
======================================== */


@media (min-width: 768px) {
    .page-cisoba-success .header-logo {
        display: flex;
        width: 100%;
        max-width: 1270px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 40px auto 72px auto;
    }
}

.page-cisoba-success .logo-img-wrapper {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-cisoba-success .logo-img {
    width: 100%;
    max-width: 100px;
    height: auto;
    aspect-ratio: 100 / 131;
    object-fit: contain;
}

/* ========================================
   MAIN WRAPPER (remplace container)
======================================== */

.page-cisoba-success .success-main-wrapper {
    width: 100%;
    padding: 20px 15px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .page-cisoba-success .success-main-wrapper {
        padding: 0 20px 40px 20px;
    }
}

/* ========================================
   CARD
======================================== */

.page-cisoba-success .success-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 2.5rem 1.5rem;
    width: 100%;
    max-width: 450px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

@media (min-width: 480px) {
    .page-cisoba-success .success-card {
        padding: 3rem 2rem;
    }
}

@media (min-width: 768px) {
    .page-cisoba-success .success-card {
        padding: 3.5rem 2rem;
    }
}

.page-cisoba-success .success-icon-circle {
    width: 48px;
    height: 48px;
    background-color: var(--cisoba-success);
    color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 1.5rem;
}

/* ========================================
   TYPOGRAPHY
======================================== */

.page-cisoba-success .card-title {
    color: var(--cisoba-navy);
    font-weight: 700;
    font-size: 1.375rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 480px) {
    .page-cisoba-success .card-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

.page-cisoba-success .card-text {
    color: var(--cisoba-navy);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    opacity: 0.9;
}

@media (min-width: 480px) {
    .page-cisoba-success .card-text {
        font-size: 1rem;
        margin-bottom: 2.5rem;
    }
}

/* ========================================
   BUTTON
======================================== */

.page-cisoba-success .btn-cisoba-primary {
    background-color: var(--cisoba-navy);
    color: white;
    border: none;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    width: 100%;
    min-height: 48px;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 12px rgba(3, 8, 68, 0.2);
    cursor: pointer;
}

@media (min-width: 480px) {
    .page-cisoba-success .btn-cisoba-primary {
        padding: 12px 30px;
        font-size: 0.95rem;
    }
}

.page-cisoba-success .btn-cisoba-primary:hover {
    background-color: #02052e;
    color: white;
    transform: translateY(-1px);
}

@media (hover: none) and (pointer: coarse) {
    .page-cisoba-success .btn-cisoba-primary:hover {
        transform: none;
    }

    .page-cisoba-success .btn-cisoba-primary:active {
        transform: scale(0.98);
    }
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 359px) {
    .page-cisoba-success .success-card {
        padding: 2rem 1.25rem;
    }

    .page-cisoba-success .card-title {
        font-size: 1.25rem;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .page-cisoba-success {
        min-height: auto;
    }

    .page-cisoba-success .success-main-wrapper {
        padding: 15px;
    }

    .page-cisoba-success .success-card {
        padding: 2rem 1.5rem;
    }
}


/* ============================================
   MDP FORGOT - RESPONSIVE (DESKTOP INCHANGÉ)
   ============================================ */

/* --- Variables & Base (DESKTOP ORIGINAL) --- */
.page-cisoba-forgot {
    --cisoba-navy: #050164;
    --cisoba-green: #009b72;
    --text-gray: #6c757d;
    --bg-illustration: #f2f2f2;
    font-family: 'Inter', sans-serif;
    background-color: #fff;
    height: 100vh;
    overflow-x: hidden;
}

.page-cisoba-forgot .content-wrapper {
    max-width: 600px;
}

/* --- Logo Styling (DESKTOP ORIGINAL) --- */
.page-cisoba-forgot .logo-icon {
    width: 50px;
    height: 50px;
    position: relative;
    margin-bottom: 5px;
}

.page-cisoba-forgot .logo-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid var(--cisoba-green);
    border-radius: 50%;
    clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%);
}

.page-cisoba-forgot .logo-icon i {
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 30px;
    color: var(--cisoba-navy);
}

.page-cisoba-forgot .logo-text {
    font-weight: 800;
    color: #000;
    letter-spacing: 0.5px;
}

/* --- Typography (DESKTOP ORIGINAL) --- */
.page-cisoba-forgot .link-back {
    text-decoration: none;
    color: #555;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 1.5rem;
}

.page-cisoba-forgot .link-back:hover {
    color: var(--cisoba-navy);
}

.page-cisoba-forgot h1 {
    color: var(--cisoba-navy);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.page-cisoba-forgot .subtitle {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    max-width: 450px;
}

/* --- Form Elements (DESKTOP ORIGINAL) --- */
.page-cisoba-forgot .custom-input-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.page-cisoba-forgot .custom-input-group .form-control {
    border: 1px solid var(--text-gray);
    border-radius: 6px;
    padding: 12px 15px;
    height: 50px;
    box-shadow: none;
    color: #333;
    font-weight: 500;
}

.page-cisoba-forgot .custom-input-group .form-control:focus {
    border-color: var(--cisoba-navy);
    box-shadow: 0 0 0 3px rgba(3, 8, 68, 0.1);
}

.page-cisoba-forgot .custom-input-group label {
    position: absolute;
    top: -10px;
    left: 12px;
    background-color: white;
    padding: 0 5px;
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
    z-index: 5;
}

.page-cisoba-forgot .btn-submit {
    background-color: var(--cisoba-navy);
    color: white;
    border: none;
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    transition: background 0.2s;
}

.page-cisoba-forgot .btn-submit:hover {
    background-color: #02052e;
    color: white;
}

/* --- Social & Dividers (DESKTOP ORIGINAL) --- */
.page-cisoba-forgot .divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
    margin: 2rem 0;
}

.page-cisoba-forgot .divider::before,
.page-cisoba-forgot .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}

.page-cisoba-forgot .divider span {
    padding: 0 10px;
}

.page-cisoba-forgot .social-btn {
    border: 1px solid #7c7c9c;
    background: white;
    border-radius: 6px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.page-cisoba-forgot .social-btn:hover {
    border: 1px solid #7c7c9c;
    background: var(--cisoba-navy);
    border-radius: 6px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.page-cisoba-forgot .social-icon {
    font-size: 1.2rem;
}

.page-cisoba-forgot .icon-google {
    background: -webkit-linear-gradient(45deg, #4285F4, #DB4437, #F4B400, #0F9D58);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Right Panel (DESKTOP ORIGINAL) --- */
.page-cisoba-forgot .right-panel {
    border-radius: 20px;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem;
}

.page-cisoba-forgot .illustration-placeholder {
    max-width: 80%;
    height: auto;
    opacity: 0.9;
}

/* ============================================
   AJOUTS RESPONSIVE MOBILE UNIQUEMENT
   ============================================ */

/* --- Header/Footer Desktop : Cachés par défaut --- */
.page-cisoba-forgot .cisoba-header-mobile,
.page-cisoba-forgot .cisoba-footer-mobile {
    display: none;
}

/* ============================================
   MEDIA QUERIES - MOBILE & TABLETTE (< 992px)
   ============================================ */
@media (max-width: 991.98px) {

    /* --- Afficher Header/Footer sur mobile --- */
    .page-cisoba-forgot .cisoba-header-mobile,
    .page-cisoba-forgot .cisoba-footer-mobile {
        display: block;
    }

    /* --- Cacher le logo sur mobile --- */
    .page-cisoba-forgot .logo-container {
        display: none;
    }

    /* --- Ajustements conteneur mobile --- */
    .page-cisoba-forgot {
        height: auto;
        min-height: 100vh;
    }

    .page-cisoba-forgot .content-wrapper {
        max-width: 100%;
        padding: 2rem 1.5rem;
    }

    /* --- Typography mobile --- */
    .page-cisoba-forgot h1 {
        font-size: 1.5rem;
    }

    .page-cisoba-forgot .subtitle {
        font-size: 0.9rem;
        max-width: 100%;
    }

    .page-cisoba-forgot .link-back {
        font-size: 0.85rem;
    }

    /* --- Form mobile --- */
    .page-cisoba-forgot .custom-input-group .form-control {
        height: 48px;
        font-size: 0.95rem;
    }

    .page-cisoba-forgot .custom-input-group label {
        font-size: 0.8rem;
    }

    .page-cisoba-forgot .btn-submit {
        font-size: 0.95rem;
        padding: 13px;
    }
}

/* ============================================
   MEDIA QUERIES - TRÈS PETIT MOBILE (< 576px)
   ============================================ */
@media (max-width: 575.98px) {

    .page-cisoba-forgot .content-wrapper {
        padding: 1.5rem 1rem;
    }

    .page-cisoba-forgot h1 {
        font-size: 1.35rem;
    }

    .page-cisoba-forgot .subtitle {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }

    .page-cisoba-forgot .custom-input-group {
        margin-bottom: 1.25rem;
    }
}

/* ============================================
   MDP SET - RESPONSIVE (DESKTOP INCHANGÉ)
   ============================================ */

/* --- Scope & Variables (DESKTOP ORIGINAL) --- */
.page-cisoba-reset {
    --cisoba-navy: #050164;
    --cisoba-green: #009b72;
    --text-muted: #000102;
    --border-color: #adb5bd;
    --bg-light-gray: #f4f4f4;

    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    height: 100vh;
    display: flex;
    align-items: center;
}

/* ============================================
   GESTION HEADER/FOOTER - PAR DÉFAUT CACHÉS
   ============================================ */

/* Header/Footer cachés sur desktop (≥992px) */
.page-cisoba-reset .cisoba-header-mobile,
.page-cisoba-reset .cisoba-footer-mobile {
    display: none;
}

/* ============================================
   LOGO - VISIBLE PAR DÉFAUT (DESKTOP)
   ============================================ */

/* Logo visible sur DESKTOP par défaut */
.page-cisoba-reset .brand-logo {
    display: flex !important;
    /* AJOUT DU !important POUR FORCER */
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 3rem;
}

.page-cisoba-reset .logo-icon {
    width: 50px;
    height: 50px;
    position: relative;
    margin-bottom: 5px;
}

.page-cisoba-reset .logo-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid var(--cisoba-green);
    border-radius: 50%;
    clip-path: polygon(0 0, 100% 0, 100% 65%, 0 65%);
}

.page-cisoba-reset .logo-symbol {
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 32px;
    color: var(--cisoba-navy);
}

.page-cisoba-reset .logo-brand-name {
    font-weight: 800;
    font-size: 1.25rem;
    color: #212529;
}

.page-cisoba-reset .logo-img {
    max-width: 150px;
    width: 100%;
    height: auto;
    display: block;
}

/* --- Form Layout (DESKTOP ORIGINAL) --- */
.page-cisoba-reset .form-container {
    max-width: 520px;
    width: 100%;
    padding: 2rem;
}

.page-cisoba-reset h1 {
    color: var(--cisoba-navy);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.page-cisoba-reset .subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 2.5rem;
}

/* --- Input Group (DESKTOP ORIGINAL) --- */
.page-cisoba-reset .custom-input-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.page-cisoba-reset .custom-input-group label {
    position: absolute;
    top: -10px;
    left: 12px;
    background: white;
    padding: 0 8px;
    font-size: 0.8rem;
    color: #555;
    font-weight: 500;
    z-index: 2;
}

.page-cisoba-reset .custom-input-group .form-control {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: 54px;
    padding: 10px 45px 10px 15px;
    font-size: 0.95rem;
    color: #333;
    box-shadow: none;
}

.page-cisoba-reset .custom-input-group .form-control:focus {
    border-color: var(--cisoba-navy);
    border-width: 1.5px;
}

.page-cisoba-reset .input-icon-end {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.1s ease;
    user-select: none;
}

.page-cisoba-reset .input-icon-end:hover {
    color: var(--cisoba-navy);
}

.page-cisoba-reset .input-icon-end:active {
    transform: translateY(-50%) scale(0.95);
}

/* --- Button (DESKTOP ORIGINAL) --- */
.page-cisoba-reset .btn-submit {
    background-color: var(--cisoba-navy);
    color: white;
    border: none;
    width: 100%;
    height: 54px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 1rem;
    transition: opacity 0.2s;
}

.page-cisoba-reset .btn-submit:hover {
    background-color: #050164;
    opacity: 0.95;
}

/* --- Side Panel (DESKTOP ORIGINAL) --- */
.page-cisoba-reset .illustration-side {
    border-radius: 24px;
    height: 90vh;
    margin: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-cisoba-reset .illustration-img {
    max-width: 80%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1));
}

/* ============================================
   MEDIA QUERIES - RESPONSIVE MOBILE
   ============================================ */

/* --- TABLETTE & MOBILE (< 992px) --- */
@media (max-width: 991.98px) {

    /* Afficher Header/Footer sur mobile */
    .page-cisoba-reset .cisoba-header-mobile,
    .page-cisoba-reset .cisoba-footer-mobile {
        display: block !important;
    }

    /* CACHER le logo sur mobile */
    .page-cisoba-reset .brand-logo {
        display: none !important;
    }

    /* Ajustements conteneur principal */
    .page-cisoba-reset {
        height: auto;
        min-height: 100vh;
        align-items: flex-start;
        padding-top: 0;
    }

    /* Form container mobile */
    .page-cisoba-reset .form-container {
        max-width: 100%;
        padding: 2rem 1.5rem;
    }

    /* Typography mobile */
    .page-cisoba-reset h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .page-cisoba-reset .subtitle {
        font-size: 0.9rem;
        margin-bottom: 2rem;
    }

    /* Input mobile */
    .page-cisoba-reset .custom-input-group .form-control {
        height: 50px;
        font-size: 0.9rem;
    }

    .page-cisoba-reset .custom-input-group label {
        font-size: 0.75rem;
    }

    .page-cisoba-reset .custom-input-group {
        margin-bottom: 1.25rem;
    }

    /* Button mobile */
    .page-cisoba-reset .btn-submit {
        height: 50px;
        font-size: 0.9rem;
    }

    /* Cacher illustration */
    .page-cisoba-reset .illustration-side {
        display: none !important;
    }
}

/* --- TRÈS PETIT MOBILE (< 576px) --- */
@media (max-width: 575.98px) {

    .page-cisoba-reset .form-container {
        padding: 1.5rem 1rem;
    }

    .page-cisoba-reset h1 {
        font-size: 1.35rem;
    }

    .page-cisoba-reset .subtitle {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }

    .page-cisoba-reset .custom-input-group {
        margin-bottom: 1rem;
    }

    .page-cisoba-reset .custom-input-group .form-control {
        height: 48px;
    }

    .page-cisoba-reset .btn-submit {
        height: 48px;
    }
}

/* ============================================
   DESKTOP - AFFICHAGE EXPLICITE DU LOGO
   ============================================ */

/* Forcer l'affichage du logo sur desktop */
@media (min-width: 992px) {
    .page-cisoba-reset .brand-logo {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .page-cisoba-reset .logo-img {
        display: block !important;
        visibility: visible !important;
    }
}

/* ============================================
   STYLES HEADER MOBILE UNIQUEMENT
   ============================================ */

/* Header Mobile - Styles MINIMAUX */
.page-cisoba-reset .cisoba-header-mobile .header-logo {
    max-height: 40px;
    width: auto;
}

/* Responsive Header Mobile */
@media (max-width: 991.98px) {
    .page-cisoba-reset .cisoba-header-mobile .navbar-collapse {
        padding-top: 1rem;
    }

    .page-cisoba-reset .cisoba-header-mobile .header-actions {
        flex-direction: column;
        align-items: flex-start !important;
        margin-top: 1rem;
        width: 100%;
    }

    .page-cisoba-reset .cisoba-header-mobile .lang-switcher {
        margin-bottom: 1rem;
    }

    .page-cisoba-reset .cisoba-header-mobile .btn-connexion,
    .page-cisoba-reset .cisoba-header-mobile .btn-adhesion {
        width: 100%;
        margin: 0.5rem 0;
    }
}

/* ============================================
   UTILITAIRES & ACCESSIBILITÉ
   ============================================ */

/* Focus visible pour accessibilité */
.page-cisoba-reset .form-control:focus,
.page-cisoba-reset .btn-submit:focus,
.page-cisoba-reset .toggle-password:focus {
    outline: 2px solid var(--cisoba-navy);
    outline-offset: 2px;
}

/* Éviter le scroll horizontal */
.page-cisoba-reset .overflow-hidden {
    overflow-x: hidden;
}

/* MDP VERIFY */
/* --- Root Scope & UI Tokens --- */
.page-cisoba-verify {
    --cisoba-navy: #050164;
    --cisoba-green: #009b72;
    --cisoba-input-border: #4f53bc;
    --text-gray: #6c757d;
    --bg-illustration: #efefef;

    font-family: 'Inter', sans-serif;
    background-color: #fff;
    height: 100vh;
    overflow-x: hidden;
}

/* --- Brand Logo --- */
.page-cisoba-verify .logo-container {
    margin-bottom: 2.5rem;
}

.page-cisoba-verify .logo-icon-wrapper {
    width: 48px;
    height: 48px;
    position: relative;
    margin-bottom: 6px;
}

.page-cisoba-verify .logo-circle-cut {
    position: absolute;
    inset: 0;
    border: 3px solid var(--cisoba-green);
    border-radius: 50%;
    clip-path: polygon(0 0, 100% 0, 100% 65%, 0 65%);
}

.page-cisoba-verify .logo-main-icon {
    position: absolute;
    top: 4px;
    left: 9px;
    font-size: 30px;
    color: var(--cisoba-navy);
}

.page-cisoba-verify .logo-dot {
    position: absolute;
    top: 8px;
    left: 22px;
    width: 6px;
    height: 6px;
    background: #ff6b00;
    border-radius: 50%;
}

.page-cisoba-verify .logo-brand {
    font-weight: 800;
    color: #000;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* --- Navigation & Headings --- */
.page-cisoba-verify .content-box {
    max-width: 550px;
}

.page-cisoba-verify .link-back {
    text-decoration: none;
    color: #444;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 1.5rem;
    transition: color 0.2s;
}

.page-cisoba-verify .link-back:hover {
    color: var(--cisoba-navy);
}

.page-cisoba-verify h1 {
    color: var(--cisoba-navy);
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
}

.page-cisoba-verify .subtitle {
    color: var(--text-gray);
    font-size: 0.95rem;
    margin-bottom: 2.5rem;
    line-height: 1.5;
}

/* --- Form Controls --- */
.page-cisoba-verify .custom-input-wrapper {
    position: relative;
    margin-bottom: 1rem;
}

.page-cisoba-verify .custom-input-wrapper label {
    position: absolute;
    top: -10px;
    left: 12px;
    background-color: white;
    padding: 0 6px;
    font-size: 0.8rem;
    color: var(--cisoba-navy);
    font-weight: 600;
    z-index: 5;
}

.page-cisoba-verify .form-control {
    border: 1.5px solid var(--cisoba-input-border);
    border-radius: 8px;
    height: 52px;
    padding: 12px 45px 12px 15px;
    box-shadow: none;
    font-weight: 500;
}

.page-cisoba-verify .form-control:focus {
    border-color: var(--cisoba-navy);
    box-shadow: 0 0 0 4px rgba(79, 83, 188, 0.1);
}

.page-cisoba-verify .password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cisoba-navy);
    cursor: pointer;
    font-size: 1.2rem;
    z-index: 6;
}

.page-cisoba-verify .resend-text {
    font-size: 0.9rem;
    color: var(--cisoba-navy);
    font-weight: 500;
    margin-bottom: 2rem;
    display: block;
}

.page-cisoba-verify .resend-text a {
    font-weight: 700;
    color: var(--cisoba-navy);
    text-decoration: none;
}

.page-cisoba-verify .resend-text a:hover {
    text-decoration: underline;
}

.page-cisoba-verify .btn-verify {
    background-color: var(--cisoba-navy);
    color: white;
    border: none;
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.2s;
    margin-bottom: 10px;
}

.page-cisoba-verify .btn-verify:hover {
    background-color: #050164;
}

/* --- Illustration Panel --- */
.page-cisoba-verify .right-panel-container {
    height: 100vh;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-cisoba-verify .illustration-card {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-cisoba-verify .illustration-img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    animation: float-cisoba 6s ease-in-out infinite;
}

@keyframes float-cisoba {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@media (max-width: 991.98px) {
    .page-cisoba-verify .form-container {
        padding-top: 3rem;
    }
}

/* ========================================
   MEMBRE INSCRIPTION - RESPONSIVE DESIGN OPTIMISÉ
   Mobile : Stepper sans texte (numéros uniquement)
   Toutes les corrections appliquées
======================================== */

/* --- Root Scope & UI Tokens --- */
.page-cisoba-register {
    --cisoba-blue: #05016A;
    --cisoba-bg: #e9f5f2;
    --input-border: #ced4da;
    --bg-page: #E0F5EE;
    --navy-dark: #05016A;
    --text-muted: #67748E;
    --text-muted-inactive: #f50909;
    --border-color: #E2E8F0;
    --mint-icon-bg: #E6F6F1;

    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-page);
    color: #2D3748;
    font-size: 0.9rem;
    min-height: 100vh;
}

.page-cisoba-register .brand-accent {
    color: #2b3a8c;
}

/* --- Container Global --- */
.page-cisoba-register .container {
    font-size: 16px;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
    overflow-x: hidden;
}

/* --- Typography --- */
.page-cisoba-register .text-navy {
    color: var(--navy-dark);
}

.page-cisoba-register .fw-800 {
    font-weight: 800;
}

.page-cisoba-register .container .fw-800 {
    font-size: 20px;
}

/* --- Header Section --- */
.page-cisoba-register .header-section {
    padding: 0 10px;
}

.page-cisoba-register .header-section h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.page-cisoba-register .header-section p {
    font-size: 0.9rem;
}

/* ========================================
   STEPPER RESPONSIVE - OPTIMISÉ
   Mobile : SANS TEXTE (numéros uniquement)
   Tablette+ : Avec texte
======================================== */

.page-cisoba-register .stepper-wrapper {
    width: 100%;
    padding: 10px 0;
    overflow: visible;
}

.page-cisoba-register .stepper-container {
    max-width: 853px;
    width: 100%;
    margin: 0 auto 2rem auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cercles des étapes */
.page-cisoba-register .step-circle,
.page-cisoba-register .step-circle-active {
    min-width: 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    z-index: 2;
    position: relative;
    flex-shrink: 0;
}

.page-cisoba-register .step-circle {
    background-color: #2D3748;
}

.page-cisoba-register .step-circle-active {
    background-color: var(--navy-dark);
}

/* Labels des étapes */
.page-cisoba-register .step-label,
.page-cisoba-register .step-label-active {
    margin-left: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.page-cisoba-register .step-label {
    color: #757575;
}

.page-cisoba-register .step-label-active {
    color: var(--navy-dark);
}

/* Items d'étape */
.page-cisoba-register .step-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Lignes de connexion */
.page-cisoba-register .step-line {
    flex: 0 0 60px;
    width: 60px;
    height: 2px;
    background-color: #757575;
    margin: 0 15px;
}

.page-cisoba-register .step-line.active {
    background-color: #757575;
}

/* ========================================
   FORM CARD - Carte principale du formulaire
======================================== */

.page-cisoba-register .form-card {
    background: white;
    border-radius: 15px;
    padding: 25px 20px;
    max-width: 850px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    width: 100%;
}

/* En-tête de section avec icône */
.page-cisoba-register .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.page-cisoba-register .icon-box {
    background: #f0f2f5;
    padding: 10px 12px;
    border-radius: 8px;
    margin-right: 12px;
    color: var(--cisoba-blue);
    flex-shrink: 0;
}

.page-cisoba-register .section-header h5 {
    font-size: 1.1rem;
}

.page-cisoba-register .section-header p {
    font-size: 0.8rem;
}

/* ========================================
   FORM CONTROLS - Champs de formulaire
======================================== */

.page-cisoba-register .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.page-cisoba-register .form-label span {
    color: #ff0000;
}

.page-cisoba-register .form-control,
.page-cisoba-register .form-select {
    border-radius: 8px;
    padding: 10px 15px;
    border: 1px solid var(--input-border);
    font-size: 0.9rem;
    box-shadow: none;
    width: 100%;
    transition: all 0.2s ease;
}

/* ========================================
   FOCUS STATES - UNIFIÉ ET OPTIMISÉ
======================================== */

.page-cisoba-register .form-control:focus,
.page-cisoba-register .form-select:focus,
.page-cisoba-register .iti__input:focus {
    border-color: var(--cisoba-blue) !important;
    box-shadow: 0 0 0 3px rgba(5, 1, 106, 0.1) !important;
    outline: 2px solid var(--cisoba-blue) !important;
    outline-offset: 2px !important;
}

.page-cisoba-register .form-check-input:focus {
    outline: 2px solid var(--cisoba-blue);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(5, 1, 106, 0.1);
}

/* ========================================
   VALIDATION FEEDBACK - AMÉLIORATION UX
======================================== */

.page-cisoba-register .invalid-feedback {
    display: none;
    font-size: 0.8rem;
    color: #dc3545;
    margin-top: 0.25rem;
}

.page-cisoba-register .form-control.is-invalid,
.page-cisoba-register .form-select.is-invalid,
.page-cisoba-register .iti__input.is-invalid {
    border-color: #dc3545 !important;
}

.page-cisoba-register .form-control.is-invalid~.invalid-feedback,
.page-cisoba-register .form-select.is-invalid~.invalid-feedback,
.page-cisoba-register .form-check-input:invalid~.invalid-feedback {
    display: block;
}

.page-cisoba-register .form-control.is-valid,
.page-cisoba-register .form-select.is-valid,
.page-cisoba-register .iti__input.is-valid {
    border-color: #28a745 !important;
}

.page-cisoba-register .form-text {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
}

/* ========================================
   INTL-TEL-INPUT - CORRECTION COMPLÈTE
======================================== */

/* Force le conteneur à prendre 100% */
.page-cisoba-register .iti {
    display: block !important;
    width: 100% !important;
    position: relative !important;
}

/* Style de l'input téléphone - CORRIGÉ */
.page-cisoba-register .iti__input {
    width: 100% !important;
    border-radius: 8px !important;
    padding: 10px 15px 10px 60px !important;
    border: 1px solid var(--input-border) !important;
    font-size: 0.9rem !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

/* Conteneur du drapeau - CORRIGÉ */
.page-cisoba-register .iti__selected-flag {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 52px !important;
    border-radius: 8px 0 0 8px !important;
    background: transparent !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* MASQUER le code pays en texte (on garde juste le drapeau) */
.page-cisoba-register .iti__selected-dial-code {
    display: none !important;
}

/* Dropdown du sélecteur de pays - OPTIMISÉ */
.page-cisoba-register .iti__country-list {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    margin-top: 4px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    width: 100% !important;
}

/* Item pays dans le dropdown */
.page-cisoba-register .iti__country {
    padding: 8px 12px !important;
}

.page-cisoba-register .iti__country:hover {
    background-color: rgba(5, 1, 106, 0.05) !important;
}

.page-cisoba-register .iti__country.iti__highlight {
    background-color: rgba(5, 1, 106, 0.1) !important;
}

.page-cisoba-register .iti__country.iti__active {
    background-color: rgba(5, 1, 106, 0.1) !important;
}

/* Flèche du dropdown */
.page-cisoba-register .iti__arrow {
    border-top-color: #555 !important;
}

/* ========================================
   CHECKBOXES
======================================== */

.page-cisoba-register .form-check {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.page-cisoba-register .form-check-input {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.page-cisoba-register .form-check-input:checked {
    background-color: var(--cisoba-blue);
    border-color: var(--cisoba-blue);
}

.page-cisoba-register .form-check-label {
    font-size: 0.82rem;
    color: #444;
    line-height: 1.5;
    margin-left: 0.5rem;
}

/* ========================================
   NAVIGATION BUTTON - OPTIMISÉ
======================================== */

.page-cisoba-register .button-wrapper {
    max-width: 850px;
    padding: 0 20px;
}

.page-cisoba-register .btn-next {
    background: var(--navy-dark);
    color: white;
    border-radius: 10px;
    padding: 12px 30px;
    font-weight: 700;
    border: none;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 306px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.page-cisoba-register .btn-next:hover:not(:disabled) {
    background: #2821ee;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(5, 1, 106, 0.3);
}

.page-cisoba-register .btn-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-cisoba-register .btn-next a {
    color: white;
    text-decoration: none;
}

/* ========================================
   RESPONSIVE BREAKPOINTS - OPTIMISÉ
======================================== */

/* --- MOBILE (< 768px) : STEPPER SANS TEXTE --- */
@media (max-width: 767px) {
    .page-cisoba-register .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .page-cisoba-register .container .fw-800 {
        font-size: 1.4rem;
    }

    .page-cisoba-register .header-section h2 {
        font-size: 1.3rem;
    }

    .page-cisoba-register .header-section p {
        font-size: 0.85rem;
    }

    /* STEPPER : MASQUER LES TEXTES SUR MOBILE - OPTIMISÉ */
    .page-cisoba-register .step-label,
    .page-cisoba-register .step-label-active {
        display: none;
    }

    .page-cisoba-register .stepper-container {
        justify-content: center;
        gap: 0;
    }

    .page-cisoba-register .step-circle,
    .page-cisoba-register .step-circle-active {
        min-width: 32px;
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .page-cisoba-register .step-line {
        flex: 0 0 30px;
        width: 30px;
        margin: 0 8px;
    }

    /* Form card */
    .page-cisoba-register .form-card {
        padding: 20px 15px;
        border-radius: 12px;
    }

    .page-cisoba-register .section-header {
        margin-bottom: 20px;
    }

    .page-cisoba-register .section-header h5 {
        font-size: 1rem;
    }

    .page-cisoba-register .icon-box {
        padding: 8px 10px;
        margin-right: 10px;
    }

    /* Champs de formulaire */
    .page-cisoba-register .form-control,
    .page-cisoba-register .form-select {
        font-size: 0.85rem;
        padding: 10px 12px;
    }

    /* Ajustement intl-tel-input sur mobile - CORRIGÉ */
    .page-cisoba-register .iti__input {
        font-size: 0.85rem !important;
        padding: 10px 12px 10px 50px !important;
    }

    .page-cisoba-register .iti__selected-flag {
        width: 46px !important;
    }

    /* Bouton - OPTIMISÉ */
    .page-cisoba-register .btn-next {
        width: auto;
        min-width: 200px;
        max-width: 100%;
        padding: 12px 24px;
        margin: 0 auto;
    }

    .page-cisoba-register .button-wrapper {
        padding: 0 10px;
        justify-content: center;
    }

    /* Marges réduites pour mobile */
    .page-cisoba-register .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .page-cisoba-register .row>[class*='col-'] {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* --- TRÈS PETITS ÉCRANS (< 360px) --- */
@media (max-width: 359px) {

    .page-cisoba-register .step-circle,
    .page-cisoba-register .step-circle-active {
        min-width: 28px;
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .page-cisoba-register .step-line {
        flex: 0 0 20px;
        width: 20px;
        margin: 0 6px;
    }

    .page-cisoba-register .iti__input {
        padding: 10px 10px 10px 46px !important;
    }

    .page-cisoba-register .iti__selected-flag {
        width: 42px !important;
    }
}

/* --- TABLETTE (768px - 991px) : AVEC TEXTE --- */
@media (min-width: 768px) and (max-width: 991px) {
    .page-cisoba-register .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .page-cisoba-register .form-card {
        padding: 35px 30px;
    }

    /* STEPPER : AFFICHER LES TEXTES */
    .page-cisoba-register .stepper-container {
        justify-content: space-between;
    }

    .page-cisoba-register .step-label,
    .page-cisoba-register .step-label-active {
        display: inline-block;
        font-size: 0.85rem;
        margin-left: 8px;
    }

    .page-cisoba-register .step-circle,
    .page-cisoba-register .step-circle-active {
        min-width: 32px;
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .page-cisoba-register .step-line {
        flex: 1 1 auto;
        min-width: 30px;
        max-width: 60px;
        margin: 0 8px;
    }

    .page-cisoba-register .btn-next {
        max-width: 280px;
    }

    /* Formulaire en 2 colonnes */
    .page-cisoba-register .row {
        margin-left: -10px;
        margin-right: -10px;
    }

    .page-cisoba-register .row>[class*='col-'] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* --- DESKTOP SMALL (992px - 1199px) --- */
@media (min-width: 992px) and (max-width: 1199px) {
    .page-cisoba-register .form-card {
        padding: 40px 35px;
    }

    .page-cisoba-register .stepper-container {
        justify-content: space-between;
    }

    .page-cisoba-register .step-label,
    .page-cisoba-register .step-label-active {
        display: inline-block;
        font-size: 0.875rem;
        margin-left: 10px;
    }

    .page-cisoba-register .step-line {
        flex: 1 1 auto;
        min-width: 40px;
        margin: 0 10px;
    }
}

/* --- DESKTOP LARGE (1200px+) --- */
@media (min-width: 1200px) {
    .page-cisoba-register .form-card {
        padding: 45px;
    }

    .page-cisoba-register .stepper-container {
        justify-content: space-between;
    }

    .page-cisoba-register .step-label,
    .page-cisoba-register .step-label-active {
        display: inline-block;
        font-size: 0.9rem;
        margin-left: 10px;
    }

    .page-cisoba-register .step-line {
        flex: 1 1 auto;
        min-width: 50px;
        margin: 0 10px;
    }

    .page-cisoba-register .btn-next {
        max-width: 306px;
    }
}

/* ========================================
   UTILITIES & FIXES
======================================== */

/* Éviter le scroll horizontal */
.page-cisoba-register * {
    box-sizing: border-box;
}

.page-cisoba-register .row {
    margin-left: -12px;
    margin-right: -12px;
}

.page-cisoba-register .row>[class*='col-'] {
    padding-left: 12px;
    padding-right: 12px;
}

/* Amélioration des liens */
.page-cisoba-register a {
    transition: color 0.2s ease;
}

.page-cisoba-register a:hover {
    opacity: 0.8;
}

/* Smooth scroll pour les ancres */
html {
    scroll-behavior: smooth;
}

/* ========================================
   OPTIMISATION PERFORMANCE MOBILE
======================================== */

@media (max-width: 767px) {

    /* Désactiver les animations non essentielles sur mobile */
    .page-cisoba-register * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Sauf pour les éléments interactifs critiques */
    .page-cisoba-register .btn-next,
    .page-cisoba-register .form-control:focus,
    .page-cisoba-register .iti__input:focus {
        transition: all 0.2s ease !important;
    }
}

/* ========================================
   PAGE CISOBA PAYMENT - RESPONSIVE
   Mobile-First Approach
   ======================================== */

/* --- Variables CSS --- */
:root {
    --cisoba-blue: #000066;
    --cisoba-bg: #e9f5f2;
    --text-muted: #6c757d;
    --success-green: #00a884;
    --bg-page: #E0F5EE;
    --navy-dark: #05016A;
    --text-muted-2: #67748E;
    --border-color: #E2E8F0;
    --mint-icon-bg: #E6F6F1;
    --white: #ffffff;
    --gray-700: #2D3748;
    --gray-500: #757575;
}

/* --- Base Page Styling --- */
.page-cisoba-payment {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-page);
    color: var(--gray-700);
    font-size: 0.9rem;
    min-height: 100vh;
}

/* --- Container Responsive --- */
.page-cisoba-payment .container {
    font-size: 14px;
    padding-left: 15px;
    padding-right: 15px;
}

/* --- Header Section --- */
.page-cisoba-payment .main-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.page-cisoba-payment .subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0;
}

.page-cisoba-payment .text-navy {
    color: var(--navy-dark) !important;
}

/* ========================================
   STEPPER COMPONENT - MOBILE FIRST
   ======================================== */

.page-cisoba-payment .stepper-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.page-cisoba-payment .stepper-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.page-cisoba-payment .stepper-container {
    max-width: 100%;
    /* min-width: 320px; */
    margin: 0 auto;
    position: relative;
    padding: 0 5px;
}

/* Step Items */
.page-cisoba-payment .step-item {
    flex-shrink: 0;
}

/* Step Circles */
.page-cisoba-payment .step-circle,
.page-cisoba-payment .step-circle-active {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    z-index: 2;
    position: relative;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.page-cisoba-payment .step-circle {
    background-color: var(--gray-700);
    color: var(--white);
}

.page-cisoba-payment .step-circle-active {
    background-color: var(--navy-dark);
    color: var(--white);
}

/* Step Labels - Cachés sur très petit mobile */
.page-cisoba-payment .step-label,
.page-cisoba-payment .step-label-active {
    margin-left: 6px;
    font-weight: 500;
    font-size: 0.7rem;
    white-space: nowrap;
    display: none;
    /* Caché par défaut mobile */
}

.page-cisoba-payment .step-label {
    color: var(--gray-500);
}

.page-cisoba-payment .step-label-active {
    color: var(--navy-dark);
}

/* Step Lines */
.page-cisoba-payment .step-line,
.page-cisoba-payment .step-line-active {
    flex-grow: 1;
    height: 2px;
    margin: 0 6px;
    min-width: 20px;
    transition: all 0.3s ease;
}

.page-cisoba-payment .step-line {
    background-color: var(--gray-500);
}

.page-cisoba-payment .step-line-active {
    background-color: var(--navy-dark);
}

/* ========================================
   CARD PAYMENT - MOBILE FIRST
   ======================================== */

.page-cisoba-payment .card-payment {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    padding: 20px;
    max-width: 100%;
    margin: 0 auto 20px auto;
}

/* Payment Header */
.page-cisoba-payment .payment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f3f4f6;
}

.page-cisoba-payment .payment-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--cisoba-blue), var(--navy-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-cisoba-payment .payment-icon i {
    color: var(--white);
    font-size: 22px !important;
}

.page-cisoba-payment .payment-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy-dark);
    margin: 0;
}

/* Info Alert */
.page-cisoba-payment .info-alert {
    background-color: #eff6ff;
    border-left: 4px solid var(--cisoba-blue);
    padding: 12px 15px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.page-cisoba-payment .info-alert span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy-dark);
    flex: 1;
}

/* Bouton de validation */
.page-cisoba-payment .btn-validate {
    background-color: var(--cisoba-blue);
    color: var(--white);
    border: none;
    width: 100%;
    padding: 14px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    margin-top: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 102, 0.15);
}

.page-cisoba-payment .btn-validate:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 102, 0.25);
}

.page-cisoba-payment .btn-validate:active {
    transform: translateY(0);
}

.page-cisoba-payment .btn-link-white {
    color: var(--white);
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

/* Secure Footer */
.page-cisoba-payment .secure-footer {
    font-size: 0.75rem;
    color: var(--cisoba-blue);
    text-align: center;
    margin-top: 15px;
    margin-bottom: 0;
    font-weight: 500;
}

.page-cisoba-payment .secure-footer i {
    color: var(--success-green);
    margin-right: 5px;
}

/* ========================================
   PAYMENT METHODS CARD - MOBILE FIRST
   ======================================== */

.page-cisoba-payment .payment-methods-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.page-cisoba-payment .payment-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 1 colonne sur mobile */
    gap: 15px;
    margin-top: 15px;
}

.page-cisoba-payment .payment-option {
    border: 2px solid #eee;
    border-radius: 15px;
    padding: 20px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.page-cisoba-payment .payment-option:hover {
    border-color: #cbd5e0;
}

.page-cisoba-payment .payment-option.selected {
    border-color: var(--cisoba-blue);
    background-color: #f8faff;
}

.page-cisoba-payment .payment-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.page-cisoba-payment .radio-dot {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.page-cisoba-payment .payment-option.selected .radio-dot {
    border-color: var(--cisoba-blue);
}

.page-cisoba-payment .payment-option.selected .radio-dot::after {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--cisoba-blue);
    border-radius: 50%;
}

.page-cisoba-payment .payment-option img {
    height: 35px;
    width: 35px;
    object-fit: contain;
    flex-shrink: 0;
}

.page-cisoba-payment .payment-option h6 {
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 0.9rem;
    color: var(--gray-700);
    flex: 1;
}

.page-cisoba-payment .payment-option p {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
    display: none;
    /* Caché sur mobile */
}

/* ========================================
   RÉCAPITULATIF SECTION (si décommentée)
   ======================================== */

.page-cisoba-payment .content-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    max-width: 100%;
    margin: 0 auto 20px auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.page-cisoba-payment .recap-title {
    color: #2b3a8c;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.page-cisoba-payment .recap-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 8px;
}

.page-cisoba-payment .recap-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.page-cisoba-payment .recap-value {
    font-weight: 700;
    color: var(--cisoba-blue);
    font-size: 0.9rem;
    text-align: right;
}

.page-cisoba-payment .total-price {
    font-size: 1.1rem;
}

.page-cisoba-payment .recap-divider {
    opacity: 0.1;
    margin: 15px 0;
}

/* ========================================
   RESPONSIVE - TABLETTE (576px+)
   ======================================== */

@media (min-width: 576px) {

    /* Container */
    .page-cisoba-payment .container {
        font-size: 15px;
    }

    /* Header */
    .page-cisoba-payment .main-title {
        font-size: 1.6rem;
    }

    .page-cisoba-payment .subtitle {
        font-size: 0.9rem;
    }

    /* Stepper - Afficher les labels */
    .page-cisoba-payment .step-label,
    .page-cisoba-payment .step-label-active {
        display: inline-block;
        font-size: 0.75rem;
        margin-left: 7px;
    }

    .page-cisoba-payment .step-circle,
    .page-cisoba-payment .step-circle-active {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .page-cisoba-payment .step-line,
    .page-cisoba-payment .step-line-active {
        margin: 0 8px;
        min-width: 30px;
    }

    /* Card Payment */
    .page-cisoba-payment .card-payment {
        padding: 25px;
    }

    .page-cisoba-payment .payment-icon {
        width: 50px;
        height: 50px;
    }

    .page-cisoba-payment .payment-icon i {
        font-size: 26px !important;
    }

    .page-cisoba-payment .payment-title {
        font-size: 1.1rem;
    }

    /* Payment Grid - 2 colonnes */
    .page-cisoba-payment .payment-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .page-cisoba-payment .payment-option {
        flex-direction: column;
        text-align: center;
        padding: 22px 15px;
    }

    .page-cisoba-payment .payment-option img {
        height: 38px;
        width: 38px;
        margin-bottom: 10px;
    }

    .page-cisoba-payment .payment-option h6 {
        font-size: 0.92rem;
    }

    /* Content Card */
    .page-cisoba-payment .content-card {
        padding: 25px;
    }
}

/* ========================================
   RESPONSIVE - TABLETTE LARGE (768px+)
   ======================================== */

@media (min-width: 768px) {

    /* Container */
    .page-cisoba-payment .container {
        font-size: 16px;
    }

    /* Header */
    .page-cisoba-payment .main-title {
        font-size: 1.8rem;
    }

    .page-cisoba-payment .subtitle {
        font-size: 0.95rem;
    }

    /* Stepper */
    .page-cisoba-payment .stepper-container {
        max-width: 650px;
    }

    .page-cisoba-payment .step-label,
    .page-cisoba-payment .step-label-active {
        font-size: 0.85rem;
        margin-left: 8px;
    }

    .page-cisoba-payment .step-circle,
    .page-cisoba-payment .step-circle-active {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .page-cisoba-payment .step-line,
    .page-cisoba-payment .step-line-active {
        margin: 0 10px;
        min-width: 40px;
    }

    /* Card Payment */
    .page-cisoba-payment .card-payment {
        padding: 30px;
        max-width: 700px;
    }

    .page-cisoba-payment .payment-icon {
        width: 55px;
        height: 55px;
    }

    .page-cisoba-payment .payment-icon i {
        font-size: 28px !important;
    }

    .page-cisoba-payment .payment-title {
        font-size: 1.2rem;
    }

    .page-cisoba-payment .info-alert {
        padding: 15px 18px;
    }

    .page-cisoba-payment .info-alert span {
        font-size: 0.9rem;
    }

    /* Payment Grid - Rester en 2 colonnes */
    .page-cisoba-payment .payment-grid {
        gap: 20px;
    }

    .page-cisoba-payment .payment-option {
        padding: 25px 15px;
    }

    .page-cisoba-payment .payment-option img {
        height: 40px;
        width: 40px;
    }

    .page-cisoba-payment .payment-option h6 {
        font-size: 0.95rem;
    }

    .page-cisoba-payment .payment-option p {
        display: block;
        /* Afficher descriptions */
        font-size: 0.8rem;
        margin-top: 5px;
    }

    /* Content Card */
    .page-cisoba-payment .content-card {
        padding: 30px;
        max-width: 700px;
    }

    .page-cisoba-payment .recap-title {
        font-size: 1.2rem;
    }

    .page-cisoba-payment .recap-label {
        font-size: 0.9rem;
    }

    .page-cisoba-payment .recap-value {
        font-size: 0.95rem;
    }
}

/* ========================================
   RESPONSIVE - DESKTOP (992px+)
   ======================================== */

@media (min-width: 992px) {

    /* Header */
    .page-cisoba-payment .main-title {
        font-size: 2rem;
    }

    .page-cisoba-payment .subtitle {
        font-size: 1rem;
    }

    /* Stepper */
    .page-cisoba-payment .stepper-container {
        max-width: 853px;
    }

    .page-cisoba-payment .step-label,
    .page-cisoba-payment .step-label-active {
        font-size: 0.9rem;
        margin-left: 10px;
    }

    .page-cisoba-payment .step-line,
    .page-cisoba-payment .step-line-active {
        min-width: 60px;
    }

    /* Card Payment */
    .page-cisoba-payment .card-payment {
        padding: 35px;
        max-width: 850px;
    }

    .page-cisoba-payment .payment-icon {
        width: 60px;
        height: 60px;
    }

    .page-cisoba-payment .payment-icon i {
        font-size: 30px !important;
    }

    .page-cisoba-payment .payment-title {
        font-size: 1.3rem;
    }

    /* Payment Grid - 3 colonnes sur grand écran */
    .page-cisoba-payment .payment-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .page-cisoba-payment .payment-option img {
        height: 42px;
        width: 42px;
    }

    /* Bouton centré */
    .page-cisoba-payment .btn-validate {
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.1rem;
    }

    /* Content Card */
    .page-cisoba-payment .content-card {
        padding: 35px;
        max-width: 850px;
    }
}

/* ========================================
   RESPONSIVE - LARGE DESKTOP (1200px+)
   ======================================== */

@media (min-width: 1200px) {
    .page-cisoba-payment .stepper-container {
        max-width: 900px;
    }

    .page-cisoba-payment .card-payment,
    .page-cisoba-payment .content-card,
    .page-cisoba-payment .payment-methods-card {
        max-width: 900px;
    }
}

/* ========================================
   UTILITIES & ACCESSIBILITY
   ======================================== */

/* Focus states pour accessibilité */
.page-cisoba-payment .payment-option:focus-within {
    outline: 3px solid var(--cisoba-blue);
    outline-offset: 2px;
}

.page-cisoba-payment .btn-validate:focus {
    outline: 3px solid var(--cisoba-blue);
    outline-offset: 2px;
}

/* Prevent text selection on buttons */
.page-cisoba-payment .btn-validate,
.page-cisoba-payment .payment-option {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Animation au chargement */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-cisoba-payment .card-payment,
.page-cisoba-payment .payment-methods-card,
.page-cisoba-payment .content-card {
    animation: fadeInUp 0.5s ease-out;
}

/* Prevent horizontal scroll */
.page-cisoba-payment {
    overflow-x: hidden;
}


/* ========================================
   PAGE CISOBA VALIDATION - RESPONSIVE
   Mobile-First Approach
   ======================================== */

/* --- Variables CSS --- */
:root {
    --cisoba-blue: #05016A;
    --cisoba-navy: #0b1156;
    --cisoba-bg-light: #e6f6f2;
    --cisoba-footer: #008c62;
    --success-green: #0f5132;
    --success-bg: #d1e7dd;
    --banner-bg: #ecf1f4;
    --border-light: #dee2e6;
    --text-muted: #6c757d;
    --white: #ffffff;
    --dark: #212529;
}

/* --- Base Page Styling --- */
.page-cisoba-validation {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--cisoba-bg-light);
    color: var(--dark);
    min-height: 100vh;
}

/* --- Container Responsive --- */
.page-cisoba-validation .container {
    padding-left: 15px;
    padding-right: 15px;
}

/* ========================================
   HEADER SECTION - MOBILE FIRST
   ======================================== */

.page-cisoba-validation .main-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.page-cisoba-validation .subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0;
    padding: 0 10px;
}

.page-cisoba-validation .text-navy {
    color: var(--cisoba-navy) !important;
}

.page-cisoba-validation .fw-800 {
    font-weight: 800 !important;
}

/* ========================================
   STEPPER COMPONENT - MOBILE FIRST
   ======================================== */

.page-cisoba-validation .stepper-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.page-cisoba-validation .stepper-wrapper::-webkit-scrollbar {
    display: none;
}

.page-cisoba-validation .stepper-container {
    max-width: 100%;
    /* min-width: 320px; */
    margin: 0 auto;
    position: relative;
    padding: 0 5px;
}

.page-cisoba-validation .step-item {
    flex-shrink: 0;
}

/* Step Circles */
.page-cisoba-validation .step-circle,
.page-cisoba-validation .step-circle-active {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    z-index: 2;
    position: relative;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.page-cisoba-validation .step-circle {
    background-color: var(--cisoba-navy);
    color: var(--white);
}

.page-cisoba-validation .step-circle-active {
    background-color: var(--cisoba-navy);
    color: var(--white);
}

/* Step Labels - Cachés sur très petit mobile */
.page-cisoba-validation .step-label,
.page-cisoba-validation .step-label-active {
    margin-left: 6px;
    font-weight: 600;
    font-size: 0.7rem;
    white-space: nowrap;
    display: none;
    /* Caché par défaut sur mobile */
    color: var(--cisoba-navy);
}

/* Step Lines */
.page-cisoba-validation .step-line,
.page-cisoba-validation .step-line-active {
    flex-grow: 1;
    height: 2px;
    margin: 0 6px;
    min-width: 20px;
    transition: all 0.3s ease;
    background-color: var(--cisoba-navy);
}

/* ========================================
   MAIN CARD - MOBILE FIRST
   ======================================== */

.page-cisoba-validation .card-main {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    background: var(--white);
}

.page-cisoba-validation .congrats-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dark);
}

/* Success Banner */
.page-cisoba-validation .success-banner {
    background-color: var(--banner-bg);
    border-left: 5px solid var(--cisoba-navy);
    border-radius: 6px;
    padding: 12px 15px;
    font-weight: 600;
    color: var(--cisoba-navy);
    gap: 8px;
}

.page-cisoba-validation .success-icon {
    font-size: 1.1rem !important;
    flex-shrink: 0;
}

.page-cisoba-validation .success-text {
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Recap Subtitle */
.page-cisoba-validation .recap-subtitle {
    font-size: 1rem;
    font-weight: 400;
    color: var(--dark);
}

/* ========================================
   RECAP ROWS - MOBILE FIRST
   ======================================== */

.page-cisoba-validation .recap-row {
    border-bottom: 1px solid var(--border-light);
    padding: 12px 0;
    gap: 10px;
}

.page-cisoba-validation .recap-row:last-child {
    border-bottom: none;
}

.page-cisoba-validation .recap-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-shrink: 0;
    max-width: 45%;
}

.page-cisoba-validation .recap-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark);
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.page-cisoba-validation .break-word {
    word-break: break-word;
    hyphens: auto;
}

/* Badge Status */
.page-cisoba-validation .badge-status {
    background-color: var(--success-bg);
    color: var(--success-green);
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.page-cisoba-validation .badge-icon {
    font-size: 0.75em !important;
}

/* ========================================
   BUTTON ACTION - MOBILE FIRST
   ======================================== */

.page-cisoba-validation .btn-cisoba-primary {
    background-color: var(--cisoba-blue);
    color: var(--white);
    border-radius: 8px;
    border: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    font-weight: 600;
}

.page-cisoba-validation .btn-cisoba-primary:hover {
    background-color: var(--cisoba-navy);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5, 1, 106, 0.25) !important;
}

.page-cisoba-validation .btn-cisoba-primary:active {
    transform: translateY(0);
}

.page-cisoba-validation .btn-action {
    width: 100%;
    max-width: 100%;
}

/* Button Outline (si utilisé ailleurs) */
.page-cisoba-validation .btn-cisoba-outline {
    border: 2px solid var(--cisoba-navy);
    color: var(--cisoba-navy);
    border-radius: 8px;
    background: transparent;
    transition: all 0.3s ease;
}

.page-cisoba-validation .btn-cisoba-outline:hover {
    background-color: var(--cisoba-navy);
    color: var(--white);
}

/* ========================================
   RESPONSIVE - TABLETTE (576px+)
   =====================================



/* Variables spécifiques au footer */
:root {
    --footer-bg: #009669;
    /* Vert exact de la maquette */
    --footer-text: #000000;
}

.main-footer {
    background-color: var(--footer-bg);
    padding: 42px 0 42px 0;
    /* Padding vertical important selon visuel */
    color: var(--footer-text);
    font-family: sans-serif;
    /* À adapter selon votre font globale */
}

/* Logo */
.footer-logo {
    max-height: 80px;
    /* Taille proportionnelle à la maquette */
    width: auto;
}

/* Copyright Section */
.footer-copyright p {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}

/* Navigation Links */
.footer-nav .list-inline {
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    /* Espacement horizontal entre les liens */
}

.footer-nav .list-inline-item {
    margin-right: 0;
    /* On utilise gap pour plus de précision */
}

.footer-nav a {
    color: var(--footer-text);
    text-decoration: none;
    font-size: 13.5px;
    transition: opacity 0.2s ease;
}

.footer-nav a:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* Responsive - Mobile First Adaptation */
@media (max-width: 767.98px) {
    .main-footer {
        padding: 40px 20px;
    }

    .footer-nav .list-inline {
        flex-direction: column;
        /* Empilement sur mobile */
        gap: 15px;
    }

    .footer-copyright {
        margin-bottom: 25px !important;
    }
}


/* =========================================================
   ADHERENTS INF - PAGE SPÉCIFIQUE
========================================================= */

.page-cisoba-register-adherents {
    --bg-page: #E0F5EE;
    --navy-dark: #05016A;
    --text-muted: #67748E;
    --border-color: #E2E8F0;
    --mint-icon-bg: #E6F6F1;

    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-page);
    color: #2D3748;
    font-size: 0.9rem;
    overflow-x: hidden;
}

.page-cisoba-register-adherents .container {
    font-size: 16px;
    padding-left: 15px;
    padding-right: 15px;
}

.page-cisoba-register-adherents .container .fw-800 {
    font-size: 20px;
}

/* --- Stepper Container --- */
.page-cisoba-register-adherents .stepper-container {
    max-width: 853px;
    margin: 0 auto 2rem auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-cisoba-register-adherents .step-circle,
.page-cisoba-register-adherents .step-circle-active {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    z-index: 2;
    position: relative;
}

.page-cisoba-register-adherents .step-circle {
    background-color: #2D3748;
    color: white;
}

.page-cisoba-register-adherents .step-circle-active {
    background-color: var(--navy-dark);
    color: white;
}

.page-cisoba-register-adherents .step-label,
.page-cisoba-register-adherents .step-label-active {
    margin-left: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
}

.page-cisoba-register-adherents .step-label {
    color: #757575;
}

.page-cisoba-register-adherents .step-label-active {
    color: var(--navy-dark);
}

.page-cisoba-register-adherents .step-line {
    flex-grow: 1;
    height: 2px;
    background-color: #757575;
    margin: 0 10px;
}

.page-cisoba-register-adherents .step-line.active {
    background-color: #757575;
}

/* --- Form Card Container --- */
.page-cisoba-register-adherents .form-card-adherents {
    background: white;
    border-radius: 16px;
    border: none;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    max-width: 853px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.page-cisoba-register-adherents .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.page-cisoba-register-adherents .icon-box {
    width: 42px;
    height: 42px;
    min-width: 42px;
    background: var(--mint-icon-bg);
    color: var(--navy-dark);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 15px;
}

.page-cisoba-register-adherents .section-header h5 {
    margin: 0;
    font-weight: 800;
    font-size: 20px;
    color: #1A202C;
    line-height: 1.3;
}

.page-cisoba-register-adherents .section-header p {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
    margin-top: 4px;
}

/* --- Form Elements --- */
.page-cisoba-register-adherents .form-label {
    font-weight: 700;
    font-size: 14px;
    color: #757575;
    margin-bottom: 8px;
}

.page-cisoba-register-adherents .form-label span {
    color: #E53E3E;
}

.page-cisoba-register-adherents .form-control,
.page-cisoba-register-adherents .form-select {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: #2D3748;
    width: 100%;
}

.page-cisoba-register-adherents .form-control:focus,
.page-cisoba-register-adherents .form-select:focus {
    border-color: var(--navy-dark);
    box-shadow: 0 0 0 3px rgba(5, 1, 106, 0.1);
}

.page-cisoba-register-adherents .input-group-text {
    background: white;
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: 10px 0 0 10px;
    color: var(--navy-dark);
    font-weight: 700;
}

.page-cisoba-register-adherents .phone-input {
    border-left: none;
}

/* --- Checkboxes --- */
.page-cisoba-register-adherents .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 2px solid #CBD5E0;
    flex-shrink: 0;
}

.page-cisoba-register-adherents .form-check-input:checked {
    background-color: var(--navy-dark);
    border-color: var(--navy-dark);
}

.page-cisoba-register-adherents .form-check-label {
    padding-left: 8px;
    font-size: 0.85rem;
    color: #4A5568;
    font-weight: 500;
}

.page-cisoba-register-adherents .form-checks-wrapper {
    background-color: #f9fafb;
    padding: 20px;
    border-radius: 10px;
}

/* --- Button Styles --- */
.page-cisoba-register-adherents .btn-next {
    background: var(--navy-dark);
    color: white;
    border-radius: 10px;
    padding: 12px 35px;
    font-weight: 700;
    border: none;
    transition: transform 0.2s, background-color 0.2s;
    width: 100%;
    max-width: 306px;
    height: 54px;
    display: block;
}

.page-cisoba-register-adherents .btn-next:hover {
    background: #2821ee;
    transform: translateY(-2px);
}

.page-cisoba-register-adherents .btn-next:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.page-cisoba-register-adherents .text-navy {
    color: var(--navy-dark);
}

.page-cisoba-register-adherents .fw-800 {
    font-weight: 800;
}

/* --- Helper Info Alert --- */
.page-cisoba-register-adherents small {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ========================================
   MEDIA QUERIES - ADHERENTS
   ======================================== */

@media (max-width: 991px) {
    .page-cisoba-register-adherents .stepper-container {
        padding: 0 10px;
    }
}

@media (max-width: 768px) {
    .page-cisoba-register-adherents .form-card-adherents {
        padding: 24px;
    }

    .page-cisoba-register-adherents .step-label,
    .page-cisoba-register-adherents .step-label-active {
        font-size: 0.8rem;
        margin-left: 5px;
    }
}

@media (max-width: 576px) {

    .page-cisoba-register-adherents .form-card-adherents {
        padding: 20px;
        border-radius: 12px;
    }

    .page-cisoba-register-adherents .step-label,
    .page-cisoba-register-adherents .step-label-active {
        display: none;
    }

    .page-cisoba-register-adherents .step-line {
        margin: 0 5px;
    }

    .page-cisoba-register-adherents .section-header h5 {
        font-size: 18px;
    }

    .page-cisoba-register-adherents .btn-next {
        font-size: 16px;
        max-width: 100%;
    }

    .page-cisoba-register-adherents .form-checks-wrapper {
        padding: 15px;
    }
}