/* footer.css - Ventabren.info */

.vi-footer {
  background: #2b2620;
  color: #d9d0c3;
  position: relative;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

.vi-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(182,139,82,.5), transparent);
}

.vi-footer-top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 46px 30px 14px;
  display: grid;
  grid-template-columns: 1.6fr 1.15fr 0.8fr 1.15fr;
  gap: 40px;
}

/* Placement explicite des 4 colonnes sur la ligne 1 de la grille.
   Nécessaire depuis l'ajout du filigrane ci-dessous : sans ça, le
   navigateur repousse les colonnes sur une 2e ligne pour lui faire
   de la place (c'est ce qui avait "tout décalé" la première fois).
   Basé sur l'ordre réel des enfants de .vi-footer-top : 1) l'image
   du filigrane, 2) la colonne de marque, 3) Navigation,
   4) Restez informé, 5) Légal & contact. */
.vi-footer-top > *:nth-child(2) { grid-column: 1; grid-row: 1; }
.vi-footer-top > *:nth-child(3) { grid-column: 2; grid-row: 1; }
.vi-footer-top > *:nth-child(4) { grid-column: 3; grid-row: 1; }
.vi-footer-top > *:nth-child(5) { grid-column: 4; grid-row: 1; }

/* Filigrane silhouette du village — aligné à la verticale de la
   colonne "Restez informé" (sous le formulaire newsletter), sur la
   même ligne que "Projet indépendant" (bas de la ligne 1, qui
   correspond au bas de la colonne de marque). Taille fixe (hauteur
   115px, largeur auto) conservée de la tentative précédente.
   Le placement dans la grille est désormais porté par le conteneur
   .vi-footer-filigrane-wrap (nécessaire pour positionner le tooltip
   au survol) plutôt que par l'image elle-même. */
.vi-footer-filigrane-wrap {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  align-self: end;
  position: relative;
  width: fit-content;
  height: 115px;
}

.vi-footer-filigrane {
  display: block;
  width: auto;
  height: 115px;
  max-width: none;
  object-fit: contain;
  object-position: left bottom;
  opacity: 0.9;
  pointer-events: none;
}

/* Tooltip du filigrane — apparaît juste au-dessus du dessin au survol */
.vi-footer-filigrane-tooltip {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(43, 38, 32, 0.92);
  border: 1px solid rgba(182, 139, 82, 0.4);
  color: #d9d0c3;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.vi-footer-filigrane-wrap:hover .vi-footer-filigrane-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.vi-footer-col h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 19px;
  color: #b68b52;
  margin: 0 0 18px;
  letter-spacing: .5px;
  white-space: nowrap;
}

.vi-footer-logo {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #f2ede3;
  margin-bottom: 14px;
}

.vi-footer-mip-logo {
  display: block;
  width: 200px;
  height: auto;
  margin: 0 0 18px;
}

.vi-footer-logo-dot {
  color: #b68b52;
  font-weight: 400;
}

.vi-footer-slogan {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: #b6ac9c;
  margin: 0 0 26px;
  max-width: 300px;
}

.vi-footer-follow {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8f8677;
  margin-bottom: 10px;
}

.vi-footer-social {
  display: flex;
  gap: 12px;
}

.vi-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(182,139,82,.4);
  color: #d9d0c3;
  transition: all .25s ease;
}

.vi-footer-social a:hover {
  background: #b68b52;
  border-color: #b68b52;
  color: #2b2620;
}

.vi-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vi-footer-col ul li {
  margin-bottom: 12px;
}

.vi-footer-col ul li a {
  color: #d9d0c3;
  text-decoration: none;
  font-size: 16px;
  transition: color .2s ease;
  white-space: nowrap;
}

.vi-footer-col ul li a:hover {
  color: #b68b52;
}

.vi-footer-newsletter-txt {
  font-size: 16px;
  line-height: 1.7;
  color: #b6ac9c;
  margin: 0 0 16px;
}

.vi-footer-newsletter-form {
  display: flex;
  gap: 8px;
}

.vi-footer-newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(182,139,82,.35);
  background: rgba(255,255,255,.05);
  color: #f2ede3;
  font-size: 16px;
  outline: none;
}

/* Champ piège anti-spam (honeypot) : invisible pour un visiteur
   humain, mais présent dans le code source pour piéger les robots
   qui remplissent automatiquement tous les champs d'un formulaire. */
.vi-hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vi-footer-newsletter-form input::placeholder {
  color: #8f8677;
}

.vi-footer-newsletter-form input:focus {
  border-color: #b68b52;
}

.vi-footer-newsletter-form button {
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: #b68b52;
  color: #2b2620;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
  white-space: nowrap;
}

.vi-footer-newsletter-form button:hover {
  background: #cba06a;
}

.vi-footer-newsletter-msg {
  margin: 12px 0 0;
  font-size: 14px;
  color: #b6ac9c;
}

.vi-footer-newsletter-msg.vi-ok {
  color: #8fae7a;
}

.vi-footer-newsletter-msg.vi-error {
  color: #c17a63;
}

.vi-footer-newsletter-msg.vi-warn {
  color: #c0574a;
  font-weight: 600;
}

.vi-footer-indep {
  font-size: 16px;
  color: #756c5d;
  margin: 16px 0 0;
  max-width: 280px;
  line-height: 1.5;
}

.vi-footer-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  cursor: pointer;
}

.vi-footer-consent input[type="checkbox"] {
  margin-top: 2px;
  accent-color: #b68b52;
  flex-shrink: 0;
}

.vi-footer-consent span {
  font-size: 13px;
  line-height: 1.5;
  color: #8f8677;
}

.vi-footer-consent a {
  color: #b68b52;
  text-decoration: underline;
}

.vi-footer-bottom {
  border-top: 1px solid rgba(182,139,82,.15);
  padding: 18px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #8f8677;
  letter-spacing: .3px;
}

.vi-footer-totop {
  color: #8f8677;
  text-decoration: none;
  transition: color .2s ease;
}

.vi-footer-totop:hover {
  color: #b68b52;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .vi-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }
}

@media (max-width: 560px) {
  .vi-footer-top {
    grid-template-columns: 1fr;
    padding: 44px 22px 30px;
  }

  .vi-footer-baseline {
    max-width: none;
  }
}