/*
 * Footer V3.1 — Costume Privé Paris
 * Fichier CSS plat compilé depuis homepage-react-prototype-v3/components/Footer.tsx
 * Mobile-first, min-width queries uniquement.
 * Préfixe fv3- pour zéro conflit Bootstrap / Warehouse.
 * Tokens alignés avec tailwind.config.ts et design-system/tokens.css.
 *
 * Cible visuelle : fond #142031 (--fv3-navy-dark), texte cream/70, accents gold-light au hover.
 * Poids cible : < 5 KB brut (< 3 KB gzip).
 *
 * SPÉCIFICITÉ v3.1.1 — résolution conflits Bootstrap 4 / Warehouse
 * ─────────────────────────────────────────────────────────────────
 * Stratégie : tous les sélecteurs internes sont préfixés par #fv3-footer
 * (spécificité ID 100 + class 010 = 110).
 * !important réservé aux propriétés confirmées écrasées par le thème :
 *   - color sur les <a> (Bootstrap: a { color: #777 })
 *   - text-decoration (Bootstrap: underline)
 *   - padding / margin (resets Bootstrap)
 *   - background-color sur boutons et fond footer
 */

/* ============================================================
   0. TOKENS LOCAUX
   ============================================================ */
:root {
  --fv3-navy-dark:  #142031;    /* bg-navy-dark — restauré Brazo 5/05 */
  --fv3-cream:      #f8f6f2;    /* text-cream */
  --fv3-gold:       #a17738;    /* hover bg social */
  --fv3-gold-light: #d4b88a;    /* hover text liens */
  --fv3-muted-fg:   #6b6b6b;
  --fv3-border-sub: rgba(255, 255, 255, 0.08);   /* border-white/[0.08] */
  --fv3-border-soc: rgba(255, 255, 255, 0.15);   /* border-white/15 social */
  --fv3-text-body:  rgba(248, 246, 242, 0.70);   /* cream/70 */
  --fv3-text-dim:   rgba(248, 246, 242, 0.60);   /* cream/60 tagline */
  --fv3-text-copy:  rgba(248, 246, 242, 0.50);   /* cream/50 copyright */
  --fv3-font-head:  'Josefin Sans', 'Helvetica Neue', sans-serif;
  --fv3-font-body:  'Raleway', system-ui, sans-serif;
  --fv3-ease-cpp:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --fv3-container-max: 1440px;
  --fv3-container-pad: 20px;  /* 375px */
}

/* ============================================================
   1. SUPPRESSION FOOTER WAREHOUSE / ELEMENTOR PAR DÉFAUT
      (conserve le pattern de footer-1.tpl pour compatibilité)
   ============================================================ */

/* Hooks conteneur — masqué visuellement, hooks PS vivants */
#fv3-footer-hooks-container {
  display: none !important;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Masquer l'ancien footer custom (footer-1.tpl) s'il subsiste — SANS toucher au wrapper Elementor
   qui contient notre fv3-footer V3 (id 5170101) */
#cp-custom-footer,
#footer-container-main,
#footer-copyrights,
#footer .footer-container {
  display: none !important;
}

/* Le wrapper Elementor du nouveau footer DOIT rester visible */
#footer .elementor,
#footer .elementor-section-wrap,
#footer .elementor.elementor-5170101,
#footer .elementor-section,
#footer .elementor-container,
#footer .elementor-row,
#footer .elementor-column,
#footer .elementor-column-wrap,
#footer .elementor-widget-wrap,
#footer .elementor-widget,
#footer .elementor-widget-container {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 1px !important;
  flex: 1 1 100% !important;
}

/* Réinitialiser les pseudo-éléments Warehouse sur #footer */
#footer::before,
#footer::after {
  display: none !important;
  content: none !important;
}

/* ============================================================
   2. CONTENEUR RACINE FOOTER
   ============================================================ */
#fv3-footer {
  background: var(--fv3-navy-dark) !important;
  background-color: var(--fv3-navy-dark) !important;
  color: var(--fv3-text-body) !important;
  font-family: var(--fv3-font-body);
  font-size: 14px;       /* text-sm = 14px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: 64px !important;      /* py-16 mobile réduit */
  padding-bottom: 24px !important; /* pb-6 */
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Reset box-sizing dans le footer */
#fv3-footer * {
  box-sizing: border-box !important;
}

/* Container interne — centré, max 1440px, padding mobile-first */
#fv3-footer .fv3-container {
  width: 100%;
  max-width: var(--fv3-container-max);
  margin-inline: auto;
  padding-inline: var(--fv3-container-pad);
  box-sizing: border-box;
}

/* ============================================================
   3. GRILLE PRINCIPALE (4 colonnes desktop, empilée mobile)
   ============================================================ */

/* Mobile : une colonne, empilé */
#fv3-footer .fv3-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;                 /* gap-8 = 32px mobile */
  margin: 0 !important;
  padding: 0 !important;
}

/* pb-12 + border-b border-white/[0.08] — séparateur avant copyright */
#fv3-footer .fv3-pb-grid {
  padding-bottom: 48px !important;
  padding-top: 0 !important;
  padding-inline: 0 !important;
  border-bottom: 1px solid var(--fv3-border-sub);
  margin: 0 !important;
}

/* ============================================================
   4. COLONNES
   ============================================================ */

#fv3-footer .fv3-col {
  /* Rien de spécifique mobile — layout naturel */
  padding: 0 !important;
  margin: 0 !important;
}

/* ---- BUG-E FIX — Logo footer invisible (navy on navy) ---- */
/* SVG logo contient des couleurs sombres (#1a1a1a/#142031) sur fond navy-dark → invisible.
   filter: brightness(0) invert(1) convertit en blanc pur. */
#fv3-footer .fv3-brand-logo img {
  filter: brightness(0) invert(1) !important;
  display: block !important;
  max-width: 160px;
  height: auto;
  margin-bottom: 12px !important;
}

/* ---- Col 1 : Marque ---- */
#fv3-footer .fv3-brand-name {
  font-family: var(--fv3-font-head);
  font-size: 24px;         /* text-2xl */
  font-weight: 500;          /* font-medium */
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;   /* mb-2 */
  padding: 0 !important;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

#fv3-footer .fv3-brand-tagline {
  color: var(--fv3-text-dim) !important; /* cream/60 */
  line-height: 1.65;
  max-width: 32ch;           /* max-w-[32ch] */
  margin: 0 0 16px 0 !important;     /* mb-4 */
  padding: 0 !important;
  font-size: 14px;
}

/* ---- Titres de colonnes — eyebrow style ---- */
#fv3-footer .fv3-col-heading {
  font-family: var(--fv3-font-body);
  font-size: 12px;        /* text-xs */
  font-weight: 600;          /* font-semibold */
  text-transform: uppercase;
  letter-spacing: 0.18em;    /* tracking-eyebrow */
  color: #ffffff !important;
  margin: 0 0 20px 0 !important;  /* mb-5 */
  padding: 0 !important;
  border: none !important;
}

/* ---- Listes de liens ---- */
#fv3-footer .fv3-link-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#fv3-footer .fv3-link-list li {
  margin-bottom: 10px !important; /* space-y-2.5 ≈ 10px */
  padding: 0 !important;
  list-style: none !important;
}

#fv3-footer .fv3-link-list li:last-child {
  margin-bottom: 0 !important;
}

#fv3-footer .fv3-link {
  color: var(--fv3-text-body) !important; /* cream/70 */
  text-decoration: none !important;
  transition: color 200ms var(--fv3-ease-cpp);
  display: inline-block !important;
  /* Touch target minimum 44px via padding-block */
  padding-block: 1.6px !important;
  padding-inline: 0 !important;
  background-color: transparent !important;
  font-family: var(--fv3-font-body);
  font-size: 14px;
  line-height: 1.6;
}

#fv3-footer .fv3-link:hover,
#fv3-footer .fv3-link:focus-visible {
  color: var(--fv3-gold-light) !important;
  text-decoration: none !important;
  background-color: transparent !important;
  outline: none;
}

#fv3-footer .fv3-link:focus-visible {
  outline: 2px solid var(--fv3-gold-light) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   5. ICÔNES SOCIALES
   ============================================================ */
#fv3-footer .fv3-social-row {
  display: flex;
  gap: 12px;              /* gap-3 */
  flex-wrap: wrap;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#fv3-footer .fv3-social-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;            /* w-11 = 44px — touch target */
  height: 44px;           /* h-11 = 44px */
  border: 1px solid var(--fv3-border-soc) !important;
  border-radius: 50%;
  color: var(--fv3-text-body) !important;
  text-decoration: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background-color 200ms var(--fv3-ease-cpp),
              border-color 200ms var(--fv3-ease-cpp),
              color 200ms var(--fv3-ease-cpp);
  flex-shrink: 0;
  cursor: pointer;
}

#fv3-footer .fv3-social-btn:hover,
#fv3-footer .fv3-social-btn:focus-visible {
  background-color: var(--fv3-gold) !important;
  border-color: var(--fv3-gold) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  outline: none;
}

#fv3-footer .fv3-social-btn:focus-visible {
  outline: 2px solid var(--fv3-gold-light) !important;
  outline-offset: 2px;
}

#fv3-footer .fv3-social-btn svg {
  pointer-events: none;
  display: block;
  flex-shrink: 0;
}

/* ============================================================
   6. BARRE COPYRIGHT
   ============================================================ */
#fv3-footer .fv3-copyright-bar {
  display: flex;
  flex-direction: column;    /* Mobile : empilé */
  gap: 8px;
  padding-top: 24px !important;    /* pt-6 */
  padding-bottom: 0 !important;
  padding-inline: 0 !important;
  margin: 0 !important;
  font-size: 12px;        /* text-xs */
  color: var(--fv3-text-copy) !important; /* cream/50 */
}

#fv3-footer .fv3-copyright-left,
#fv3-footer .fv3-copyright-right {
  /* Mobile : centré optionnel — on laisse align start pour lisibilité */
  color: var(--fv3-text-copy) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   7. RESPONSIVE — min-width queries uniquement (mobile-first)
   ============================================================ */

/* Tablet portrait : 2 colonnes (grid auto) */
@media (min-width: 640px) {
  #fv3-footer .fv3-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
  }

  #fv3-footer .fv3-col--brand {
    grid-column: 1 / -1;   /* Col marque pleine largeur sur tablet */
  }

  :root {
    --fv3-container-pad: 32px;
  }
}

/* Tablet landscape / laptop ≥ 768px */
@media (min-width: 768px) {
  #fv3-footer {
    padding-top: 64px !important;
    padding-bottom: 24px !important;
  }

  #fv3-footer .fv3-grid {
    gap: 32px 48px;
  }

  #fv3-footer .fv3-copyright-bar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
}

/* Desktop ≥ 1024px : grid 5 colonnes [1.4fr_1fr_1fr_1fr_1fr] — BUG-D FIX */
/* La colonne Brand + 4 colonnes dynamiques = 5 enfants → grid-template-columns à 5 */
@media (min-width: 1024px) {
  #fv3-footer {
    padding-top: 64px !important;     /* py-16 = 64px */
  }

  #fv3-footer .fv3-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 32px;             /* légèrement réduit pour tenir sur 5 colonnes */
  }

  /* Col marque : redevient col normale (1 sur 5) */
  #fv3-footer .fv3-col--brand {
    grid-column: auto;
  }

  #fv3-footer .fv3-pb-grid {
    padding-bottom: 48px !important;  /* pb-12 */
  }

  :root {
    --fv3-container-pad: 40px;
  }
}

/* Tablet landscape 768-1023px : 2 colonnes avec brand pleine largeur */
/* (déjà géré par la règle 640px — brand = 1/-1, reste 2 col) */

/* Wide desktop ≥ 1280px — gap légèrement agrandi si l'espace le permet */
@media (min-width: 1280px) {
  #fv3-footer .fv3-grid {
    gap: 40px;
  }
}

/* Ultra-wide ≥ 1440px — plus d'espace disponible */
@media (min-width: 1440px) {
  #fv3-footer .fv3-grid {
    gap: 48px;
  }
}

/* =====================================================
   FIX 11/05/2026 — Wrappers Elementor à 0×0
   Le footer V3 est wrappé par 6 niveaux Elementor qui ne se dimensionnent pas
   sans JS Elementor chargé. On force width: 100% pour qu'ils s'étirent.
   ===================================================== */
.elementor-section-wrap,
.elementor.elementor-5170101,
.elementor.elementor-5170101 .elementor-section,
.elementor.elementor-5170101 .elementor-container,
.elementor.elementor-5170101 .elementor-row,
.elementor.elementor-5170101 .elementor-column,
.elementor.elementor-5170101 .elementor-column-wrap,
.elementor.elementor-5170101 .elementor-widget-wrap,
.elementor.elementor-5170101 .elementor-widget,
.elementor.elementor-5170101 .elementor-widget-container {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  flex: 1 1 100% !important;
}

#footer {
  width: 100% !important;
  display: block !important;
}

#fv3-footer.fv3-footer {
  width: 100% !important;
  display: block !important;
  min-height: 200px;
}

/* ——— SPRINT 4.3e CYCLE 5 (12/05) — Fix tagline footer alignement ———
   Bug : custom.css contient `#footer .elementor-widget-container p { text-align: center }`
   qui force tagline `.fv3-brand-tagline` (et tout autre p du footer) à center.
   User : "le logo qui est présent mais pas aligné avec le texte de gauche".
   Fix : force text-align: left sur toute la colonne brand. */
#fv3-footer .fv3-col--brand,
#fv3-footer .fv3-col--brand p,
#fv3-footer .fv3-brand-tagline,
#fv3-footer .fv3-brand-name,
#fv3-footer .fv3-social-row {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* ——— SPRINT 4.3i CYCLE 5 (12/05) — ISO HOME alignements/espacements ———
   Mesures DOM home vs /guides @ 1720 — 5 différences identifiées :
   1. container padding L/R : home 20px / fv3 40px → align 20px
   2. grid gap : home 40px / fv3 48px → align 40px
   3. H4 lineHeight : home 16px (1.33) / fv3 14.4px (1.2) → align 1.33
   4. fv3-col li margin-bottom : home Tailwind space-y-2.5 = 10px (équivalent) — déjà OK
   5. inner container x : home 135 / fv3 133 → ~égal (delta 2px)
   ——————————————————————————————————————————————————————— */
@media (min-width: 1024px) {
  #fv3-footer .fv3-container {
    padding-inline: 20px !important;
  }
  #fv3-footer .fv3-grid {
    gap: 40px !important;
  }
}
#fv3-footer .fv3-col-heading {
  line-height: 1.33 !important;
}
#fv3-footer .fv3-col li {
  margin-bottom: 10px !important;
  line-height: 1.43 !important;
}

/* Sprint 4.3j — Grid template 5fr→4fr (col 5 était vide après migration) */
@media (min-width: 1024px) {
  #fv3-footer .fv3-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
  }
}