/**
 * Footer Block Styles
 */

/* FIX-FOOTER-STRUCTURE: <footer> is the outer shell (darker or transparent),
   .footer-container is the inner rounded box with padding + background */
.usine-footer {
  color: var(--footer-text-color, #ffffff);
  padding: 2rem var(--section-padding-x, 64px);
  width: 100%;
  box-sizing: border-box;
  background-color: var(--footer-outer-bg, transparent);
}

.footer-container {
  max-width: var(--section-max-width, 1312px);
  margin: 0 auto;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
}

.usine-footer.has-wrapper .footer-container {
  background-color: var(--footer-bg-color, #0a3760);
  border-radius: 0;
  padding: 2rem 3rem 1.5rem;
}

/* Width variants */
.footer-width-filled .footer-container {
  max-width: 100%;
  border-radius: 0;
}

.footer-width-contained .footer-container {
  max-width: var(--section-max-width, 1312px);
}

/* Main horizontal layout: left content flexes, right links stay content-sized. */
.footer-main {
  display: flex;
  justify-content: space-between;
  gap: clamp(3rem, 7vw, 7.5rem);
  align-items: flex-start;
  min-width: 0;
}

.footer-logo-section {
  flex: 1 1 360px;
  min-width: 0;
  max-width: min(100%, 620px);
}

.footer-columns-wrapper {
  flex: 0 1 min(100%, 620px);
  width: min(100%, 620px);
  min-width: 0;
  max-width: min(100%, 620px);
  margin-left: auto;
}

/* Logo — FIX-FOOTER-LOGO-001: logo is now an <a> tag */
.footer-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.5rem;
  text-decoration: none;
  color: inherit;
}

.footer-logo-img {
  display: block;
  height: 52px;
  width: 180px;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: left center;
}

.footer-logo-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--footer-text-color);
}

/* FIX-FOOTER-CTA-PILL: Footer CTA buttons get pill shape */
.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2rem;
}

.footer-actions .btn {
  border-radius: 9999px;
  font-weight: 500;
}

/* Subtitle */
.footer-subtitle {
  color: var(--footer-text-color);
  opacity: 1;
  margin: 0 0 1rem;
  white-space: pre-line;
}

.footer-meta {
  color: var(--footer-text-color);
  opacity: 0.9;
  white-space: pre-line;
  margin-bottom: 1rem;
}

/* Newsletter */
.footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(100%, 383px);
  margin-bottom: 1rem;
}

.footer-newsletter-name,
.footer-newsletter-label {
  margin: 0;
  color: var(--footer-text-color);
}

.footer-newsletter-name {
  opacity: 0.9;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.newsletter-form .form-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 383px;
}

.newsletter-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--footer-text-color);
  font-size: 0.95rem;
}

.newsletter-input::placeholder {
  color: var(--footer-newsletter-placeholder-color, rgba(255, 255, 255, 0.5));
}

/* Contact Info */
/* FIX-EMPTY-CONTACT-001: Hide empty contact section */
.footer-contact:empty {
  display: none;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.contact-icon .icon-img {
  width: 20px;
  height: 20px;
}

.contact-icon .icon--fallback {
  width: 20px;
  height: 20px;
}

.contact-text {
  color: var(--footer-text-color);
  opacity: 0.8;
  font-size: 0.95rem;
}

/* Footer Columns — FIX-FOOTER-COLUMNS: auto-fit for variable column count */
.footer-columns {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem 4rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 1rem;
}

.footer-column {
  flex: 0 1 145px;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

/* FOOTER-CONTACT-COL-WIDTH-001: the contact column carries the address and the
   opening hours, so it gets a slightly wider track than the link columns. */
.footer-columns > .footer-column:last-child {
  grid-column: span 1;
  min-width: 190px;
}

.footer-column-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--footer-text-color);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-link-item {
  margin-bottom: 0.75rem;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--footer-text-color);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
  font-size: 0.95rem;
}

.footer-link:hover {
  opacity: 1;
}

.footer-link-icon {
  flex-shrink: 0;
}

.footer-link.btn-disabled {
  opacity: 0.65;
}

.footer-link-chevron {
  display: none;
}

/* Social Links */
.footer-social {
  text-align: left;
  margin: 1.5rem 0 1.25rem;
  padding: 0;
}

.footer-social-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--footer-text-color);
}

.footer-social-links {
  display: flex;
  justify-content: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-review-stars {
  gap: 2px;
  flex-wrap: nowrap;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-text-color);
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}

.footer-social-link:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.footer-social-link.has-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.footer-social-link .dashicons {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.footer-social-link .social-icon-img,
.footer-social-link .icon--fallback {
  width: 20px;
  height: 20px;
}

.footer-review-star {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.footer-review-star:hover {
  opacity: 1;
  transform: none;
}

.footer-review-star .dashicons,
.footer-review-star .social-icon-img,
.footer-review-star .icon--fallback {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px;
  max-height: 20px;
  object-fit: contain;
}

.footer-bottom-shell {
  width: 100%;
  max-width: var(--section-max-width, 1312px);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.footer-width-filled .footer-bottom-shell {
  max-width: 100%;
}

.footer-width-contained .footer-bottom-shell {
  max-width: var(--section-max-width, 1312px);
}

/* Footer Bottom — render outside the inner shell but aligned to its outer bounds */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.75rem;
  margin-bottom: 0;
  font-size: 0.85rem;
}

/* FIX-FOOTER-DIVIDER: Subtler separator + more spacing */
.footer-divider {
  width: 100%;
  height: var(--footer-divider-width, 1px);
  margin: 1rem 0 0;
  background: var(--footer-divider-color, rgba(255, 255, 255, 0.1));
  border: 0;
}

.footer-copyright {
  color: var(--footer-credit-color, rgba(255, 255, 255, 0.72)) !important;
}

.footer-copyright * {
  color: inherit !important;
}

.footer-credit {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.footer-credit-text {
  font-size: 14px;
  line-height: 1;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-legal-link {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer-legal-link:hover {
  opacity: 1;
}

/* Webiteasy logo in footer copyright */
.footer-webiteasy-link {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.footer-webiteasy-logo {
  height: 20px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  opacity: var(--footer-credit-logo-opacity, 0.72);
  transition: opacity 0.2s;
}

.footer-webiteasy-link:hover .footer-webiteasy-logo {
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .usine-footer {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-inline: var(--section-padding-x, 64px);
  }

  .footer-container,
  .usine-footer.has-wrapper .footer-container {
    padding: 2rem 1.5rem 1.5rem;
  }

  .footer-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-logo-section {
    max-width: none;
  }

  .footer-columns-wrapper {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
  }

  .footer-columns {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .footer-bottom-shell {
    padding: 0 1.5rem;
  }

  .footer-legal-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* ==========================================================================
   FOOTER-LOGO-001
   Le pied de page portait le logo LUXOMED, celui du fabricant de l'appareil,
   là où c'est la marque du site qui doit signer. Le logo JOALLYA le remplace,
   mais il est dessiné en brun sombre pour la pastille blanche de la barre de
   navigation : posé sur le brun du pied de page, il disparaissait.

   Le fichier étant monochrome, un filtre suffit à en tirer une version claire —
   pas de seconde image à produire ni à maintenir, et le pied de page suivra
   automatiquement tout changement de logo dans les réglages.
   ========================================================================== */
.footer-logo-img {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}