/* ============================================================================
   ElectroCAD — Footer v10 (premium refonte 2026-05-02)
   Mobile-first, 4-column desktop, accordion mobile, dark/light auto.
   Scope: .fv10-* (zéro collision avec .ec-footer-* legacy ou Tailwind .footer)
   Branding: rouge Suisse #DC2626, Inter / Instrument Serif / JetBrains Mono.
============================================================================ */

:root {
  --fv10-red: #DC2626;
  --fv10-red-soft: rgba(220, 38, 38, 0.12);
  --fv10-red-line: rgba(220, 38, 38, 0.32);
  --fv10-red-glow: rgba(220, 38, 38, 0.18);
  --fv10-bg-1: #060A14;
  --fv10-bg-2: #0B1220;
  --fv10-surface: rgba(255, 255, 255, 0.025);
  --fv10-surface-hover: rgba(255, 255, 255, 0.06);
  --fv10-border: rgba(255, 255, 255, 0.08);
  --fv10-border-soft: rgba(255, 255, 255, 0.05);
  --fv10-text-1: #F5F7FA;
  --fv10-text-2: rgba(245, 247, 250, 0.72);
  --fv10-text-3: rgba(245, 247, 250, 0.48);
  --fv10-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fv10-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --fv10-serif: 'Instrument Serif', 'Noto Serif', Georgia, serif;
  --fv10-radius: 10px;
  --fv10-radius-sm: 6px;
  --fv10-radius-lg: 14px;
  --fv10-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-theme="light"] {
  --fv10-bg-1: #FAF7F0;
  --fv10-bg-2: #F4EFE3;
  --fv10-surface: rgba(10, 10, 11, 0.025);
  --fv10-surface-hover: rgba(10, 10, 11, 0.05);
  --fv10-border: rgba(10, 10, 11, 0.10);
  --fv10-border-soft: rgba(10, 10, 11, 0.06);
  --fv10-text-1: #0A0A0B;
  --fv10-text-2: rgba(10, 10, 11, 0.70);
  --fv10-text-3: rgba(10, 10, 11, 0.48);
  --fv10-red-soft: rgba(220, 38, 38, 0.08);
  --fv10-red-line: rgba(220, 38, 38, 0.28);
}

/* ----------------------------------------------------------------------------
   Footer shell
---------------------------------------------------------------------------- */
.fv10 {
  position: relative;
  margin-top: 96px;
  padding: 0;
  background: linear-gradient(180deg, var(--fv10-bg-1) 0%, var(--fv10-bg-2) 100%);
  color: var(--fv10-text-2);
  font-family: var(--fv10-sans);
  font-size: 15px;
  line-height: 1.5;
  isolation: isolate;
  overflow: hidden;
  /* iOS safe area */
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

.fv10::before {
  /* Top hairline gradient (rouge Suisse) */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--fv10-red-line) 30%,
    var(--fv10-red-line) 70%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.fv10::after {
  /* Top radial glow rouge subtle */
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 90%);
  height: 240px;
  background: radial-gradient(ellipse at center top,
    var(--fv10-red-glow) 0%,
    transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

[data-theme="light"] .fv10::after { opacity: 0.4; }

.fv10-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 24px 28px;
}

/* ----------------------------------------------------------------------------
   Top grid (4 columns desktop / 2 cols tablet / 1 col mobile)
---------------------------------------------------------------------------- */
.fv10-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 40px;
}

@media (min-width: 640px) {
  .fv10-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
}

@media (min-width: 1024px) {
  .fv10-top {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 56px 48px;
    padding-bottom: 48px;
  }
}

/* ----------------------------------------------------------------------------
   Brand block (logo, tagline, address, newsletter, made-in-CH)
---------------------------------------------------------------------------- */
.fv10-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 420px;
}

.fv10-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--fv10-text-1);
}

.fv10-brand-row:hover { color: var(--fv10-text-1); }

.fv10-brand-row .ec-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.fv10-brand-name {
  font-family: var(--fv10-sans);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  color: var(--fv10-text-1);
}

.fv10-brand-tagline {
  font-family: var(--fv10-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--fv10-text-2);
  margin: 0;
}

.fv10-brand-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--fv10-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--fv10-text-3);
  text-transform: none;
}

.fv10-brand-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fv10-brand-meta-row a {
  color: var(--fv10-text-2);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 180ms var(--fv10-ease), border-color 180ms var(--fv10-ease);
}

.fv10-brand-meta-row a:hover {
  color: var(--fv10-red);
  border-bottom-color: var(--fv10-red-line);
}

.fv10-ch-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--fv10-surface);
  border: 1px solid var(--fv10-border);
  border-radius: var(--fv10-radius-sm);
  font-family: var(--fv10-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fv10-text-2);
  width: fit-content;
}

.fv10-ch-flag svg {
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ----------------------------------------------------------------------------
   Newsletter form
---------------------------------------------------------------------------- */
.fv10-news {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.fv10-news-label {
  font-family: var(--fv10-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fv10-text-3);
}

.fv10-news-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: nowrap;
}

.fv10-news-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  font-family: var(--fv10-sans);
  font-size: 16px; /* >=16px iOS no-zoom */
  color: var(--fv10-text-1);
  background: var(--fv10-surface);
  border: 1px solid var(--fv10-border);
  border-radius: var(--fv10-radius);
  outline: none;
  transition: border-color 180ms var(--fv10-ease), background 180ms var(--fv10-ease), box-shadow 180ms var(--fv10-ease);
}

.fv10-news-input::placeholder {
  color: var(--fv10-text-3);
}

.fv10-news-input:focus-visible {
  border-color: var(--fv10-red-line);
  background: var(--fv10-surface-hover);
  box-shadow: 0 0 0 3px var(--fv10-red-soft);
}

.fv10-news-btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 18px;
  font-family: var(--fv10-sans);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  background: linear-gradient(180deg, #EF4444 0%, #DC2626 70%, #B91C1C 100%);
  border: 1px solid var(--fv10-red);
  border-radius: var(--fv10-radius);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 8px 24px -8px var(--fv10-red-glow);
  transition: transform 160ms var(--fv10-ease), box-shadow 160ms var(--fv10-ease), filter 160ms var(--fv10-ease);
}

.fv10-news-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 12px 28px -8px var(--fv10-red-glow);
}

.fv10-news-btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.fv10-news-btn:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.fv10-news-help {
  font-family: var(--fv10-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--fv10-text-3);
  margin: 0;
}

.fv10-news-status {
  font-family: var(--fv10-mono);
  font-size: 0.74rem;
  margin: 0;
  min-height: 1em;
  color: var(--fv10-text-2);
}

.fv10-news-status[data-state="ok"] { color: #34D399; }
.fv10-news-status[data-state="err"] { color: #FCA5A5; }

/* ----------------------------------------------------------------------------
   Column nav (Produits / Ressources / Entreprise)
---------------------------------------------------------------------------- */
.fv10-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.fv10-col-title {
  font-family: var(--fv10-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fv10-text-3);
  margin: 0;
  padding: 0;
}

.fv10-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fv10-col-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fv10-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  min-height: 28px;
  font-size: 0.92rem;
  color: var(--fv10-text-2);
  text-decoration: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: color 180ms var(--fv10-ease);
}

.fv10-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--fv10-red);
  transition: width 220ms var(--fv10-ease);
}

.fv10-link:hover {
  color: var(--fv10-text-1);
}

.fv10-link:hover::after {
  width: 18px;
}

.fv10-link:focus-visible {
  outline: 2px solid var(--fv10-red);
  outline-offset: 4px;
  border-radius: 2px;
}

.fv10-link-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  font-family: var(--fv10-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fv10-red);
  background: var(--fv10-red-soft);
  border: 1px solid var(--fv10-red-line);
  border-radius: 4px;
}

/* ----------------------------------------------------------------------------
   Trust badges row
---------------------------------------------------------------------------- */
.fv10-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--fv10-border-soft);
  border-bottom: 1px solid var(--fv10-border-soft);
}

.fv10-trust-label {
  width: 100%;
  font-family: var(--fv10-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fv10-text-3);
  margin: 0 0 10px 0;
}

.fv10-trust-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  font-family: var(--fv10-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fv10-text-2);
  background: var(--fv10-surface);
  border: 1px solid var(--fv10-border);
  border-radius: 999px;
  white-space: nowrap;
  transition: color 200ms var(--fv10-ease), background 200ms var(--fv10-ease), border-color 200ms var(--fv10-ease);
}

.fv10-trust-pill:hover {
  color: var(--fv10-red);
  background: var(--fv10-red-soft);
  border-color: var(--fv10-red-line);
}

/* Mobile: scroll-x for badges */
@media (max-width: 639px) {
  .fv10-trust {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .fv10-trust::-webkit-scrollbar { display: none; }
  .fv10-trust-label { flex: 0 0 100%; }
  .fv10-trust-pill { flex: 0 0 auto; }
}

/* ----------------------------------------------------------------------------
   Mobile accordion <details>
---------------------------------------------------------------------------- */
.fv10-accordion {
  border-top: 1px solid var(--fv10-border-soft);
  margin-top: 0;
}

.fv10-accordion-item {
  border-bottom: 1px solid var(--fv10-border-soft);
}

.fv10-accordion-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 4px;
  font-family: var(--fv10-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fv10-text-2);
  cursor: pointer;
  user-select: none;
  min-height: 44px;
}

.fv10-accordion-item summary::-webkit-details-marker { display: none; }

.fv10-accordion-item summary::after {
  content: "";
  width: 12px;
  height: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 220ms var(--fv10-ease);
  flex-shrink: 0;
  margin-right: 4px;
}

.fv10-accordion-item[open] summary {
  color: var(--fv10-text-1);
}

.fv10-accordion-item[open] summary::after {
  transform: rotate(45deg);
}

.fv10-accordion-item summary:hover {
  color: var(--fv10-red);
}

.fv10-accordion-body {
  padding: 4px 4px 20px 4px;
}

.fv10-accordion-body .fv10-col-list {
  gap: 14px;
}

.fv10-accordion-body .fv10-link {
  font-size: 1rem;
  min-height: 32px;
}

/* Hide accordion on tablet+ */
@media (min-width: 640px) {
  .fv10-accordion { display: none; }
}

/* Hide column-grid on mobile (only accordion shown) */
@media (max-width: 639px) {
  .fv10-cols { display: none; }
}

@media (min-width: 640px) {
  .fv10-cols {
    display: contents; /* Let parent grid handle layout */
  }
}

/* ----------------------------------------------------------------------------
   Bottom bar
---------------------------------------------------------------------------- */
.fv10-bottom {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 28px;
  margin-top: 28px;
  border-top: 1px solid var(--fv10-border-soft);
}

@media (min-width: 768px) {
  .fv10-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }
}

.fv10-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.fv10-copy {
  font-family: var(--fv10-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--fv10-text-3);
  margin: 0;
  line-height: 1.6;
}

.fv10-copy strong {
  color: var(--fv10-text-2);
  font-weight: 500;
}

.fv10-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-family: var(--fv10-mono);
  font-size: 0.7rem;
  color: var(--fv10-text-3);
}

.fv10-legal a,
.fv10-legal button {
  color: var(--fv10-text-3);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font: inherit;
  cursor: pointer;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  transition: color 160ms var(--fv10-ease);
}

.fv10-legal a:hover,
.fv10-legal button:hover {
  color: var(--fv10-red);
}

.fv10-legal a:focus-visible,
.fv10-legal button:focus-visible {
  outline: 2px solid var(--fv10-red);
  outline-offset: 4px;
  border-radius: 2px;
}

.fv10-legal-sep {
  color: var(--fv10-text-3);
  opacity: 0.5;
  user-select: none;
}

/* Bottom right: social + theme */
.fv10-bottom-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fv10-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--fv10-text-2);
  background: var(--fv10-surface);
  border: 1px solid var(--fv10-border);
  border-radius: var(--fv10-radius-sm);
  text-decoration: none;
  transition: color 180ms var(--fv10-ease), background 180ms var(--fv10-ease), border-color 180ms var(--fv10-ease), transform 180ms var(--fv10-ease);
}

.fv10-social svg { width: 16px; height: 16px; }

.fv10-social:hover {
  color: var(--fv10-red);
  background: var(--fv10-red-soft);
  border-color: var(--fv10-red-line);
  transform: translateY(-1px);
}

.fv10-social:focus-visible {
  outline: 2px solid var(--fv10-red);
  outline-offset: 2px;
}

.fv10-version {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  font-family: var(--fv10-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--fv10-text-3);
  background: var(--fv10-surface);
  border: 1px solid var(--fv10-border);
  border-radius: 999px;
}

.fv10-version-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34D399;
  margin-right: 6px;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
}

/* ----------------------------------------------------------------------------
   Responsive tweaks
---------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .fv10 { margin-top: 64px; }
  .fv10-inner { padding: 40px 24px 24px; }
  .fv10-top { padding-bottom: 24px; gap: 28px; }
  .fv10-brand { max-width: 100%; }
  .fv10-brand-name { font-size: 1.1rem; }
  .fv10-brand-tagline { font-size: 1rem; }
  .fv10-bottom { padding-top: 20px; margin-top: 20px; }
  .fv10-bottom-right { width: 100%; justify-content: flex-start; }
}

@media (min-width: 1024px) {
  .fv10-inner { padding: 72px 32px 32px; }
}

/* ----------------------------------------------------------------------------
   Reduced motion
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fv10 *,
  .fv10 *::before,
  .fv10 *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .fv10-news-btn:hover,
  .fv10-social:hover { transform: none; }
}

/* ----------------------------------------------------------------------------
   v6 rollback compat (Tailwind .footer default override)
   Quand le footer est dans index.v6-rollback.html (SPA dashboard/admin), il
   conserve la classe .footer initiale de Tailwind. .fv10 prime via spécificité.
---------------------------------------------------------------------------- */
footer.fv10 {
  background: linear-gradient(180deg, var(--fv10-bg-1) 0%, var(--fv10-bg-2) 100%) !important;
  color: var(--fv10-text-2) !important;
  padding: 0 !important;
  border-top: 0 !important;
}

footer.fv10 .fv10-inner * { color: inherit; }