@extends('layout.headerAndFooter')

@section('headLinks')
    <link rel="stylesheet" href="{{ asset('siteStyle/newindex.css') }}">
    <link rel="stylesheet" href="{{ asset('siteStyle/sectionStyle/brandsShow.css') }}">
    <link rel="stylesheet" href="{{ asset('siteStyle/sectionStyle/topSection.css') }}">
    <meta name="description" content="content description">
        <style>
        :root {
            --red: #e5373f;
            --dark: #1a1a1a;
            --light: #f8f8f8;
            --text: #555;
            --border: #e5e5e5;
            --white: #fff;
        }

        /* ===== VALUES SECTION ===== */
        .values-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: start;
            margin-top: 60px;
        }

        .values-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .value-card {
            padding: 24px;
            background: linear-gradient(135deg, var(--light) 0%, #f0f0f0 100%);
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .value-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--red);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 0;
        }

        .value-card:hover {
            transform: translateY(-8px);
            border-color: var(--red);
        }

        .value-card.active {
            background: var(--red);
            color: var(--white);
            box-shadow: 0 20px 50px rgba(229, 55, 63, 0.3);
        }

        .value-card-inner {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .value-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .value-icon svg {
            width: 100%;
            height: 100%;
        }

        .value-card.active svg path {
            fill: var(--white);
        }

        .value-name {
            font-weight: 700;
            font-size: 15px;
        }

        .value-details {
            display: none;
            padding: 40px;
            background: var(--light);
            border-radius: 14px;
            animation: fadeIn 0.4s ease;
        }

        .value-details.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .value-details-title {
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 12px;
            color: var(--dark);
        }

        .value-details-subtitle {
            font-size: 14px;
            font-weight: 700;
            color: var(--red);
            margin-bottom: 15px;
        }

        .value-details-text {
            font-size: 15px;
            color: var(--text);
            line-height: 1.8;
            margin-bottom: 25px;
        }

        /* ===== JOBS SECTION ===== */
        .jobs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .job-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 32px;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .job-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--red) 0%, transparent 100%);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }

        .job-card:hover {
            border-color: var(--red);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
            transform: translateY(-8px);
        }

        .job-card:hover::before {
            transform: scaleX(1);
        }

        .job-title {
            font-size: 20px;
            font-weight: 800;
            color: var(--dark);
            margin-bottom: 16px;
        }

        .job-meta {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }

        .job-meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--text);
        }

        .job-meta-item svg {
            width: 16px;
            height: 16px;
            fill: var(--red);
        }

        .job-description {
            font-size: 15px;
            color: var(--text);
            line-height: 1.7;
            margin-bottom: 20px;
            flex-grow: 1;
        }

        .job-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }

        .job-tag {
            display: inline-block;
            background: linear-gradient(135deg, var(--light) 0%, #f0f0f0 100%);
            color: var(--dark);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .job-card:hover .job-tag {
            background: linear-gradient(135deg, var(--red) 0%, #cc2e36 100%);
            color: var(--white);
        }

        /* ===== BUTTONS ===== */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 28px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 15px;
            border: none;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
            text-decoration: none;
        }

        .btn-primary {
            background: var(--red);
            color: var(--white);
            box-shadow: 0 4px 15px rgba(229, 55, 63, 0.2);
        }

        .btn-primary:hover {
            background: #cc2e36;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(229, 55, 63, 0.3);
        }

        .btn-secondary {
            background: var(--white);
            color: var(--dark);
            border: 2px solid var(--red);
        }

        .btn-secondary:hover {
            background: var(--red);
            color: var(--white);
        }

        .btn svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }

        /* ===== CTA SECTION ===== */
        .cta-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            margin-top: 60px;
            padding: 60px;
            background: linear-gradient(135deg, var(--light) 0%, rgba(229, 55, 63, 0.05) 100%);
            border-radius: 14px;
        }

        .cta-content h2 {
            font-size: 36px;
            font-weight: 800;
            color: var(--dark);
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .cta-content p {
            font-size: 16px;
            color: var(--text);
            line-height: 1.8;
            margin-bottom: 30px;
        }

        /* ===== FORM SECTION ===== */
        .form-container {
            max-width: 700px;
            margin: 50px auto 0;
        }

        .form-group {
            margin-bottom: 24px;
        }

        .form-label {
            display: block;
            font-weight: 700;
            font-size: 14px;
            color: var(--dark);
            margin-bottom: 8px;
        }

        .form-label span {
            color: var(--red);
        }

        .form-input,
        .form-select,
        .form-textarea {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            transition: all 0.3s ease;
            background: var(--white);
            color: var(--dark);
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            outline: none;
            border-color: var(--red);
            box-shadow: 0 0 0 3px rgba(229, 55, 63, 0.1);
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .form-textarea {
            resize: vertical;
            min-height: 120px;
        }

        .form-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: var(--text);
        }

        .form-checkbox input {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--red);
        }

        .form-checkbox a {
            color: var(--red);
            text-decoration: none;
        }

        .form-checkbox a:hover {
            text-decoration: underline;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .hero {
                height: 350px;
            }

            .hero h1 {
                font-size: 36px;
            }

            .section {
                padding: 50px 25px;
            }

            .section-title {
                font-size: 28px;
            }

            .values-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .jobs-grid {
                grid-template-columns: 1fr;
            }

            .cta-section {
                grid-template-columns: 1fr;
                padding: 40px;
            }

            .form-row {
                grid-template-columns: 1fr;
            }
        }

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

            .section {
                padding: 40px 15px;
            }

            .section-title {
                font-size: 22px;
            }

            .values-grid {
                grid-template-columns: 1fr;
            }

            .btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
@stop

@section('title')
    home
@stop



@section('content')
    <section class="containerB topsection">
        <div class="three_wrapper" id="three-container">
            <div id="three-scene"></div>
        </div>
        <div class="topSection ">
            <div class="titleAndBtn">
                <h1 class="titleTopSection">Nous aidons les marques
                    à développer leur<br><span style="color:var(--red)"> <span id="changingWord"
                            class="fadeWord">performance</span></span><br>grâce à une maîtrise
                    complète du digital <span>.</span>
                </h1>
                <div class="btn-box">
                    <a class="atirao-button atirao-button--primary atirao-button--large" href="{{ route('contact') }}">
                        <span class="txt">        Prendre un rendez-vous
                            <svg class="buttonSvg W" xmlns="http://www.w3.org/2000/svg" id="Calque_2" data-name="Calque 2"
                                viewBox="0 0 21.32 10.32">
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <path
                                        d="M21.07,4.57s0,0,0,0L16.72.24c-.33-.32-.85-.32-1.18,0-.32.33-.32.85,0,1.18l2.92,2.91H.83c-.46,0-.83.37-.83.83s.37.83.83.83h17.63l-2.92,2.91c-.33.32-.33.85,0,1.18.32.33.85.33,1.18,0l4.35-4.33s0,0,0,0c.33-.33.33-.85,0-1.18Z" />
                                </g>
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
            <div class="image">
                <img src="{{ asset('images/hero_image.webp') }}" alt="">
            </div>
        </div>
    </section>



    <section class="containerW">
        <div class="expertisesSection">
            <h2 class="section-subtitle">NOS VALEURS</h2>
            <h3 class="section-title exeptionTitle">
                Des convictions fortes <br>
                pour des résultats durables<span style="color: #e5373f;">.</span>

            </h3>
        </div>
        <div class="valeurs-section">
            <div class="valeurs-gauche">
                <div class="valeurs-row">
                    <div class="valeur-box" data-value="performance">
                        <span class="valeur-icon">
                            <svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 32.98 32.98">
                                <defs>
                                    <style>
                                        .cls-1 {
                                            fill: #e5373f;
                                        }
                                    </style>
                                </defs>
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <g>
                                        <path class="cls-1"
                                            d="M4.44,18.92c-2.45,0-4.44,1.99-4.44,4.44v5.17c0,2.45,1.99,4.44,4.44,4.44s4.44-1.99,4.44-4.44v-5.17c0-2.45-1.99-4.44-4.44-4.44Z" />
                                        <path class="cls-1"
                                            d="M16.49,0c-2.45,0-4.44,1.99-4.44,4.44v24.09c0,2.45,1.99,4.44,4.44,4.44s4.44-1.99,4.44-4.44V4.44c0-2.45-1.99-4.44-4.44-4.44Z" />
                                        <path class="cls-1"
                                            d="M28.53,9.46c-2.45,0-4.44,1.99-4.44,4.44v14.63c0,2.45,1.99,4.44,4.44,4.44s4.44-1.99,4.44-4.44v-14.63c0-2.45-1.99-4.44-4.44-4.44Z" />
                                    </g>
                                </g>
                            </svg>
                        </span>Performance
                    </div>
                    <div class="valeur-box" data-value="creativite">
                        <span class="valeur-icon">
                            <svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 27.39 30.83">
                                <defs>
                                    <style>
                                        .cls-1 {
                                            fill: #e5373f;
                                        }
                                    </style>
                                </defs>
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <g>
                                        <path class="cls-1"
                                            d="M10.68,8.73c.07,1.04,1.26,1.61,2.13,1.02.76-.52,1.79.02,1.79.94v3.79h2.84c-.5-2.06,1.13-4.06,3.3-3.91,1.91.13,3.33,1.97,2.85,3.91h2.87c2.4-3.63-.02-8.87-4.69-9.11C22.28,2.58,20.13,0,17.31,0c-1.02,0-1.96.34-2.72.91v5.65c0,.92-1.03,1.46-1.79.94-.92-.63-2.21.07-2.13,1.22Z" />
                                        <path class="cls-1"
                                            d="M4.82,14.48c.92,0,1.46,1.03.94,1.79-.63.92.06,2.2,1.22,2.12,1.05-.07,1.61-1.27,1.02-2.12-.52-.76.02-1.79.94-1.79h3.85v-2.78c-1.95.48-3.78-.94-3.91-2.85-.15-2.16,1.85-3.8,3.91-3.3V.91c-3.24-2.44-7.88.35-7.17,4.39C.92,5.56-1.46,10.82.96,14.48h3.86Z" />
                                        <path class="cls-1"
                                            d="M26.42,16.29h-3.85c-.92,0-1.46-1.03-.94-1.79.59-.86.02-2.05-1.02-2.12-1.16-.08-1.85,1.21-1.22,2.12.52.76-.02,1.79-.94,1.79h-3.85v2.78c2.06-.5,4.06,1.13,3.91,3.3-.13,1.91-1.97,3.33-3.91,2.85v4.7c3.24,2.44,7.88-.35,7.17-4.39,4.59-.24,7.14-5.39,4.65-9.23h0Z" />
                                        <path class="cls-1"
                                            d="M16.71,22.24c.08-1.15-1.2-1.85-2.13-1.22-.76.52-1.79-.02-1.79-.94v-3.79h-2.84c.49,2-1.03,3.92-3.08,3.92s-3.55-1.94-3.07-3.92H.96c-2.42,3.66-.04,8.93,4.67,9.17-.53,2.79,1.62,5.36,4.44,5.36,1.02,0,1.96-.34,2.72-.91v-5.71c0-.92,1.03-1.46,1.79-.94.86.59,2.05.02,2.13-1.02h0Z" />
                                    </g>
                                </g>
                            </svg>
                        </span>Créativité
                    </div>
                </div>
                <div class="valeurs-row">
                    <div class="valeur-box active" data-value="innovation">
                        <span class="valeur-icon">
                            {{-- <xml version="1.0" encoding="UTF-8"?> --}}
                            <svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 35.9 35.9">
                                <defs>
                                    <style>
                                        .cls-1 {
                                            fill: #fff;
                                        }
                                    </style>
                                </defs>
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <g>
                                        <path class="cls-1"
                                            d="M4.21,15.85c0-.58-.47-1.05-1.05-1.05H1.05c-.58,0-1.05.47-1.05,1.05s.47,1.05,1.05,1.05h2.1c.58,0,1.05-.47,1.05-1.05Z" />
                                        <path class="cls-1"
                                            d="M34.85,14.79h-2.1c-.58,0-1.05.47-1.05,1.05s.47,1.05,1.05,1.05h2.1c.58,0,1.05-.47,1.05-1.05s-.47-1.05-1.05-1.05Z" />
                                        <path class="cls-1"
                                            d="M5.72,7.57l-1.82-1.05c-.5-.29-1.15-.12-1.44.39s-.12,1.15.39,1.44l1.82,1.05c.5.29,1.14.12,1.44-.39.29-.5.12-1.15-.39-1.44Z" />
                                        <path class="cls-1"
                                            d="M33.05,23.35l-1.82-1.05c-.5-.29-1.15-.12-1.44.39-.29.5-.12,1.15.39,1.44l1.82,1.05c.5.29,1.14.12,1.44-.39.29-.5.12-1.15-.39-1.44Z" />
                                        <path class="cls-1"
                                            d="M9.68,3.4c.29.51.94.67,1.44.39.5-.29.68-.93.39-1.44l-1.05-1.82c-.29-.5-.94-.67-1.44-.39-.5.29-.68.93-.39,1.44l1.05,1.82Z" />
                                        <path class="cls-1"
                                            d="M4.67,22.3l-1.82,1.05c-.5.29-.68.93-.39,1.44.29.51.94.67,1.44.39l1.82-1.05c.5-.29.68-.93.39-1.44-.29-.5-.94-.67-1.44-.39Z" />
                                        <path class="cls-1"
                                            d="M31.23,9.4l1.82-1.05c.5-.29.68-.93.39-1.44-.29-.5-.94-.68-1.44-.39l-1.82,1.05c-.5.29-.68.93-.39,1.44.29.51.94.67,1.44.39Z" />
                                        <path class="cls-1"
                                            d="M24.79,3.78c.5.29,1.14.12,1.44-.39l1.05-1.82c.29-.5.12-1.15-.39-1.44-.5-.29-1.15-.12-1.44.39l-1.05,1.82c-.29.5-.12,1.15.39,1.44Z" />
                                        <path class="cls-1"
                                            d="M25.24,6.87c-2.72-2.21-6.28-3.06-9.77-2.33-4.54.95-8.12,4.67-8.91,9.26-.66,3.85.61,7.74,3.39,10.41,1.48,1.42,2.38,3.32,2.63,5.31h4.32v-4.94l-3.97-5.96-2.03-2.03c-.41-.41-.41-1.08,0-1.49s1.08-.41,1.49,0l1.36,1.36,1.36-1.36c.41-.41,1.08-.41,1.49,0l1.36,1.36,1.36-1.36c.41-.41,1.08-.41,1.49,0l1.36,1.36,1.36-1.36c.41-.41,1.08-.41,1.49,0s.41,1.08,0,1.49l-2.03,2.03-3.97,5.96v4.94h4.26c.12-1.89,1.02-3.74,2.62-5.25,2.31-2.18,3.64-5.25,3.64-8.43,0-3.5-1.56-6.77-4.28-8.98Z" />
                                        <path class="cls-1"
                                            d="M20.05,17.33l-1.36,1.36c-.41.41-1.08.41-1.49,0l-1.36-1.36-.75.75,2.85,4.28,2.85-4.28-.75-.75Z" />
                                        <path class="cls-1"
                                            d="M12.69,32.74c0,1.74,1.42,3.16,3.16,3.16h4.21c1.74,0,3.16-1.42,3.16-3.16v-1.12h-10.52v1.12Z" />
                                    </g>
                                </g>
                            </svg>
                        </span>Innovation
                    </div>
                    <div class="valeur-box active" data-value="transparence">
                        <span class="valeur-icon">
                            {{-- <xml version="1.0" encoding="UTF-8"?> --}}
                            <svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 27.81 27.87">
                                <defs>
                                    <style>
                                        .cls-1 {
                                            fill: #e5373f;
                                        }
                                    </style>
                                </defs>
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <g>
                                        <path class="cls-1"
                                            d="M9.76,5.5c-.56,0-1.25.14-1.81.42.28.28.42.56.42.97,0,.83-.69,1.39-1.39,1.39-.42,0-.69-.14-.97-.42-.28.56-.42,1.25-.42,1.81,0,2.36,1.94,4.17,4.17,4.17,2.36,0,4.17-1.94,4.17-4.17,0-2.22-1.81-4.17-4.17-4.17Z" />
                                        <path class="cls-1"
                                            d="M26.99,23l-6.25-6.39-.97.97-2.08-2.08c1.11-1.67,1.81-3.61,1.81-5.83C19.49,4.94,15.74.78,11.01.08,4.48-.75-1.07,4.94.18,11.61c.69,3.89,3.89,6.95,7.78,7.64,2.92.56,5.56-.28,7.64-1.81l2.08,2.08-.97,1.11,6.25,6.39c1.11,1.11,2.92,1.11,3.89,0,1.25-1.25,1.25-2.92.14-4.03ZM9.76,16.61c-3.89,0-6.95-3.06-6.95-6.95s3.06-6.95,6.95-6.95,6.95,3.06,6.95,6.95-3.06,6.95-6.95,6.95Z" />
                                    </g>
                                </g>
                            </svg>
                        </span>Transparence
                    </div>
                </div>
                <div class="valeurs-row">
                    <div class="valeur-box " data-value="motivation">
                        <span class="valeur-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.98 32.98" width="100"
                                height="100" class="valeur-icon">
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <path class="cls-1"
                                        d="M16.48,28.5c-.17,0-.33-.04-.48-.13-.16-.09-4.02-2.33-7.92-5.7-2.32-2-4.17-3.98-5.5-5.89C.85,14.31-.01,11.93,0,9.71c.02-2.58.94-5.01,2.6-6.83,1.69-1.86,3.95-2.88,6.35-2.88,3.08,0,5.9,1.73,7.52,4.46,1.62-2.74,4.44-4.46,7.52-4.46,2.27,0,4.44.92,6.1,2.6,1.83,1.84,2.86,4.44,2.85,7.13-.01,2.21-.9,4.59-2.62,7.06-1.33,1.91-3.18,3.89-5.49,5.89-3.89,3.37-7.72,5.61-7.88,5.7-.15.09-.32.13-.49.13h0Z" />
                                </g>
                            </svg>
                        </span>Motivation
                    </div>
                    <div class="valeur-box" data-value="reactivite">
                        <span class="valeur-icon">
                            {{-- <xml version="1.0" encoding="UTF-8"?> --}}
                            <svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 33.34 31.78">
                                <defs>
                                    <style>
                                        .cls-1 {
                                            fill: #e5373f;
                                        }
                                    </style>
                                </defs>
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <g>
                                        <path class="cls-1"
                                            d="M26.96,8.96l-5.5-.8-2.46-4.99c-.95-1.93-3.7-1.93-4.65,0l-2.46,4.99-5.5.8c-2.13.31-2.98,2.92-1.44,4.42l3.98,3.88-.94,5.48c-.36,2.12,1.86,3.73,3.76,2.73l4.92-2.59,4.92,2.59c1.9,1,4.12-.62,3.76-2.73l-.94-5.48,3.98-3.88c1.54-1.5.69-4.11-1.44-4.42Z" />
                                        <path class="cls-1"
                                            d="M8.77,2.29l-1.33-1.83c-.36-.5-1.06-.61-1.55-.25-.5.36-.61,1.06-.25,1.55l1.33,1.83c.36.5,1.06.61,1.55.25.5-.36.61-1.06.25-1.55Z" />
                                        <path class="cls-1"
                                            d="M4.36,18.68c-.19-.58-.82-.9-1.4-.71l-2.19.71c-.58.19-.9.82-.71,1.4.19.58.82.9,1.4.71l2.19-.71c.58-.19.9-.82.71-1.4Z" />
                                        <path class="cls-1"
                                            d="M27.45.21c-.5-.36-1.19-.25-1.55.25l-1.33,1.83c-.36.5-.25,1.19.25,1.55.5.36,1.19.25,1.55-.25l1.33-1.83c.36-.5.25-1.19-.25-1.55Z" />
                                        <path class="cls-1"
                                            d="M32.57,18.68l-2.19-.71c-.58-.19-1.21.13-1.4.71s.13,1.21.71,1.4l2.19.71c.58.19,1.21-.13,1.4-.71.19-.58-.13-1.21-.71-1.4Z" />
                                        <path class="cls-1"
                                            d="M16.67,27.3c-.61,0-1.11.5-1.11,1.11v2.26c0,.61.5,1.11,1.11,1.11s1.11-.5,1.11-1.11v-2.26c0-.61-.5-1.11-1.11-1.11Z" />
                                    </g>
                                </g>
                            </svg>
                        </span>Réactivité
                    </div>
                </div>
            </div>

            <!-- Desktop Content Areas -->
            <div class="valeurs-droite active" id="innovation">
                <div class="valeurs-titre">Innovation</div>
                <div class="valeurs-soustitre">
                    <span>Anticiper le futur grâce aux technologies de demain.</span>
                </div>
                <div class="valeurs-texte">
                    L’innovation n’est pas un gadget, c’est une méthode. Nous intégrons les technologies avancées, l’IA et
                    l’automatisation dans nos processus pour créer des solutions qui donnent à nos clients un avantage
                    concurrentiel. Les insights basés sur les données, les stratégies prédictives et les outils évolutifs
                    assurent agilité, meilleure prise de décision et résultats mesurables face à la concurrence.
                </div>
                <div class="btn-box">
                    <a class="thm-btn red inMenu" href="{{ route('contact') }}">
                        <span class="txt">Contactez-nous
                            <svg class="buttonSvg W" xmlns="http://www.w3.org/2000/svg" id="Calque_2"
                                data-name="Calque 2" viewBox="0 0 21.32 10.32">
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <path
                                        d="M21.07,4.57s0,0,0,0L16.72.24c-.33-.32-.85-.32-1.18,0-.32.33-.32.85,0,1.18l2.92,2.91H.83c-.46,0-.83.37-.83.83s.37.83.83.83h17.63l-2.92,2.91c-.33.32-.33.85,0,1.18.32.33.85.33,1.18,0l4.35-4.33s0,0,0,0c.33-.33.33-.85,0-1.18Z" />
                                </g>
                            </svg>
                        </span>
                    </a>
                </div>
            </div>

            <div class="valeurs-droite" id="performance">
                <div class="valeurs-titre">Performance</div>
                <div class="valeurs-soustitre">
                    <span>Atteindre l'excellence, c'est notre moteur au quotidien.</span>
                </div>
                <div class="valeurs-texte">

                    Chez Atirao, la performance n’est pas une promesse, c’est un résultat mesurable. Chaque action est
                    analysée, testée et optimisée en continu pour générer un impact réel sur votre activité. Qu’il s’agisse
                    de campagnes, de stratégies SEO ou de parcours utilisateurs, notre objectif est de transformer chaque
                    effort en résultats tangibles, suivis et exploités pour la croissance. La performance est la preuve de
                    valeur que nous apportons. </div>
                <div class="btn-box">
                    <a class="thm-btn red inMenu" href="{{ route('contact') }}">
                        <span class="txt">Contactez-nous <svg class="buttonSvg W" xmlns="http://www.w3.org/2000/svg"
                                id="Calque_2" data-name="Calque 2" viewBox="0 0 21.32 10.32">
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <path
                                        d="M21.07,4.57s0,0,0,0L16.72.24c-.33-.32-.85-.32-1.18,0-.32.33-.32.85,0,1.18l2.92,2.91H.83c-.46,0-.83.37-.83.83s.37.83.83.83h17.63l-2.92,2.91c-.33.32-.33.85,0,1.18.32.33.85.33,1.18,0l4.35-4.33s0,0,0,0c.33-.33.33-.85,0-1.18Z" />
                                </g>
                            </svg></span>
                    </a>
                </div>
            </div>

            <div class="valeurs-droite" id="creativite">
                <div class="valeurs-titre">Créativité</div>
                <div class="valeurs-soustitre">
                    <span>Innover par la créativité pour se démarquer durablement.</span>
                </div>
                <div class="valeurs-texte">
                    Pour nous, la créativité sert toujours un objectif stratégique. Chaque idée est conçue pour capter
                    l’attention, générer des conversions et laisser une empreinte durable. Nos concepts s’appuient sur des
                    analyses de marché, des études comportementales et une narration visuelle forte, garantissant que chaque
                    campagne est à la fois mémorable et alignée sur vos objectifs business. </div>
                <div class="btn-box">
                    <a class="thm-btn red inMenu" href="{{ route('contact') }}">
                        <span class="txt">Contactez-nous <svg class="buttonSvg W" xmlns="http://www.w3.org/2000/svg"
                                id="Calque_2" data-name="Calque 2" viewBox="0 0 21.32 10.32">
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <path
                                        d="M21.07,4.57s0,0,0,0L16.72.24c-.33-.32-.85-.32-1.18,0-.32.33-.32.85,0,1.18l2.92,2.91H.83c-.46,0-.83.37-.83.83s.37.83.83.83h17.63l-2.92,2.91c-.33.32-.33.85,0,1.18.32.33.85.33,1.18,0l4.35-4.33s0,0,0,0c.33-.33.33-.85,0-1.18Z" />
                                </g>
                            </svg></span>
                    </a>
                </div>
            </div>

            <div class="valeurs-droite" id="transparence">
                <div class="valeurs-titre">Transparence</div>
                <div class="valeurs-soustitre">
                    <span>La confiance commence par une communication claire.</span>
                </div>
                <div class="valeurs-texte">
                    Nous opérons avec une transparence totale, tant sur les résultats que sur les méthodes. Tableaux de bord
                    détaillés, cahiers des charges formalisés et reporting clair permettent de suivre chaque action, chaque
                    budget et chaque résultat. Nos clients savent toujours où ils en sont, pourquoi les décisions sont
                    prises et comment leurs investissements performent. Pas de jargon, pas d’ambiguïté seulement des faits
                    et des insights exploitables. </div>
                <div class="btn-box">
                    <a class="thm-btn red inMenu" href="{{ route('contact') }}">
                        <span class="txt">Contactez-nous <svg class="buttonSvg W" xmlns="http://www.w3.org/2000/svg"
                                id="Calque_2" data-name="Calque 2" viewBox="0 0 21.32 10.32">
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <path
                                        d="M21.07,4.57s0,0,0,0L16.72.24c-.33-.32-.85-.32-1.18,0-.32.33-.32.85,0,1.18l2.92,2.91H.83c-.46,0-.83.37-.83.83s.37.83.83.83h17.63l-2.92,2.91c-.33.32-.33.85,0,1.18.32.33.85.33,1.18,0l4.35-4.33s0,0,0,0c.33-.33.33-.85,0-1.18Z" />
                                </g>
                            </svg></span>
                    </a>
                </div>
            </div>

            <div class="valeurs-droite " id="motivation">
                <div class="valeurs-titre">Motivation</div>
                <div class="valeurs-soustitre">
                    <span>L’énergie collective au service de vos ambitions.</span>
                </div>
                <div class="valeurs-texte">
                    Notre équipe est pleinement engagée, orientée vers l’excellence et motivée pour produire des résultats
                    concrets. Chaque projet est une opportunité d’apprendre, de performer et de créer un impact
                    significatif. Cette énergie se traduit par une exécution supérieure, une anticipation proactive et une
                    valeur constante pour nos clients.
                </div>
                <div class="btn-box">
                    <a class="thm-btn red inMenu" href="{{ route('contact') }}">
                        <span class="txt">Contactez-nous <svg class="buttonSvg W" xmlns="http://www.w3.org/2000/svg"
                                id="Calque_2" data-name="Calque 2" viewBox="0 0 21.32 10.32">
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <path
                                        d="M21.07,4.57s0,0,0,0L16.72.24c-.33-.32-.85-.32-1.18,0-.32.33-.32.85,0,1.18l2.92,2.91H.83c-.46,0-.83.37-.83.83s.37.83.83.83h17.63l-2.92,2.91c-.33.32-.33.85,0,1.18.32.33.85.33,1.18,0l4.35-4.33s0,0,0,0c.33-.33.33-.85,0-1.18Z" />
                                </g>
                            </svg></span>
                    </a>
                </div>
            </div>

            <div class="valeurs-droite" id="reactivite">
                <div class="valeurs-titre">Réactivité</div>
                <div class="valeurs-soustitre">
                    <span>Agir vite, s’adapter toujours, pour ne rien manquer.</span>
                </div>
                <div class="valeurs-texte">
                    Dans un univers digital en constante évolution, la rapidité et l’adaptabilité sont essentielles. Nous
                    sommes organisés pour répondre rapidement, ajuster les campagnes de manière stratégique et saisir les
                    signaux faibles dès leur apparition. Notre approche agile garantit que chaque opportunité est exploitée,
                    chaque risque maîtrisé, et que les actions sont mises en œuvre sans friction. </div>
                <div class="btn-box">
                    <a class="thm-btn red inMenu" href="{{ route('contact') }}">
                        <span class="txt">Contactez-nous <svg class="buttonSvg W" xmlns="http://www.w3.org/2000/svg"
                                id="Calque_2" data-name="Calque 2" viewBox="0 0 21.32 10.32">
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <path
                                        d="M21.07,4.57s0,0,0,0L16.72.24c-.33-.32-.85-.32-1.18,0-.32.33-.32.85,0,1.18l2.92,2.91H.83c-.46,0-.83.37-.83.83s.37.83.83.83h17.63l-2.92,2.91c-.33.32-.33.85,0,1.18.32.33.85.33,1.18,0l4.35-4.33s0,0,0,0c.33-.33.33-.85,0-1.18Z" />
                                </g>
                            </svg></span>
                    </a>
                </div>
            </div>

            <!-- Mobile Content Overlay -->
            <div class="mobile-content-overlay" id="mobile-content">
                <button class="close-btn" onclick="closeMobileContent()">&times;</button>
                <div class="mobile-valeurs-titre" id="mobile-titre">Innovation</div>
                <div class="mobile-valeurs-soustitre" id="mobile-soustitre">
                    Des convictions fortes pour des résultats durables.
                </div>
                <div class="mobile-valeurs-texte" id="mobile-texte">
                    Nous nous engageons à offrir des solutions digitales efficaces, à innover en permanence pour anticiper
                    les tendances.
                </div>
                <div class="mobile-btn-box">
                    <a class="thm-btn red inMenu" href="{{ route('contact') }}">Contactez-nous <svg class="buttonSvg W"
                            xmlns="http://www.w3.org/2000/svg" id="Calque_2" data-name="Calque 2"
                            viewBox="0 0 21.32 10.32">
                            <g id="Calque_1-2" data-name="Calque 1">
                                <path
                                    d="M21.07,4.57s0,0,0,0L16.72.24c-.33-.32-.85-.32-1.18,0-.32.33-.32.85,0,1.18l2.92,2.91H.83c-.46,0-.83.37-.83.83s.37.83.83.83h17.63l-2.92,2.91c-.33.32-.33.85,0,1.18.32.33.85.33,1.18,0l4.35-4.33s0,0,0,0c.33-.33.33-.85,0-1.18Z" />
                            </g>
                        </svg></a>
                </div>
            </div>
        </div>
    </section>



    <script>
        const valeurBoxes = document.querySelectorAll('.valeur-box');
        const valeursDroite = document.querySelectorAll('.valeurs-droite');

        const mobileContent = {
            performance: {
                titre: "Performance",
                soustitre: "Atteindre l'excellence, c'est notre moteur au quotidien.",
                texte: "Nous plaçons la performance digitale au cœur de nos actions pour maximiser le retour sur investissement de chaque campagne et projet."
            },
            creativite: {
                titre: "Créativité",
                soustitre: "Innover par la créativité pour se démarquer durablement.",
                texte: "Notre créativité marketing alimente des stratégies innovantes et différenciantes, adaptées aux besoins uniques de chaque client."
            },
            innovation: {
                titre: "Innovation",
                soustitre: "Des convictions fortes pour des résultats durables.",
                texte: "Nous nous engageons à offrir des solutions digitales efficaces, à innover en permanence pour anticiper les tendances, et à travailler en toute clarté avec nos clients."
            },
            transparence: {
                titre: "Transparence",
                soustitre: "La confiance commence par une communication claire.",
                texte: "Nous cultivons une communication claire et honnête avec nos partenaires, assurant confiance et collaboration efficace."
            },
            motivation: {
                titre: "Motivation",
                soustitre: "L'énergie collective au service de vos ambitions",
                texte: "La motivation collective anime notre équipe pour relever chaque défi avec engagement et passion."
            },
            reactivite: {
                titre: "Réactivité",
                soustitre: "Agir vite, s'adapter toujours, pour ne rien manquer.",
                texte: "Nous répondons rapidement et efficacement aux besoins changeants du marché et des clients pour assurer une exécution fluide."
            }
        };

        function isMobile() {
            return window.innerWidth <= 720;
        }

        function handleDesktopClick(valueId, clickedBox) {
            valeurBoxes.forEach(b => {
                b.classList.remove('active', 'mobile-active');
            });
            valeursDroite.forEach(d => d.classList.remove('active'));

            clickedBox.classList.add('active');
            const targetContent = document.getElementById(valueId);
            if (targetContent) targetContent.classList.add('active');
        }

        // 🔧 Partie mobile modifiée
        function handleMobileClick(valueId, clickedBox) {
            const overlay = document.getElementById('mobile-content');
            const section = document.querySelector('.valeurs-section');
            const content = mobileContent[valueId];
            if (!content) return;

            // Toggle si déjà actif
            const alreadyActive = clickedBox.classList.contains('mobile-active');

            // Tout nettoyer
            valeurBoxes.forEach(b => {
                b.classList.remove('mobile-active', 'active');
            });

            if (alreadyActive) {
                overlay.classList.remove('show');
                section.classList.remove('mobile-expanded');
                return;
            }

            // Afficher l'overlay avec le contenu mis à jour
            clickedBox.classList.add('mobile-active');
            document.getElementById('mobile-titre').textContent = content.titre;
            document.getElementById('mobile-soustitre').textContent = content.soustitre;
            document.getElementById('mobile-texte').textContent = content.texte;

            overlay.classList.add('show');
            section.classList.add('mobile-expanded');
        }

        function closeMobileContent() {
            const overlay = document.getElementById('mobile-content');
            const section = document.querySelector('.valeurs-section');

            valeurBoxes.forEach(b => {
                b.classList.remove('mobile-active', 'active');
            });

            overlay.classList.remove('show');
            section.classList.remove('mobile-expanded');
        }

        valeurBoxes.forEach(box => {
            box.addEventListener('click', function() {
                const valueId = this.getAttribute('data-value') || this.id;
                if (isMobile()) {
                    handleMobileClick(valueId, this);
                } else {
                    handleDesktopClick(valueId, this);
                }
            });
        });

        window.addEventListener('resize', function() {
            if (!isMobile()) {
                closeMobileContent();
                const defaultValue = 'innovation';
                const defaultBox = document.querySelector(`.valeur-box[data-value="${defaultValue}"]`);
                if (defaultBox) {
                    handleDesktopClick(defaultValue, defaultBox);
                }
            }
        });

        document.addEventListener('click', function(e) {
            if (isMobile()) {
                const overlay = document.getElementById('mobile-content');
                const isClickInsideBox = e.target.closest('.valeur-box');
                const isClickInsideOverlay = e.target.closest('.mobile-content-overlay');
                if (overlay.classList.contains('show') && !isClickInsideBox && !isClickInsideOverlay) {
                    closeMobileContent();
                }
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            const defaultValue = 'innovation';
            const defaultBox = document.querySelector(`.valeur-box[data-value="${defaultValue}"]`);
            if (!defaultBox) return;

            if (!isMobile()) {
                handleDesktopClick(defaultValue, defaultBox);
                document.querySelectorAll('.valeur-box:active .valeur-icon path').forEach(path => {
                    fill = 'white';
                });
            } else {
                // En mobile, utilise ta fonction qui affiche proprement l'overlay + contenu
                handleMobileClick(defaultValue, defaultBox);
            }
        });
    </script>



    <section class="containerW">
        <div class="expertisesSection">
            <h2 class="section-subtitle">OFFRES D'EMPLOI</h2>
            <h3 class="section-title exeptionTitle">
                Trouvez votre prochain défi <br>
                professionnel chez Atirao<span style="color: #e5373f;">.</span>
            </h3>
               <div class="jobs-grid">
            {{-- Job Card 1: Consultant SEO Senior --}}
            <div class="job-card">
                <div class="job-header">
                    <h3 class="job-title">Consultant SEO Senior</h3>
                    <div class="job-meta">
                        <div class="job-meta-item">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                            Casablanca
                        </div>
                        <div class="job-meta-item">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/>
                            </svg>
                            CDI
                        </div>
                        <div class="job-meta-item">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                            </svg>
                            Temps plein
                        </div>
                    </div>
                </div>
                <p class="job-description">
                    Nous recherchons un consultant SEO expérimenté pour piloter les stratégies de référencement naturel de nos clients.
                    Vous serez responsable de l'audit, de l'optimisation on-page/off-page, et du suivi des performances.
                </p>
                <div class="job-tags">
                    <span class="job-tag">SEO</span>
                    <span class="job-tag">Analytics</span>
                    <span class="job-tag">Content Strategy</span>
                    <span class="job-tag">Technical SEO</span>
                </div>
                <div class="btn-box">
                    <a class="thm-btn red bgw" href="{{ route('contact') }}">
                        <span class="txt">Postuler
                            <svg class="buttonSvg W" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.32 10.32">
                                <path d="M21.07,4.57s0,0,0,0L16.72.24c-.33-.32-.85-.32-1.18,0-.32.33-.32.85,0,1.18l2.92,2.91H.83c-.46,0-.83.37-.83.83s.37.83.83.83h17.63l-2.92,2.91c-.33.32-.33.85,0,1.18.32.33.85.33,1.18,0l4.35-4.33s0,0,0,0c.33-.33.33-.85,0-1.18Z" />
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
            <div class="job-card">
                <div class="job-header">
                    <h3 class="job-title">Développeur Full Stack</h3>
                    <div class="job-meta">
                        <div class="job-meta-item">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                            Casablanca
                        </div>
                        <div class="job-meta-item">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/>
                            </svg>
                            CDI
                        </div>
                        <div class="job-meta-item">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                            </svg>
                            Temps plein
                        </div>
                    </div>
                </div>
                <p class="job-description">
                    Rejoignez notre équipe technique pour concevoir et développer des applications web performantes et scalables.
                    Maîtrise du Laravel, React et des architectures modernes requise.
                </p>
                <div class="job-tags">
                    <span class="job-tag">Laravel</span>
                    <span class="job-tag">React</span>
                    <span class="job-tag">MySQL</span>
                    <span class="job-tag">API REST</span>
                </div>
                <div class="btn-box">
                    <a class="thm-btn red bgw" href="{{ route('contact') }}">
                        <span class="txt">Postuler
                            <svg class="buttonSvg W" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.32 10.32">
                                <path d="M21.07,4.57s0,0,0,0L16.72.24c-.33-.32-.85-.32-1.18,0-.32.33-.32.85,0,1.18l2.92,2.91H.83c-.46,0-.83.37-.83.83s.37.83.83.83h17.63l-2.92,2.91c-.33.32-.33.85,0,1.18.32.33.85.33,1.18,0l4.35-4.33s0,0,0,0c.33-.33.33-.85,0-1.18Z" />
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
        </div>
        </div>

     
    </section>

    <!-- Solutions automatisation -->
    <section class="containerW">
        <div class="solutions Auto">
            <div class="SAContent">
                <p class="section-subtitleleft">NOUS REJOINDRE</p>
                <h2 class="pageTitles B">Découvrez nos opportunités et exprimez votre potentiel <span
                        style="color: var(--red)">.</span></h2>
                <p class="context">
                    Chez nous, la performance se construit en équipe. Rejoindre l'agence, c'est évoluer aux côtés de
                    passionnés du digital,
                    travailler sur des projets à fort impact, et apprendre en continu dans un environnement exigeant mais
                    bienveillant. Que vous
                    soyez stratège, créatif.ve, tech ou analyste, si vous aimez les défis concrets et les résultats
                    mesurables, vous êtes au bon
                    endroit.
                </p>
                <div class="btn-box">
                    <a class="thm-btn red bgw" href="{{ route('contact') }}">
                        <span class="txt">Je rejoins la team <svg class="buttonSvg W"
                                xmlns="http://www.w3.org/2000/svg" id="Calque_2" data-name="Calque 2"
                                viewBox="0 0 21.32 10.32">
                                <g id="Calque_1-2" data-name="Calque 1">
                                    <path
                                        d="M21.07,4.57s0,0,0,0L16.72.24c-.33-.32-.85-.32-1.18,0-.32.33-.32.85,0,1.18l2.92,2.91H.83c-.46,0-.83.37-.83.83s.37.83.83.83h17.63l-2.92,2.91c-.33.32-.33.85,0,1.18.32.33.85.33,1.18,0l4.35-4.33s0,0,0,0c.33-.33.33-.85,0-1.18Z" />
                                </g>
                            </svg></span>
                        <span class="bdrl full"></span>
                        <span class="bdrr full"></span>
                    </a>
                </div>
            </div>
            <div class="img">
                <img src="{{ asset('images\solutions\imagenousrejoindre.webp') }}" alt="" width="550px">
            </div>
        </div>
    </section>
{{-- Section "Candidature Spontanée" --}}
    <section class="containerW">
        <div class="expertisesSection">
            <h2 class="section-subtitle">CANDIDATURE SPONTANÉE</h2>
            <h3 class="section-title exeptionTitle">
                Vous ne trouvez pas votre bonheur ?<br>
                Nous sommes toujours à la recherche des futurs talents<span style="color: #e5373f;">.</span>
            </h3>
            <p class="section-description" style="text-align: center; color: #555; margin-bottom: 50px;">
                Envoyez-nous une candidature spontanée et rejoignez l'aventure Atirao
            </p>
              <div class="spontaneous-form-container" >
            <form action="" method="POST" enctype="multipart/form-data" class="spontaneous-form">
                @csrf
                <div class="form-group" style="margin-bottom: 25px;">
                    <label for="job_type" style="display: block; font-weight: 700; margin-bottom: 8px; color: #1a1a1a;">
                        Je recherche <span style="color: #e5373f;">*</span>
                    </label>
                    <select name="job_type" id="job_type" required style="width: 100%; padding: 12px 15px; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 14px;">
                        <option value="">Sélectionnez un type</option>
                        <option value="cdi">CDI</option>
                        <option value="cdd">CDD</option>
                        <option value="stage_pfe">Stage PFE</option>
                        <option value="stage">Stage</option>
                    </select>
                </div>

                <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px;">
                    <div class="form-group">
                        <label for="first_name" style="display: block; font-weight: 700; margin-bottom: 8px; color: #1a1a1a;">
                            Prénom <span style="color: #e5373f;">*</span>
                        </label>
                        <input type="text" name="first_name" id="first_name" required style="width: 90%; padding: 12px 15px; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 14px;">
                    </div>
                    <div class="form-group">
                        <label for="last_name" style="display: block; font-weight: 700; margin-bottom: 8px; color: #1a1a1a;">
                            Nom <span style="color: #e5373f;">*</span>
                        </label>
                        <input type="text" name="last_name" id="last_name" required style="width: 96%; padding: 12px 15px; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 14px;">
                    </div>
                </div>

                <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px;">
                    <div class="form-group">
                        <label for="email" style="display: block; font-weight: 700; margin-bottom: 8px; color: #1a1a1a;">
                            Email <span style="color: #e5373f;">*</span>
                        </label>
                        <input type="email" name="email" id="email" required style="width: 90%; padding: 12px 15px; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 14px;">
                    </div>
                    <div class="form-group">
                        <label for="phone" style="display: block; font-weight: 700; margin-bottom: 8px; color: #1a1a1a;">
                            Téléphone <span style="color: #e5373f;">*</span>
                        </label>
                        <input type="tel" name="phone" id="phone" required style="width: 96%; padding: 12px 15px; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 14px;">
                    </div>
                </div>

                <div class="form-group" style="margin-bottom: 25px;">
                    <label for="expertise" style="display: block; font-weight: 700; margin-bottom: 8px; color: #1a1a1a;">
                        Domaines d'expertise <span style="color: #e5373f;">*</span>
                    </label>
                    <select name="expertise" id="expertise" required style="width: 100%; padding: 12px 15px; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 14px;">
                        <option value="">Sélectionnez votre domaine</option>
                        <option value="paid_ads">Paid Ads</option>
                        <option value="social_media">Social Media</option>
                        <option value="content_marketing">Content Marketing</option>
                        <option value="web_development">Développement Web</option>
                        <option value="analytics_data">Analytics et Data</option>
                        <option value="digital_marketing">Marketing Digital</option>
                        <option value="automation">Automation</option>
                        <option value="seo">SEO</option>
                        <option value="other">Autre</option>
                    </select>
                </div>

                <div class="form-group" style="margin-bottom: 25px;">
                    <label for="message" style="display: block; font-weight: 700; margin-bottom: 8px; color: #1a1a1a;">
                        Message <span style="color: #e5373f;">*</span>
                    </label>
                    <textarea name="message" id="message" rows="5" required style="width: 100%; padding: 12px 15px; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical;"></textarea>
                </div>

                <div class="form-group" style="margin-bottom: 25px;">
                    <label for="cv" style="display: block; font-weight: 700; margin-bottom: 8px; color: #1a1a1a;">
                        CV <span style="color: #e5373f;">*</span>
                    </label>
                    <input type="file" name="cv" id="cv" required accept=".pdf,.doc,.docx" style="width: 100%; padding: 12px 15px; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 14px;">
                    <small style="color: #999; display: block; margin-top: 8px;">Formats acceptés: PDF, DOC, DOCX</small>
                </div>

                <div class="form-group" style="margin-bottom: 30px;">
                    <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                        <input type="checkbox" name="accept_terms" id="accept_terms" required style="width: 18px; height: 18px; cursor: pointer;">
                        <span style="color: #555; font-size: 14px;">J'accepte les conditions <a href="" style="color: #e5373f; text-decoration: none;">Lire</a></span>
                    </label>
                </div>

                <div class="btn-box">
                    <a type="submit" class="thm-btn red bgw">
                        <span class="txt">Envoyer ma candidature</span>
                    </a>
                </div>
            </form>
        </div>
        </div>
    </section>


@stop



@section('footerScripts')
    <script src="{{ asset('siteScripts/home.js') }}"></script>
    <script src="{{ asset('siteScripts/brandsSwiper.js') }}"></script>
    <script src="{{ asset('siteScripts/servicesSwiper.js') }}"></script>
    <script src="{{ asset('siteScripts/notreMethodologie.js') }}"></script>
    <script src="{{ asset('siteScripts/infroScript.js') }}"></script>
@stop