@media (max-width: 768px) { }
@media (max-width: 768px) {
.site-header {
padding: 30px 20px;
background-size: cover;
}
.site-logo img {
max-width: 180px;
margin: 0 auto 20px;
display: block;
}
.main-navigation {
margin-top: 30px;
}
}
@media (max-width: 768px) { .site-header{
padding-top: 18px !important;
padding-bottom: 0 !important;
background-position: center top !important;
background-size: 180% auto !important; } .header-inner{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
} .logo-img{
width: min(260px, 72vw) !important;
height: auto !important;
} .header-cta{
position: static !important;
display: inline-block !important;
margin: 5px auto 17px !important;
padding: 12px 22px !important;
font-size: 16px !important;
} .main-nav{
width: 100% !important;
margin-top: 10px !important;
background: #fff !important;
border-top: 1px solid #f3e8e4 !important;
border-bottom: 1px solid #f3e8e4 !important;
}
.nav-list{
width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 14px 18px !important;
padding: 12px 12px !important;
}
.nav-list a,
.nav-link-dropdown{
font-size: 0.95rem !important;
letter-spacing: 0.08em !important;
padding: 8px 6px !important;
} .has-dropdown{ position: relative !important; }
.dropdown{
left: 50% !important;
transform: translateX(-50%) !important;
min-width: 240px !important;
max-width: 92vw !important;
}
}
@media (max-width: 768px){ .dropdown{
min-width: 210px !important;
max-width: 86vw !important;
padding: 10px 10px !important;
border-radius: 14px !important;
}
.dropdown a{
font-size: 0.92rem !important;
letter-spacing: 0.05em !important;
padding: 10px 12px !important;
line-height: 1.15 !important;
white-space: normal !important; }
}
@media (max-width: 768px){
.header-inner{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap: 10px !important;
} .logo-wrap{ order: 1 !important; }
.header-cta{ order: 2 !important; }
.main-nav{ order: 3 !important; }
.header-cta{
position: static !important;
margin: 8px auto 6px !important;
display:inline-block !important;
}
}
@media (max-width: 768px){
.site-header{
background-image: url(//nosinstantstendresse.fr/wp-content/themes/nos-instants-tendresse-theme/images/header-bg-mobile.png) !important;
background-repeat: no-repeat !important;
background-position: center top !important;
background-size: cover !important; padding-top: 5px !important;
padding-bottom: 5px !important;
} .logo-img{
width: min(370px, 78vw) !important;
height: auto !important;
}
} @media (max-width: 768px) { .main-nav {
width: 100%;
padding: 40px 8px;
background: #ffffff;
} .nav-list {
display: flex;
flex-wrap: nowrap; justify-content: space-between;
align-items: center;
gap: 6px;
width: 100%;
padding: 0;
margin: 0;
} .nav-list li {
margin: 0;
padding: 0;
}
.nav-list a,
.nav-link-dropdown {
font-size: 0.72rem; letter-spacing: 0.06em;
padding: 6px 4px;
text-align: center;
} .caret {
font-size: 0.6rem;
margin-left: 2px;
}
}
@media (max-width: 768px) { header nav ul,
.site-header nav ul,
.main-navigation ul {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: space-between;
align-items: center;
width: 100%;
} header nav ul li,
.site-header nav ul li,
.main-navigation ul li {
flex: 1 1 auto;
text-align: center;
} header nav ul li a,
.site-header nav ul li a,
.main-navigation ul li a {
font-size: 11px !important;
padding: 6px 4px !important;
letter-spacing: 0.05em;
} header nav,
.site-header nav,
.main-navigation {
margin: 0 !important;
padding: 8px 6px !important;
}
}
@media (max-width: 768px) { header nav ul,
.site-header nav ul,
.main-navigation ul {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: space-between;
align-items: center;
width: 100%;
} header nav ul li,
.site-header nav ul li,
.main-navigation ul li {
flex: 1 1 auto;
text-align: center;
white-space: nowrap;
} header nav ul li a,
.site-header nav ul li a,
.main-navigation ul li a {
font-size: 11px !important;
padding: 6px 4px !important;
letter-spacing: 0.05em;
} header nav,
.site-header nav,
.main-navigation {
margin: 0 !important;
padding: 8px 6px !important;
}
}
@media (max-width: 768px) { .site-header{
background: none !important;
padding-top: 18px !important;
padding-bottom: 0 !important;
position: relative !important;
overflow: visible !important;
} .site-header::before{
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 340px; background: #ffffff url(//nosinstantstendresse.fr/wp-content/themes/nos-instants-tendresse-theme/images/header-bg.png) no-repeat center top;
background-size: 100% auto; z-index: 0;
} .site-header > *{
position: relative;
z-index: 1;
} .logo-wrap{ margin-top: 0 !important; }
.logo-img{
width: 280px !important;
height: auto !important;
} .header-cta{
position: static !important;
display: table !important;
margin: 12px auto 14px !important; padding: 12px 22px !important;
} .main-nav{
width: 100% !important;
margin-top: 50px !important; background: #ffffff !important;
border-top: 1px solid #f3e8e4 !important;
border-bottom: 1px solid #f3e8e4 !important;
}
.main-nav .nav-list{
width: 100% !important;
display: flex !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
gap: 0 !important;
padding: 12px 10px !important;
}
.main-nav .nav-list > li{
flex: 1 1 0 !important;
text-align: center !important;
min-width: 0 !important;
}
.main-nav .nav-list a,
.main-nav .nav-link-dropdown{
font-size: 0.82rem !important;
letter-spacing: 0.06em !important;
white-space: nowrap !important;
padding: 10px 4px !important;
} .dropdown{
width: min(92vw, 340px) !important;
font-size: 0.9rem !important;
}
}
@media (max-width: 768px){
.site-header::before{
height: clamp(260px, 45vw, 380px) !important;
background-size: cover;
}
.logo-img{
width: clamp(200px, 48vw, 240px) !important;
height: auto !important;
}
.main-nav{
margin-top: clamp(10px, 4vw, 26px) !important;
}
.main-nav .nav-list a,
.main-nav .nav-link-dropdown{
font-size: clamp(0.72rem, 2.8vw, 0.88rem) !important;
}
} @media (max-width: 768px){ .site-header{
padding-top: clamp(10px, 3vw, 18px) !important;
padding-bottom: clamp(8px, 3vw, 16px) !important;
} .logo-wrap{
margin-top: clamp(-10px, -3vw, -4px) !important;
}
.logo-img{
width: clamp(180px, 46vw, 240px) !important;
height: 150% auto !important;
} .header-cta{
position: relative !important;
top: clamp(-45px, -15vw, -25px) !important; left: auto !important;
right: auto !important;
display: inline-flex !important;
margin: 0 auto !important;
transform: none !important;
z-index: 50 !important;
} .main-nav{
margin-top: clamp(-50px, -15vw, -25px) !important; width: 100% !important;
} .main-nav .nav-list{
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
padding: clamp(10px, 2.6vw, 14px) clamp(12px, 4vw, 18px) !important;
display: flex !important;
flex-wrap: nowrap !important; justify-content: space-between !important; gap: clamp(8px, 2.2vw, 14px) !important;
} .main-nav .nav-list a,
.main-nav .nav-link-dropdown{
font-size: clamp(0.68rem, 2.6vw, 0.82rem) !important;
letter-spacing: clamp(0.04em, 0.6vw, 0.10em) !important;
white-space: nowrap !important;
} .main-nav .dropdown{
width: min(92vw, 340px) !important;
padding: 10px 12px !important;
}
.main-nav .dropdown a{
font-size: clamp(0.75rem, 3vw, 0.9rem) !important;
padding: 10px 10px !important;
}
}
@media (max-width: 768px){ .main-nav{
margin-top: clamp(-100px, -10vw, -25px) !important; padding-top: 0 !important;
} .has-dropdown{
position: relative !important;
}
.dropdown{
position: absolute !important;
left: 50% !important;
transform: translateX(-60%) !important; top: calc(100% + 8px) !important;
display: flex !important;
flex-direction: column !important; gap: 6px !important;
width: min(92vw, 360px) !important;
padding: 12px 14px !important;
border-radius: 10px !important;
z-index: 9999 !important;
}
.dropdown li{
width: 100% !important;
}
.dropdown a{
display: block !important;
width: 100% !important;
white-space: normal !important; line-height: 1.2 !important;
padding: 12px 12px !important;
}
}
@media (max-width: 768px){ .site-header{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
overflow: visible !important;
}
.header-inner{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
} .main-nav{
margin-top: -100px !important; padding-top: 0 !important;
padding-bottom: 0 !important;
position: relative !important;
z-index: 50 !important;
} .main-nav,
.main-nav .nav-list{
width: 100vw !important;
max-width: 100vw !important;
} .main-nav .container,
.nav-list.container{
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
} .nav-list{
display: flex !important;
justify-content: space-around !important;
flex-wrap: nowrap !important;
gap: 0 !important;
padding: 14px 10px !important;
background: #fff !important;
box-sizing: border-box !important;
} .nav-list a,
.nav-link-dropdown{
font-size: 13px !important;
letter-spacing: 0.08em !important;
white-space: nowrap !important;
}
}
@media (max-width: 768px){ header.site-header{
position: relative !important;
padding-bottom: 45px !important; margin-bottom: 0 !important;
overflow: visible !important;
} header.site-header nav.main-nav{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
z-index: 60 !important;
} header.site-header nav.main-nav .container,
header.site-header nav.main-nav ul.nav-list.container,
header.site-header nav.main-nav ul.nav-list{
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
} header.site-header nav.main-nav ul.nav-list{
display: flex !important;
justify-content: space-around !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 0 !important;
background: #fff !important;
padding: 14px 16px !important; } header.site-header nav.main-nav .nav-list a,
header.site-header nav.main-nav .nav-link-dropdown{
font-size: 13px !important;
letter-spacing: 0.07em !important;
white-space: nowrap !important;
}
}
@media (max-width: 768px){ .btn-rdv,
.btn-prendre-rdv,
.header-cta a {
font-size: 10px !important;
padding: 5px 10px !important;
border-radius: 999px !important;
margin-top: 14px !important;
}
}
@media (max-width: 768px){
.site-header{
background-image: url(//nosinstantstendresse.fr/wp-content/themes/nos-instants-tendresse-theme/images/header-bg-mobile.png) !important;
background-repeat: no-repeat !important;
background-position: center top !important; background-size: 140% auto !important;  padding-top: 5px !important;
padding-bottom: 10px !important;
}
}
@media (max-width: 768px){
.header-cta{
font-size: 14px !important;
padding: 10px 18px !important;
border-radius: 999px !important;
box-shadow: 0 6px 12px rgba(124,36,43,0.25) !important;
}
}
@media (max-width: 768px){
.site-header,
.site-header * {
background-size: unset !important;
}
}
@media (max-width: 768px){
.site-header{
background-image: url(//nosinstantstendresse.fr/wp-content/themes/nos-instants-tendresse-theme/images/header-bg-mobile.png) !important;
background-repeat: no-repeat !important;
background-position: center top !important; background-size: 150% auto !important; height: auto !important;
min-height: unset !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
}
}
@media (max-width: 768px){
.site-header{
background-image: url(//nosinstantstendresse.fr/wp-content/themes/nos-instants-tendresse-theme/images/header-bg-mobile.png) !important; background-repeat: no-repeat !important;
background-position: center top !important; background-size: 100% auto !important;
height: auto !important;
min-height: unset !important;
}
}
@media (max-width: 768px) { .site-header {
background-image: url(//nosinstantstendresse.fr/wp-content/themes/nos-instants-tendresse-theme/images/header-bg-mobile.png) !important;
background-repeat: no-repeat !important;
background-position: center top !important; background-size: contain !important; min-height: 300px !important; padding-top: 20px !important;
padding-bottom: 20px !important;
}
}
@media (max-width: 768px){
header.site-header,
.site-header,
.header,
.header-wrapper {
background-image: url(//nosinstantstendresse.fr/wp-content/themes/nos-instants-tendresse-theme/images/header-bg-mobile.png) !important;
background-repeat: no-repeat !important;
background-position: center top !important;
background-size: contain !important;
min-height: 320px !important;
}
}
@media (max-width: 768px) { header.site-header {
background-image: url(//nosinstantstendresse.fr/wp-content/themes/nos-instants-tendresse-theme/images/header-bg-mobile.png) !important;
background-repeat: no-repeat !important;
background-position: center top !important; background-size: 50% auto !important; padding-top: 10px !important;
padding-bottom: 30px !important;
}
}
@media (max-width: 768px){ .about-section .container,
.about-section .about-grid,
.about-section .about-wrapper,
.presentation-section .container,
.presentation-section .about-grid {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
} .about-section .about-image,
.about-section .image-wrap,
.about-section .photo-blob,
.presentation-section .about-image,
.presentation-section .image-wrap,
.presentation-section .photo-blob {
order: 1 !important;
width: 100% !important;
max-width: 620px !important;
margin: 500 auto 100px !important;
} .about-section .about-text,
.about-section .text-wrap,
.presentation-section .about-text,
.presentation-section .text-wrap {
order: 2 !important;
width: 100% !important;
}
}
@media (max-width: 768px) { .intro-image-wrap {
margin-bottom: 80px !important;
}
}
@media (max-width: 768px) {
.logo-wrap img {
width: 210px !important;
max-width: 80vw !important;
height: auto !important;
}
@media (max-width: 768px){
#a-propos .testimonials-container{
padding: 26px 18px !important;
} @media (max-width: 900px){
#a-propos h2{
white-space: normal;
text-align: center;
}
} @media (max-width: 768px) {
.apropos-block {
padding: 30px 20px;
}
.apropos-block h2 {
font-size: 1.7rem;
}
.apropos-block h3 {
font-size: 1.25rem;
}