/* ========================================
   FOOTER — Design "Aplats"
   Palette Forêt × Rose layette
======================================== */

/* ── Variables ── */
#wrap-footer,
.site-footer {
  --ft-ff:     var(--bs-font-sans-serif, system-ui, sans-serif);
  --ft-forest: #23432E;
  --ft-dark:   #1A3222;
  --ft-pink:   #F9C8D0;
  --ft-terra:  #E8956A;
  --ft-violet: #9B7EB8;
  --ft-lin:    #F5ECD7;
  --ft-dim:    rgba(249,200,208,0.45);
  --ft-border: rgba(249,200,208,0.10);
}

/* ════════════════════════════════
   PEEKABOO — footer fixe derrière
════════════════════════════════ */
#wrap-footer {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  min-height: 100vh;
  z-index: 1;
  background: var(--ft-forest);
  overflow: visible;
}

.hp-page-wrap { position: relative; }

/* ════════════════════════════════
   PARALLAX WRAPPER
════════════════════════════════ */
.footer-parallax-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ════════════════════════════════
   SVG BOTANIQUE
════════════════════════════════ */
.footer-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  top: 500px;
}

.footer-lines svg {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ════════════════════════════════
   FOOTER CONTENT
════════════════════════════════ */
.footer-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: var(--nav-h, 80px);
}

/* Bande tricolore en haut */
.footer-content::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--ft-pink)   0%   33%,
    var(--ft-terra)  33%  66%,
    var(--ft-violet) 66%  100%
  );
}

/* ════════════════════════════════
   FOOTER MAIN — grille 2 colonnes
════════════════════════════════ */
.footer__main {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  flex: 1;
  padding: var(--space-extra-xl, 208px) var(--space-xl, 64px) var(--space-xxl, 80px);
  gap: 0;
  border-bottom: 1px solid var(--ft-border);
}

/* ── Gauche ── */
.footer__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xxl, 80px);
  padding-right: clamp(2rem, 5vw, 6rem);
  border-right: 1px solid var(--ft-border);
}

/* Eyebrow — nom du site avec point pulsant */
.footer__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(249,200,208,0.40);
  margin-bottom: var(--space-md, 40px);
  display: block;
}

.footer__eyebrow-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--ft-terra);
  vertical-align: middle;
  margin-right: 8px;
  animation: hp-pulse 2s infinite;
}

/* Tagline — grande, bold, outline sur em */
.footer__tagline {
  font-size: clamp(2.4rem, 4.5vw, 5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: rgba(249,200,208,0.88);
  margin: 0;
}

.footer__tagline em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ft-terra);
}

/* Description — deux colonnes, texte discret */
.footer__desc {
  column-count: 2;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  column-rule: 1px solid var(--ft-border);
}

.footer__desc p {
  font-size: 0.82rem;
  line-height: 1.75;
  color: rgba(249,200,208,0.30);
  margin: 0;
  break-inside: avoid;
}
.footer__desc p + p { margin-top: 1em; }

/* ── Droite : navigation ── */
.footer__right {
  padding-left: clamp(2rem, 5vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.footer__nav-title {
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(249,200,208,0.28);
  margin-bottom: var(--space-lg, 64px);
}

/* Menu — liens massifs Aplats */
.footer__menu {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer__menu li {
  border-bottom: 1px solid var(--ft-border);
}
.footer__menu li:first-child {
  border-top: 1px solid var(--ft-border);
}

.footer__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(1.6rem, 2.8vw, 2.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: rgba(249,200,208,0.75);
  text-decoration: none;
  padding: clamp(14px, 2vw, 22px) 0;
  transition: color 0.22s, padding-left 0.22s;
  position: relative;
}

.footer__menu a::after {
  content: '→';
  font-size: 0.45em;
  color: var(--ft-terra);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  transform: translateX(-8px);
  flex-shrink: 0;
}

.footer__menu a:hover {
  color: var(--ft-pink);
  padding-left: 8px;
  text-decoration: none;
  opacity: 1;
}
.footer__menu a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* ════════════════════════════════
   BOTTOM BAR — 3 blocs Aplats
════════════════════════════════ */
.footer__bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ft-border);
}

.footer__bottom-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(16px, 2vw, 24px) clamp(16px, 3vw, 40px);
  border-right: 1px solid var(--ft-border);
  position: relative;
}
.footer__bottom-block:last-child { border-right: none; }

/* Couleur de la barre top de chaque bloc */
.footer__bottom-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.footer__bottom-block--copyright::before { background: var(--ft-pink); }
.footer__bottom-block--credit::before    { background: var(--ft-terra); }
.footer__bottom-block--legal::before     { background: var(--ft-violet); }

.footer__bottom-label {
  font-size: 0.52rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(249,200,208,0.22);
}

.footer__bottom-block p,
.footer__bottom-block a {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(249,200,208,0.50);
  text-decoration: none;
  margin: 0;
  transition: color 0.2s;
}
.footer__bottom-block p strong { color: var(--ft-pink); font-weight: 700; }
.footer__bottom-block a:hover  { color: var(--ft-pink); }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 992px) {
  .footer__main {
    grid-template-columns: 1fr;
    padding: var(--space-xxl, 80px) var(--space-lg, 64px);
    gap: var(--space-xxl, 80px);
  }
  .footer__left {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--ft-border);
    padding-bottom: var(--space-xxl, 80px);
  }
  .footer__right  { padding-left: 0; }
  .footer__desc   { column-count: 1; }
  .footer__tagline { font-size: clamp(2rem, 7vw, 3.5rem); }
  .footer__menu a  { font-size: clamp(1.5rem, 5vw, 2.5rem); }
}

@media (max-width: 640px) {
  .footer__main { padding: var(--space-xl, 64px) var(--space-md, 40px); }
  .footer__tagline { font-size: clamp(1.8rem, 9vw, 2.8rem); }
  .footer__menu a  { font-size: clamp(1.4rem, 7vw, 2rem); }

  .footer__bottom {
    grid-template-columns: 1fr;
  }
  .footer__bottom-block {
    border-right: none;
    border-bottom: 1px solid var(--ft-border);
  }
  .footer__bottom-block:last-child { border-bottom: none; }
}

@media (max-width: 768px) and (orientation: landscape) {
  #wrap-footer {
    position: relative;
    min-height: unset;
  }
  .hp-page-wrap { padding-bottom: 0 !important; }
  .footer__main { grid-template-columns: 1fr; }
}