/* ════════════════════════════════
   FOOTER - site-wide
   Maquette Figma : papier orange texturé sur toute la zone,
   divider crénelé en haut, colonnes blanches, marquee "APERITIU" au milieu,
   légal + socials en bas.
════════════════════════════════ */

.hp-footer {
    --hp-cream:     #f3e9d7;
    --hp-cream-2:   #fbf4e9;
    --hp-red:       #e85a28;
    --hp-red-2:     #b22222;
    --hp-orange-2:  #f3a63c;
    --hp-dark:      #242323;
    --hp-grey:      #dbdbdb;

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

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

    position: relative;
    background-color: var(--hp-orange-2);
    background-image: url('/images/home/union3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    isolation: isolate;
    overflow: hidden;
}

/* ─────────  Divider crénelé en haut (même technique que la bande hero)  ───────── */
.hp-footer-divider {
    display: block;
    width: 100%;
    height: 68px;
}

/* ─────────  Colonnes  ───────── */
.hp-footer-cols {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 60px var(--hp-pad) 60px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 50px;
    color: #fff;
    position: relative;
    z-index: 2;
}

.hp-footer-col h4 {
    font-family: var(--hp-font-script);
    font-size: 22px;
    font-weight: 400;
    text-transform: capitalize;
    margin: 0 0 18px;
    color: #fff;
}

.hp-footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-footer-col a,
.hp-footer-col li {
    font-family: var(--hp-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: #fff;
    text-decoration: none;
    transition: opacity .15s ease;
}

.hp-footer-col a:hover { opacity: .75; }

.hp-footer-brand img {
    display: block;
    width: 200px;
    height: auto;
}

.hp-footer-brand-text {
    font-family: var(--hp-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    margin-top: 18px;
    max-width: 320px;
}

/* ─────────  Newsletter  ───────── */
.hp-newsletter-form {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 42px;
    box-shadow: 0 0 14px rgba(0, 0, 0, .14);
    height: 56px;
    padding: 0 6px 0 22px;
    margin-top: 14px;
    max-width: 351px;
}

.hp-newsletter-form input {
    flex: 1;
    border: 0;
    background: transparent;
    height: 100%;
    font-family: var(--hp-font-ui);
    font-size: 14px;
    color: var(--hp-dark);
    outline: none;
}

.hp-newsletter-form input::placeholder {
    color: rgba(0, 0, 0, .4);
    letter-spacing: .4px;
}

.hp-newsletter-form button {
    background: var(--hp-red);
    color: #fff;
    border: 0;
    padding: 0 26px;
    height: 44px;
    border-radius: 80px;
    font-family: var(--hp-font-ui);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -.36px;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.hp-newsletter-form button:hover {
    transform: scale(1.02);
    background: #c54416;
}

.hp-newsletter-intro {
    font-family: var(--hp-font-body);
    font-size: 15px;
    color: rgba(255, 255, 255, .85);
    line-height: 1.6;
    margin-top: 8px;
    max-width: 340px;
}

/* Message de feedback après soumission newsletter (rempli via JS). */
.hp-newsletter-msg {
    margin: 10px 0 0;
    font-family: var(--hp-font-body);
    font-size: 13px;
    line-height: 1.4;
    min-height: 1.4em;
}
.hp-newsletter-msg--success { color: #b5e8b5; }
.hp-newsletter-msg--error   { color: #ffb8a0; }

/* ─────────  Marquee "APERITIU - APERITIU - APERITIU..."  ───────── */
.hp-footer-marquee {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
    margin: 20px 0 30px;
    z-index: 1;
}

.hp-footer-marquee-track {
    display: flex;
    align-items: baseline;
    gap: 0;
    white-space: nowrap;
    width: max-content;
    transform: rotate(-1.5deg);
    animation: hp-footer-marquee-scroll 35s linear infinite;
}

.hp-footer-marquee-word {
    font-family: var(--hp-font-display);
    font-size: clamp(80px, 9vw, 130px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -2.5px;
    text-transform: uppercase;
    color: #fff;
    padding: 0 20px;
    flex: 0 0 auto;
}

.hp-footer-marquee-word--ghost {
    color: rgba(255, 255, 255, .35);
}

.hp-footer-marquee-sep {
    font-family: var(--hp-font-display);
    font-size: clamp(80px, 9vw, 130px);
    color: rgba(255, 255, 255, .55);
    line-height: 1;
    padding: 0 10px;
    flex: 0 0 auto;
}

@keyframes hp-footer-marquee-scroll {
    from { transform: rotate(-1.5deg) translateX(0); }
    to   { transform: rotate(-1.5deg) translateX(-50%); }
}

/* ─────────  Bas : copyright (gauche) + gérer cookies (centre) + socials (droite)  ───────── */
.hp-footer-bottom {
    max-width: var(--hp-max);
    margin: 0 auto;
    padding: 30px var(--hp-pad) 50px;
    border-top: 1px dashed rgba(255, 255, 255, .35);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
    color: #fff;
    position: relative;
    z-index: 2;
}

.hp-footer-copyright {
    margin: 0;
    font-family: var(--hp-font-ui);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .9);
    justify-self: start;
}

.hp-footer-cookies-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .55);
    background: transparent;
    color: #fff;
    font-family: var(--hp-font-ui);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    justify-self: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hp-footer-cookies-btn:hover {
    background: #fff;
    color: var(--hp-red, #e85a28);
    border-color: #fff;
}
.hp-footer-cookies-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.hp-footer-socials {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-self: end;
}

.hp-footer-socials a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    transition: transform .15s ease, opacity .15s ease;
}

.hp-footer-socials a:hover {
    transform: scale(1.12);
    opacity: .85;
}

.hp-footer-socials svg {
    width: 22px;
    height: 22px;
    display: block;
}

.hp-footer-socials img {
    width: 22px;
    height: 22px;
    display: block;
}

/* ─────────  Responsive  ───────── */
@media (max-width: 1440px) {
    .hp-footer { --hp-pad: 60px; }
}

@media (max-width: 1100px) {
    /* Marque pleine largeur, 2 colonnes de liens, newsletter pleine largeur. */
    .hp-footer-cols {
        grid-template-columns: 1fr 1fr;
        gap: 34px 30px;
        padding: 50px 24px 50px;
    }
    .hp-footer-brand,
    .hp-footer-newsletter { grid-column: 1 / -1; }

    .hp-footer-bottom {
        grid-template-columns: 1fr;
        gap: 18px;
        text-align: center;
        padding: 26px 24px 44px;
    }
    .hp-footer-copyright,
    .hp-footer-cookies-btn,
    .hp-footer-socials { justify-self: center; }

    .hp-footer-marquee-word,
    .hp-footer-marquee-sep { font-size: 60px; }
    .hp-newsletter-form,
    .hp-newsletter-intro,
    .hp-footer-brand-text { max-width: none; }
}

/* Très petits écrans : on garde 2 colonnes de liens mais resserrées. */
@media (max-width: 480px) {
    .hp-footer-cols { gap: 28px 20px; }
    .hp-footer-marquee-word,
    .hp-footer-marquee-sep { font-size: 46px; }
}