@extends('layouts.app')


@section('content')

    <style>
        .button_wp{
            margin: 20px 20px 0px 0px;
            height: 48px;
            min-width: 170px;
            font-size: 15px;
            font-weight: 500;
            line-height: 46px;
            text-transform: none;
            letter-spacing: 0px;
            border: 1px solid rgb(114, 198, 200);
            border-radius: 20px;
            background: rgb(0, 143, 189);
            color: rgb(255, 255, 255);
            font-family: Belleza;

        }

        .button_wp:hover{
            background: rgb(114,198,200);
            color: black;
        }

        .accordion-button:not(.collapsed)::after {
            display: none;
        }
        .accordion-button::after {
            display: none;
        }
        .button_gallery{
            width: 100%;
            border-color: #00b3c0;
            background-color: #00c1cf;
            color: #fff;
        }

        @media (max-width: 800px) {
            .accordLeo {
                width: 90vw;
            }
        }

        @media (min-width: 800px) {
            .accordLeo {
                width: 40vw;
            }
        }

        .aReduit{

        }
        .imgAtelier{
            max-width: 100%;
        }

        .font-h3{
            font-size: 22px;
            text-align: center;
            font-family: Belleza;
            font-weight: 400;
            font-style: normal;
            letter-spacing: 0px;
            color: #50b2c1;
        }

        .font-h2{
            font-family: Belleza;
            font-size: 34px;
            line-height: 40px;
            letter-spacing: 0px;
            font-weight: 400;
            margin-bottom: 30px;
            color: #50b2c1;
        }

        .savoirplus{
            border: 1px solid;
            border-radius: 10px !important;
            border-color: #6ab9c6;
            color: #6ab9c6;
        }
        .fondActivity{
            width: fit-content;
        }
        .btnIconActivity{
            background: linear-gradient(rgb(111, 191, 255), rgb(78, 177, 193));    width: 74px;
            height: 74px;  border-radius: 25px;border: none;
        }

        .forceBg  * {
            /*background: none !important;*/
        }

    </style>


    <div style="text-align: center;">
        <a href="tel:+33683266844"><img style="image-rendering: optimizeQuality; max-width: 100vw;" src="assets/img/accueil.jpg" alt="image presentation Christelle Vandenberghe Sophrologue 06 83 26 68 44 "></a>
    </div>

    <div style="
    margin: auto !important; " class=" col-sm-11 col-md-6 m-2 ">

        <div>
            <h2 class="col-11 mt-5" style="text-align: center !important;color: #50b2c1;font-size: 28px;line-height: 1.29em;text-align: left; letter-spacing:0px;font-family: Belleza; ">Ateliers collectifs / Séances individuelles</h2>
            <span style="    display: flex;
    text-align: center;
    width: 100%;
    justify-content: center;">Tout a repris en présentiel</span>
        </div>

    </div>

    <div class="container mt-3" style=" max-width: 1024px;">
        <div class="row">
            @php $cpt = 0; @endphp
            @foreach($seances as $seance)
                @php
                    $cpt++;
                    $desc = $seance->description;
                @endphp
                @if($cpt === 1  || $cpt === 4 )
                    @php
                        $desc = str_replace("#eeeeee !important;","#eeeeee;",$desc);
                        $desc = str_replace("background-color: #ffffff;","",$desc);
                    @endphp
                @endif
                <div class="col-md-6 mx-auto mb-4" @if($cpt == 1 || $cpt === 4) style="background: linear-gradient(to right,#b6d7dc, #76beca);" @endif >
                    <div class="m-auto mt-2 fondActivity" style=""><button class="btnIconActivity">  <i class="{{$seance->icon}}"></i></button></div>
                    <div class="forceBg">
                        {!! $desc !!}
                    </div>
                </div>
                @if($cpt === 4 )
                    @php $cpt = 0; @endphp
                @endif
            @endforeach

{{--            <div class="col-md-6 mx-auto mb-4">--}}
{{--                <div class="m-auto mt-2 fondActivity" style=""><button class="btnIconActivity">logo</button></div>--}}
{{--            </div>--}}
        </div>
    </div>


    <div class="container mt-3" style=" max-width: 1024px;">
        <div class="row">
            @foreach($prix as $item)
                <div class="col-md-3 mx-auto mb-4">
                    {!! $item->description  !!}
                </div>
            @endforeach

        </div>
    </div>


    <div class="mt-3 m-auto" style=" max-width: 1024px; background-color: #eeeeee;">
        <div class="m-5 text-center">
            <div class="pt-2">Ateliers collectifs en partenariat avec les associations «Cheminements» et « Espace santé naturelle »</div>

            <br>
            <div class="pb-2">Adhésion annuelle: 14€</div>
        </div>
    </div>


    <div class="mt-3 m-auto" style=" max-width: 1024px;">

        <h2>Renseignez vous auprès de votre mutuelle, une prise en charge partielle est possible pour les séances individuelles.</h2>
    </div>


    <div class="mt-3 m-auto" style=" max-width: 1024px;">
        <h2>Lieux</h2>
    </div>



    <div class="container mt-3" style=" max-width: 1024px;">
        <div class="row">
            @foreach($lieux as $lieu)
                <div class="col-md-6 mx-auto mb-4">
                   <h2 style="    color: #33c5ff;"> {{ $lieu->titre  }} </h2>
                    {!! $lieu->description  !!}
                </div>
            @endforeach

        </div>
    </div>






@endsection