/* ==========================================================================
   Footer « Odoo » porté en STATIQUE  (xtranumerik.ca — pages /pages/*)
   --------------------------------------------------------------------------
   Réplique fidèle du footer riche `.xtr-footer` rendu par QWeb sur les pages
   dynamiques (/shop/cart, /my) — voir views/portal_templates.xml bloc 2.
   AUTONOME : les pages statiques ne chargent NI portal_xtr.css, NI Bootstrap,
   NI FontAwesome → layout en flexbox maison, icône sociale en SVG inline.

   Namespacé `.xtr-odoo-footer*` pour n'attraper que ce footer et SURTOUT pour
   NE PAS réutiliser `.footer-nav` (que brand-creme.css l.186 transforme en
   boutons rouges). brand-creme applique déjà `footer{background:var(--xc-dark)
   !important; color:#fff !important}` → on force nos couleurs atténuées en
   `!important` pour qu'elles ne soient pas écrasées par ce blanc hérité.
   ========================================================================== */

.xtr-odoo-footer {
  background: linear-gradient(135deg, #2E1A47 0%, #3a2358 100%);
  color: #fff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  /* AUCUNE marge haute : la marge laissait passer le fond de page blanc entre
     la derniere section (sombre) et le footer = la « barre blanche ». Le footer
     colle desormais a la section, sombre contre sombre. */
  margin-top: 0;
  /* position+z-index : garantit que le contenu (et donc les LIENS) reste
     au-dessus de tout calque ::before generique (l'ancien components/footer.css
     posait footer::before{position:absolute;100%x100%} qui captait TOUS les
     clics -> aucun lien ne marchait). */
  position: relative;
  z-index: 0;
}

.xtr-odoo-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.6rem 1.5rem 1.6rem;
  position: relative;
  z-index: 1;
}

.xtr-odoo-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
}

/* Colonne marque (logo + accroche) = plus large */
.xtr-odoo-footer__brand {
  flex: 1 1 17rem;
  min-width: 14rem;
}
.xtr-odoo-footer__brand img {
  height: 42px;
  width: auto;
  margin-bottom: 0.9rem;
}
.xtr-odoo-footer__tag {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 22rem;
  margin: 0;
}

/* Colonnes liens (Navigation / Nous joindre / Suivez-nous) */
.xtr-odoo-footer__col {
  flex: 1 1 9rem;
  min-width: 8.5rem;
}
.xtr-odoo-footer__col h6 {
  color: #fff !important;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}
.xtr-odoo-footer__col a {
  color: rgba(255, 255, 255, 0.78) !important;
  text-decoration: none;
  display: block;
  padding: 0.18rem 0;
  font-size: 0.94rem;
  background: none !important;   /* neutralise tout fond hérité (ex. boutons) */
  box-shadow: none !important;
}
.xtr-odoo-footer__col a:hover {
  color: #ffb3bd !important;
}

/* Réseau social = pastille ronde + SVG */
.xtr-odoo-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  margin-right: 0.5rem;
  transition: background-color .15s ease, transform .12s ease;
}
.xtr-odoo-footer__social a:hover {
  background: #C8102E !important;
  transform: translateY(-2px);
}
.xtr-odoo-footer__social svg {
  height: 18px;
  width: auto;
  fill: currentColor;
}

/* Barre copyright (fond aubergine uni, texte atténué) */
.xtr-odoo-footer__copy {
  background-color: #2E1A47;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62) !important;
  text-align: center;
  font-size: 0.82rem;
  padding: 0.95rem 1.5rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .xtr-odoo-footer__inner { padding: 2rem 1.3rem 1.3rem; }
  .xtr-odoo-footer__grid { gap: 1.7rem; }
  .xtr-odoo-footer__brand,
  .xtr-odoo-footer__col { flex: 1 1 100%; }
}