* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Poppins, sans-serif;
            background-color: #ffffff;
            padding: 0;
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        .header-section {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }

        html {
            overflow-x: hidden;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 40px;
            position: relative;
            overflow: visible;
            width: 100%;
            padding: 0 20px 100px 20px;
            margin-top: 120px;
        }

        #pathSvg {
            position: absolute;
            top: -50px;
            left: -150px;
            width: calc(100% + 300px);
            height: calc(100% + 100px);
            pointer-events: none;
            z-index: 10;
            overflow: visible;
        }

        .location-wrapper {
            position: relative;
            z-index: 5;
        }

        .path-line {
            fill: none;
            stroke: url(#pathGradient);
            stroke-width: 2;
            stroke-dasharray: 2 8;
            stroke-linecap: round;
        }

        .location-wrapper {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            width: 100%;
            max-width: 100%;
            margin-top: 50px;
        }

        .location-wrapper.right {
            justify-content: flex-end;
        }

        /* Desktop serpentine layout */
        @media (min-width: 1151px) {
            .container {
                position: relative;
                min-height: 1680px;
                gap: 0;
                max-width: 1120px;
                margin: 0 auto;
                margin-top: 40px;
                padding: 0;
            }

            /* Show restaurant blocks on desktop with specific positioning */
            .location-wrapper {
                position: absolute;
                width: 100%;
                margin-top: 0;
                height: 120px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* Hide the HTML structure on desktop, show SVG instead */
            .location-wrapper .location-block {
                display: none;
            }

            .location-wrapper::before {
                content: '';
                display: block;
                width: 1120px;
                height: 120px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                opacity: 0;
                transform: translateY(60px) scale(0.96);
                transition: opacity 0.5s ease-out,
                            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
                will-change: opacity, transform;
            }

            .location-wrapper.visible::before {
                opacity: 1;
                transform: translateY(0) scale(1);
            }

            /* Position restaurants vertically at 120px intervals */
            .location-wrapper:nth-child(3) { top: 0; }
            .location-wrapper:nth-child(4) { top: 120px; }
            .location-wrapper:nth-child(5) { top: 240px; }
            .location-wrapper:nth-child(6) { top: 360px; }
            .location-wrapper:nth-child(7) { top: 480px; }
            .location-wrapper:nth-child(8) { top: 600px; }
            .location-wrapper:nth-child(9) { top: 720px; }
            .location-wrapper:nth-child(10) { top: 840px; }
            .location-wrapper:nth-child(11) { top: 960px; }
            .location-wrapper:nth-child(12) { top: 1080px; }
            .location-wrapper:nth-child(13) { top: 1200px; }
            .location-wrapper:nth-child(14) { top: 1320px; }
            .location-wrapper:nth-child(15) { top: 1440px; }
            .location-wrapper:nth-child(16) { top: 1560px; }

            /* Assign SVG backgrounds to each restaurant (nth-child(3) = first restaurant = Item-0.svg) */
            .location-wrapper:nth-child(3)::before { background-image: url('assets/restaurants/Item-0.svg'); }
            .location-wrapper:nth-child(4)::before { background-image: url('assets/restaurants/Item-1.svg'); }
            .location-wrapper:nth-child(5)::before { background-image: url('assets/restaurants/Item-2.svg'); }
            .location-wrapper:nth-child(6)::before { background-image: url('assets/restaurants/Item-3.svg'); }
            .location-wrapper:nth-child(7)::before { background-image: url('assets/restaurants/Item-4.svg'); }
            .location-wrapper:nth-child(8)::before { background-image: url('assets/restaurants/Item-5.svg'); }
            .location-wrapper:nth-child(9)::before { background-image: url('assets/restaurants/Item-6.svg'); }
            .location-wrapper:nth-child(10)::before { background-image: url('assets/restaurants/Item-7.svg'); }
            .location-wrapper:nth-child(11)::before { background-image: url('assets/restaurants/Item-8.svg'); }
            .location-wrapper:nth-child(12)::before { background-image: url('assets/restaurants/Item-9.svg'); }
            .location-wrapper:nth-child(13)::before { background-image: url('assets/restaurants/Item-10.svg'); }
            .location-wrapper:nth-child(14)::before { background-image: url('assets/restaurants/Item-11.svg'); }
            .location-wrapper:nth-child(15)::before { background-image: url('assets/restaurants/Item-12.svg'); }
            .location-wrapper:nth-child(16)::before { background-image: url('assets/restaurants/Item-13.svg'); }


            #pathSvg {
                display: block;
                width: 100%;
                min-height: 1680px;
                left: 50%;
                transform: translateX(-50%);
                top: -28px;
                margin-left: -26px;
            }

            /* Hide background SVG on desktop, use HTML elements instead */
            .desktop-locations-svg {
                display: none !important;
            }
        }

        @media (max-width: 1150px) {
            /* Hide desktop SVG on mobile */
            .desktop-locations-svg {
                display: none !important;
            }

            .container {
                max-width: 600px;
            }
        }

        .location-block {
            display: flex;
            align-items: center;
            gap: 30px;
            cursor: pointer;
            position: relative;
            opacity: 0;
            transform: translateY(200px) scale(0.9);
            transition: opacity 1s cubic-bezier(0.34, 1.56, 0.64, 1), transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .location-wrapper.visible .location-block {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* Gauche: point, temps, losange, nom */
        .location-wrapper.left .location-block {
            flex-direction: row;
        }

        /* Droite: point, temps, nom, losange (inversé) */
        .location-wrapper.right .location-block {
            flex-direction: row-reverse;
        }

        .location-dot {
            width: 16px;
            height: 16px;
            background-color: #342e55;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .time-text {
            font-size: 24px;
            color: #342e55;
            font-weight: 600;
            white-space: nowrap;
            flex-shrink: 0;
            text-align: center;
        }


        .diamond {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
        }

        .diamond img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .location-name {
            font-size: 20px;
            color: #342e55;
            font-weight: 400;
            line-height: 1.3;
            white-space: nowrap;
            text-align: center;
        }

        /* Color variations based on icon category */
        .location-wrapper[data-icon-category="cutlery"] .location-name {
            color: #009EC5;
        }

        .location-wrapper[data-icon-category="cart"] .location-name {
            color: #009F44;
        }

        .location-wrapper[data-icon-category="bakery"] .location-name {
            color: #DEDD00;
        }

        #startLogo {
            height: 48px;
            width: auto;
        }

        .logo-section {
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #pathStartLogo {
            width: auto;
            height: 120px;
        }

        .intro-block {
            width: 100%;
            max-width: 1115px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            align-items: start;
        }

        .intro-title {
            color: var(--Color-Primary, #342E55);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 36px;
            font-style: normal;
            font-weight: 600;
            line-height: 44px;
            text-align: left;
        }

        .intro-text {
            color: var(--Color-Primary, #342E55);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            max-width: 530px;
        }

        .content-section {
            padding: 60px 0 60px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .carousel-section {
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 0 0 60px 0;
            scroll-behavior: smooth;
        }

        @media (min-width: 1400px) {
            .carousel-section {
                width: 100vw;
                margin-left: calc(-50vw + 50%);
            }
        }

        .carousel-section::-webkit-scrollbar {
            display: none;
        }

        .carousel-section {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .carousel-container {
            display: flex;
            gap: 16px;
            padding: 0 40px;
        }

        .carousel-item {
            flex-shrink: 0;
            width: 400px;
            height: 380px;
            border-radius: 8px;
            overflow: hidden;
        }

        @media (min-width: 2129px) {
            .carousel-section {
                padding: 0 0 60px 0;
            }

            .carousel-container {
                padding: 0 40px;
            }

            .carousel-item {
                width: 28vw;
                height: 26.6vw;
            }
        }

        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .carousel-item.high {
            align-self: flex-start;
        }

        .carousel-item.low {
            align-self: flex-end;
            margin-top: 60px;
        }

        .footer-availability {
            background: var(--color-primary-5, rgba(52, 46, 85, 0.05));
            padding: 60px 0;
            margin-top: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .footer-availability-container {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 0;
            align-items: center;
            max-width: 1115px;
            width: 100%;
            position: relative;
        }

        .footer-availability img {
            width: auto;
            height: 440px;
            justify-self: start;
        }

        .footer-availability-content {
            display: flex;
            width: var(--Container-6-cols, 550px);
            padding: var(--Spacing-lg, 40px);
            flex-direction: column;
            align-items: flex-start;
            gap: var(--Spacing-md, 20px);
            border-radius: var(--Spacing-xs, 8px);
            background: rgba(52, 46, 85, 0.80);
            backdrop-filter: blur(12px);
            color: white;
            position: absolute;
            right: 0;
            z-index: 1;
            box-sizing: border-box;
        }

        .footer-availability-text-wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--Spacing-xs, 8px);
            align-self: stretch;
        }

        .footer-availability-title {
            color: var(--Color-White, #FFF);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 24px;
            font-style: normal;
            font-weight: 600;
            line-height: 32px;
        }

        .footer-availability-text {
            color: var(--Color-White, #FFF);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
        }

        .footer-availability-button {
            display: flex;
            padding: var(--Spacing-sm, 16px);
            justify-content: center;
            align-items: center;
            gap: var(--Spacing-xs, 8px);
            border-radius: var(--Spacing-xs, 8px);
            border: 1px solid var(--color-primary-80, rgba(52, 46, 85, 0.80));
            background: rgba(255, 255, 255, 0.80);
            color: var(--Color-Primary, #342E55);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px;
            text-decoration: none;
            transition: background-color 0.2s ease;
        }

        .footer-availability-button:hover {
            background: rgba(255, 255, 255, 1);
        }

        .footer-main {
            background: var(--color-primary-5, rgba(52, 46, 85, 0.05));
            padding: 40px 0 40px 0;
            display: flex;
            justify-content: center;
        }

        .footer-main-content {
            max-width: 1115px;
            width: 100%;
            display: grid;
            grid-template-columns: max-content 148px max-content;
            gap: 0;
            justify-content: space-between;
        }

        .footer-logo-section img {
            width: 95.8px;
            height: auto;
        }

        .footer-links {
            display: flex;
            height: 262px;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: var(--Spacing-sm, 16px);
            max-width: 148px;
        }

        .footer-links h3 {
            color: var(--Color-Primary, #342E55);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 24px;
        }

        .footer-links a {
            color: var(--Color-Primary, #342E55);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            text-decoration: none;
        }

        .footer-links a:not(.bold) {
            margin-left: 8px;
        }

        .footer-links a.bold {
            font-weight: 600;
        }

        .footer-form h3 {
            color: var(--Color-Primary, #342E55);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 24px;
            margin-bottom: 8px;
        }

        .footer-form {
            max-width: 550px;
            width: 550px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .footer-form > div:not(.footer-form-grid):not(.footer-form-checkbox) {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .footer-form label {
            color: var(--Color-Primary, #342E55);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
        }

        .footer-form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 0;
        }

        .footer-form-grid > div {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .footer-form input,
        .footer-form textarea {
            width: 100%;
            padding: 12px;
            border-radius: var(--Spacing-sm, 8px);
            border: 1px solid rgba(41, 34, 80, 0.40);
            background: var(--Color-White, #FFF);
            font-family: Poppins;
            font-size: 14px;
            transition: background-color 0.2s ease;
        }

        .footer-form input:focus,
        .footer-form textarea:focus {
            background: #e1e0e6;
            outline: none;
        }

        .footer-form input:not(#message):not([type="checkbox"]) {
            height: 40px;
        }

        .footer-form input#message {
            height: 68px;
        }

        .footer-form textarea {
            grid-column: 1 / -1;
            min-height: 100px;
            resize: vertical;
        }

        .footer-form-checkbox {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 8px 0;
            color: var(--Color-Primary, #342E55);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
        }

        .footer-form-checkbox input[type="checkbox"] {
            flex: 0 0 auto; /* keep checkbox at minimal intrinsic width */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;
            min-width: 20px;
            min-height: 20px;
            padding: 5px;
            -webkit-appearance: none;
            appearance: none;
            background: rgba(41, 34, 80, 0.05);
            border: 0.833px solid var(--Color-Primary, #342E55);
            border-radius: var(--Spacing-xxs, 3.333px);
            position: relative;
        }

        .footer-form-checkbox input[type="checkbox"]:checked {
            background: #342E55;
            border-color: #342E55;
        }

        .footer-form-checkbox input[type="checkbox"]:checked::after {
            content: '';
            width: 16px;
            height: 14px;
            background-image: url("data:image/svg+xml,%3Csvg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 7L5.5 11L14.5 2' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        .footer-form-checkbox label {
            flex: 1 1 auto; /* allow label to take remaining space */
            margin: 0;
            color: var(--Color-Primary, #342E55);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
        }

        .footer-form-checkbox a {
            color: var(--Color-Primary, #342E55);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: auto;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
            text-underline-position: from-font;
        }

        .footer-form button {
            display: flex;
            padding: var(--Spacing-sm, 16px);
            justify-content: center;
            align-items: center;
            gap: var(--Spacing-xs, 8px);
            border-radius: var(--Spacing-xs, 8px);
            border: 1px solid var(--color-primary-80, rgba(52, 46, 85, 0.80));
            background: rgba(41, 34, 80, 0.85);
            backdrop-filter: blur(12px);
            cursor: pointer;
            width: fit-content;
            align-self: center;
        }

        .footer-form button span {
            color: var(--Color-White, #FFF);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px;
        }

        .footer-bottom {
            background: var(--color-primary-5, rgba(52, 46, 85, 0.05));
            padding: 40px 0 40px 0;
            display: flex;
            justify-content: center;
            margin-top: 80px;
        }

        .footer-bottom-content {
            max-width: 1115px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: rgba(41, 34, 80, 0.60);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
            gap: 20px;
        }

        .footer-bottom-left {
            display: flex;
            align-items: center;
            gap: var(--Spacing-xl, 32px);
            color: #29225099;
        }

        .footer-bottom-links {
            display: flex;
            gap: 20px;
        }

        .footer-bottom-links a {
            color: rgba(41, 34, 80, 0.60);
            text-decoration: none;
        }

        .footer-bottom-left a {
            color: #29225099;
            text-decoration: underline;
        }

        .footer-bottom-right {
            color: #29225099;
        }

        @media (max-width: 1150px) {
            .content-section {
                padding: 40px 20px 40px 20px;
            }

            .intro-block {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .intro-title {
                font-size: 28px;
                line-height: 36px;
            }

            .intro-text {
                font-size: 16px;
                line-height: 24px;
            }

            .footer-availability-container,
            .footer-main-content {
                grid-template-columns: 1fr;
            }

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

            .footer-bottom-content {
                flex-direction: column;
                gap: 16px;
            }

            .footer-form {
                min-width: 100%;
            }

            .carousel-item {
                width: 276px;
                height: 263px;
            }

            .carousel-section {
                padding-bottom: 80px;
            }

            .container {
                margin-top: 80px;
            }

            .location-wrapper {
                margin-top: 80px;
            }

            .location-block {
                height: 64px;
                padding-top: 16px;
                padding-bottom: 16px;
                gap: 16px;
            }

            .container {
                padding: 0 16px 40px 16px;
            }

            .location-name {
                white-space: normal;
                text-align: center;
                font-feature-settings: 'liga' off, 'clig' off;
                font-family: Poppins;
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                line-height: 26px;
            }

            .footer-availability-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 0;
            }

            .footer-availability img {
                width: 100%;
                max-width: 100%;
                height: auto;
            }

            .footer-availability-content {
                position: relative;
                width: calc(100% - 32px);
                margin: -40px 16px 0 16px;
                padding: 16px;
                align-items: center;
            }

            .footer-availability-text-wrapper {
                align-items: center;
                text-align: center;
            }

            .footer-availability-title {
                text-align: center;
                width: 100%;
            }

            .footer-availability-text {
                text-align: center;
                width: 100%;
            }

            .footer-availability-button {
                align-self: center;
            }

            .footer-main-content {
                padding: 0 16px;
                text-align: center;
                justify-items: center;
                gap: 20px;
            }

            .footer-links {
                align-items: center;
                height: auto;
                text-align: center;
                gap: 15px;
            }

            .footer-links h3 {
                font-size: 15px;
            }

            .footer-links a {
                font-size: 14px;
            }

            .footer-links a:not(.bold) {
                margin-left: 0;
            }

            .footer-form {
                width: 100%;
            }

            .footer-form label {
                text-align: left;
            }

            .footer-form h3 {
                text-align: center;
            }

            .footer-bottom-content {
                padding: 0 16px;
                text-align: center;
                flex-direction: column;
                align-items: center;
            }

            .footer-bottom-left {
                justify-content: center;
                flex-direction: column;
                width: 100%;
                gap: 8px;
            }

            .footer-bottom-links {
                justify-content: center;
                width: 100%;
            }

            .footer-bottom-right {
                width: 100%;
            }
        }