html, body { font-size: 14px; font-family: 'Roboto', sans-serif; }
h1, .h1 { font-size: 4rem; margin-bottom: 0; font-weight: bold; }
h2, .h2 { font-size: 2rem; margin-bottom: 2rem; font-weight: bold; text-align: center; }
h3, .h3 { font-size: 1.7rem; margin-bottom: 1.7rem; font-weight: bold; }
small { font-size: 80%; }
a { color: #121d31; }
.navbar {
    background-color: #121d31;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar .navbar-collapse .navbar-nav .nav-item .nav-link { color: #7fa3c2; }
.navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active,
.navbar .navbar-collapse .navbar-nav .nav-item .nav-link:not(.active):hover { color: white; }
section, footer { padding: 50px 0; }
section.light { background-color: white; color: #121d31; }
section.dark { background-color: rgb(248, 249, 250); color: #121d31; }
section.light h2, section.dark h2 { color: #7fa3c2; }
header .header-content {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    color: white;
    padding: 0 50px;
}
footer { background-color: #121d31; color: #7fa3c2; }
footer h3, footer a:hover { color: white; }
footer a { color: inherit; transition: color ease 250ms; }

#index header { height: 100vh; background: url("img/reflexologie.jpg") center center no-repeat fixed; background-size: cover; }
#index header .header-content {
    flex-direction: column;
    gap: 50px;
}
#index header .header-content p { font-size: 4rem; font-style: italic; margin-bottom: 0; font-family: 'Great Vibes', sans-serif; }

#reflexologie p { text-align: justify; }
#reflexologie header { height: 50vh; background: url("img/reflexologie.jpg") center center no-repeat fixed; background-size: cover; }
#reflexologie .definition a, #reflexologie .histoire a { cursor: zoom-in; }
#reflexologie .bienfaits ul, #reflexologie .contre-indications ul { width: max-content; margin: 0 auto; }

#auriculotherapie p { text-align: justify; }
#auriculotherapie header { height: 50vh; background: url("img/auriculotherapie.jpg") center bottom no-repeat fixed; background-size: cover; }

#tarifs header { height: 50vh; background: url("img/reflexo-famille.jpg") center bottom no-repeat fixed; background-size: cover; }
#tarifs [class^="prestation-"] { margin-top: 100px; }
#tarifs .prestation-1 { margin-top: 0; }
#tarifs .subtitle { font-size: 2rem; margin: 0 auto 50px; position: relative; width: max-content; }
#tarifs [class^="prestation-"]:hover .subtitle::after { width: 100%; }
#tarifs .subtitle::after {
    content: "";
    width: 50%;
    height: 2px;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-image: linear-gradient(-90deg,#121d31,#7fa3c2);
    transition: width ease 250ms;
}
#tarifs .prestations .d-flex { height: 100%; }
#tarifs .prestations .d-flex h2 { text-align: left; margin-bottom: 0; }
#tarifs .prestations .d-flex p { font-size: 2rem; }
#tarifs .prestations .bon-cadeau p { font-size: inherit; }

#contact header { height: 50vh; background: url("img/reflexo-bebe.jpg") center bottom no-repeat fixed; background-size: cover; }
#contact section { font-size: 1.5rem; }
#contact section address { font-size: 2rem; }
#contact section iframe { display: block; margin: 0 auto; width: 75%; }
@media (max-width: 991px) {
    #contact section iframe { width: 100%; }
}

#mentions-legales header { height: 100px; }
#mentions-legales section { padding: 50px; }
#mentions-legales section h1 { text-align: center; margin-bottom: 4rem; }
#mentions-legales section h2 { text-align: left; }