/*

Theme Name: Astra Child

Theme URI: https://votre-site.com

Description: Thème enfant d'Astra

Author: Votre Nom

Author URI: https://votre-site.com

Template: astra

Version: 1.0.0

Text Domain: astra-child

*/

html {
  scroll-behavior: smooth;
}

body {
  margin-top: 0 !important;

  padding-top: 0 !important;
}

*::selection {
  background: #bed8e3 !important;

  color: rgb(0, 0, 0) !important;
}

.site-title a {
  font-family: "Poppins", sans-serif !important;

  font-size: 18px;
}

.site-header-primary-section-right a {
  font-size: 18px;
}

/* Header apres Hero */

.ast-custom-button-link a {
  color: #000000 !important;
}

.site-header {
  position: fixed !important;

  width: 100%;

  transition: background 0.8s ease, padding 0.3s ease;

  background: transparent !important;
}

.site-header .main-header-bar {
  transition: padding 0.8s ease;
}

.site-header {
  transition: background 0.8s ease, padding 0.3s ease;
}

.site-header {
  position: fixed; /* Fixe le header en haut */

  top: 0;

  left: 0;

  width: 100%;

  z-index: 9999; /* S'assure qu'il est au-dessus des autres éléments */
}

/* reduction de l'epaisseur */

.site-header {
  transition: all 0.8s ease; /* Animation fluide */

  padding: 20px 0; /* Taille par défaut */
}

.scrolled.site-header {
  padding: 1px 0 !important; /* Réduction de l'épaisseur au scroll */
}

.site-header img {
  transition: all 0.8s ease;

  max-height: 60px; /* Taille par défaut */
}

.scrolled .site-header img {
  max-height: 30px !important; /* Réduction du logo après scroll */
}

/* -------reduction logo size-------*/

.site-header {
  transition: all 0.3s ease;
}

.site-header.shrunk {
  padding: 5px 0; /* Réduit la hauteur du header */

  background: #4b4c50f9 !important;

  transition: background 0.8s ease, padding 0.3s ease;
}

.custom-logo-link,
.site-logo-img {
  transition: all 0.3s ease;

  max-width: 150px; /* Taille normale */
}

.site-header.shrunk .custom-logo-link,
.site-header.shrunk .site-logo-img {
  max-width: 80px; /* Taille réduite au scroll */
}

.custom-logo,
.site-logo-img {
  max-width: 180px; /* Taille normale sur desktop */

  height: auto;

  transition: all 0.3s ease;
}

.site-description {
  font-family: libre bodoni, sans-serif !important;

  color: white !important;
}

@media (max-width: 768px) {
  .custom-logo,
  .site-logo-img {
    max-width: 120px; /* Réduit sur tablette */
  }
}

@media (max-width: 480px) {
  .custom-logo,
  .site-logo-img {
    max-width: 80px; /* Plus petit sur mobile */
  }
}

/* -------Page Contact google map-------*/

/* Style pour grand écran (≥1024px) */

/* -------formulaire de contact form 7------ */

.wpcf7-submit {
  background-color: #bed8e3 !important;

  border-radius: 5px !important;

  color: white !important;
}

.wpcf7-submit:hover {
  color: #4b4c50 !important;

  background-color: white !important;

  border: none !important;
}

.wpcf7-submit {
  color: #4b4c50 !important;
}

.wpcf7-form label {
  color: white;
}

.wpcf7-response-output {
  color: white !important;

  border-color: #bed8e3 !important;
}

/* retrecis le formulaire */

.wpcf7-form {
  max-width: 300px; /* Ajuste la largeur selon tes besoins */

  margin: 0 auto; /* Centre le formulaire */
}

/* Réduction de la taille des champs */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%; /* S'assure qu'ils prennent toute la largeur dispo */

  padding: 8px; /* Ajuste l’espacement */

  font-size: 14px; /* Diminue la taille du texte */
}

/* Bouton d'envoi stylisé */

.wpcf7 input[type="submit"] {
  width: auto; /* Empêche le bouton d'être trop large */

  padding: 10px 20px;

  font-size: 14px;
}

.wpcf7 textarea {
  height: 120px; /* Ajuste la hauteur selon tes besoins */

  resize: vertical; /* Permet à l'utilisateur d'agrandir si besoin */

  padding: 8px;

  font-size: 14px;
}

@media (max-width: 768px) {
  .telephone {
    margin-top: 30px;
  }
}

/* ----------Ardoise---------- */

.image-column img {
  width: 100% !important; /* Adapte à la largeur de la colonne */

  height: 300px !important; /* Hauteur fixe (ajuste selon ton design) */

  object-fit: cover !important; /* Coupe l'image pour garder le format sans la déformer */
}

/* ----------logo Footer---------- */

#block-26 {
  width: 60px !important;

  margin-left: 80px;
}

/* ----------Page epicerie fine--------- */

.detail-vin img {
  display: none !important;
}

summary {
  font-size: xx-large;
}

/* Page de confidentialité  */

.page-id-3 .site-header {
  background-color: #333 !important;
}

.page-id-3 .site-header a,
.page-id-3 .site-header .site-title {
  color: rgb(0, 0, 0) !important;
}

/* POP UP  */

.uagb-ifb-image-content img {
  margin-top: 25px;

  width: 100px !important;
}

.uagb-ifb-button-wrapper {
  margin-bottom: 25px !important;
}

.vin strong {
  font-size: 20px !important;
}

/* ------------Text liste de vin----------------   */

summary {
  /*text-align: left;*/

  font-size: 20px;

  font-weight: 800;
}

.wp-block-uagb-container h4 {
  margin-top: 20px;
}

/* ------------IMG de vin----------------   */

.mfp-img {
  margin-top: 55px !important;
}

/* Applique une marge aux images dans la lightbox (partout) */

.mfp-img {
  margin-top: 55px !important;
}

/* Mais annule cette marge UNIQUEMENT sur la page d’accueil */

.home .mfp-img {
  margin-top: 0 !important;
}

/*bouton contact NAV */

.ast-custom-button {
  white-space: nowrap;

  padding: 0.5em 1.2em;

  font-size: 16px;

  display: inline-block;

  text-align: center;
}

/*POP UP IMG grande Taille */

.uagb-ifb-image-content img,
.uagb-modal__content img {
  width: auto !important;

  max-width: 100% !important;

  height: auto !important;

  display: block;

  margin: 0 auto;
}

.uagb-modal__content img {
  max-width: 100%;

  height: auto;
}
/*----------------PAGE 404------------------------------------*/
/* Forcer fond blanc + texte noir sur la page 404 personnalisée */
body.page-id-3940-header-break-point,
body.page-id-3940 .ast-primary-header-bar {
  background-color: #ffffff00 !important;
}

body.page-id-3940 .main-header-menu a {
  color: #000000 !important;
}

body.page-id-3940 .main-header-menu a:hover {
  color: #1c10c8 !important; /* Optionnel : couleur au survol */
}