/* 1. VITESSE DE RÉTRACTATION (Le retour au repos) */
.card-expand {
    flex: 1 !important;
    /* On met une vitesse plus rapide ici, ex: 0.5s */
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 2. VITESSE D'EXPANSION (L'aller au survol) */
.card-expand:hover {
    /* On met une vitesse plus lente ici, ex: 1.2s */
    transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.p-expanded {
    opacity: 0;           
    max-height: 0;        
    margin-top: 0;       
    transform: translateY(20px); 
    transition: all 1.2s ease;
    pointer-events: none;
}


.card-expand:hover .p-expanded {
    opacity: 1;           
    max-height: 500px;    
    margin-top: 15px;     
    transform: translateY(0); 
    pointer-events: auto;
}



.ma-grille-perso {
    display: grid !important;
    grid-template-columns: 33.33% 33.33% 33.33% !important;
    grid-auto-rows: 250px !important;
    width: 100% !important;
}

/* On cible le bloc qui entoure l'image */
.ma-grille-perso > div, 
.ma-grille-perso > figure {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

/* On force le span sur la première image */
.ma-grille-perso > div:first-child, 
.ma-grille-perso > figure:first-child {
    grid-row: span 2 !important;
}

/* On force l'image elle-même à remplir la case */
.ma-grille-perso img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* style des liens au survol */
.header-nav .current-menu-item a,
.header-nav a:hover {
  color: #d9a520 !important;
}

.OmbreTitres h1,
.OmbreTitres h2,
.OmbreTitres h3 {
text-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px;
}

.StangVideo video {
  border-radius: 5px;
  box-shadow: 0 9px 33px -11px;
}

.MaJolieCarte {
  position: relative;
  overflow: hidden;
}

.FooterContact {
justify-content: left !important;
}

/* cacher les header en fonction de la taille de l'écran */
/* menu mobile & tablette */
@media (max-width: 1220px) {
#DesktopHeader {
  display: none; }
}
/* menu pc */
@media (min-width: 1221px) {
  #ResponsiveHeader {
    display: none;  }
}

/* alignement menu mobile */
/* Aligner le menu mobile à gauche */
.MenuMobileStang .wp-block-navigation__container {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* S'assurer que les éléments de liste occupent la largeur nécessaire et s'alignent à gauche */
.MenuMobileStang .wp-block-navigation-item {
    align-items: flex-start !important;
    text-align: left !important;
    width: 100%;
}

/* Ajuster le lien lui-même */
.MenuMobileStang .wp-block-navigation-item__content {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* animation au survol des cartes "les chambres" */
/* 1. On prépare les éléments pour une animation fluide */
.MaJolieCarte .uagb-heading-text, 
.MaJolieCarte p {
    display: inline-block;
    width: 100%;
    transition: transform 0.3s ease-out;
}

/* 2. Au survol de la CARTE, on fait bouger les TEXTES */
.MaJolieCarte:hover .uagb-heading-text,
.MaJolieCarte:hover p {
    transform: translateY(-5px) !important;
}

/* style des liens en jaune */
.FaqHomeStang a, .LiensJaunes a {
		color: #D6A520;
}

/* sticky header */
/* calsse css disponible sur pc et tablette : .FixedHeader */
#ResponsiveHeader, #DesktopHeader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
		background-color: #ffffff !important;
}

body {
    padding-top: 78px !important;
}