/* ============================================================
   footer.css — Section 07 · Footer
   Architecture :
     .footer-wrap              — conteneur externe full width
       footer.footer           — zone logo (max-width centré)
         .footer__index        — numéro latéral
         .footer__top-divider  — séparateur haut
         .footer__main         — logo + tagline + statut + socials
         .section-divider      — séparateur bas (motif partagé avec
                                  les autres sections, voir base.css)
============================================================ */

/* ── Wrapper externe ── */

.footer-wrap {
  position:         relative;
  background-color: var(--color-bg);
}


/* ── Zone principale ── */

.footer {
  position:   relative;
  max-width:  var(--container-max);
  margin:     0 auto;
  padding:    var(--space-20) var(--space-24) var(--space-18);
  overflow:   visible;
}

/* Ligne latérale décorative */
.footer::before {
  content:          '';
  position:         absolute;
  top:              calc(var(--space-20) + var(--space-8));
  left:             3.25rem;
  width:            1px;
  bottom:           var(--space-18);
  background-color: var(--ink-mid);
  opacity:          0.25;
}

/* Watermark typographique en fond */
.footer::after {
  content:             'DSK';
  position:            absolute;
  bottom:              0;
  left:                50%;
  transform:           translateX(-50%);
  font-family:         var(--font-display);
  font-size:           clamp(9rem, 20vw, 18rem);
  font-weight:         300;
  letter-spacing:      -0.04em;
  color:               transparent;
  -webkit-text-stroke: 1px rgba(var(--ink-base-rgb), 0.045);
  white-space:         nowrap;
  pointer-events:      none;
  user-select:         none;
  line-height:         1;
  z-index:             var(--z-base);
}


/* ── Numéro de section latéral ── */

.footer__index {
  position:         absolute;
  top:              var(--space-20);
  left:             2.85rem;
  font-family:      var(--font-body);
  font-size:        var(--text-xs);
  font-weight:      500;
  letter-spacing:   0.14em;
  text-transform:   uppercase;
  color:            var(--ink-mid);
  writing-mode:     vertical-rl;
  text-orientation: mixed;
  z-index:          var(--z-raised);
}


/* ── Divider haut ── */

.footer__top-divider {
  display:       flex;
  align-items:   center;
  gap:           var(--space-6);
  padding-left:  var(--space-14);
  margin-bottom: var(--space-8);
}

.footer__top-divider-line {
  flex:             1;
  height:           1px;
  background-color: var(--border);
}

.footer__top-divider-label {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--ink-mid);
  white-space:    nowrap;
}


/* ── Contenu principal ── */

.footer__main {
  position:        relative;
  z-index:         var(--z-raised);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
}


/* ── Logo ── */

.footer__logo {
  display:       block;
  margin-bottom: var(--space-5-5);
}

.footer__logo-text {
  font-family:    var(--font-display);
  font-size:      clamp(4rem, 9vw, 8rem);
  font-weight:    300;
  font-style:     italic;
  letter-spacing: -0.03em;
  line-height:    1;
  color:          var(--ink-deep);
  transition:     color 300ms ease;
}

.footer__logo:hover .footer__logo-text { color: var(--caramel); }

.footer__logo-dot {
  color:      var(--caramel);
  font-style: normal;
}


/* ── Tagline ── */

.footer__tagline {
  font-family:   var(--font-display);
  font-style:    italic;
  font-size:     clamp(0.9375rem, 1.2vw, 1.125rem);
  font-weight:   300;
  color:         var(--ink-mid);
  line-height:   1.75;
  margin-bottom: var(--space-8);
  max-width:     520px;
}


/* ── Badge disponibilité ── */

.footer__status {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  margin-bottom: 2.25rem;
}

.footer__status-dot {
  width:            7px;
  height:           7px;
  border-radius:    var(--radius-pill);
  background-color: var(--status-online);
  flex-shrink:      0;
  animation:        dot-pulse 2.4s ease infinite;
}

.footer__status-label {
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--ink-base);
}


/* ── Réseaux sociaux ── */

.footer__socials {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

.footer__social-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border:          1px solid var(--border-on-light);
  border-radius:   var(--radius-sm);
  color:           var(--ink-mid);
  transition:
    background   250ms ease,
    border-color 250ms ease,
    color        250ms ease,
    transform    100ms ease;
}

.footer__social-link:hover {
  background:   var(--ink-deep);
  border-color: var(--ink-deep);
  color:        var(--ivory-card);
}

.footer__social-link:active { transform: scale(0.92); }

.footer__social-link svg {
  width:      17px;
  height:     17px;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.footer__social-link:hover svg { transform: scale(1.15); }


/* ── Responsive ── */

@media (max-width: 1024px) {
  .footer         { padding-inline: var(--space-12); }
  .footer::before { left: 1.25rem; }
  .footer__index  { left: 0.85rem; }

  .footer__top-divider { padding-left: var(--space-10); }
}

@media (max-width: 768px) {
  .footer {
    padding: var(--space-16) var(--space-6) var(--space-14);
  }

  .footer::before { display: none; }
  .footer__index  { display: none; }

  .footer__top-divider { padding-left: 0; }
  .footer__logo-text   { font-size: clamp(3rem, 16vw, 5.5rem); }
}

@media (max-width: 480px) {
  .footer__socials { gap: var(--space-2); }
}


/* ── prefers-reduced-motion ── */

/* prefers-reduced-motion : géré globalement dans base.css
   (toute animation/transition est ramenée à ~0ms). */