/* ba-footer.css — externalisé de footer.php (cap Dove 21/08/2026) */
#ba-footer *,#ba-footer *::before,#ba-footer *::after{box-sizing:border-box;margin:0;padding:0;}

/* Variables */
#ba-footer{
  --ba-bg:    #2C3539;
  --ba-bg2:   #232C30;
  --ba-bg3:   #1e2a2f;
  --ba-sep:   rgba(255,255,255,0.09);
  --ba-white: #ffffff;
  /* v7.0 (17/08/2026) — VERT ABOLI dans le footer (cap Dove). Tout l'ancien
     accent vert ghost rgba(0,176,68,α) est basculé en CYAN ghost translucide
     (palette v3.1 : action = cyan #0891B2 ; sur fond sombre on eclaircit en
     #38BDF8 pour le contraste WCAG). Seul le « .fr » du logo reste vert :
     c'est la MARQUE (la palette autorise explicitement le vert en accent logo)
     et il doit rester identique au header. */
  --ba-green: #38BDF8; /* legacy : repointe cyan (plus aucun rendu vert hors logo) */
  --ba-cyan:  #38BDF8; /* cyan action eclairci pour le fond footer sombre (WCAG OK) */
  --ba-cyan-txt: #7fd7e8; /* cyan doux : titres SEO, sous-titres, taglines */
  --ba-font:  'DM Sans', sans-serif;
}
#ba-footer{
  background:var(--ba-bg);
  color:var(--ba-white);-webkit-text-fill-color:var(--ba-white);
  font-family:var(--ba-font);font-size:15px;line-height:1.65;
  width:100%;position:relative;
}

/* Inner */
#ba-footer .ba-ft-inner{max-width:1280px;margin:0 auto;padding:0 40px;}

/* Topbar animé */
#ba-footer .ba-ft-topbar{
  height:3px;
  background:linear-gradient(90deg,rgba(56,189,248,0),rgba(56,189,248,.7),rgba(56,189,248,0));
  background-size:200% 100%;animation:ba-shine 3s linear infinite;
}
@keyframes ba-shine{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Grille 5 colonnes */
#ba-footer .ba-ft-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 1fr;
  gap:40px;padding:52px 0 44px;
  border-bottom:1px solid var(--ba-sep);
}

/* COL 1 Brand */
#ba-footer .ba-ft-logo{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;text-decoration:none;}
#ba-footer .ba-ft-logo img{height:44px;width:auto;display:block;}
/* v37 (10/08/2026) — logo officiel INLINE (repere + wordmark Sora), version fond sombre #2C3539. */
#ba-footer .ba-ft-mark{height:40px;width:auto;flex:none;display:block;}
#ba-footer .ba-ft-logo-text{
  font-family:'Sora',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;
}
#ba-footer .ba-ft-logo-text .l-b{color:#ffffff;-webkit-text-fill-color:#ffffff;}
#ba-footer .ba-ft-logo-text .l-a{color:#7fd7e8;-webkit-text-fill-color:#7fd7e8;}
#ba-footer .ba-ft-logo-text .l-fr{color:#59d98a;-webkit-text-fill-color:#59d98a;font-weight:700;}

/* Badge Marketplace Française */
#ba-footer .ba-fr-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(56,189,248,0.08);
  border:1px solid rgba(56,189,248,0.28);
  border-radius:8px;padding:7px 12px;
  margin-bottom:14px;
}
#ba-footer .ba-fr-badge-text{
  font-family:'Sora',sans-serif;font-size:11px;font-weight:700;
  color:#ffffff;-webkit-text-fill-color:#ffffff;
  text-transform:uppercase;letter-spacing:.8px;line-height:1.3;
}
#ba-footer .ba-fr-badge-text strong{
  display:block;font-size:13px;letter-spacing:.3px;
  color:#ffffff;-webkit-text-fill-color:#ffffff;
}
#ba-footer .ba-fr-flag{font-size:22px;line-height:1;-webkit-text-fill-color:initial;}

#ba-footer .ba-ft-tagline{
  font-size:12px;font-weight:700;display:block;margin-bottom:8px;
  color:rgba(56,189,248,0.85);-webkit-text-fill-color:rgba(56,189,248,0.85);
}
#ba-footer .ba-ft-desc{
  font-size:13px;color:var(--ba-white);-webkit-text-fill-color:var(--ba-white);
  line-height:1.75;margin-bottom:20px;max-width:260px;opacity:.82;
}
#ba-footer .ba-ft-email{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;
  color:var(--ba-white);-webkit-text-fill-color:var(--ba-white);
  text-decoration:none;padding:9px 14px;
  background:rgba(56,189,248,0.08);border:1px solid rgba(56,189,248,0.25);
  border-radius:10px;transition:background .2s,border-color .2s;
}
#ba-footer .ba-ft-email:hover{
  background:rgba(56,189,248,0.15);border-color:rgba(56,189,248,0.4);
  color:var(--ba-white);-webkit-text-fill-color:var(--ba-white);
}
#ba-footer .ba-ft-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:rgba(56,189,248,0.75);box-shadow:0 0 7px rgba(56,189,248,0.4);
  animation:ba-pulse 2s infinite;
}
@keyframes ba-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.8);}}

/* v4.8 — Titres colonnes principales (h4 → h3) */
#ba-footer .ba-ft-col h3{
  font-family:'Sora',sans-serif;font-size:11px;font-weight:700;
  color:var(--ba-white);-webkit-text-fill-color:var(--ba-white);
  text-transform:uppercase;letter-spacing:1.4px;
  margin-bottom:18px;padding-bottom:9px;
  border-bottom:2px solid rgba(56,189,248,0.5);display:inline-block;
}

/* Listes liens */
#ba-footer .ba-ft-list{list-style:none;display:flex;flex-direction:column;gap:9px;}
#ba-footer .ba-ft-list li a{
  font-size:13px;
  color:var(--ba-white);-webkit-text-fill-color:var(--ba-white);
  text-decoration:none;opacity:.82;
  display:inline-flex;align-items:center;gap:7px;transition:opacity .15s;
}
#ba-footer .ba-ft-list li a::before{
  content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
  background:rgba(56,189,248,0.55);flex-shrink:0;
}
#ba-footer .ba-ft-list li a:hover{opacity:1;}
/* v5.2 (03/08/2026) — bouton "cookies" rendu comme un lien de liste.
   /politique-de-cookies/ = 404 (mesuré curl 03/08) : la page n'existe pas.
   Le vrai mécanisme est baGdprReset() (déjà appelé par la barre du bas).
   IONOS-safe : onclick inline, zéro addEventListener. */
#ba-footer .ba-ft-list li button.ba-ft-cookiebtn{
  font-family:var(--ba-font);font-size:13px;line-height:1.65;
  color:var(--ba-white);-webkit-text-fill-color:var(--ba-white);
  background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;
  opacity:.82;display:inline-flex;align-items:center;gap:7px;transition:opacity .15s;
}
#ba-footer .ba-ft-list li button.ba-ft-cookiebtn::before{
  content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
  background:rgba(56,189,248,0.55);flex-shrink:0;
}
#ba-footer .ba-ft-list li button.ba-ft-cookiebtn:hover{opacity:1;}
#ba-footer .ba-ft-list-sub{
  font-family:'Sora',sans-serif;font-size:10px;font-weight:700;
  color:rgba(56,189,248,0.7);-webkit-text-fill-color:rgba(56,189,248,0.7);
  text-transform:uppercase;letter-spacing:1.1px;
  margin:16px 0 10px;border-top:1px solid rgba(255,255,255,0.07);
  padding-top:12px;display:block;
}

/* ══════════════════════════════════════
   TRUST BAR — Paiement & Livraison
══════════════════════════════════════ */
#ba-footer .ba-ft-trust{
  background:var(--ba-bg3);
  border-bottom:1px solid var(--ba-sep);
}
#ba-footer .ba-ft-trust-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:20px;padding:20px 0;
}
#ba-footer .ba-ft-trust-col{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
#ba-footer .ba-trust-label{
  font-family:'Sora',sans-serif;font-size:10px;font-weight:700;
  color:rgba(255,255,255,0.5);-webkit-text-fill-color:rgba(255,255,255,0.5);
  text-transform:uppercase;letter-spacing:1.3px;white-space:nowrap;
}
#ba-footer .ba-trust-sep{width:1px;height:26px;background:rgba(255,255,255,0.1);flex-shrink:0;}

/* Paiement */
#ba-footer .ba-pay-logos{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
#ba-footer .ba-pay-badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:26px;padding:0 9px;border-radius:5px;
  font-size:12px;font-weight:800;letter-spacing:.3px;
  border:1px solid rgba(255,255,255,0.15);white-space:nowrap;
}
#ba-footer .ba-pay-stripe{background:#635bff;border-color:#635bff;color:#fff;-webkit-text-fill-color:#fff;font-family:'Sora',sans-serif;font-size:11px;letter-spacing:.5px;}
#ba-footer .ba-pay-visa{background:#1a1f71;border-color:rgba(255,255,255,0.2);color:#fff;-webkit-text-fill-color:#fff;font-style:italic;font-size:14px;font-weight:900;letter-spacing:-.5px;padding:0 7px;}
#ba-footer .ba-pay-mc{display:inline-flex;align-items:center;height:26px;padding:0 5px;background:#252525;border:1px solid rgba(255,255,255,0.15);border-radius:5px;}
#ba-footer .ba-mc-r,#ba-footer .ba-mc-y{width:16px;height:16px;border-radius:50%;display:inline-block;}
#ba-footer .ba-mc-r{background:#eb001b;margin-right:-7px;position:relative;z-index:1;}
#ba-footer .ba-mc-y{background:#f79e1b;}
#ba-footer .ba-pay-cb{background:#003189;border-color:rgba(255,255,255,0.2);color:#fff;-webkit-text-fill-color:#fff;font-size:11px;font-weight:900;letter-spacing:1px;}

/* Livraison */
#ba-footer .ba-ship-logos{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
#ba-footer .ba-ship-badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:26px;padding:0 10px;border-radius:5px;
  font-size:11px;font-weight:800;letter-spacing:.2px;
  white-space:nowrap;border:1px solid rgba(255,255,255,0.1);
}
#ba-footer .ba-ship-colissimo{background:#f9c301;border-color:#f9c301;color:#1b1b1b;-webkit-text-fill-color:#1b1b1b;}
#ba-footer .ba-ship-relay{background:#e2001a;border-color:#e2001a;color:#fff;-webkit-text-fill-color:#fff;}
#ba-footer .ba-ship-chrono{background:#7b1fa2;border-color:#7b1fa2;color:#fff;-webkit-text-fill-color:#fff;}
#ba-footer .ba-ship-hand{background:rgba(56,189,248,0.1);border-color:rgba(56,189,248,0.3);color:rgba(56,189,248,0.9);-webkit-text-fill-color:rgba(56,189,248,0.9);}

/* Barre bas */
#ba-footer .ba-ft-bar{background:var(--ba-bg2);}
#ba-footer .ba-ft-editeur{max-width:1280px;margin:0 auto;padding:14px 40px 0;font-size:12px;line-height:1.5;color:rgba(255,255,255,0.52);-webkit-text-fill-color:rgba(255,255,255,0.52);}
#ba-footer .ba-ft-bar-inner{
  max-width:1280px;margin:0 auto;padding:0 40px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;min-height:56px;
}
#ba-footer .ba-ft-copy{font-size:13px;font-weight:500;color:var(--ba-white);-webkit-text-fill-color:var(--ba-white);}
#ba-footer .ba-heart{color:rgba(56,189,248,0.8);-webkit-text-fill-color:rgba(56,189,248,0.8);}
#ba-footer .ba-ft-legal{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
#ba-footer .ba-ft-legal a,
#ba-footer .ba-ft-legal button{
  font-size:12px;font-weight:600;font-family:var(--ba-font);
  color:var(--ba-cyan);-webkit-text-fill-color:var(--ba-cyan);
  cursor:pointer;padding:0;background:none;border:none;letter-spacing:.2px;
  transition:opacity .15s;
}
#ba-footer .ba-ft-legal a:hover,
#ba-footer .ba-ft-legal button:hover{opacity:.7;}
#ba-footer .ba-dot-sep{color:rgba(255,255,255,0.25);-webkit-text-fill-color:rgba(255,255,255,0.25);font-size:16px;line-height:1;}
#ba-footer .ba-rgpd{
  font-size:11px;font-weight:700;
  color:var(--ba-cyan);-webkit-text-fill-color:var(--ba-cyan);
  background:rgba(56,189,248,0.08);border:1px solid rgba(56,189,248,0.28);
  border-radius:5px;padding:3px 10px;letter-spacing:.5px;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:1200px){
  /* 6 blocs -> 3 colonnes = 2 rangées pleines (cap Dove 20/08/2026, suite passage 6 col).
     L'ancien hack .ba-ft-col:last-child{grid-column:1/-1} (pensé pour 5 blocs) créait
     une ligne orpheline avec 6 blocs -> retiré ici. */
  #ba-footer .ba-ft-grid{grid-template-columns:1.4fr 1fr 1fr;gap:32px;}
}
@media(max-width:1024px){
  #ba-footer .ba-ft-grid{grid-template-columns:1fr 1fr;gap:32px;padding:40px 0 32px;}
  #ba-footer .ba-ft-col:last-child{grid-column:auto;}
  #ba-footer .ba-ft-inner,#ba-footer .ba-ft-bar-inner{padding:0 24px;}
  #ba-footer .ba-ft-trust-inner{flex-direction:column;align-items:flex-start;}
  #ba-footer .ba-ft-desc{max-width:100%;}
}

/* ════════════════════════════════════════════════
   v7.0 — RWD MOBILE (refonte 17/08/2026) — couvre TOUS les formats
   ─ Anti-débordement global (min-width:0) sur tout le footer
   ─ ≤768 (tablette portrait / phablet) : flow magazine 2 colonnes
     (column-count + break-inside:avoid → aucun gros vide, listes jamais coupées)
   ─ ≤560 (téléphones standard 360→430px : SE2/12/13/14/15, Pro Max…) :
     COLONNE UNIQUE propre, plus de 2-col cramponnées, cibles ≥44px
   ─ ≤380 (très petits : iPhone SE 320) : idem 1 col, espacements resserrés
═══════════════════════════════════════════════════ */
@media(max-width:768px){
  #ba-footer, #ba-footer *{
    min-width:0 !important;
    box-sizing:border-box !important;
    max-width:100%;
  }
  /* anti-débordement horizontal quel que soit le contenu long (URLs, chips) */
  #ba-footer{overflow-x:hidden;padding-bottom:calc(64px + env(safe-area-inset-bottom,0));} /* reserve bottom-nav SUR le footer (sombre) -> plus de beige sous le footer + contenu au-dessus de la barre (cap Dove 03/09) */ /* pb : redondant retire (cap Dove 03/09) — le body a deja padding-bottom:64px (ba-header.css) pour la bottom nav. Double compensation = grand vide beige sous le footer. */
  #ba-footer .ba-ft-list li a{overflow-wrap:anywhere;word-break:break-word;}
  #ba-footer .ba-ft-inner,#ba-footer .ba-ft-bar-inner{padding:0 16px;}

  /* Flow magazine 2 colonnes — pas de gros vides, colonnes jamais coupées */
  #ba-footer .ba-ft-grid{
    display:block;
    column-count:2;
    column-gap:18px;
    padding:32px 0 26px;
    grid-template-columns:none;
    gap:0;
  }
  #ba-footer .ba-ft-col{
    break-inside:avoid;
    page-break-inside:avoid;
    -webkit-column-break-inside:avoid;
    margin-bottom:24px;
    display:block;
  }
  /* Brand pleine largeur en haut, centré */
  #ba-footer .ba-ft-col:first-child{
    column-span:all;
    -webkit-column-span:all;
    margin-bottom:28px;
    text-align:center;
  }
  #ba-footer .ba-ft-col:first-child .ba-ft-logo,
  #ba-footer .ba-ft-col:first-child .ba-fr-badge,
  #ba-footer .ba-ft-col:first-child .ba-ft-email{
    margin-left:auto;margin-right:auto;
  }
  #ba-footer .ba-ft-col:first-child .ba-ft-desc{
    max-width:100%;margin-left:auto;margin-right:auto;
  }

  /* Centrage trust bar + barre du bas */
  #ba-footer .ba-ft-trust-inner{
    flex-direction:column;
    align-items:center !important;
    text-align:center;
    gap:18px;
  }
  #ba-footer .ba-ft-trust-col{justify-content:center;}
  #ba-footer .ba-ft-bar-inner{
    flex-direction:column;
    align-items:center !important;
    text-align:center;
    padding-top:16px;
    padding-bottom:16px;
    gap:10px;
  }
  #ba-footer .ba-ft-legal{justify-content:center;}

  /* Cible tactile confortable ≥44px (recommandation Apple/WCAG 2.5.5) */
  #ba-footer .ba-ft-list li a,
  #ba-footer .ba-ft-list li button.ba-ft-cookiebtn{
    min-height:32px;padding:3px 0;justify-content:center;
  }
}

/* ── Téléphones standard : COLONNE UNIQUE (plus lisible que 2 col serrées) ── */
@media(max-width:560px){
  #ba-footer .ba-ft-grid{
    column-count:1;
    padding:28px 0 22px;
  }
  /* cap Dove 22/08/2026 : en 1 colonne les listes sont centrees, mais les <h3>
     (display:inline-block) restaient colles a gauche avec leur lisere -> footer
     mal aligne en mobile. On centre la colonne : le h3 inline-block et son lisere
     se centrent avec les listes. Coherent avec la marque centree en haut. */
  #ba-footer .ba-ft-col{margin-bottom:22px;text-align:center;}
  #ba-footer .ba-ft-col h3{margin-bottom:14px;}
  /* listes centrées cohérentes avec la marque centrée */
  #ba-footer .ba-ft-list{align-items:center;}
  #ba-footer .ba-ft-list-sub{text-align:center;}
  #ba-footer .ba-ft-editeur{padding-left:16px;padding-right:16px;text-align:center;}
  #ba-footer .ba-ft-legal{gap:12px 14px;}
  #ba-footer .ba-ft-trust-col{gap:10px;}
}

/* ── Très petits écrans (iPhone SE 320px) : espacements resserrés ── */
@media(max-width:380px){
  #ba-footer .ba-ft-inner,#ba-footer .ba-ft-bar-inner{padding:0 12px;}
  #ba-footer .ba-ft-logo-text{font-size:20px;}
}

/* ── iOS : empêche le rebond (rubber-band) qui laisse voir un vide beige sous la page ──
   Le vide n'apparaît QUE sur iOS Safari réel (pas dans Chrome responsive) = overscroll.
   overscroll-behavior-y:none stoppe ce rebond. (cap Dove 03/09/2026) */
html{overscroll-behavior-y:none}
body{overscroll-behavior-y:none}

/* ── Bas du footer : centré + empilé sur mobile (fini le décalage/coupure, cap Dove 03/09) ── */
@media(max-width:560px){
  #ba-footer .ba-ft-bar-inner{flex-direction:column;justify-content:center;text-align:center;gap:10px;padding:10px 16px 6px}
  #ba-footer .ba-ft-copy{white-space:normal;line-height:1.55}
  #ba-footer .ba-ft-legal{justify-content:center;gap:12px}
  #ba-footer .ba-ft-editeur{text-align:center;padding:14px 16px 0}
}

/* iOS : fond de <html> assorti au footer (sombre) -> l'overscroll/rebond sous le footer
   ne montre plus de beige (le body beige couvre html normalement ; html sombre = seulement
   visible dans la zone de rebond au bas de page). cap Dove 03/09/2026 */
html{background:#2C3539;overscroll-behavior-y:none;min-height:100%;}

/* FOOTER COLLANT : la page remplit toujours l'ecran -> le footer descend en bas
   meme sur pages courtes ET quand la barre d'adresse Chrome iOS se retracte au scroll
   (fini le beige sous le footer sur Chrome iOS, deja OK sur Safari). cap Dove 03/09/2026 */
@media(max-width:768px){
  body{display:flex;flex-direction:column;min-height:100dvh}
  #bav10{flex:1 0 auto}
  #ba-footer{flex-shrink:0}
}