/* ════════════════════════════════
   HOME PAGE - Final Homepage
   Maquette Figma : "Final Homepage" (1440px)
   Approche : sémantique, flow layout, fidélité desktop.
════════════════════════════════ */

/* La navbar par défaut du layout est cachée sur la home → on retire le padding-top
   de <main> que style.css réserve pour cette navbar fixed (64px). */
.home-page main {
    padding-top: 0;
}

.home-page {
    --hp-cream:     #f3e9d7;
    --hp-cream-2:   #fbf4e9;
    --hp-cream-3:   #f1ead8;
    --hp-white-2:   #fffdf8;
    --hp-orange:    #ffa200;
    --hp-orange-2:  #f3a63c;
    --hp-red:       #e85a28;
    --hp-red-2:     #b22222;
    --hp-dark:      #242323;
    --hp-grey:      #dbdbdb;

    --hp-font-display: 'Erica One', 'Anton', Impact, sans-serif;
    --hp-font-script:  'Darumadrop One', 'Caveat', cursive;
    --hp-font-marquee: 'Anton', Impact, sans-serif;
    --hp-font-body:    'DM Sans', 'TT Chocolates', sans-serif;
    --hp-font-ui:      'Poppins', 'Gilroy', system-ui, sans-serif;

    --hp-max:   1440px;
    --hp-pad:   100px;

    background: var(--hp-cream);
    overflow-x: clip;
}

/* Cache les blobs décoratifs du layout par défaut */
body.home-page > .blob {
    display: none !important;
}

/* Reset utile - on n'inclut PAS p ici : sinon le `margin: 0` (specificity 0,1,1)
   override systématiquement les .hp-xxx-tagline / .hp-xxx-meta (specificity 0,1,0).
   Chaque <p> avec une classe gère son margin explicitement. */
.home-page h1, .home-page h2, .home-page h3 { margin: 0; }
.home-page ul { margin: 0; padding: 0; list-style: none; }
.home-page img { display: block; max-width: 100%; }

/* Container générique centré */
.hp-wrap {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-pad);
    position: relative;
    box-sizing: border-box;
}

/* ════════════════════════════════
   1. NAV - styles moved to css/nav.css (shared site-wide nav, overlay on
   the home hero + solid variant on other pages).
════════════════════════════════ */

/* ════════════════════════════════
   2. HERO - "Qui ramène l'apéro ?"
════════════════════════════════ */
.hp-hero {
    position: relative;
    min-height: 100vh;
    overflow: visible;
    isolation: isolate;
    background-color: var(--hp-red);
    background-image: url('/images/home/union3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
}

/* Plus de SVG en fond - le hero est juste solid orange + peigne CSS en bas */
.hp-hero-bg { display: none; }

/* Bande crénelée 2 rangs (SVG inline) collée à cheval sur la limite hero/cream.
   Pattern top : carrés crème à x=0 répétés tous les 68px.
   Pattern bottom : carrés orange à x=34 (décalés d'un demi-pas) répétés tous les 68px.
   → peigne interlocking parfait, colonnes verticales mono-couleur. */
.hp-hero-band {
    position: absolute;
    bottom: -34px;
    left: 0;
    right: 0;
    width: 100%;
    height: 68px;
    z-index: 5;
    pointer-events: none;
    display: block;
}

/* La bande est maintenant un <svg> inline - pas de styles de rangs */

/* Layout principal du hero - flex strict côte-à-côte, centré verticalement */
.hp-hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--hp-max);
    width: 100%;
    margin: 0 auto;
    padding: 160px var(--hp-pad) 120px;
    box-sizing: border-box;
    display: flex;
    gap: 40px;
    align-items: center;
    flex: 1;
}

.hp-hero-left {
    flex: 0 1 720px;
    min-width: 0;
    color: #fff;
}

.hp-hero-right {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    align-self: stretch;
    margin-right: -50px;
}

.hp-hero-photo {
    border: 16px solid var(--hp-cream-3);
    box-sizing: border-box;
    overflow: hidden;
    background: var(--hp-cream-3);
}

.hp-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hp-hero-photo--main {
    width: 480px;
    height: 620px;
    flex: 0 0 480px;
    position: relative;
    z-index: 2;
}

.hp-hero-photo--side {
    width: 320px;
    height: 580px;
    flex: 0 0 320px;
    transform: rotate(4.64deg);
    margin-top: 40px;
    margin-left: -40px;
    margin-right: -180px;
    position: relative;
    z-index: 1;
}

/* Titre */
.hp-hero-title {
    font-family: var(--hp-font-display);
    font-size: clamp(80px, 7.5vw, 122px);
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.0;
    letter-spacing: -2px;
    margin: 0;
}

.hp-hero-title-line {
    display: block;
    margin-bottom: 4px;
}

/* Badge / stamp autour de "RAMÈNE" - fidèle au Figma :
   deux SVG superposés (forme jaune + contour noir) légèrement différents
   pour créer l'effet "tampon dessiné à la main".
   Dimensions Figma : yellow 546.978×152.474 + stroke 531.502×138.084.
   → stroke ≈ 97% × 91% du yellow → le jaune déborde de ~1.5% L/R et ~4.5% T/B. */
.hp-hero-title-stamp {
    display: inline-block;
    position: relative;
    padding: 14px 20px 18px;
    line-height: 1;
    background-image: url('/images/home/rect3464584.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.hp-hero-tagline {
    margin-top: 50px;
    font-family: var(--hp-font-body);
    font-size: 20px;
    line-height: 1.55;
    color: #fff;
    max-width: 620px;
}

.hp-hero-cta {
    margin-top: 40px;
    position: relative;
    width: max-content;
}

.hp-hero-cta::after {
    content: '';
    position: absolute;
    inset: 8px -6px -8px 6px;
    border-radius: 90px;
    background: var(--hp-cream-3);
    z-index: 0;
}

.hp-btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hp-orange-2);
    color: #fff;
    text-decoration: none;
    padding: 18px 32px;
    border-radius: 80px;
    font-family: var(--hp-font-body);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5;
    min-width: 237px;
    height: 70px;
    box-sizing: border-box;
    transition: transform .15s ease, box-shadow .15s ease;
    z-index: 1;
}

.hp-btn-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .15);
}

.hp-btn-red {
    background: var(--hp-red);
}

.hp-hero-meta {
    margin-top: 48px;
    font-family: var(--hp-font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    color: #fff;
}

/* Petite gribouille décorative en haut à gauche.
   image1512-white.png : pré-traité, traits blancs sur fond transparent.
   Flip vertical + rotation 174.51deg comme dans Figma. */
.hp-hero-mascot {
    position: absolute;
    top: 124px;
    left: calc(50% - 720px + 14px);
    width: 117px;
    height: 103px;
    z-index: 5;
    pointer-events: none;
    transform: scaleY(-1) rotate(174.51deg);
}
.hp-hero-mascot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ════════════════════════════════
   3. NOS CLASSIQUES
════════════════════════════════ */
.hp-classiques {
    padding: 110px var(--hp-pad) 130px;
    background: var(--hp-cream);
}

.hp-section-title {
    font-family: var(--hp-font-display);
    font-size: 80px;
    font-weight: 400;
    color: var(--hp-dark);
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    letter-spacing: -1.6px;
    margin-bottom: 70px;
}

.hp-section-title--light { color: #fff; }
.hp-section-title--left { text-align: left; }

/* ─────────  Carousel manuel "Nos classiques"  ─────────
   Défilement horizontal piloté par les flèches (pas d'auto-play). */
.hp-classiques-carousel {
    position: relative;
    width: 100%;            /* fluide : le nombre de cards visibles suit la largeur d'écran */
    max-width: 1320px;
    margin-inline: auto;
    overflow: hidden;       /* masque les clones latéraux (boucle infinie) */
}

.hp-classiques-track {
    display: flex;
    gap: 40px;
    padding: 40px 0 50px;
    will-change: transform;
    /* translateX piloté en JS ; la transition est gérée inline pour
       permettre la téléportation invisible aux extrémités */
}

.hp-classiques-track .hp-product-card {
    flex: 0 0 360px;
    width: 360px;
    transition: transform .3s ease, box-shadow .3s ease;
}

/* Cards un peu plus compactes sur écrans moyens pour garder plusieurs cards visibles */
@media (max-width: 1280px) {
    .hp-classiques-track { gap: 32px; }
    .hp-classiques-track .hp-product-card { flex-basis: 320px; width: 320px; }
}
@media (max-width: 1100px) {
    .hp-classiques-track .hp-product-card { flex-basis: 300px; width: 300px; }
}

/* Card centrale mise en avant (surélevée) */
.hp-classiques-track .hp-product-card--active {
    transform: translateY(-14px);
    box-shadow: 4px 14px 30px rgba(0, 0, 0, .16), 9px 44px 48px rgba(0, 0, 0, .12);
    z-index: 2;
}

/* ── Flèches de navigation ── */
.hp-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: var(--hp-red);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    transition: filter .15s, opacity .2s, transform .15s;
}
.hp-carousel-arrow:hover { filter: brightness(1.08); }
.hp-carousel-arrow:active { transform: translateY(-50%) scale(.94); }
.hp-carousel-arrow--prev { left: 6px; }
.hp-carousel-arrow--next { right: 6px; }
.hp-carousel-arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hp-carousel-arrow:disabled { opacity: 0; pointer-events: none; }

.hp-product-card {
    background: var(--hp-white-2);
    border: 18px solid #fff;
    box-shadow: 2px 9px 21px rgba(0, 0, 0, .1),
                7px 38px 39px rgba(0, 0, 0, .09);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* Card rendue en <a> quand le carousel pointe vers un produit BO : on annule
   text-decoration et on hérite de la couleur du titre. */
.hp-product-card--link,
.hp-product-card--link:hover,
.hp-product-card--link:visited { text-decoration: none; color: inherit; }

.hp-product-card-img {
    position: relative;
    width: calc(100% + 36px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: -18px -18px 0;
}

.hp-product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder "image lambda" quand le produit n'a pas de photo. */
.hp-product-card-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hp-orange, #ffa200);
    color: var(--hp-red, #e85a28);
}
.hp-product-card-ph svg {
    width: 64px;
    height: 64px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
}

.hp-product-card-body {
    padding: 30px 14px 24px;
}

.hp-product-card-title {
    font-family: var(--hp-font-script);
    font-size: 36px;
    color: #000;
    line-height: 1.1;
}

/* Description en overlay sur l'image, révélée au survol (ou focus clavier).
   La card garde une hauteur constante → flèches stables, pas de décalage. */
.hp-product-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 28px 28px;
    background: linear-gradient(to top,
        rgba(20, 18, 16, .92) 0%,
        rgba(20, 18, 16, .68) 55%,
        rgba(20, 18, 16, 0) 100%);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
.hp-product-card:hover .hp-product-card-overlay,
.hp-product-card:focus-within .hp-product-card-overlay {
    opacity: 1;
    transform: translateY(0);
}
.hp-product-card-desc {
    margin: 0;
    font-family: var(--hp-font-body);
    font-size: 18px;
    color: #fff;
    line-height: 1.45;
}

/* ════════════════════════════════
   4. NOS SERVICES (bandeau orange)
════════════════════════════════ */
.hp-services {
    position: relative;
    background: var(--hp-orange);
    color: #fff;
    padding: 145px 0 0;
    overflow: hidden;
}

.hp-services::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 49%;
    background: var(--hp-red);
    z-index: 0;
}

.hp-services-inner {
    position: relative;
    z-index: 1;
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 0 var(--hp-pad) 100px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.hp-services-photos {
    position: relative;
    height: 600px;
}

.hp-services-photos img {
    position: absolute;
    width: 380px;
    height: 340px;
    object-fit: cover;
    border: 18px solid #fff;
    box-sizing: border-box;
}

.hp-services-photo-1 { top: 0; left: 60px; }
.hp-services-photo-2 { top: 240px; left: -40px; }

.hp-services-right .hp-section-title--left {
    margin-bottom: 50px;
}

/* ─────────  Accordéon services  ─────────
   <details name="hp-services"> rend les items mutuellement exclusifs
   (un seul ouvert à la fois). Pas de JS. */
.hp-service-item {
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding: 0;
    position: relative;
    /* Reset des styles UA sur <details> */
    background: transparent;
}

.hp-service-item:last-child { border-bottom: none; }

/* Header cliquable = <summary>. On retire le triangle natif. */
.hp-service-item-header {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0 22px;
    user-select: none;
    transition: background .2s ease;
}

/* Retire le triangle natif sur Webkit/Safari */
.hp-service-item-header::-webkit-details-marker { display: none; }
.hp-service-item-header::marker { content: ''; }

.hp-service-item-header:hover .hp-service-item-title {
    opacity: .85;
}

.hp-service-item-title {
    font-family: var(--hp-font-script);
    font-size: 38px;
    color: #fff;
    line-height: 1.2;
    font-weight: 400;
    transition: opacity .15s ease;
}

/* Wrapper du contenu déplié (slots + description) */
.hp-service-item-content {
    padding: 0 0 24px;
    animation: hp-service-expand .3s ease;
}

/* Créneaux horaires : pills élégantes, au-dessus de la description */
.hp-service-item-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.hp-service-item-slot {
    font-family: var(--hp-font-script);
    font-size: 22px;
    color: #fff;
    line-height: 1;
    padding: 8px 18px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

/* Flèche : pointe bas par défaut (▼ "déplier"), pointe haut quand ouvert (▲ "replier").
   polygon1.svg pointe naturellement vers le bas → 0deg fermé, 180deg ouvert. */
.hp-service-item-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    transform: rotate(0deg);
    transition: transform .25s ease;
}

.hp-service-item[open] .hp-service-item-arrow {
    transform: rotate(180deg);
}

.hp-service-item-arrow img { width: 100%; height: 100%; }

/* Description (paragraphe sous les slots ou seule) */
.hp-service-item-desc {
    font-family: var(--hp-font-body);
    font-size: 18px;
    line-height: 1.55;
    color: #fff;
    max-width: 540px;
    margin: 0;
}

/* Adresse "À emporter" : reprend le style desc, mais en bloc semi-encadré
   pour bien la distinguer du paragraphe au-dessus. */
.hp-service-item-address {
    font-family: var(--hp-font-script);
    font-style: normal;
    font-size: 22px;
    line-height: 1.35;
    color: #fff;
    margin-top: 18px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 14px;
    backdrop-filter: blur(4px);
    display: inline-block;
}

.hp-service-item-link {
    color: #fff;
    text-decoration: underline;
    margin-left: 6px;
    transition: opacity .15s ease;
}

.hp-service-item-link:hover { opacity: .8; }

/* Lignes contact (téléphone + email Gmail) dans l'accordéon "Contact" */
.hp-service-item-contacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.hp-service-item-contact {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-family: var(--hp-font-body);
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    width: max-content;
    max-width: 100%;
    transition: background .15s ease, transform .15s ease;
    backdrop-filter: blur(4px);
}

.hp-service-item-contact:hover {
    background: rgba(255, 255, 255, .22);
    transform: translateY(-1px);
}

.hp-service-item-contact svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

@keyframes hp-service-expand {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Marquee - strips diagonales animées */
.hp-services-marquee {
    position: relative;
    z-index: 2;
    margin-top: 70px;
    margin-bottom: 0;
    overflow: hidden;
    /* Padding généreux pour que les box-shadow des strips ne soient pas
       rognées par l'overflow:hidden du conteneur. */
    padding: 60px 0;
}

/* ─────────  Marquee : boucle parfaitement infinie  ─────────
   Pour qu'il n'y ait AUCUN saut visible au redémarrage de l'animation,
   la translation doit valoir EXACTEMENT k itérations de contenu (k entier).

   Architecture en 2 couches :
   - .hp-marquee-strip    : décor (fond, ombre, rotation, clipping). Pas de translate.
   - .hp-marquee-track    : conteneur flex en width: max-content qui transporte
                            le contenu, animé via translate3d en pixels calculés
                            depuis la largeur EXACTE d'une itération.

   Variables :
   - --hp-iter-step : largeur d'UNE itération du Twig (6 items + 6 gaps : 5 entre
                      items + 1 inter-itération).
   - --hp-shift-iters : nombre d'itérations à parcourir par cycle (entier ≥ 1,
                        et ≤ moitié du nombre total d'itérations rendues côté
                        Twig pour qu'il reste toujours du contenu en réserve).

   Twig rend 8 itérations identiques ; on translate de 4 itérations → la fenêtre
   visible voit exactement le même pattern à t=0 et à t=fin → seamless. */
.hp-marquee-strip {
    /* Le 1er strip est rendu AVANT le second dans le DOM → naturellement
       derrière. On le met en noir (couleur d'accent peigne footer). */
    background: #000;
    /* Largeur et margin négatif pour que la bande dépasse le viewport des
       deux côtés malgré la rotation. */
    width: 220%;
    margin-left: -60%;
    transform: rotate(-2deg);
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

/* Le 2e strip (--rev) se superpose au 1er via margin-top négatif et apparaît
   donc EN AVANT. On garde l'orange du brand pour qu'il "pop" sur le noir. */
.hp-marquee-strip--rev {
    background: var(--hp-red);
    transform: rotate(2deg);
    margin-top: -42px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}

.hp-marquee-track {
    /* Dimensions des items - changer ici impacte automatiquement le pas
       de l'animation grâce au calc() de --hp-iter-step ci-dessous. */
    --hp-img-w: 190px;
    --hp-dot-w: 22px;
    --hp-star-w: 34px;
    --hp-gap: 80px;
    /* 1 itération = 3 imgs + 2 dots + 1 star + 6 gaps (5 intra + 1 inter). */
    --hp-iter-step: calc(3 * var(--hp-img-w) + 2 * var(--hp-dot-w) + var(--hp-star-w) + 6 * var(--hp-gap));
    --hp-shift-iters: 4;

    display: flex;
    gap: var(--hp-gap);
    align-items: center;
    padding: 32px 50px;
    width: max-content;
    white-space: nowrap;
    animation: hp-marquee-l 50s linear infinite;
}

.hp-marquee-strip--rev .hp-marquee-track {
    animation: hp-marquee-r 50s linear infinite;
}

.hp-marquee-chip {
    font-family: var(--hp-font-marquee);
    color: var(--hp-cream-2);
    font-size: 36px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.24px;
    flex: 0 0 auto;
}

.hp-marquee-dot {
    width: var(--hp-dot-w, 22px);
    height: var(--hp-dot-w, 22px);
    flex: 0 0 var(--hp-dot-w, 22px);
}
.hp-marquee-dot img { width: 100%; height: 100%; }

.hp-marquee-star {
    width: var(--hp-star-w, 34px);
    height: var(--hp-star-w, 34px);
    flex: 0 0 var(--hp-star-w, 34px);
}
.hp-marquee-star img { width: 100%; height: 100%; }

.hp-marquee-img {
    width: var(--hp-img-w, 190px);
    height: 56px;
    flex: 0 0 var(--hp-img-w, 190px);
    overflow: hidden;
}
.hp-marquee-img img { width: 100%; height: 100%; object-fit: cover; }

@keyframes hp-marquee-l {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(var(--hp-iter-step) * var(--hp-shift-iters) * -1), 0, 0); }
}
@keyframes hp-marquee-r {
    from { transform: translate3d(calc(var(--hp-iter-step) * var(--hp-shift-iters) * -1), 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* ════════════════════════════════
   5. APERITIU POUR VOS ÉVÉNEMENTS
════════════════════════════════ */
.hp-events {
    padding: 130px var(--hp-pad) 130px;
    background: var(--hp-cream);
    text-align: center;
}

.hp-events-title {
    font-family: var(--hp-font-display);
    font-size: 80px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -1.6px;
    color: var(--hp-dark);
    margin-bottom: 0;
}

/* "événements" - même style "tampon dessiné main" que le badge "ramène" du hero.
   Deux SVG superposés (yellow plus grand que stroke) → le jaune déborde de la bordure.
   display:block + width:max-content + margin:auto → toujours sur sa propre ligne,
   centré horizontalement, taille collée au contenu (pas full-width). */
.hp-events-crescendo {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 14px auto 0;
    color: #fff;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    letter-spacing: -2px;
    padding: 14px 28px 20px;
    background-image: url('/images/home/rect3464584.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.hp-events-crescendo span {
    display: inline-block;
    line-height: 1;
    vertical-align: baseline;
    position: relative;
}

.hp-events-photos {
    position: relative;
    height: 360px;
    margin: 30px auto 60px;
    max-width: 1240px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.hp-events-photo {
    border: 18px solid var(--hp-cream-3);
    box-sizing: border-box;
    overflow: hidden;
    height: 320px;
    align-self: center;
}

.hp-events-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-events-photo--1 { transform: rotate(-4.65deg); }
.hp-events-photo--2 { transform: rotate(4.65deg); border-color: #fff; }
.hp-events-photo--3 { transform: rotate(-4.65deg); }
.hp-events-photo--4 { transform: rotate(4.65deg); }

.hp-events-subtitle {
    font-family: var(--hp-font-body);
    font-size: 20px;
    line-height: 1.5;
    color: #000;
    max-width: 800px;
    margin: 0 auto 36px;
}

.hp-events-cta {
    position: relative;
    display: inline-block;
}

.hp-events-cta::after {
    content: '';
    position: absolute;
    inset: 8px -6px -8px 6px;
    border-radius: 90px;
    background: var(--hp-orange-2);
    z-index: 0;
}

/* Bouton "Voir l'itinéraire" dans la section "Où nous trouver" :
   le bloc orange ressemblerait trop au bouton lui-même (orange-2),
   donc l'ombre passe en blanc pour mieux ressortir. */
.hp-location .hp-events-cta::after {
    background: #fff;
}

/* ════════════════════════════════
   6. OÙ NOUS TROUVER ?
════════════════════════════════ */
.hp-location {
    padding: 80px var(--hp-pad) 140px;
    background: var(--hp-cream);
}

.hp-location-inner {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    background: var(--hp-red);
    color: #fff;
    padding: 70px 80px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
    overflow: hidden;
}

.hp-location-content { position: relative; z-index: 2; }

.hp-location-content .hp-section-title {
    text-align: left;
    color: #fff;
    margin-bottom: 24px;
    font-size: 72px;
}

.hp-location-intro {
    font-family: var(--hp-font-body);
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 30px;
    max-width: 540px;
}

.hp-location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.hp-location-block {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.hp-location-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 4px;
    filter: brightness(0) invert(1);
}

.hp-location-block address {
    font-family: var(--hp-font-body);
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 1.5;
    color: #fff;
}

.hp-location-block address a {
    color: inherit;
    text-decoration: none;
    transition: opacity .15s ease;
}

.hp-location-block address a:hover {
    opacity: .75;
    text-decoration: underline;
}

.hp-location-hours {
    font-family: var(--hp-font-script);
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 30px;
}
.hp-location-hours p { margin-bottom: 4px; }

.hp-location-map {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.hp-location-map img,
.hp-location-map iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

/* ════════════════════════════════
   7. FOOTER - styles moved to css/footer.css (shared site-wide).
════════════════════════════════ */

/* ════════════════════════════════
   Responsive
════════════════════════════════ */
@media (max-width: 1440px) {
    .home-page { --hp-pad: 60px; }
    .hp-hero-left { flex-basis: 580px; }
    .hp-hero-photo--main { width: 420px; height: 540px; flex-basis: 420px; }
    .hp-hero-photo--side { width: 260px; height: 500px; flex-basis: 260px; margin-right: -150px; }
    .hp-hero-mascot { left: 60px; }
    .hp-services-photos img { width: 320px; height: 290px; }
}

/* ════════════════════════════════
   MOBILE (≤ 1100px) — aligné sur le seuil burger de la nav.
   Plus de verrou min-width : la home se réagence (le desktop ne flexe pas sous 1100).
════════════════════════════════ */
@media (max-width: 1100px) {
    .home-page { min-width: 0; --hp-pad: 22px; }

    /* ── HERO ── */
    .hp-hero { min-height: 0; }
    .hp-hero-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 120px var(--hp-pad) 64px;
    }
    .hp-hero-left { flex: 1 1 auto; }
    .hp-hero-title { font-size: clamp(56px, 15vw, 110px); letter-spacing: -1px; }
    .hp-hero-tagline { margin-top: 24px; font-size: 17px; }
    .hp-hero-meta { font-size: 14px; }
    .hp-hero-cta .hp-btn-primary { width: 100%; text-align: center; box-sizing: border-box; }
    .hp-hero-mascot { display: none; }

    /* Collage photo → une seule image pleine largeur */
    .hp-hero-right { margin: 0; justify-content: center; align-self: auto; }
    .hp-hero-photo--side { display: none; }
    .hp-hero-photo--main {
        width: 100%; height: auto; aspect-ratio: 4 / 5;
        flex-basis: auto; border-width: 10px;
    }

    /* ── Titres de section ── */
    .hp-section-title { font-size: clamp(34px, 9vw, 52px); }

    /* ── NOS CLASSIQUES (carousel) ── */
    .hp-classiques-track { gap: 16px; }
    .hp-classiques-track .hp-product-card,
    .hp-classiques-track .hp-product-card--active {
        flex-basis: 80vw; width: 80vw; transform: none;
    }
    .hp-carousel-arrow { display: none; }
    .hp-product-card { border-width: 12px; }
    .hp-product-card-title { font-size: 30px; }
    /* Pas de hover sur mobile → description affichée directement sous l'image */
    .hp-product-card-overlay {
        position: static; opacity: 1; transform: none;
        background: none; padding: 12px 0 0; pointer-events: auto;
    }
    .hp-product-card-desc { color: var(--hp-dark); font-size: 15px; }

    /* ── NOS SERVICES ── */
    .hp-services { padding-top: 64px; }
    .hp-services::before { display: none; }
    .hp-services-inner { grid-template-columns: 1fr; gap: 26px; padding-bottom: 56px; }
    .hp-services-left { display: none; }
    .hp-services-right .hp-section-title--left { margin-bottom: 22px; }
    .hp-service-item-title { font-size: 30px; }
    .hp-service-item-slot { font-size: 18px; }
    .hp-service-item-desc { font-size: 16px; }
    .hp-services-marquee { margin-top: 36px; padding: 36px 0; }

    /* ── ÉVÉNEMENTS ── */
    .hp-events { padding: 70px var(--hp-pad) 70px; }
    .hp-events-title { font-size: clamp(30px, 8.5vw, 56px); letter-spacing: -1px; }
    .hp-events-crescendo { padding: 8px 20px 12px; letter-spacing: -1px; }
    /* Les lettres ont un font-size inline (effet crescendo desktop) → on le neutralise
       en mobile pour que "ÉVÉNEMENTS" tienne sur une seule ligne. */
    .hp-events-crescendo span { font-size: clamp(26px, 7.5vw, 48px) !important; }
    .hp-events-subtitle { font-size: 16px; margin-bottom: 26px; }
    /* Photos : 2 par ligne, style polaroïd (bordure blanche, léger angle). */
    .hp-events-photos {
        position: static;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
        margin: 26px auto 40px;
    }
    .hp-events-photo {
        width: 46%;
        height: auto;
        aspect-ratio: 1 / 1;
        border: 8px solid #fff;
    }
    .hp-events-photo--1, .hp-events-photo--3 { transform: rotate(-3deg); }
    .hp-events-photo--2, .hp-events-photo--4 { transform: rotate(3deg); }

    /* ── OÙ NOUS TROUVER ── */
    .hp-location { padding: 50px var(--hp-pad) 80px; }
    .hp-location-inner { grid-template-columns: 1fr; gap: 26px; padding: 36px 24px; }
    .hp-location-grid { grid-template-columns: 1fr; }
    .hp-location-map { height: 320px; }
    .hp-location-content .hp-section-title { font-size: 42px; }
}