/* ==========================================================
   Footer.css – version complète, propre & cohérente
   ========================================================== */

/* --------- Variables de thème --------- */
:root{
  /* Couleur de marque (prend celle du thème si dispo) */
  --brand: var(--color-primary, #1aa34a);
  --brand-dark: #0e7a33;              /* variante plus foncée pour le dégradé */
  --brand-shadow: 26,163,74;          /* RGB de --brand pour les ombres */

  --footer-bg: #f8f9f9;               /* fond du footer */
  --footer-text: #606a75;             /* texte du footer */
}

/* --------- Conteneur Footer --------- */
.site-footer{
  background: var(--footer-bg);
  border-top: 1px solid rgba(0,0,0,.05);
  padding: 18px 0 24px;
  color: var(--footer-text);
  font-size: 16px;
}

.site-footer .container{
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 16px;
}

/* --------- Ligne 1 --------- */
.footer-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap; /* passe en deux lignes si manque de place */
}

.footer-left{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 300px;
  flex: 1 1 420px;
}

.footer-copy-hint{
  color: var(--footer-text);
}

.footer-right{
  text-align: right;
  flex: 1 1 320px;
  min-width: 260px;
}

.copyright{
  margin: 0;
}

.link-privacy{
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}
.link-privacy:hover{
  text-decoration: underline;
}

/* --------- Ligne 2 (centrée) --------- */
.footer-bottom{
  text-align: center;
  margin-top: 12px;
}

/* --------- Boutons “pill” --------- */
.btn-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .60rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow:
    0 6px 16px rgba(var(--brand-shadow), .16),
    inset 0 -1px 0 rgba(0,0,0,.06);
  background: var(--brand);
  color: #fff; /* fallback si variables non dispo */
  will-change: transform, box-shadow;
}

/* Texte blanc partout, lisible sur vert + légère ombre */
.btn-pill,
.btn-pill:visited{
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

.btn-pill:hover{
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px rgba(var(--brand-shadow), .22),
    inset 0 -1px 0 rgba(0,0,0,.06);
  filter: brightness(1.04);
}

.btn-pill:active{
  transform: translateY(0);
}

/* Focus clavier accessible */
.btn-pill:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow:
    0 0 0 3px rgba(26,163,74,.35),
    0 6px 16px rgba(var(--brand-shadow), .16),
    inset 0 -1px 0 rgba(0,0,0,.06);
}

/* --------- Spécifiques aux boutons du footer --------- */
.btn-subscribe,
.btn-dashboard{
  /* dégradé doux pour détacher le texte du fond */
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
}

.btn-dashboard{
  min-width: 220px;
}

/* --------- Responsive --------- */
@media (max-width: 780px){
  .footer-right{ text-align: left; }
  .footer-bottom{ margin-top: 16px; }
}

@media (max-width: 520px){
  .btn-dashboard{ width: 100%; }
}