:root {
            --primary-color: #003366;
            --accent-color: #d4af37;
        }
        body { font-family: 'Segoe UI', sans-serif; }
        
        .navbar-brand img { height: 60px; }
        .nav-link { font-weight: 600; color: var(--primary-color) !important; }
        .dropdown-item:hover { background-color: var(--primary-color); color: white; }
        .btn-membre { background-color: var(--primary-color); color: white; border-radius: 20px; padding: 8px 25px; }
        
        /* Langue */
        .lang-switch a { text-decoration: none; color: var(--primary-color); font-weight: bold; margin: 0 5px; cursor: pointer; opacity: 0.5; }
        .lang-switch a.active { color: var(--accent-color); border-bottom: 2px solid var(--accent-color); opacity: 1; font-size: 1.1em; }
        .lang-switch a:hover { opacity: 1; }

        /* Hero */
        .hero-wrapper { position: relative; height: 600px; overflow: hidden; }
        #heroCarousel { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
        .carousel-item { height: 600px; }
        .carousel-item img { object-fit: cover; height: 100%; width: 100%; filter: brightness(0.4); }
        .hero-content { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: white; }
        
        /* SERVICES (Cartes avec Images) */
        .action-card { 
            border: none; 
            border-bottom: 4px solid var(--accent-color); 
            transition: 0.3s; 
            height: 100%; 
            border-radius: 15px;
            overflow: hidden;
            background: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        .action-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
        
        /* Style pour les images dans les cartes Services */
        .card-img-top-custom {
            height: 220px;
            width: 100%;
            object-fit: cover;
            object-position: center;
        }

        /* Président */
        .president-img { border-radius: 10px; box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
        .quote-box { border-left: 5px solid var(--accent-color); padding-left: 20px; font-style: italic; }
        
        /* Pourquoi rejoindre */
        .why-icon { color: var(--accent-color); font-size: 2rem; margin-bottom: 15px; }
        .why-card { height: 100%; border: 1px solid #eee; border-radius: 10px; padding: 25px; transition: 0.3s; background: white; }
        .why-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.08); transform: translateY(-5px); border-color: var(--accent-color); }
        
        footer { background-color: var(--primary-color); color: white; padding-top: 50px; }
        footer a { color: #ddd; text-decoration: none; }

	.section-card {
            background: white;
            border-radius: 12px;
            border: none;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            margin-bottom: 30px;
            overflow: hidden;
            height: 100%;
         }

        .section-header {
            background-color: var(--primary-color);
            color: white;
            padding: 15px 20px;
            font-size: 1.25rem;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        .section-header i { color: var(--accent-color); margin-right: 10px; }

        .partner-card {
            border: 1px solid #eee;
            border-left: 5px solid var(--accent-color);
            transition: transform 0.3s;
        }
        .partner-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

        .training-list { list-style: none; padding: 0; }
        .training-list li { margin-bottom: 15px; display: flex; align-items: start; }
        .training-list li i { color: var(--accent-color); margin-top: 5px; margin-right: 15px; }

        .lang-link { text-decoration: none; font-weight: bold; margin: 0 5px; color: #6c757d; font-family: sans-serif; }
        .lang-link.active { color: var(--primary-color); text-decoration: underline; }
        
        .btn-retour {
            border-radius: 50px;
            padding: 8px 25px;
            font-weight: 600;
        }
        .btn-retour:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        h2 { color: var(--primary-color); font-weight: 700; margin-bottom: 20px; }
        .faith-card {
            background: white;
            border-radius: 15px;
            border: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            overflow: hidden;
            max-width: 900px;
            margin: 0 auto;
        }

        .faith-header {
            background-color: var(--primary-color);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .faith-title {
            font-family: 'Georgia', serif;
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 10px;
            letter-spacing: 1px;
        }
        
        .intro-text {
            color: var(--accent-color);
            font-weight: bold;
            font-size: 1.5rem;
            text-align: center;
            margin: 30px 0;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .faith-list {
            list-style: none;
            padding: 0 40px 40px 40px;
        }

        .faith-item {
            position: relative;
            padding-left: 40px;
            margin-bottom: 25px;
            font-size: 1.15rem;
            line-height: 1.6;
            color: #444;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

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

        /* L'icône personnalisée (Flèche dorée) */
        .faith-item::before {
            content: '\f054'; /* Code FontAwesome pour chevron-right */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 2px;
            color: var(--accent-color);
            font-size: 1.2rem;
        }

        .lang-link { text-decoration: none; font-weight: bold; margin: 0 5px; color: #6c757d; font-family: sans-serif; }
        .lang-link.active { color: var(--primary-color); text-decoration: underline; }
        
        .btn-retour {
            border-radius: 50px;
            padding: 8px 25px;
            font-weight: 600;
            transition: all 0.3s;
        }
        .btn-retour:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        @media (max-width: 768px) {
            .faith-title { font-size: 1.8rem; }
            .faith-list { padding: 0 20px 20px 20px; }
            .faith-item { font-size: 1rem; padding-left: 30px; }
        }
        /* Cartes des étapes */
        .step-card {
            border: none;
            border-radius: 15px;
            background: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .step-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .step-number {
            font-size: 3rem;
            font-weight: 900;
            color: rgba(0,0,0,0.05);
            position: absolute;
            top: -10px;
            right: 10px;
        }
        .step-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: white;
        }

        /* Couleurs spécifiques par étape */
        .step-1 .step-icon { background-color: #003366; } /* Bleu */
        .step-1 { border-top: 4px solid #003366; }
        
        .step-2 .step-icon { background-color: #198754; } /* Vert */
        .step-2 { border-top: 4px solid #198754; }

        .step-3 .step-icon { background-color: #d4af37; } /* Or */
        .step-3 { border-top: 4px solid #d4af37; }

        /* Organigramme Visuel (Flowchart) */
        .flow-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
        }
        .flow-box {
            background: white;
            border: 2px solid #003366;
            color: #003366;
            padding: 15px 25px;
            border-radius: 10px;
            font-weight: bold;
            text-align: center;
            position: relative;
            width: 220px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .flow-arrow {
            font-size: 2rem;
            color: #d4af37;
        }
        
        /* Adaptation Mobile pour l'organigramme */
        @media (max-width: 768px) {
            .flow-container { flex-direction: column; }
            .flow-arrow { transform: rotate(90deg); margin: 10px 0; }
        }

        .btn-gold {
            background-color: #d4af37;
            color: white;
            font-weight: bold;
        }
        .btn-gold:hover { background-color: #bfa13f; color: white; }
      /* En-tête standard */
        .page-header {
            background: linear-gradient(135deg, #003366 0%, #002244 100%);
            color: white;
            padding: 40px 0;
            margin-bottom: 40px;
            border-bottom: 5px solid #d4af37;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        /* Style de la Timeline Verticale */
        .timeline {
            position: relative;
            padding-left: 50px;
        }
        .timeline::before {
            content: '';
            position: absolute;
            left: 20px;
            top: 0;
            bottom: 0;
            width: 4px;
            background: #e9ecef;
            border-radius: 2px;
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 40px;
        }
        
        /* Puces numérotées */
        .timeline-badge {
            position: absolute;
            left: -50px;
            top: 0;
            width: 44px;
            height: 44px;
            background-color: #003366;
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 44px;
            font-weight: bold;
            font-size: 1.2rem;
            border: 4px solid #f4f6f9;
            z-index: 10;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .timeline-card {
            background: white;
            border: none;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
            border-left: 5px solid #003366; /* Couleur par défaut */
        }
        .timeline-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        /* Couleurs spécifiques par étape */
        .step-budget .timeline-badge { background-color: #17a2b8; }
        .step-budget .timeline-card { border-left-color: #17a2b8; }

        .step-valid .timeline-badge { background-color: #d4af37; }
        .step-valid .timeline-card { border-left-color: #d4af37; }

        .step-pay .timeline-badge { background-color: #198754; }
        .step-pay .timeline-card { border-left-color: #198754; }

        /* Boite de principe clé */
        .key-principle {
            background-color: #fff3cd;
            border: 1px solid #ffeeba;
            color: #856404;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }

        .btn-gold {
            background-color: #d4af37;
            color: white;
            font-weight: bold;
        }
        .btn-gold:hover { background-color: #bfa13f; color: white; }
        
        /* Impression */
        @media print {
            .no-print { display: none; }
            .timeline::before { display: none; }
            .timeline { padding-left: 0; }
            .timeline-badge { position: relative; left: 0; display: inline-block; margin-right: 10px; border: none; }
            .timeline-card { box-shadow: none; border: 1px solid #ddd; margin-bottom: 20px; page-break-inside: avoid; }
        }
        .hero-section { background: linear-gradient(135deg, #003366 0%, #001a33 100%); color: white; padding: 60px 0; margin-bottom: 40px; }
        .content-card { background: white; border: none; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); overflow: hidden; }
        .president-photo-frame { border: 5px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.15); border-radius: 10px; overflow: hidden; max-width: 100%; }
        .highlight-quote { border-left: 4px solid #d4af37; padding-left: 20px; font-style: italic; color: #555; margin: 25px 0; background-color: #fcfcfc; padding: 15px; border-radius: 0 10px 10px 0; }
        .signature { font-family: 'Great Vibes', cursive; font-size: 2.5rem; color: #003366; margin-top: 10px; }
        .btn-join { background-color: #d4af37; border: none; color: white; font-weight: bold; transition: all 0.3s; }
        .btn-join:hover { background-color: #bfa13f; color: white; transform: translateY(-2px); }