/* ============================================
           STYLES NOUS RECRUTONS DETAIL - Version nous-recrutons.php
           ============================================ */
        
        .recrutement-detail-section {
            padding: 20px 0 60px 0;
            background: var(--bg-main);
            transition: background var(--transition-speed) ease;
        }

        /* Fil d'Ariane */
        .breadcrumb-custom {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 0;
            margin: 0 0 24px 0;
            list-style: none;
            background: transparent;
            font-size: 14px;
            color: var(--text-muted);
        }

        .breadcrumb-custom li {
            display: inline-flex;
            align-items: center;
        }

        .breadcrumb-custom li + li::before {
            content: "›";
            padding: 0 10px;
            color: var(--text-muted);
            font-size: 18px;
            font-weight: 300;
        }

        .breadcrumb-custom a {
            color: var(--text-muted);
            text-decoration: none;
            transition: color var(--transition-speed) ease;
        }

        .breadcrumb-custom a:hover {
            color: var(--accent);
        }

        .breadcrumb-custom .active {
            color: var(--text-title);
            font-weight: 500;
        }

        [data-theme="dark"] .breadcrumb-custom .active {
            color: #ffffff;
        }

        /* En-tête du job */
        .job-detail-header {
            margin-top: 60px;
            margin-bottom: 30px;
        }

        .job-detail-header .pill-job {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 4px 16px;
            border-radius: 60px;
            font-size: 13px;
            font-weight: 500;
            color: var(--accent);
            background: var(--bg-sub);
            border: 1px solid var(--border);
        }

        [data-theme="dark"] .job-detail-header .pill-job {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.08);
        }

        .job-detail-header h1 {
            font-size: 36px;
            font-weight: 700;
            color: var(--text-title);
            margin: 8px 0 10px 0;
            transition: color var(--transition-speed) ease;
        }

        [data-theme="dark"] .job-detail-header h1 {
            color: #ffffff;
        }

        .job-detail-header .job-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-top: 8px;
        }

        .job-detail-header .job-meta-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            color: var(--text-muted);
        }

        .job-detail-header .job-meta-item i {
            color: var(--accent);
            font-size: 16px;
        }

        .job-detail-header .job-meta-item strong {
            color: var(--text-title);
        }

        [data-theme="dark"] .job-detail-header .job-meta-item strong {
            color: #ffffff;
        }

        /* Accroche */
        .job-accroche {
            padding: 20px 24px;
            background: var(--bg-sub);
            border-left: 4px solid var(--accent);
            border-radius: 0 12px 12px 0;
            font-size: 16px;
            line-height: 1.7;
            color: var(--text-body);
            margin-bottom: 30px;
            transition: all var(--transition-speed) ease;
        }

        [data-theme="dark"] .job-accroche {
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.85);
        }

        .job-accroche i {
            color: var(--accent);
            margin-right: 8px;
        }

        /* Sections */
        .job-section {
            margin-bottom: 35px;
        }

        .job-section:last-child {
            margin-bottom: 0;
        }

        .job-section-title {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-title);
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 3px solid var(--accent);
            display: inline-block;
            transition: color var(--transition-speed) ease;
        }

        [data-theme="dark"] .job-section-title {
            color: #ffffff;
        }

        .job-section-content {
            font-size: 15px;
            line-height: 1.8;
            color: var(--text-body);
            transition: color var(--transition-speed) ease;
        }

        [data-theme="dark"] .job-section-content {
            color: rgba(255, 255, 255, 0.85);
        }

        .job-section-content ul,
        .job-section-content ol {
            padding-left: 24px;
            margin: 10px 0;
        }

        .job-section-content li {
            margin-bottom: 6px;
        }

        .job-section-content strong {
            color: var(--text-title);
        }

        [data-theme="dark"] .job-section-content strong {
            color: #ffffff;
        }

        /* Sidebar */
        .job-sidebar {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .sidebar-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px 20px;
            transition: all var(--transition-speed) ease;
        }

        [data-theme="dark"] .sidebar-card {
            border-color: var(--border-dark);
        }

        .sidebar-card:hover {
            border-color: var(--accent);
        }

        .sidebar-card .badge-commission {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 18px;
            border-radius: 60px;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            background: var(--accent);
        }

        .sidebar-card h5 {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-title);
            margin-bottom: 8px;
        }

        [data-theme="dark"] .sidebar-card h5 {
            color: #ffffff;
        }

        .sidebar-card p {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.6;
            margin: 0;
        }

        .sidebar-card .sidebar-icon {
            color: var(--accent);
            font-size: 20px;
            margin-right: 8px;
        }

        /* CTA Card */
        .cta-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 28px 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        [data-theme="dark"] .cta-card {
            border-color: var(--border-dark);
        }

        .cta-card:hover {
            transform: translateY(-5px);
            border-color: var(--accent);
            box-shadow: 0 20px 60px var(--shadow-hover);
        }

        .cta-card h4 {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-title);
            margin-bottom: 6px;
        }

        [data-theme="dark"] .cta-card h4 {
            color: #ffffff;
        }

        .cta-card p {
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 16px;
        }

        .cta-card .btn-cta-card {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 28px;
            border-radius: 50px;
            font-size: 15px;
            font-weight: 600;
            color: #fff;
            background: var(--accent);
            border: none;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .cta-card .btn-cta-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            color: #fff;
        }

        /* ============================================
           FORMULAIRE DE CANDIDATURE
           ============================================ */
        .candidature-form-wrapper {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 35px 30px;
            margin-top: 40px;
            scroll-margin-top: 100px;
            transition: all var(--transition-speed) ease;
        }

        [data-theme="dark"] .candidature-form-wrapper {
            border-color: var(--border-dark);
        }

        .candidature-form-wrapper .form-title {
            font-size: 26px;
            font-weight: 700;
            color: var(--text-title);
            margin-bottom: 4px;
        }

        [data-theme="dark"] .candidature-form-wrapper .form-title {
            color: #ffffff;
        }

        .candidature-form-wrapper .form-title i {
            color: var(--accent);
        }

        .candidature-form-wrapper .form-subtitle {
            font-size: 15px;
            color: var(--text-muted);
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }

        [data-theme="dark"] .candidature-form-wrapper .form-subtitle {
            border-color: var(--border-dark);
        }

        .candidature-form-wrapper .form-subtitle strong {
            color: var(--text-title);
        }

        [data-theme="dark"] .candidature-form-wrapper .form-subtitle strong {
            color: #ffffff;
        }

        /* Espacement des champs du formulaire */
        .form-group {
            margin-bottom: 24px;
        }

        .form-grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .form-grid-2 .form-group {
            margin-bottom: 0;
        }

        /* Champs plein largeur */
        .form-group-full {
            grid-column: 1 / -1;
        }

        .form-control-candidature {
            width: 100%;
            padding: 12px 16px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--bg-sub);
            color: var(--text-title);
            transition: all var(--transition-speed) ease;
            font-size: 15px;
        }

        [data-theme="dark"] .form-control-candidature {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.08);
            color: #fff;
        }

        .form-control-candidature:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(18, 58, 72, 0.1);
        }

        .form-control-candidature::placeholder {
            color: var(--text-muted);
        }

        textarea.form-control-candidature {
            resize: vertical;
            min-height: 100px;
        }

        .form-label-candidature {
            font-weight: 600;
            font-size: 14px;
            color: var(--text-title);
            margin-bottom: 6px;
            display: block;
        }

        [data-theme="dark"] .form-label-candidature {
            color: #ffffff;
        }

        .form-label-candidature .required {
            color: #dc3545;
            margin-left: 2px;
        }

        /* ============================================
           STYLES POUR LES BOUTONS À COCHER (CHECKBOXES)
           ============================================ */
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .checkbox-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: 30px;
            border: 2px solid var(--border);
            background: var(--bg-sub);
            color: var(--text-body);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
        }

        [data-theme="dark"] .checkbox-btn {
            border-color: rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.03);
            color: rgba(255, 255, 255, 0.7);
        }

        .checkbox-btn:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }

        .checkbox-btn input[type="checkbox"],
        .checkbox-btn input[type="radio"] {
            display: none;
        }

        .checkbox-btn .check-icon {
            display: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--accent);
            color: #fff;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }

        .checkbox-btn.active {
            border-color: var(--accent);
            background: rgba(18, 58, 72, 0.08);
            color: var(--text-title);
            box-shadow: 0 4px 15px rgba(18, 58, 72, 0.12);
        }

        [data-theme="dark"] .checkbox-btn.active {
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            border-color: var(--accent);
        }

        .checkbox-btn.active .check-icon {
            display: inline-flex;
        }

        /* Styles spécifiques pour les radios (civilité) */
        .radio-group .checkbox-btn {
            min-width: 120px;
            justify-content: center;
        }

        .radio-group .checkbox-btn .check-icon {
            border-radius: 50%;
        }

        /* Checkbox personnalisée pour RGPD et Newsletter */
        .checkbox-custom {
            accent-color: var(--accent);
            width: 18px;
            height: 18px;
            margin-right: 8px;
            flex-shrink: 0;
        }

        .form-check {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .form-check-label {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.5;
        }

        .form-check-label a {
            color: var(--accent);
            text-decoration: underline;
        }

        .form-check-label a:hover {
            color: var(--accent-hover);
        }

        /* ============================================
           BOUTON ENVOYER - SANS DÉGRADÉ
           ============================================ */
        .btn-submit-container {
            margin-top: 10px;
            text-align: center;
        }

        .btn-submit-candidature {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 16px 48px;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 700;
            color: #ffffff;
            background: var(--accent);
            border: none;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            min-width: 280px;
            letter-spacing: 0.5px;
            box-shadow: 0 8px 25px rgba(18, 58, 72, 0.25);
        }

        .btn-submit-candidature:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 12px 35px rgba(18, 58, 72, 0.35);
            color: #ffffff;
            background: var(--accent);
        }

        .btn-submit-candidature:active {
            transform: translateY(0) scale(0.98);
        }

        .btn-submit-candidature i {
            font-size: 20px;
        }

        /* ============================================
           MESSAGE D'ERREUR
           ============================================ */
        .error-message {
            background: rgba(220, 53, 69, 0.1);
            border-left: 4px solid #dc3545;
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 16px;
            color: #dc3545;
            font-size: 14px;
        }

        /* ============================================
           RESPONSIVE
           ============================================ */
        @media (max-width: 968px) {
            .job-detail-header h1 {
                font-size: 28px;
            }

            .form-grid-2 {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .form-grid-2 .form-group {
                margin-bottom: 16px;
            }

            .form-grid-2 .form-group:last-child {
                margin-bottom: 0;
            }

            .candidature-form-wrapper {
                padding: 25px 20px;
            }

            .job-section-title {
                font-size: 20px;
            }

            .checkbox-group {
                gap: 8px;
            }

            .checkbox-btn {
                padding: 8px 16px;
                font-size: 13px;
            }

            .btn-submit-candidature {
                padding: 14px 32px;
                font-size: 16px;
                min-width: 220px;
            }
        }

        @media (max-width: 600px) {
            .recrutement-detail-section {
                padding: 10px 0 40px 0;
            }

            .job-detail-header h1 {
                font-size: 22px;
            }

            .job-detail-header .job-meta {
                gap: 10px;
            }

            .job-detail-header .job-meta-item {
                font-size: 13px;
            }

            .job-accroche {
                font-size: 15px;
                padding: 16px 18px;
            }

            .job-section-title {
                font-size: 18px;
            }

            .job-section-content {
                font-size: 14px;
            }

            .candidature-form-wrapper {
                padding: 20px 16px;
            }

            .candidature-form-wrapper .form-title {
                font-size: 22px;
            }

            .sidebar-card {
                padding: 18px 16px;
            }

            .cta-card {
                padding: 20px 16px;
            }

            .cta-card .btn-cta-card {
                width: 100%;
                justify-content: center;
            }

            .form-group {
                margin-bottom: 18px;
            }

            .checkbox-group {
                gap: 6px;
            }

            .checkbox-btn {
                padding: 6px 14px;
                font-size: 12px;
            }

            .radio-group .checkbox-btn {
                min-width: 80px;
            }

            .btn-submit-container {
                text-align: center;
            }

            .btn-submit-candidature {
                padding: 14px 24px;
                font-size: 15px;
                min-width: 100%;
                width: 100%;
            }

            .form-check {
                align-items: flex-start;
            }
        }

        @media (max-width: 400px) {
            .job-detail-header h1 {
                font-size: 20px;
            }

            .checkbox-btn {
                padding: 5px 12px;
                font-size: 11px;
            }

            .radio-group .checkbox-btn {
                min-width: 70px;
            }
        }