@if (!empty($client['approche']))
    <section id="approche" class="about section light-background">
        <div class="container">
            <div class="row gy-4">

                <div class="content col-lg-7" data-aos="fade-up" data-aos-delay="100">

                    <div class="container section-title" data-aos="fade-up">
                        <h3>Mon approche</h3>
                    </div>

                    @if (!empty($client['approche']['intro']))
                        <p class="section-intro">{!! $client['approche']['intro'] !!}</p>
                    @endif

                    @foreach (['vision', 'mission', 'valeurs'] as $n => $volet)
                        @if (!empty($client['approche'][$volet]['texte']))
                            <div class="accordion-item">
                                <div
                                    class="accordion-title-container"
                                    role="button"
                                    aria-expanded="false"
                                    aria-controls="accordion-approche-content-{{ $n + 1 }}"
                                    tabindex="0"
                                >
                                    @if (!empty($client['approche'][$volet]['titre']))
                                        <h4 class="accordion-title">{{ $client['approche'][$volet]['titre'] }}</h4>
                                    @endif
                                    <i class="accordion-toggle bi bi-chevron-right"></i>
                                </div>
                                <p id="accordion-approche-content-{{ $n + 1 }}" class="accordion-content">
                                    {!! $client['approche'][$volet]['texte'] !!}
                                </p>
                            </div>
                        @endif
                    @endforeach

                    @include('tenant-templates.template-2-0.partials.quick-access-buttons')

                </div>

                @if ($photoApproche)
                    <div class="col-lg-5 position-relative align-self-start" data-aos="fade-up" data-aos-delay="200">
                        <img
                            src="{{ $clientImg }}/{{ $photoApproche }}"
                            alt="{{ $client['photos_accueil'][2]['alt'] ?? ($client['prenom'] . ' ' . $client['nom']) }}"
                            class="img-fluid"
                        >
                    </div>
                @endif

            </div>
        </div>
    </section>
@endif