/* ============================================================
   TOUITIGROUP — footer.css
   Pied de page unifié, chargé par TOUTES les pages (nouveau système,
   anciennes pages identity.css, index.html, index-new.html).
   Dépend uniquement de tokens.css (variables --tg-*) : aucune
   dépendance à base.css, pour fonctionner aussi sur les anciennes pages.
   RTL : propriétés logiques → colonnes inversées automatiquement en arabe.

   <footer class="tg-footer">
     <div class="tg-footer-grid">
       <div class="tg-footer-col tg-footer-col--brand"> logo + textes + réseaux </div>
       <nav class="tg-footer-col"> <p class="tg-footer-title">Services</p> <ul>…</ul> </nav>
       <nav class="tg-footer-col"> Informations </nav>
       <div class="tg-footer-col"> Contact </div>
     </div>
     <div class="tg-footer-bottom">
       <div class="tg-footer-legal"> © … · SARL AU … </div>
       <div class="tg-footer-meta"> RC · IF · ICE · lien de langue </div>
     </div>
   </footer>
   ============================================================ */

/* Pas de « display » ici : sur index.html, .fr-text / .ar-text doivent pouvoir masquer
   l'un des deux footers (bascule de langue dans la page). */
.tg-footer {
  padding-block: var(--tg-space-2xl) var(--tg-space-xl);
  background: var(--tg-color-black);
  border-top: 1px solid var(--tg-color-border);
  font-size: var(--tg-text-sm);
  line-height: var(--tg-leading-body);
  color: var(--tg-color-text-muted);
  text-align: start;
}
.tg-footer *,
.tg-footer *::before,
.tg-footer *::after { box-sizing: border-box; }
.tg-footer p,
.tg-footer ul { margin: 0; padding: 0; }

/* Protection : certaines pages (index.html) stylent l'élément <nav> lui-même
   (position fixe en haut, flex, padding) pour leur menu principal.
   Les colonnes <nav> du footer ne doivent pas en hériter. */
.tg-footer nav.tg-footer-col {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  padding: 0;
  background: none;
  border: 0;
  transition: none;
}

.tg-footer-grid,
.tg-footer-bottom {
  width: 100%;
  max-width: var(--tg-container-max);
  margin-inline: auto;
  padding-inline: var(--tg-container-pad);
}

/* Mobile : une colonne (empilée) → 2 colonnes (sm) → 4 colonnes (lg) */
.tg-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-space-xl);
}

.tg-footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-sm);
  list-style: none;
}

.tg-footer-logo {
  display: inline-flex;
  border-radius: var(--tg-radius-sm);
}
.tg-footer-logo img {
  display: block;
  width: auto;
  height: calc(var(--tg-space-xl) + var(--tg-space-xs)); /* 44px */
}

.tg-footer .tg-footer-text {
  max-width: 22rem;
  margin-top: var(--tg-space-sm);
}
.tg-footer .tg-footer-logo + .tg-footer-text { margin-top: var(--tg-space-md); }

.tg-footer .tg-footer-title {
  margin-bottom: var(--tg-space-md);
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-semibold);
  letter-spacing: var(--tg-tracking-wider);
  text-transform: uppercase;
  color: var(--tg-color-gold);
}
[dir="rtl"] .tg-footer-title,
.tg-footer[dir="rtl"] .tg-footer-title { letter-spacing: 0; font-size: var(--tg-text-sm); }

.tg-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tg-space-lg);
  color: var(--tg-color-text-muted);
  text-decoration: none;
  border-radius: 2px;
  transition: color var(--tg-duration) var(--tg-ease);
}
.tg-footer-link:hover,
.tg-footer-link[aria-current="page"] { color: var(--tg-color-gold); }
.tg-footer-link:focus-visible {
  outline: 2px solid var(--tg-color-gold);
  outline-offset: 2px;
}

/* Numéros, e-mail, identifiants : toujours de gauche à droite, même en arabe */
.tg-footer .tg-ltr { direction: ltr; unicode-bidi: isolate; }

.tg-footer-note { color: var(--tg-color-text-subtle); }

/* Réseaux sociaux */
.tg-footer-social {
  display: flex;
  gap: var(--tg-space-sm);
  margin-top: var(--tg-space-lg);
}
.tg-footer .tg-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tg-control-h);
  height: var(--tg-control-h);
  font-size: var(--tg-text-xs);
  font-weight: var(--tg-weight-bold);
  color: var(--tg-color-gold);
  text-decoration: none;
  border: 1px solid var(--tg-color-border-strong);
  border-radius: var(--tg-radius-sm);
  transition: background-color var(--tg-duration) var(--tg-ease), color var(--tg-duration) var(--tg-ease);
}
.tg-footer .tg-footer-social-link:hover {
  background: var(--tg-color-gold);
  color: var(--tg-color-black);
}
.tg-footer .tg-footer-social-link:focus-visible {
  outline: 2px solid var(--tg-color-gold);
  outline-offset: 2px;
}

/* Barre inférieure */
.tg-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-md);
  margin-top: var(--tg-space-2xl);
  padding-top: var(--tg-space-lg);
  border-top: 1px solid var(--tg-color-border);
  font-size: var(--tg-text-xs);
  color: var(--tg-color-text-subtle);
}
.tg-footer-legal,
.tg-footer-meta {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-xs);
}
.tg-footer-bottom .tg-footer-link { color: var(--tg-color-text-subtle); }
.tg-footer-bottom .tg-footer-link:hover { color: var(--tg-color-gold); }

@media (min-width: 640px) {
  .tg-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .tg-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .tg-footer-bottom {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .tg-footer-meta { align-items: flex-end; text-align: end; }
}

:lang(ar) .tg-footer-bottom,
.tg-footer[lang="ar"] .tg-footer-bottom { font-size: var(--tg-text-sm); }