/* ===== Thème Enfant GeneratePress - responsive.css ===== */
@media (max-width: 1315px) {
  .mask-coin-gauche{
    mask-image: none;
    margin-left:110px;
    margin-top: -105px;
  }
    .pave-sur-carrousel{
    right:-26px;
  }
}

@media (max-width: 1200px) {
.mask-coin-gauche{
  margin-left:0px;
  max-width:100%;
}
.site-header .header-image, body .navigation-branding img {
    width: 170px;
}

.main-navigation a{
  letter-spacing: 0.5px;
}


}

@media (max-width: 1024px) {
 .home .gb-carousel{
    height:auto;
    aspect-ratio: 1200/800;
  }
  .inside-header {
    padding: 32px 15px;
}


.main-navigation a{
  letter-spacing: 0px;
}

}

@media (max-width: 992px) {
  nav div.wp-block-hidden-mobile.wp-block-hidden-tablet{
   display: none;
  }

  .gradient-mesh{
    padding-top:6rem;
  }

  /* --- Pages intérieures : le #mobile-header (visible sous 992px, masquant
     le .site-header) a un fond sombre (--contrast-2). Sur ces pages,
     on affiche le logo en blanc (SVG du thème enfant) et l'icône hamburger
     (svg fill:currentColor) hérite de la couleur blanche. --- */

  /* 1. Logo blanc : le <a> reçoit le SVG blanc en fond ; le <img> coloré
        est passé en visibility:hidden (et non display:none) pour conserver
        sa boîte = dimensions et mise en page inchangées.
        background-size: 100% 100% (et non contain) pour que le logo blanc
        occupe exactement la même emprise que le logo coloré qu'il remplace
        (lequel remplit toute sa boîte via height:60px; width:auto). */
  body:not(.home) #mobile-header .site-logo.mobile-header-logo a {
    display: block;
    background: url("../img/logo-sbe2026-blc2.svg") no-repeat center center;
    background-size: 250px 40px;
  }
  body:not(.home) #mobile-header .site-logo.mobile-header-logo img {
    visibility: hidden;
  }

  /* 2. Icône hamburger (et libellé « Menu ») en blanc */
  body:not(.home) #mobile-header .menu-toggle {
    color: var(--base-3);
  }

.main-navigation.slideout-navigation .main-nav > ul > li > a {
    line-height: 40px;
    padding-left:20px;
}

.slideout-navigation .main-nav{
  margin-bottom:20px;
}

}

@media (max-width: 768px) {
 
  .mask-coin-gauche {
    mask-image: none;
    margin-left: 0px;
    
}

h1, .h1,
.h1 a{
       font-size: 30px;
        line-height: 1.2em;
    font-weight: 700;
    text-transform: none;
}
				
		

h2, .h2,
.h2 a{
       font-size: 24px;
        line-height: 1.2em;
    font-weight: 700;
    text-transform: none;
}
																			
																			

h3, .h3,
.h3 a{
       font-size: 20px;
        line-height: 1.2em;
    font-weight: 700;
    text-transform: none;
}
												
												

h4, .h4,
.h4 a{
    font-size: 18px;
    line-height: 1.4em;
    font-weight: 700;
    text-transform: none;
}
														
														

h5, .h5,
.h5 a{
    font-size: 16px;
    line-height: 1.4em;
    font-weight: 700;
    text-transform: none;
}
																			
																			

h6, .h6,
.h6 a {
	font-size: 16px;    
    line-height: 1.2em;
    font-weight: 700;
    text-transform: none;
}

}

@media (max-width: 767px) {
  .mask-coin-gauche {    
    margin-left: 50px;
    max-width: calc(100% - 50px);
}

.gradient-mesh{
    padding-top:4rem;
  }

  .pave-sur-carrousel {
        right: -0px;
        margin-left: 40%;
        margin-top: -40px;
    }

}


@media (max-width: 480px) {
  .site-header .header-image {
    width: 250px;
}
.inscription-newsletter .mailpoet_form{
  flex-direction: column;
  row-gap:15px;
}

.mask-coin-gauche{
  max-width: 100%;
  margin-top:10px;
}

.pave-sur-carrousel {
    
    margin-left: 50px;
    margin-top: 40px;
}

.tribe-events-single .tribe-events-sub-nav{
  dispaly: flex;
    flex-direction: column;
    row-gap: 10px;
}

.tribe-events-nav-previous,
.tribe-events-nav-next{
    max-width:100%;
}

}