@section('header.title', 'Notre nouveau site sera bientôt disponible !')
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>
        Le Cabinet RH
        @hasSection('header.title')
            - @yield('header.title')
        @endif
    </title>

    <meta name="description" content="Le Cabinet RH - LCRH, c’est des personnes qui s’investissent dans vos recherches de candidats et qui pour ça, connaissent ou apprennent vos métiers et leurs environnements afin de pouvoir comprendre vos enjeux et d’y répondre au mieux.">

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="57x57" href="{{ asset('favicon/apple-icon-57x57.png') }}">
    <link rel="apple-touch-icon" sizes="60x60" href="{{ asset('favicon/apple-icon-60x60.png') }}">
    <link rel="apple-touch-icon" sizes="72x72" href="{{ asset('favicon/apple-icon-72x72.png') }}">
    <link rel="apple-touch-icon" sizes="76x76" href="{{ asset('favicon/apple-icon-76x76.png') }}">
    <link rel="apple-touch-icon" sizes="114x114" href="{{ asset('favicon/apple-icon-114x114.png') }}">
    <link rel="apple-touch-icon" sizes="120x120" href="{{ asset('favicon/apple-icon-120x120.png') }}">
    <link rel="apple-touch-icon" sizes="144x144" href="{{ asset('favicon/apple-icon-144x144.png') }}">
    <link rel="apple-touch-icon" sizes="152x152" href="{{ asset('favicon/apple-icon-152x152.png') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('favicon/apple-icon-180x180.png') }}">
    <link rel="icon" type="image/png" sizes="192x192"  href="{{ asset('favicon/android-icon-192x192.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicon/favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="96x96" href="{{ asset('favicon/favicon-96x96.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('favicon/favicon-16x16.png') }}">
    <link rel="manifest" href="{{ asset('manifest.json') }}">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="{{ asset('favicon/ms-icon-144x144.png') }}">
    <meta name="theme-color" content="#ffffff">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="{{ asset('assets/css/app.css') }}?c=<?= uniqid() ?>">
    <script type="text/javascript" src="{{ asset('assets/js/app.js') }}?c=<?= uniqid() ?>"></script>

    <style>
        @font-face {
            font-family: "Myriad Pro";
            src: url({{ asset('assets/fonts/myriadpro/MYRIADPRO-REGULAR.OTF') }});
        }

        @font-face {
            font-family: "Poppins";
            src: url({{ asset('assets/fonts/poppins/Poppins-Light.ttf') }});
        }

        @font-face {
            font-family: "Poppins Regular";
            src: url({{ asset('assets/fonts/poppins/Poppins-Regular.ttf') }});
        }

        @font-face {
            font-family: "Poppins Bolder";
            src: url({{ asset('assets/fonts/poppins/Poppins-Bold.ttf') }});
        }

        body {
            font-family: "Myriad Pro";
        }

        body header, .font-f-2 {
            font-family: "Poppins";
        }

        body header strong, .font-f-2 strong {
            font-family: "Poppins Regular";
        }

        ul.no-style {
            padding: initial;
            margin: initial;
        }

        ul.no-style > li {
            padding: initial;
            margin: initial;
            list-style-type: none;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: bold;
            font-family: "Poppins Bolder";
        }

        h1 {
            font-size: 40px;
        }

        h2 {
            font-size: 32px;
        }

        h3 {
            font-size: 26px;
        }

        @media(max-width: 600px) {
            h1 {
                font-size: 28px;
            }

            h2 {
                font-size: 25px;
            }

            h3 {
                font-size: 22px;
            }
        }

        .bigText {
            font-size: 22px;
        }

        @media(max-width: 600px) {
            .bigText {
                font-size: 18px;
            }
        }
    </style>
</head>
<body class="bg-primary text-light">
@stack('body.prepend')

<div class="d-flex p-5 justify-content-center text-center">
    <div class="d-flex flex-column gap-3 align-items-center">
        <img style="height: 200px; width: fit-content;" class="mb-5" src="{{ asset('assets/images/logo.png') }}" />
        <h1>Le Cabinet RH - LCRH</h1>

        @hasSection('main')
            @yield('main')
        @else
            <div class="bigText">@yield('header.title')</div>
        @endif
    </div>
</div>

@section('footer')
    @include('frontend.sections.footer-coming-soon')
@show

@stack('body.append')
</body>
</html>
