/**
 * ======================================================
 * FOOTER.CSS — Footer global Ciné Délices
 * ======================================================
 *
 * Contient :
 *   - Variables CSS spécifiques au footer
 *   - .ft__pre (préfooter : texte + widget)
 *   - .ft (footer principal : brand, liens, stats)
 *   - Responsive complet
 *
 * Chargé via head-resources.ejs sur toutes les pages.
 */

/* ======================================================
   VARIABLES FOOTER (complètent base.css)
====================================================== */
:root {
  --ft-ink:        #0a1220;
  --ft-deep:       #06101a;
  --ft-surface:    #162336;
  --ft-rim:        rgba(255,255,255,0.07);
  --ft-rim-gold:   rgba(196,160,82,0.22);
  --ft-gold:       #c4a052;
  --ft-gold-hi:    #f2c84b;
  --ft-gold-lo:    #9a7832;
  --ft-red:        #c23018;
  --ft-red-hi:     #e84020;
  --ft-silver:     #d4dce8;
  --ft-muted:      rgba(212,220,232,0.4);
  --ft-very-muted: rgba(212,220,232,0.2);

  --ft-g-gold:   linear-gradient(135deg, #9a7832 0%, #c4a052 35%, #f2c84b 60%, #c4a052 100%);
  --ft-g-gold-h: linear-gradient(90deg,  #9a7832 0%, #c4a052 35%, #f2c84b 60%, #c4a052 100%);
  --ft-g-red:    linear-gradient(135deg, #7a150e 0%, #c23018 50%, #d84020 100%);

  --ft-f-display: "Bebas Neue", cursive;
  --ft-f-title:   "Cinzel", serif;
  --ft-f-prose:   "Playfair Display", serif;
  --ft-f-body:    "Lato", sans-serif;

  --ft-w:    1440px;
  --ft-px:   56px;
  --ft-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ======================================================
   PRÉFOOTER (.ft__pre)
====================================================== */
.ft__pre {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(196,160,82,0.1);
}
.ft__pre-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("/images/pre-footer-bg-1.jpg") right center / auto 100% no-repeat;
  filter: saturate(.65) brightness(.48) sepia(.15);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 12%),
    linear-gradient(to right, transparent 0%, transparent 15%, rgba(0,0,0,.06) 28%, rgba(0,0,0,.28) 42%, rgba(0,0,0,.60) 58%, rgba(0,0,0,.85) 75%, black 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, black 12%),
    linear-gradient(to right, transparent 0%, transparent 15%, rgba(0,0,0,.06) 28%, rgba(0,0,0,.28) 42%, rgba(0,0,0,.60) 58%, rgba(0,0,0,.85) 75%, black 100%);
          mask-composite: intersect;
}
/* ── Transition : div placeholder, sans effet visuel ── */
.ft__pre-cap { display: none; }

/* Overlay couleur pour assurer la lisibilité du texte gauche */
.ft__pre::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, #0a1220 0%, #0a1220 20%, rgba(10,18,32,.88) 40%, rgba(10,18,32,.30) 62%, transparent 80%),
    radial-gradient(ellipse 50% 100% at 18% 50%, rgba(10,18,32,.85) 0%, transparent 70%);
  /* Fondu vertical en haut : laisse le canvas du body traverser naturellement */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 18%);
}
.ft__pre-inner {
  position: relative; z-index: 2;
  max-width: var(--ft-w); margin: 0 auto; padding: 72px var(--ft-px);
  display: grid; grid-template-columns: 1fr 480px; align-items: center; gap: 60px;
}

/* ── Colonne gauche ── */
.ft__pre-label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ft-f-title); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ft-red-hi); margin-bottom: 14px;
}
.ft__pre-label::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--ft-red-hi); }
.ft__pre-title {
  font-family: var(--ft-f-display); font-size: clamp(2.4rem, 4.5vw, 4rem);
  letter-spacing: 0.06em; line-height: 0.92; color: #fff; text-shadow: 0 4px 40px rgba(0,0,0,0.6); margin-bottom: 20px;
}
.ft__pre-title em { color: var(--ft-gold); font-style: normal; }
.ft__pre-desc {
  font-size: 0.82rem; font-weight: 300; line-height: 1.72;
  color: rgba(212,220,232,0.55); max-width: 460px; margin-bottom: 28px;
}
.ft__pre-desc strong { color: rgba(212,220,232,0.8); font-weight: 400; }
.ft__pre-stats { display: flex; align-items: center; gap: 28px; margin-bottom: 36px; }
.ft__pre-stat  { display: flex; flex-direction: column; gap: 2px; }
.ft__pre-stat-n {
  font-family: var(--ft-f-display); font-size: 2rem; letter-spacing: 0.06em;
  color: var(--ft-gold); line-height: 1;
}
.ft__pre-stat-l { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(212,220,232,0.28); }
.ft__pre-divider { width: 1px; height: 30px; background: rgba(196,160,82,0.15); }
.ft__pre-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.ft__pre-btn-main {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 26px; height: 46px;
  border-radius: 9px; background: var(--ft-g-gold); border: none; cursor: pointer;
  font-family: var(--ft-f-title); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ft-ink); text-decoration: none;
  transition: filter .22s, transform .22s; box-shadow: 0 4px 24px rgba(196,160,82,0.3);
}
.ft__pre-btn-main:hover { filter: brightness(1.1); transform: translateY(-2px); }
.ft__pre-btn-sec {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; height: 46px;
  border-radius: 9px; background: transparent; border: 1px solid rgba(212,220,232,0.22);
  font-family: var(--ft-f-title); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(212,220,232,0.6);
  text-decoration: none; cursor: pointer; transition: all .22s;
}
.ft__pre-btn-sec:hover { border-color: rgba(212,220,232,0.55); color: var(--ft-silver); background: rgba(255,255,255,0.04); transform: translateY(-2px); }

/* ── Widget droite — texte seul, sans fond ── */
.ft__widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: none;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.ft__widget-contrib,
.ft__widget-prog {
  background: none;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.ft__widget-contrib { padding: 0 0 6px; }
.ft__widget-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ft__widget-head-icon { color: var(--ft-gold); flex-shrink: 0; }
.ft__widget-head-title {
  font-family: var(--ft-f-title); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ft-gold);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.ft__widget-head-sub { display: block; font-size: 0.68rem; font-weight: 300; color: rgba(212,220,232,0.55); margin: -6px 0 10px 23px; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }

/* Encadrement uniquement sur l'état vide contributeurs */
.ft__widget-contrib-empty {
  font-size: 0.75rem; font-weight: 300; color: rgba(212,220,232,0.28);
  font-style: italic; padding: 10px 16px; text-align: center;
  background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid rgba(255,255,255,0.07);
}

/* ── Section progression ── */
.ft__widget-prog { padding: 0; }
.ft__widget-prog-head {
  font-family: var(--ft-f-title); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ft-gold);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8); margin-bottom: 14px;
}

.ft__widget-prog-link {
  display: block; margin-top: 8px; text-align: right; text-decoration: none;
  font-family: var(--ft-f-title); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(196,160,82,0.4);
  transition: color .2s;
}
.ft__widget-prog-link:hover { color: var(--ft-gold); }

/* CTA incitation recette */
.ft__widget-cta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 7px 14px;
  background: rgba(196,160,82,0.07);
  border: 1px solid rgba(196,160,82,0.18);
  border-radius: 6px; text-decoration: none;
  font-family: var(--ft-f-title); font-size: 0.42rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(196,160,82,0.75);
  transition: background .2s, border-color .2s, color .2s;
  width: fit-content;
}
.ft__widget-cta-btn:hover {
  background: rgba(196,160,82,0.14);
  border-color: rgba(196,160,82,0.32);
  color: var(--ft-gold);
}
/* ======================================================
   FOOTER PRINCIPAL (.ft)
====================================================== */
.ft {
  position: relative;
  background: var(--ft-deep);
  overflow: hidden;
}
.ft::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}
.ft__glow {
  position: absolute; top: -60px; left: -80px; width: 600px; height: 400px;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 30% 40%, rgba(196,160,82,0.055) 0%, transparent 70%);
}

/* ── MAIN GRID ── */
.ft__main {
  position: relative; z-index: 2;
  max-width: var(--ft-w); margin: 0 auto; padding: 48px var(--ft-px) 40px;
  display: grid; grid-template-columns: 280px 1fr 1fr 1fr; gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ft__col { padding: 0 36px; }
.ft__col:first-child  { padding-left: 0; border-right: 1px solid rgba(255,255,255,0.04); }
.ft__col:not(:first-child):not(:last-child) { border-right: 1px solid rgba(255,255,255,0.04); }
.ft__col:last-child   { padding-right: 0; }

/* Brand */
.ft__brand { display: flex; flex-direction: column; gap: 18px; }
.ft__logo  { display: inline-block; text-decoration: none; width: fit-content; }

/* Logo animé canvas — footer */
.ft__logo-scene {
  position: relative;
  width: 140px;
  height: 80px;
  cursor: pointer;
  overflow: visible;
}
.ft__logo-fx {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.ft__logo-fx--under { z-index: 0; }
.ft__logo-fx--over  { z-index: 2; }
.ft__logo-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  z-index: 1;
}
.ft__brand-desc  {
  font-size: 0.74rem; font-weight: 300; line-height: 1.72;
  color: rgba(212,220,232,0.62); max-width: 220px;
}
.ft__team-link {
  display: inline-block; margin-top: 12px;
  font-family: var(--ft-f-title); font-size: 0.68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(196,160,82,.55); text-decoration: none;
  transition: color .25s;
}
.ft__team-link:hover { color: var(--ft-gold); }

/* Colonnes liens */
.ft__col-head {
  font-family: var(--ft-f-title); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(196,160,82,0.9);
  margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
}
.ft__col-head::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(196,160,82,0.18), transparent);
}
.ft__links    { list-style: none; display: flex; flex-direction: column; gap: 0; }
.ft__links li { border-bottom: 1px solid rgba(255,255,255,0.03); }
.ft__links li:last-child { border-bottom: none; }
.ft__link {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  font-size: 0.72rem; font-weight: 300; color: rgba(212,220,232,0.68); text-decoration: none; transition: all .22s; position: relative;
}
.ft__link-icon { color: rgba(196,160,82,0.6); transition: color .22s; flex-shrink: 0; }
.ft__link:hover { color: var(--ft-silver); padding-left: 4px; }
.ft__link:hover .ft__link-icon { color: var(--ft-gold); }
.ft__link--soon {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}
.ft__link--soon::after {
  content: "Bientôt";
  margin-left: auto;
  font-family: var(--ft-f-title);
  font-size: .36rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(196,160,82,.35);
  border: 1px solid rgba(196,160,82,.2);
  padding: 1px 6px; border-radius: 3px;
}
.ft__badge-new {
  display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px;
  background: rgba(194,48,24,0.15); border: 1px solid rgba(194,48,24,0.3);
  font-family: var(--ft-f-title); font-size: 0.36rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ft-red-hi); margin-left: auto;
}

/* ── STATS BAND ── */
.ft__stats {
  position: relative; z-index: 2;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.012);
}
.ft__stats-inner {
  max-width: var(--ft-w); margin: 0 auto; padding: 0 var(--ft-px);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.ft__stat {
  display: flex; align-items: center; gap: 16px; padding: 22px 32px;
  border-right: 1px solid rgba(255,255,255,0.04); transition: background .25s;
}
.ft__stat:first-child { padding-left: 0; }
.ft__stat:last-child  { border-right: none; }
.ft__stat:hover       { background: rgba(196,160,82,0.03); }
.ft__stat-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(196,160,82,0.08); border: 1px solid rgba(196,160,82,0.14); color: var(--ft-gold);
}
.ft__stat-body { display: flex; flex-direction: column; gap: 1px; }
.ft__stat-n { font-family: var(--ft-f-display); font-size: 1.55rem; letter-spacing: 0.06em; color: var(--ft-gold); line-height: 1; }
.ft__stat-l { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(212,220,232,0.55); }

/* ── BOTTOM BAR ── */
.ft__bottom {
  position: relative; z-index: 2;
  max-width: var(--ft-w); margin: 0 auto; padding: 16px var(--ft-px);
  display: flex; align-items: center; gap: 24px;
}
.ft__copy { font-size: 0.6rem; font-weight: 300; color: rgba(212,220,232,0.52); margin-right: auto; }
.ft__legal { display: flex; gap: 16px; align-items: center; }
.ft__legal a { font-size: 0.58rem; font-weight: 300; color: rgba(212,220,232,0.58); text-decoration: none; transition: color .2s; }
.ft__legal a:hover { color: rgba(212,220,232,0.62); }
.ft__legal-sep { width: 1px; height: 10px; background: rgba(255,255,255,0.08); }
.ft__top-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 30px;
  border-radius: 7px; background: rgba(196,160,82,0.1); border: 1px solid rgba(196,160,82,0.35);
  font-family: var(--ft-f-title); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ft-gold); text-decoration: none; cursor: pointer; transition: all .22s;
}
.ft__top-btn:hover { background: rgba(194,48,24,0.15); border-color: rgba(194,48,24,0.45); color: #e84020; transform: translateY(-1px); }

/* ======================================================
   RESPONSIVE
====================================================== */
@media (max-width: 1100px) {
  :root { --ft-px: 32px; }
  .ft__pre-inner  { grid-template-columns: 1fr; gap: 40px; }
  .ft__widget     { max-width: 480px; }
  .ft__main       { grid-template-columns: 1fr 1fr; gap: 0; }
  .ft__col:nth-child(2n) { border-right: none; }
  .ft__col:nth-child(1), .ft__col:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.04); padding-bottom: 32px; margin-bottom: 32px; }
  .ft__stats-inner { grid-template-columns: repeat(2,1fr); }
  .ft__stat:nth-child(2) { border-right: none; }
  .ft__stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.04); }
}
@media (max-width: 768px) {
  :root { --ft-px: 18px; }

  /* Préfooter : ajuster le fond pour layout 1 colonne */
  .ft__pre-bg {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.75) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.75) 100%);
  }
  .ft__pre::before {
    background: rgba(10,18,32,.78);
  }
  .ft__pre-title   { font-size: 2rem; }
  .ft__pre-stats   { flex-wrap: wrap; gap: 16px 24px; }

  /* Main footer : 1 colonne */
  .ft__main        { grid-template-columns: 1fr; }
  .ft__col         { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.04); padding: 20px 0; }
  .ft__col:last-child { border-bottom: none; }

  /* Stats : 2 colonnes, padding symétrique */
  .ft__stats-inner { grid-template-columns: repeat(2,1fr); }
  .ft__stat        { padding: 18px 16px; }
  .ft__stat:first-child { padding-left: 16px; }  /* annule le padding-left:0 desktop */
  .ft__stat:nth-child(2) { border-right: none; }

  /* Bottom bar */
  .ft__bottom      { flex-wrap: wrap; gap: 12px; }
  .ft__copy        { order: 3; width: 100%; text-align: center; margin-right: 0; }
  .ft__legal       { order: 1; margin: 0 auto; }
  .ft__top-btn     { order: 2; }
}
@media (max-width: 520px) {
  .ft__stats-inner { grid-template-columns: 1fr 1fr; }
  .ft__stat        { padding: 14px 12px; gap: 10px; }
  .ft__stat:first-child { padding-left: 12px; }
  .ft__stat-n      { font-size: 1.3rem; }
  .ft__pre-ctas    { flex-direction: column; }
  .ft__pre-btn-main,
  .ft__pre-btn-sec { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  :root { --ft-px: 14px; }
  .ft__pre-title   { font-size: 1.75rem; }
  .ft__pre-stat-n  { font-size: 1.6rem; }
  .ft__pre-desc    { font-size: 0.76rem; }
  .ft__stats-inner { grid-template-columns: 1fr; }
  .ft__stat        { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.04); }
  .ft__stat:last-child { border-bottom: none; }
  .ft__stat:nth-child(n+3) { border-top: none; }
}