/* ============================================================
   footer.css — Footer CTT Brunoy v2
   ============================================================ */

.footer {
  background-color: var(--violet-footer);
  color           : var(--blanc);
  margin-top      : auto;
  width           : 100%;
  max-width       : 100%;
  overflow-x      : hidden;
  box-sizing      : border-box;
}

/* ============================================================
   LAYOUT 3 COLONNES
   ============================================================ */
.footer-inner {
  display               : grid;
  grid-template-columns : 1fr 1fr 1fr;
  align-items           : start;
  gap                   : 0 32px;
  padding               : 36px 0;
  width                 : 100%;
  box-sizing            : border-box;
}

.footer-col {
  padding   : 0;
  min-width : 0;
  box-sizing: border-box;
}

/* Séparateur vertical : bordure sur chaque colonne (sauf la première) */
.footer-col:not(:first-child) {
  border-left : 1px solid rgba(255, 255, 255, 0.10);
  padding-left: 32px;
}

/* Ancien séparateur en div dédiée : conservé au cas où présent dans le HTML, mais neutralisé */
.footer-sep {
  display: none;
}

/* ============================================================
   TITRES DE BLOCS
   ============================================================ */
.footer-bloc-titre {
  font-family   : var(--font-sous-titre);
  font-size     : 10px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity       : 0.45;
  margin-bottom : 16px;
  width         : 100%;
  text-align: center;
}

/* ============================================================
   COL 1 — RÉSEAUX SOCIAUX
   ============================================================ */
.footer-reseaux {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
}

.footer-rs {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 8px;
  text-decoration: none;
  transition    : transform var(--transition);
}

.footer-rs:hover { transform: translateY(-4px); }

.footer-rs-icone {
  display      : block;
  width        : 44px;
  height       : 44px;
  border-radius: 12px;
  overflow     : hidden;
  flex-shrink  : 0;
}

.footer-rs-icone img {
  display     : block;
  width       : 44px;
  height      : 44px;
  object-fit  : contain;
  border-radius: 12px;
}

.footer-rs-nom {
  font-family: var(--font-texte);
  font-size  : 10px;
  color      : rgba(255, 255, 255, 0.55);
  text-align : center;
  line-height: 1.3;
  max-width  : 72px;
  transition : color var(--transition);
}

.footer-rs:hover .footer-rs-nom { color: var(--blanc); }

/* ============================================================
   COL 2 — INFORMATIONS
   ============================================================ */
.footer-liens-liste {
  list-style: none;
  padding   : 0;
  margin    : 0;
  display   : flex;
  flex-direction: column;
  gap       : 8px;
}

.footer-liens-liste a {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  font-family    : var(--font-texte);
  font-size      : 13px;
  color          : rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition     : color var(--transition), gap var(--transition);
}

.footer-liens-liste a::before {
  content      : '';
  width        : 5px;
  height       : 5px;
  border-radius: 50%;
  background   : rgba(255, 255, 255, 0.25);
  flex-shrink  : 0;
  transition   : background var(--transition);
}

.footer-liens-liste a:hover            { color: var(--blanc); gap: 12px; }
.footer-liens-liste a:hover::before    { background: var(--blanc); }

.footer-admin-link {
  font-size : 12px !important;
  margin-top: 4px;
}

/* ============================================================
   COL 3 — SPONSORS
   ============================================================ */
.footer-sponsors-liste {
  list-style           : none;
  padding              : 0;
  margin               : 0;
  width                : 100%;
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 10px 20px;
}

.footer-sponsors-liste a {
  display        : inline-flex;
  align-items    : center;
  gap            : 6px;
  font-family    : var(--font-texte);
  font-size      : 12px;
  font-weight    : 500;
  color          : rgba(255, 255, 255, 0.60);
  text-decoration: none;
  transition     : color var(--transition);
}

.footer-sponsors-liste a::before {
  content      : '↗';
  font-size    : 10px;
  opacity      : 0.40;
  transition   : opacity var(--transition);
}

.footer-sponsors-liste a:hover {
  color: var(--blanc);
}
.footer-sponsors-liste a:hover::before { opacity: 1; }

.footer-col--sponsors > .footer-bloc-titre {
  width      : 100%;
  text-align : left;
}

/* ============================================================
   COPYRIGHT
   ============================================================ */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding   : 14px 0;
  text-align: center;
}

.footer-bottom p {
  font-family   : var(--font-texte);
  font-size     : 13px;
  opacity       : 0.55;
  letter-spacing: 0.03em;
}

/* ============================================================
   SCROLL TOP
   ============================================================ */
.scroll-top {
  position      : fixed;
  bottom        : 20px;
  right         : 20px;
  width         : 40px;
  height        : 40px;
  border-radius : 50%;
  background    : var(--bleu-nav-fonce);
  color         : var(--blanc);
  font-size     : 0.85rem;
  display       : flex;
  align-items   : center;
  justify-content: center;
  box-shadow    : 0 2px 12px rgba(0,0,0,0.30);
  transition    : transform var(--transition), background var(--transition);
  z-index       : 90;
  border        : none;
  cursor        : pointer;
}

.scroll-top:hover {
  transform : translateY(-3px);
  background: var(--bleu-titre);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .footer {
    overflow-x: hidden;
  }

  .footer-inner {
    display       : flex !important;
    flex-direction: column;
    gap           : 28px;
    padding       : 32px 16px;
    width         : 100%;
    box-sizing    : border-box;
  }

  .footer-col {
    padding : 0;
    width   : 100%;
  }

  .footer-col:not(:first-child) {
    border-left : none;
    padding-left: 0;
    border-top  : 1px solid rgba(255, 255, 255, 0.10);
    padding-top : 20px;
  }

  .footer-reseaux {
    flex-direction : row;
    flex-wrap      : wrap;
    gap            : 20px;
  }

  .footer-col--sponsors {
    align-items: flex-start;
  }

  .footer-sponsors-liste {
    grid-template-columns: 1fr 1fr;
    gap                  : 8px 16px;
    width                : 100%;
  }
}

@media (max-width: 400px) {
  .footer-sponsors-liste {
    grid-template-columns: 1fr;
  }
}