{# templates/escapade/show.html.twig #}{% extends 'base.html.twig' %}{% block title %}O'Escapade — {{ escapade.title|default('Carnaval St Lucie') }}{% endblock %}{# Header standard ou overlay si besoin sur le hero #}{% block header_classes %}header-overlay{% endblock %}{% block navbar_theme %}navbar-dark{% endblock %}{% block body %}{# ----------------------------- HERO Escapade (avec inclus)------------------------------ #}<section class="position-relative text-white"> <div class="ratio ratio-21x9"> {% if typeOffer.img %} <img src="{{ asset('img/offer/')}}{{typeOffer.img}}" alt="Carnaval St Lucie" class="object-fit-cover w-100 h-100"> {% else %} <img src="{{ asset('img/2633.jpg') }}" alt="" class="object-fit-cover w-100 h-100"> {% endif %} </div> <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center"> <div class="container"> <div class="bg-white text-dark p-4 p-md-5 rounded-4 shadow-sm" style="max-width: 600px;"> <h1 class="display-5 fw-bold {% if typeOffer.id == '1' %} txt-ot-green {% elseif typeOffer.id == '2' %} txt-ot-yellow {% elseif typeOffer.id == '3' %} txt-ot-brown {% elseif typeOffer.id == '4' %} txt-ot-blue {% endif %} mb-3">{{typeOffer.name}}</h1> <p class="mb-3">{{typeOffer.hook}}</p> </div> </div> </div></section>{# Fil d'Ariane #}<nav class="container my-4" aria-label="breadcrumb"> <ol class="breadcrumb small"> <li class="breadcrumb-item"><a href="{{ path('app') }}">Accueil</a></li> <li class="breadcrumb-item active">{{typeOffer.name}}</li> </ol></nav>{# ----------------------------- OFFRES DU MOMENT — réutilisation grille cartes maquette------------------------------ #}<section class="py-5 bg-white"> <div class="container"> <header class="mb-3"> <h2 class="h3 txt-ot-{{typeOffer.color}} mb-1 fw-bold">Notre sélection {{typeOffer.name}}.</h2> <p class="text-muted mb-0">{{typeOffer.description}}</p> </header> <div class="row g-3 g-md-4"> {% for o in offers %} <div class="col-12 col-sm-6 col-lg-3"> <article class="card card-offer border-0 shadow-sm h-100 overflow-hidden rounded-4"> {% if o.type.id == '1' %} <a href="{{ path('o.escapade.destination',{slug:o.destination.slug}) }}" class="stretched-link text-decoration-none text-white"> <div class="ratio ratio-4x5"> <img src="{{asset('img/destination/' ~ o.destination.slug ~ '/' ~ o.destination.img)}}" alt="{{ o.title }}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100"> {% elseif o.type.id == '2' %} <a href="{{ path('o.circuit.destination',{slug:o.slug})}}" class="stretched-link text-decoration-none text-white"> <div class="ratio ratio-4x5"> <img src="{{asset('img/offer/circuit/' ~ o.slug ~ '/' ~ o.img)}}" alt="{{ o.file }}" class="object-fit-cover w-100 h-100"> {% elseif o.type.id == "3" %} <a href="{{ path('o.roadtrip.destination',{slug:o.slug})}}" class="stretched-link text-decoration-none text-white"> <div class="ratio ratio-4x5"> <img src="{{asset('img/offer/road/' ~ o.slug ~ '/' ~ o.img)}}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100"> {% elseif o.type.id == "4" %} <a href="{{ path('o.croisiere.destination',{slug:o.slug})}}" class="stretched-link text-decoration-none text-white"> <div class="ratio ratio-4x5"> <img src="{{asset('img/offer/croisiere/' ~ o.slug ~ '/' ~ o.img)}}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100"> {% endif %} </div> <div class="card-img-overlay d-flex flex-column justify-content-end p-3 p-md-4"> <h3 class="h5 fw-bold text-white text-shadow-sm mb-3">{{ o.title }}</h3> <div> <span class="btn btn-outline-light btn-sm rounded-pill">Découvrir</span> </div> </div> </a> </article> </div> {% endfor %} </div> <div class="section-divider mx-auto my-5"></div> </div></section>{% endblock %}{% block extra_head %} {{ parent() }} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"> <style> .text-shadow-sm{ text-shadow:0 2px 4px rgba(0,0,0,.35); } .text-ot-green{ color: var(--ot-primary, #2ea37a); } .bg-ot-green{ background: var(--ot-primary, #2ea37a); } </style>{% endblock %}