@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(to right,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 class="container mt-3" style=" max-width: 1024px;">
        <div class="">
            @foreach($actualites as $actualite)
                <div style="margin-top: 50px;">
                    <h2 style="color: #00a7c1;">{{$actualite->titre}}</h2>
                    {!!  $actualite->description !!}

                </div>
            @endforeach
        </div>
    </div>

@endsection