/*
 * Pied de page — traitement Vilna, appliqué sur tout le site.
 *
 * Extrait de home-redesign.css : le pied de page est partagé par toutes les
 * pages, mais le reste de home-redesign.css (30 ko de sections pleine hauteur)
 * ne correspond à rien en dehors de l'accueil. Le charger partout faisait payer
 * ces 30 ko à chaque page pour quelques classes hr-footer__*.
 *
 * Ce fichier est autonome : il redéclare les quelques variables dont le pied de
 * page a besoin, pour ne pas dépendre du chargement de home-redesign.css.
 */

:root {
    --navbar-height: 76px;

    --hr-ink: #0A0907;
    --hr-cream: #E8D9B8;
    --hr-gold: #E9A23B;
    --hr-gold-light: #F4C876;
    --hr-muted: #7A6F5E;
    --hr-line-on-dark: rgba(233, 162, 59, 0.18);
    --hr-line-on-dark-strong: rgba(233, 162, 59, 0.4);

    --font-display: 'Playfair Display', Georgia, serif;
    --font-mono: 'Inter', sans-serif;
}

/* Ancrage du pied de page sous la navbar collante (accueil, section-snap). */
body.home-page .hr-footer {
    scroll-margin-top: var(--navbar-height);
}

/* ===========================
   Newsletter
   =========================== */
.hr-newsletter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.hr-footer__top .hr-newsletter {
    margin-top: 1.5rem;
}

.hr-newsletter__form {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.hr-newsletter__form input {
    background: transparent;
    border: 1px solid var(--hr-line-on-dark-strong);
    color: var(--hr-cream);
    padding: 0.9rem 1.2rem;
    font-family: var(--font-mono);
    min-width: 260px;
}

.hr-newsletter__form input::placeholder {
    color: rgba(232, 217, 184, 0.45);
}

.hr-newsletter__form input:focus-visible {
    outline: 2px solid var(--hr-gold);
    outline-offset: 2px;
}

/* ===========================
   Footer — Vilna treatment.
   Applies site-wide: this stylesheet is now loaded from base.html.twig
   for every page, specifically so the shared <footer> markup looks the
   same everywhere, not just on the homepage. Only the full-height
   centering below is still homepage-specific (see body.home-page rule);
   on every other page the footer is simply as tall as its content.
   =========================== */
.hr-footer {
    position: relative;
    background: var(--hr-ink);
    border-top: 1px solid var(--hr-line-on-dark);
    padding: clamp(1.5rem, 3vw, 3rem) 0 2rem;
}

body.home-page .hr-footer {
    min-height: calc(100vh - var(--navbar-height));
    min-height: calc(100dvh - var(--navbar-height));
    display: flex;
}

.hr-footer__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    /* Wider than the site's normal .container cap — the "Aide" column
       (just two links) was leaving a lot of unused space on the sides
       at large viewports, forcing the wider columns' text to wrap
       more than necessary. Spreading the columns out lets the tagline
       and links breathe horizontally instead of stacking vertically,
       which shrinks the whole bottom-group's height. */
    display: flex;
    flex-direction: column;
}

/* Bootstrap's own .container max-width rules load after this
   stylesheet, so an equal-specificity override here would lose the
   cascade tie on source order — the extra class keeps this rule
   ahead regardless of load order. */
.hr-footer__inner.container {
    max-width: min(1600px, 94vw);
}

/* Divider + newsletter stay near the top; everything else (trust
   bar, columns, legal bar) is pinned to the very bottom of the
   section via margin-top: auto, instead of the whole block sitting
   centered with empty space above and below it. */
.hr-footer__bottom-group {
    margin-top: auto;
    padding-top: 1rem;
}

.hr-footer__mark {
    position: absolute;
    left: 50%;
    top: 34%;
    transform: translate(-50%, -50%) scale(0.94);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(5rem, 19vw, 15.5rem);
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--hr-gold-light) 0%, var(--hr-gold) 55%, var(--hr-gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1), transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hr-footer__mark::after {
    content: '';
    position: absolute;
    inset: -65% -30%;
    background: radial-gradient(ellipse at center, rgba(233, 162, 59, 0.28) 0%, transparent 72%);
    z-index: -1;
}

.hr-footer.is-visible .hr-footer__mark {
    opacity: 0.24;
    transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .hr-footer__mark {
        opacity: 0.24;
        transform: translate(-50%, -50%) scale(1);
        transition: none;
    }
}

.hr-footer__logo {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3vw, 2.75rem);
    font-weight: 400;
    color: var(--hr-cream);
    margin-bottom: 1.25rem;
}

.hr-footer .hr-footer__tagline {
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--hr-cream) !important;
    opacity: 0.6;
    max-width: 46ch;
}

.hr-footer__heading {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--hr-gold);
    margin-bottom: 1.25rem;
}

.hr-footer__links {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.hr-footer .hr-footer__links a {
    color: var(--hr-cream) !important;
    opacity: 0.6;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 1rem;
    transition: opacity 0.25s ease, color 0.25s ease;
}

.hr-footer .hr-footer__links a:hover {
    opacity: 1;
    color: var(--hr-gold) !important;
}

.hr-footer .hr-footer__social a {
    color: var(--hr-cream) !important;
    opacity: 0.6;
    font-size: 1.5rem;
    display: inline-flex;
    transition: opacity 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.hr-footer .hr-footer__social a:hover {
    opacity: 1;
    color: var(--hr-gold) !important;
    transform: translateY(-2px);
}

.hr-footer__trust {
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 1.1rem 0;
    
}

.hr-footer__trust-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.5rem;
}

.hr-footer__trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--hr-cream);
    opacity: 0.7;
}

.hr-footer__trust i {
    color: var(--hr-gold);
    font-size: 1rem;
}

.hr-footer__columns {
    margin-top: 1rem;
}

.hr-footer .hr-footer__rule {
    border: none !important;
    opacity: 1;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.hr-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.hr-footer .hr-footer__copyright,
.hr-footer .hr-footer__payments {
    color: rgba(232, 217, 184, 0.45) !important;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.hr-footer .hr-footer__payments {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hr-footer .hr-footer__payments i {
    font-size: 0.95rem;
}

@media (max-width: 767px) {
    .hr-newsletter__form input { min-width: 0; flex: 1; }
}

/* ===========================
   Signature divider: a single drawn gold line
   Utilisé dans le pied de page (base.html.twig) comme sur l'accueil, donc
   déclaré ici plutôt que dans la feuille propre à l'accueil.
   =========================== */
.hr-swatch {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 160px;
}

.hr-swatch span {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--hr-gold), transparent);
    transform-origin: center;
    transform: scaleX(0);
}

.hr-swatch--divider {
    max-width: 140px;
    margin: 0 auto 2rem;
}

@media (prefers-reduced-motion: no-preference) {
    .hr-swatch span {
        animation: hr-weft-draw 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        animation-delay: 0.1s;
    }

    .hr-swatch--divider span {
        animation-play-state: paused;
        animation-fill-mode: forwards;
    }
    .hr-swatch--divider.is-visible span {
        animation-play-state: running;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hr-swatch span {
        transform: scaleX(1);
    }
}

@keyframes hr-weft-draw {
    to { transform: scaleX(1); }
}