@extends('layouts.app')

@section('title', 'Maintenance')

@section('content')
<section class="pt-0">
    <!-- Title and switch -->
    <div class="bg-dark position-relative pt-8 pt-xl-9 pb-7 pb-sm-8 px-4 px-md-0 overflow-hidden">
        <!-- SVG decoration -->
        <figure class="position-absolute top-0 start-0">
            <svg class="opacity-2" width="1859" height="1775" viewBox="0 0 1859 1775" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g filter="url(#filter0_d_391_4)">
                    <ellipse cx="929.5" cy="862.5" rx="754.5" ry="719.5" fill="url(#paint0_linear_391_4)" shape-rendering="crispEdges" />
                </g>
                <g filter="url(#filter1_d_391_4)">
                    <ellipse cx="929.5" cy="863" rx="585.5" ry="558" fill="url(#paint1_linear_391_4)" shape-rendering="crispEdges" />
                </g>
                <g filter="url(#filter2_d_391_4)">
                    <ellipse cx="929.5" cy="887.5" rx="909.329" ry="867.5" fill="url(#paint2_linear_391_4)" shape-rendering="crispEdges" />
                </g>
                <defs>
                    <filter id="filter0_d_391_4" x="155" y="123" width="1549" height="1479" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                        <feOffset />
                        <feGaussianBlur stdDeviation="10" />
                        <feComposite in2="hardAlpha" operator="out" />
                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_391_4" />
                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_391_4" result="shape" />
                    </filter>
                    <filter id="filter1_d_391_4" x="324" y="285" width="1211" height="1156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                        <feOffset />
                        <feGaussianBlur stdDeviation="10" />
                        <feComposite in2="hardAlpha" operator="out" />
                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_391_4" />
                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_391_4" result="shape" />
                    </filter>
                    <filter id="filter2_d_391_4" x="0.171387" y="0" width="1858.66" height="1775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                        <feOffset />
                        <feGaussianBlur stdDeviation="10" />
                        <feComposite in2="hardAlpha" operator="out" />
                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_391_4" />
                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_391_4" result="shape" />
                    </filter>
                    <linearGradient id="paint0_linear_391_4" x1="929.5" y1="143" x2="929.5" y2="1582" gradientUnits="userSpaceOnUse">
                        <stop offset="0.0569271" stop-color="#D9D9D9" stop-opacity="0.09" />
                        <stop offset="0.998202" stop-color="#D9D9D9" stop-opacity="0" />
                    </linearGradient>
                    <linearGradient id="paint1_linear_391_4" x1="929.5" y1="305" x2="929.5" y2="1421" gradientUnits="userSpaceOnUse">
                        <stop offset="0.0569271" stop-color="#D9D9D9" stop-opacity="0.07" />
                        <stop offset="0.998202" stop-color="#D9D9D9" stop-opacity="0" />
                    </linearGradient>
                    <linearGradient id="paint2_linear_391_4" x1="929.5" y1="20" x2="929.5" y2="1755" gradientUnits="userSpaceOnUse">
                        <stop offset="0.0569271" stop-color="#D9D9D9" stop-opacity="0.1" />
                        <stop offset="0.998202" stop-color="#D9D9D9" stop-opacity="0" />
                    </linearGradient>
                </defs>
            </svg>
        </figure>

        <div class="inner-container-small text-center position-relative mb-8">
            <!-- Title -->
            <h1 class="text-white mb-5">Plus de stress technique, optez pour notre service de maintenance fiable.</h1>

            <!-- Switch START -->
            <form class="d-flex align-items-center justify-content-center mb-4 mb-xl-0">
                <!-- Label -->

                <!-- Switch -->
                <div class="form-check form-switch form-check-lg mx-2 mb-0">
                    <input class="form-check-input mt-0 price-toggle" type="hidden" id="flexSwitchCheckDefault">
                </div>
                <!-- Label -->

            </form>
            <!-- Switch END -->
        </div>
    </div>

    <!-- Pricing items START -->
    <div class="container mt-n9">
        <!-- Slider START -->
        <div class="slider-maintenance pt-5">
            <!-- Item -->
            <div class="slider-item p-3 pt-5">
                <div class="card shadow border overflow-hidden">
                    <!-- Card header -->
                    <div class="card-header border-bottom">
                        <!-- Icon -->
                        <div class="icon-lg bg-light rounded-circle mb-3">
                            <i class="bi bi-lightning-charge-fill fa-lg lh-1 heading-color"></i>
                        </div>
                        <!-- Title and price -->
                        <h6 class="mb-3">Essentiel</h6>
                        <p class="mb-0"> <span class="h2 mb-0 plan-price" data-monthly-price="60€" data-annual-price="50€">50€</span> /mois</p>
                        <small>Infogérance basique, idéal entreprises individuelles & TPE</small>
                    </div>

                    <!-- Card body -->
                    <div class="card-body p-4">
                        <div class="text-center text-lg-start">
                            <!-- Small title -->
                            <h6>Vos avantages en un clin d'œil!</h6>

                            <!-- List -->
                            <ul class="list-group list-group-borderless mb-2 mb-sm-4">
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Gestion de l'hébergement et du domaine</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Sauvegarde intégrale quotidienne</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Maintenance corrective</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Protection anti-bot</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Support technique email</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Délais d'intervention d'une semaine (SLA 7 jours)</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>1 heure d'assistance technique incluse par mois</li>
                            </ul>

                            <!-- Button -->
                            <a href="{{route('contact')}}" class="btn btn-dark w-100">Choisir</a>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Item -->
            <div class="slider-item p-3">
                <div class="card border border-primary p-0">
                    <!-- Badge -->
                    <div class="bg-primary text-white rounded position-absolute top-0 start-50 translate-middle px-2 py-1">Populaire</div>

                    <!-- Card header -->
                    <div class="card-header bg-primary bg-opacity-10 border-bottom border-primary border-opacity-25 p-4">
                        <!-- Icon -->
                        <div class="icon-lg bg-primary bg-opacity-10 rounded-circle mb-3">
                            <i class="bi bi-rocket-takeoff-fill fa-lg lh-1 text-primary"></i>
                        </div>
                        <!-- Title and price -->
                        <h6 class="mb-3">Premium</h6>
                        <p class="mb-0"><span class="h2 mb-0 plan-price" data-monthly-price="150€" data-annual-price="125€">125€</span> /mois</p>
                        <small>Infogérance avancée, l'offre adaptée aux petites entreprises</small>
                    </div>

                    <!-- Card body -->
                    <div class="card-body bg-primary bg-opacity-10 p-4">
                        <div class="text-center text-lg-start">
                            <h6 class="heading-color">Vos avantages en un clin d'œil!</h6>
                            <!-- List -->
                            <ul class="list-group list-group-borderless mb-2 mb-sm-4">
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Gestion de l'hébergement et du domaine</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Sauvegarde intégrale quotidienne</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Réplication géographique</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Maintenance corrective et évolutive</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Protection anti-bot</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Support technique email</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Délais d'intervention de moins de trois jours (SLA 56 heures maximum)</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>3 heures d'assistance technique incluses par mois</li>
                            </ul>

                            <!-- Button -->
                            <a href="{{route('contact')}}" class="btn btn-primary mb-0 w-100">Choisir</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Item -->
            <div class="slider-item p-3 pt-5">
                <div class="card shadow border p-0">
                    <!-- Card header -->
                    <div class="card-header border-bottom p-4">
                        <!-- Icon -->
                        <div class="icon-lg bg-light rounded-circle mb-3">
                            <i class="bi bi-send-fill fa-lg lh-1 heading-color"></i>
                        </div>
                        <!-- Title and price -->
                        <h6 class="mb-3">Entreprise</h6>
                        <p class="mb-0"><span class="h2 mb-0 plan-price" data-monthly-price="360€" data-annual-price="300€">300€</span> /mois</p>
                        <small>Infogérance complète</small>
                    </div>

                    <!-- Card body -->
                    <div class="card-body p-4">
                        <div class="text-center text-lg-start">
                            <!-- Small title -->
                            <h6>Vos avantages en un clin d'œil!</h6>

                            <!-- List -->
                            <ul class="list-group list-group-borderless mb-2 mb-sm-4">
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Gestion de l'hébergement et du domaine</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Une offre de sauvegarde sur-mesure</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Réplication géographique</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Maintenance corrective et évolutive</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Protection anti-bot</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Support technique email</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Délais d'intervention de moins d'un jour (SLA 24 heures maximum)</li>
                                <li class="list-group-item d-flex heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>5 heures d'assistance technique incluses par mois</li>
                            </ul>

                            <!-- Button -->
                            <a href="{{route('contact')}}" class="btn btn-dark w-100">Choisir</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Slider END -->
    </div>
    <!-- Pricing items END -->

</section>
<!-- =======================
Main hero END -->

<!-- =======================
Feature START -->
<section class="pt-0">
    <div class="container">
        <div class="inner-container-small text-center mb-4 mb-sm-6">
            <h2 class="mb-4">Pour des systèmes performants en permanence, confiez-nous votre maintenance.</h2>
            <p class="mb-0">Passez outre les tracas techniques. Notre service de maintenance prend en charge tout, de l'hébergement aux sauvegardes régulières, vous permettant ainsi d'avoir des programmes opérationnels sans encombre.</p>
        </div>
        <!-- Feature item START -->
        <div class="row g-4 g-lg-5">
            <!-- Item -->
            <div class="col-md-4 text-center">
                <div class="card card-body border bg-light">
                    <div class="icon-lg text-primary mx-auto mb-3"><i class="bi bi-clock fa-xl"></i></div>
                    <h6>Mise en place rapide</h6>
                    <p>Accès immédiat à votre maintenance, sans attente, pour une tranquillité d'esprit dès le premier jour.</p>
                </div>
            </div>

            <!-- Item -->
            <div class="col-md-4 text-center">
                <div class="card card-body border bg-light">
                    <div class="icon-lg text-primary mx-auto mb-3"><i class="bi bi-graph-up-arrow fa-xl"></i></div>
                    <h6>Maximisez la disponibilité</h6>
                    <p>Optimisez la performance et la fiabilité de votre système pour garantir une disponibilité maximale.</p>
                </div>
            </div>

            <!-- Item -->
            <div class="col-md-4 text-center">
                <div class="card card-body border bg-light">
                    <div class="icon-lg text-primary mx-auto mb-3"><i class="bi bi-headset fa-xl"></i></div>
                    <h6>Support technique proactif</h6>
                    <p>Notre équipe technique est disponible à tout moment pour répondre à vos questions et résoudre vos problèmes.</p>
                </div>
            </div>
        </div>
        <!-- Feature item END -->


        <!-- Table START -->
        <div class="table-responsive-xl mt-5">




            <table class="table table-border align-middle">
                <!-- Head START -->
                <thead class="align-top">
                    <tr>
                        <th scope="col"></th>
                        <th scope="col">
                            <div class="text-center p-3">
                                <span class="mb-3 heading-color">Essentiel</span>
                                <p class="mb-3"><span class="h2 mb-0 plan-price" data-monthly-price="€50" data-annual-price="€50">€50</span> /mois</p>
                                <a href="{{route('contact')}}" class="btn btn-sm btn-dark mb-0">Choisir</a>
                            </div>
                        </th>
                        <th scope="col">
                            <div class="text-center p-3">
                                <span class="mb-3 heading-color">Premium</span>
                                <p class="mb-3"><span class="h2 mb-0 plan-price" data-monthly-price="€125" data-annual-price="€125">€125</span> /mois</p>
                                <a href="{{route('contact')}}" class="btn btn-sm btn-dark mb-0">Choisir</a>
                            </div>
                        </th>
                        <th scope="col">
                            <div class="text-center p-3">
                                <span class="mb-3 heading-color">Entreprise</span>
                                <p class="mb-3"><span class="h2 mb-0 plan-price" data-monthly-price="€300" data-annual-price="€300">€300</span> /mois</p>
                                <a href="{{route('contact')}}" class="btn btn-sm btn-dark mb-0">Choisir</a>
                            </div>
                        </th>
                    </tr>
                </thead>
                <!-- Head END -->

                <!-- Body START -->
                <tbody class="border-top-0">
                    <tr>
                        <th scope="row"><span class="fw-normal heading-color ps-lg-4 mb-0">Gestion de l'hébergement et du domaine</span></th>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                    </tr>
                    <tr>
                        <th scope="row"><span class="fw-normal heading-color ps-lg-4 mb-0">Type de serveur</span></th>
                        <td class="text-center">Mutualisé</td>
                        <td class="text-center">Mutualisé</td>
                        <td class="text-center">Dédié</td>
                    </tr>

                    <tr>
                        <th scope="row"><span class="fw-normal heading-color ps-lg-4 mb-0">Sauvegarde intégrale code et base de données</span></th>
                        <td class="text-center">Quotidien</td>
                        <td class="text-center">Quotidien</td>
                        <td class="text-center">Sur mesure</td>
                    </tr>

                    <tr>
                        <th scope="row"><span class="fw-normal heading-color ps-lg-4 mb-0">Réplication géographique</span></th>
                        <td class="text-center text-danger"><i class="bi bi-x-circle fa-lg"></i></td>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                    </tr>


                    <tr>
                        <th scope="row"><span class="fw-normal heading-color ps-lg-4 mb-0">Maintenance corrective</span></th>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                    </tr>


                    <tr>
                        <th scope="row"><span class="fw-normal heading-color ps-lg-4 mb-0">Maintenance évolutive</span></th>
                        <td class="text-center text-danger"><i class="bi bi-x-circle fa-lg"></i></td>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                    </tr>

                    <tr>
                        <th scope="row"><span class="fw-normal heading-color ps-lg-4 mb-0">Protection anti-bot</span></th>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                    </tr>

                    <tr>
                        <th scope="row"><span class="fw-normal heading-color ps-lg-4 mb-0">Support technique email</span></th>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                        <td class="text-center text-primary"><i class="bi bi-check-circle fa-lg"></i></td>
                    </tr>

                    <tr>
                        <th scope="row"><span class="fw-normal heading-color ps-lg-4 mb-0">Assistance technique</span></th>
                        <td class="text-center">1h/mois</td>
                        <td class="text-center">2h/mois</td>
                        <td class="text-center">5h/mois</td>
                    </tr>
                </tbody>
                <!-- Body END -->
            </table>

        </div>
        <!-- Table END -->

    </div>
</section>
<!-- =======================
Feature END -->

<!-- =======================
CTA START -->
<section class="position-relative z-index-2 pt-0">
    <div class="container position-relative">
        <div class="bg-dark rounded position-relative overflow-hidden p-4 p-sm-7">
            <!-- SVG decoration -->
            <figure class="position-absolute top-0 start-0 mt-n5">
                <svg class="fill-light" style="opacity:0.02" width="662" height="614" viewBox="0 0 662 614" xmlns="http://www.w3.org/2000/svg">
                    <path d="M-78 0V603.815C-61.4821 612.795 -44.1025 615.867 -28.4464 611.85C9.04192 602.16 38.9177 554.186 58.4519 503.612C77.8424 453.511 90.1949 397.029 105.995 343.383C121.794 289.973 142.477 237.745 173.215 206.549C224.779 154.321 291.425 172.991 349.166 202.768C406.907 232.545 466.227 272.248 525.979 256.414C570.505 244.598 611.441 200.878 636.002 138.724C652.233 97.6029 661.138 48.9196 662 0L-78 0Z"></path>
                </svg>
            </figure>

            <!-- SVG decoration -->
            <figure class="position-absolute top-0 end-0 mt-n8 me-n8">
                <svg class="opacity-3" width="371" height="354" viewBox="0 0 371 354" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <ellipse cx="172.5" cy="176.5" rx="131.5" ry="125.5" fill="url(#paint0_linear_195_2)"></ellipse>
                    <ellipse cx="185.5" cy="177" rx="185.5" ry="177" fill="url(#paint1_linear_195_2)"></ellipse>
                    <defs>
                        <linearGradient id="paint0_linear_195_2" x1="172.5" y1="51" x2="172.5" y2="302" gradientUnits="userSpaceOnUse">
                            <stop offset="0.0569271" stop-color="#D9D9D9" stop-opacity="0.5"></stop>
                            <stop offset="0.998202" stop-color="#D9D9D9" stop-opacity="0"></stop>
                        </linearGradient>
                        <linearGradient id="paint1_linear_195_2" x1="185.5" y1="0" x2="185.5" y2="354" gradientUnits="userSpaceOnUse">
                            <stop offset="0.0569271" stop-color="#D9D9D9" stop-opacity="0.2"></stop>
                            <stop offset="0.998202" stop-color="#D9D9D9" stop-opacity="0"></stop>
                        </linearGradient>
                    </defs>
                </svg>
            </figure>

            <div class="row g-4 position-relative">
                <!-- Title and inputs -->
                <div class="col-lg-10 col-xl-7 mx-auto text-center">
                    <!-- Title -->
                    <h3 class="text-white mb-3">Nous prenons soin de vos applications et sites web</h3>
                    <p class="text-white opacity-8">De nombreux clients ont choisi Systemin pour la maintenance de leurs applications et sites web, bénéficiant ainsi de notre savoir-faire et de notre engagement à maintenir leurs systèmes à jour et sécurisés.</p>
                    <a href="{{route('contact')}}" class="btn btn-primary mb-md-5">Obtenir un devis</a>

                </div>

                <!-- Client slider START -->
                <div class="col-md-10 mx-auto">
                    @include('layouts.client')
                </div>

                <!-- Client slider END -->

            </div> <!-- Row END -->
        </div>
    </div>
</section>
<!-- =======================
CTA END -->

<!-- =======================
Faqs START -->
<section class="pt-0">
    <div class="container">
        <div class="row">

            <div class="col-md-7 mx-auto">
                <!-- Title -->
                <h2 class="mb-5 text-center">Vos questions fréquentes sur notre service de maintenance</h2>

                <!-- Accordion START -->
                <div class="accordion accordion-icon accordion-bg-light" id="accordionFaq">
                    <!-- Item -->
                    <div class="accordion-item mb-3">
                        <div class="accordion-header font-base" id="heading-1">
                            <button class="accordion-button fw-semibold rounded collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
                                Gestion de l'hébergement et du domaine, à quoi ça correspond ?
                            </button>
                        </div>
                        <!-- Body -->
                        <div id="collapse-1" class="accordion-collapse collapse show" aria-labelledby="heading-1" data-bs-parent="#accordionFaq">
                            <div class="accordion-body mt-3 pb-0">
                                C'est comme l'adresse et la maison de votre site ou application sur Internet. L'hébergement est l'espace sur un ordinateur (serveur) où votre site vit, tandis que le domaine est l'adresse web par laquelle les visiteurs peuvent y accéder. Nous nous occupons de tout cela pour vous, garantissant que votre site est toujours accessible en ligne. </div>
                        </div>
                    </div>

                    <!-- Item -->
                    <div class="accordion-item mb-3">
                        <div class="accordion-header font-base" id="heading-2">
                            <button class="accordion-button fw-semibold rounded collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
                                Type de serveur : mutualisé ou dédié, quelle différence ?
                            </button>
                        </div>
                        <!-- Body -->
                        <div id="collapse-2" class="accordion-collapse collapse" aria-labelledby="heading-2" data-bs-parent="#accordionFaq">
                            <div class="accordion-body mt-3 pb-0">
                                Un serveur mutualisé est comme vivre en colocation : vous partagez l'espace et les ressources avec d'autres sites. C'est économique, mais moins flexible. Un serveur dédié, c'est avoir sa propre maison : vous bénéficiez de toutes les ressources exclusivement pour votre site, ce qui offre plus de puissance et de sécurité.
                            </div>
                        </div>
                    </div>

                    <!-- Item -->
                    <div class="accordion-item mb-3">
                        <div class="accordion-header font-base" id="heading-3">
                            <button class="accordion-button fw-semibold collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
                                Sauvegarde intégrale code et base de données, c'est nécessaire ?
                            </button>
                        </div>
                        <!-- Body -->
                        <div id="collapse-3" class="accordion-collapse collapse" aria-labelledby="heading-3" data-bs-parent="#accordionFaq">
                            <div class="accordion-body mt-3 pb-0">
                                Absolument ! C'est comme avoir une assurance pour votre site. Si quelque chose va mal, nous pouvons restaurer votre site à un état antérieur, sans perdre de données importantes. Quotidiennement pour la plupart, ou sur mesure pour des besoins spécifiques.

                            </div>
                        </div>
                    </div>

                    <!-- Item -->
                    <div class="accordion-item mb-3">
                        <div class="accordion-header font-base" id="heading-4">
                            <button class="accordion-button fw-semibold collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false" aria-controls="collapse-4">
                                Qu'est-ce que la réplication géographique ?
                            </button>
                        </div>
                        <!-- Body -->
                        <div id="collapse-4" class="accordion-collapse collapse" aria-labelledby="heading-4" data-bs-parent="#accordionFaq">
                            <div class="accordion-body mt-3 pb-0">
                                <p>Imaginez que vous ayez des copies de votre site stockées dans différents lieux géographiques. Si un problème survient dans une région, vos visiteurs peuvent être automatiquement redirigés vers une autre copie, garantissant ainsi que votre site reste toujours disponible.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Item -->
                    <div class="accordion-item mb-3">
                        <div class="accordion-header font-base" id="heading-5">
                            <button class="accordion-button fw-semibold collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-5" aria-expanded="false" aria-controls="collapse-5">
                                Maintenance corrective, ça veut dire quoi ?
                            </button>
                        </div>
                        <!-- Body -->
                        <div id="collapse-5" class="accordion-collapse collapse" aria-labelledby="heading-5" data-bs-parent="#accordionFaq">
                            <div class="accordion-body mt-3 pb-0">
                                <p>Si des bugs ou des problèmes techniques apparaissent sur votre site, nous intervenons pour les corriger. Cela assure que votre site fonctionne bien et offre une bonne expérience à vos visiteurs.

                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Item -->
                    <div class="accordion-item mb-3">
                        <div class="accordion-header font-base" id="heading-6">
                            <button class="accordion-button fw-semibold collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-6" aria-expanded="false" aria-controls="collapse-6">
                                Et la maintenance évolutive ?
                            </button>
                        </div>
                        <!-- Body -->
                        <div id="collapse-6" class="accordion-collapse collapse" aria-labelledby="heading-6" data-bs-parent="#accordionFaq">
                            <div class="accordion-body mt-3 pb-0">
                                <p>Votre site doit évoluer avec votre entreprise. La maintenance évolutive consiste à ajouter de nouvelles fonctionnalités, à mettre à jour le contenu et à s'assurer que votre site reste moderne et conforme aux dernières tendances et technologies.

                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Item -->
                    <div class="accordion-item mb-3">
                        <div class="accordion-header font-base" id="heading-7">
                            <button class="accordion-button fw-semibold collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-7" aria-expanded="false" aria-controls="collapse-7">
                                Protection anti-bot, c'est utile ?
                            </button>
                        </div>
                        <!-- Body -->
                        <div id="collapse-7" class="accordion-collapse collapse" aria-labelledby="heading-7" data-bs-parent="#accordionFaq">
                            <div class="accordion-body mt-3 pb-0">
                                <p>Les bots malveillants peuvent surcharger votre site, voler des données ou même le pirater. Nous mettons en place des mesures de sécurité pour bloquer ces bots, assurant la sécurité de votre site et de vos visiteurs.

                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Item -->
                    <div class="accordion-item mb-3">
                        <div class="accordion-header font-base" id="heading-8">
                            <button class="accordion-button fw-semibold collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-8" aria-expanded="false" aria-controls="collapse-8">
                                Support technique email, comment ça fonctionne ?
                            </button>
                        </div>
                        <!-- Body -->
                        <div id="collapse-8" class="accordion-collapse collapse" aria-labelledby="heading-8" data-bs-parent="#accordionFaq">
                            <div class="accordion-body mt-3 pb-0">
                                <p>Si vous avez des questions ou besoin d'aide avec votre site, vous pouvez nous contacter par email à tout moment. Notre équipe technique est là pour vous aider à résoudre vos problèmes et répondre à vos questions.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Item -->
                    <div class="accordion-item mb-3">
                        <div class="accordion-header font-base" id="heading-9">
                            <button class="accordion-button fw-semibold collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-9" aria-expanded="false" aria-controls="collapse-9">
                                Assistance technique, en quoi ça consiste ?

                            </button>
                        </div>
                        <!-- Body -->
                        <div id="collapse-9" class="accordion-collapse collapse" aria-labelledby="heading-9" data-bs-parent="#accordionFaq">
                            <div class="accordion-body mt-3 pb-0">
                                <p>C'est un service supplémentaire où nous offrons une aide plus approfondie et personnalisée. Que ce soit pour des modifications sur votre site, des conseils techniques ou des formations, nous sommes disponibles pour vous assister plus intensément selon le forfait choisi.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Accordion END -->
            </div>
        </div>
    </div>
</section>

<!-- **************** MAIN CONTENT END **************** -->
@endsection