@charset "UTF-8";
.brown {
  color: #7A4535;
}

.black {
  color: #0F0E0E;
}

.beige {
  color: #DED7CD;
}

.bold, b, strong {
  font-family: "Manrope Bold";
  font-weight: 700;
}

.beige-btn {
  background-color: #DED7CD;
  font-size: 1.0416666667vw;
  line-height: 1.35;
  padding: 0.9375vw;
  max-width: 15.2083333333vw;
  text-align: center;
  display: block;
  color: #7A4535;
  border-radius: 31px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.beige-btn:hover, .beige-btn:focus-visible {
  color: #DED7CD !important;
  background: #7A4535;
}

.light {
  font-family: "Manrope Light";
  font-weight: 300;
}

.medium {
  font-family: "Manrope Medium";
  font-weight: 500;
}

.center {
  text-align: center;
}

.uppercase {
  text-transform: uppercase;
}

a {
  text-decoration: none;
  color: inherit;
}

.white {
  color: white;
}

.underline {
  text-decoration: underline;
}

.nowrap {
  white-space: nowrap;
}
@media (max-width: 767px) {
  .nowrap {
    white-space: inherit;
  }
}

p {
  margin-block-start: 0;
  margin-block-end: 0;
}

h1, h2, h3 {
  margin-block-start: 0;
  margin-block-end: 0;
  font-weight: inherit;
}

.vce {
  margin-bottom: 0 !important;
}

ul {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 20px;
}

.test-bloc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.full-width .vce.vce-single-image-wrapper {
  width: 100%;
  height: auto;
}
.full-width .vce.vce-single-image-wrapper figure {
  width: 100%;
  height: auto;
}
.full-width .vce.vce-single-image-wrapper figure .vce-single-image-figure-inner {
  width: 100% !important;
  height: auto;
}

.inter-cta {
  background-color: #DED7CD;
  color: #7A4535;
  font-family: "Inter";
  font-weight: 500;
  font-size: 1.1458333333vw;
  padding: 0 2.8645833333vw;
  height: 4.1145833333vw;
  border-radius: 2.2916666667vw;
  min-height: 70px;
  text-align: center;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 13.75vw;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.inter-cta:hover, .inter-cta:focus-visible {
  color: #DED7CD !important;
  background: #7A4535;
}

.vce-element--has-background > .vce-col-inner > .vce-col-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

h1 {
  font-family: "Manrope Light";
  font-weight: 300;
  font-size: 2.8645833333vw;
  line-height: 1.09;
  letter-spacing: -0.45px;
  color: #DED7CD;
}
@media (max-width: 767px) {
  h1 {
    font-size: 30px;
  }
}

h2 {
  font-size: 2.34375vw;
  line-height: 1.11;
  color: #7A4535;
}
@media (max-width: 767px) {
  h2 {
    font-size: 24px;
  }
}

em {
  font-style: normal;
  white-space: nowrap;
}
@media (max-width: 767px) {
  em {
    white-space: inherit;
  }
}

.br-30 img {
  border-radius: 30px;
}

/* =========================================================
   MOBILE — Homedental (≤ 767px)
   Compilé par gulp → css/mobile.css
   IMPORTANT : mobile.css doit être chargé APRÈS style.css
   (voir la dépendance dans functions.php).

   Pourquoi ce fichier : tout le site est en vw (px / 19.2).
   Sur un téléphone de 390px, 18px @1920 devient… 3,6px.
   Ici, on remet des tailles en px lisibles.
   ========================================================= */
/* =========================================================
   TABLETTE (768px → 1199px)
   À 768px, 18px @1920 devient 7px : on met des minimums lisibles
   et on donne plus de place aux blocs trop serrés.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
  /* ---------- 1. Texte de base ---------- */
  body {
    font-size: 15px;
    line-height: 1.5;
  }
  .vce-text-block p,
  .vce-text-block li {
    font-size: 15px;
    line-height: 1.5;
  }
  .fs24, .fs24 h1, .fs24 h2, .fs24 h3, .fs24 p {
    font-size: 18px !important;
  }
  .fs22, .fs22 h1, .fs22 h2, .fs22 h3, .fs22 p {
    font-size: 17px !important;
  }
  /* ---------- 2. Hero ---------- */
  .hero-slider .slider-col .vce-text-block {
    padding: 150px 60px 140px !important;
    text-align: center;
  }
  .hero-slider .inter-cta {
    min-width: 220px;
    min-height: 52px;
    height: auto;
    padding: 0 32px;
    font-size: 16px;
  }
  .hero-slider .slick-dots {
    bottom: 40px;
  }
  .hero-slider .slick-dots button {
    font-size: 16px;
    padding-bottom: 12px;
  }
  /* ---------- 3. Chiffres 5K / 13 / 30 ---------- */
  .count-up {
    white-space: nowrap;
    min-width: 2.2ch;
  }
  /* ---------- 4. Bloc « Prenez rendez-vous en ligne » + « Nos services » ---------- */
  .cta-services__card {
    min-width: 0;
    width: calc(100% - 48px);
    padding: 30px 24px;
    border-radius: 16px;
  }
  .cta-services__card-title {
    font-size: 20px;
  }
  .cta-services__btn {
    min-width: 0;
    max-width: 100%;
    height: 50px;
    font-size: 16px;
  }
  /* ---------- 5. Cartes services (Nettoyage / Implants / Orthodontie) ---------- */
  .service-card {
    min-height: 320px;
    padding: 30px 24px;
  }
  .service-card__title {
    font-size: 22px;
  }
  .service-card__text {
    min-width: 0;
    max-width: 100%;
    font-size: 15px;
  }
  .service-card--cutout .service-card__text {
    min-width: 0;
    max-width: 100%;
  }
  .service-card__media--circle {
    right: 20px;
    bottom: 20px;
    width: 140px;
    height: 140px;
    min-width: 0;
    min-height: 0;
  }
  /* ---------- 6. Carrousel services ---------- */
  .services-slider__track .slick-slide .vce-raw-html {
    height: 200px;
    padding: 40px 32px 0;
  }
  /* ---------- 7. Équipe + citation ---------- */
  .equipe__quote {
    font-size: 26px;
  }
  /* ---------- 8. Rendez-vous (texte de gauche) ---------- */
  .rdv-contact__coords {
    font-size: 16px;
  }
  /* ---------- 9. FAQ ---------- */
  .list-faq .vce-faq-toggle-title-text {
    font-size: 19px;
    padding-right: 60px;
  }
  .list-faq .vce-faq-toggle-icon {
    width: 44px;
    height: 44px;
    background-size: 15px auto;
  }
  /* ---------- 10. Survol désactivé au doigt ---------- */
  /* ---------- Classes d'espacement (padding.scss) ---------- */
}
@media (min-width: 768px) and (max-width: 1199px) and (hover: none) {
  .service-card:hover,
  .services-slider__track .vce-col-inner:hover,
  .cta-services__card:hover {
    transform: none;
    box-shadow: none;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .pl-278, .pl-280 {
    padding-left: 40px !important;
  }
  .pr-76, .pr-85, .pr-100 {
    padding-right: 30px !important;
  }
  .pr-278, .pr-300 {
    padding-right: 40px !important;
  }
  .plr-176 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .plr-300, .plr-416, .plr-455 {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  .pb-15 {
    padding-bottom: 10px !important;
  }
  .pb-20 {
    padding-bottom: 12px !important;
  }
  .pb-25 {
    padding-bottom: 14px !important;
  }
  .pb-50 {
    padding-bottom: max(24px, 2.6041666667vw) !important;
  }
  .pb-60 {
    padding-bottom: max(28px, 3.125vw) !important;
  }
  .pb-80 {
    padding-bottom: max(36px, 4.1666666667vw) !important;
  }
  .pt-90 {
    padding-top: max(40px, 4.6875vw) !important;
  }
  .pb-100 {
    padding-bottom: max(44px, 5.2083333333vw) !important;
  }
  .pt-100 {
    padding-top: max(44px, 5.2083333333vw) !important;
  }
}
@media (max-width: 767px) {
  /* =======================================================
     1. TEXTE DE BASE
     ======================================================= */
  body {
    font-size: 16px;
    line-height: 1.5;
  }
  p,
  li {
    font-size: inherit;
  }
  /* =======================================================
     2. CLASSES DE TAILLE .fs**
     (le mixin fontSize ne gère en mobile que 21, 24, 30, 35 et 45)
     ======================================================= */
  .fs95,
  .fs95 h1, .fs95 h2, .fs95 h3, .fs95 p {
    font-size: 40px !important;
    line-height: 1.08 !important;
  }
  .fs85,
  .fs85 h1, .fs85 h2, .fs85 h3, .fs85 p {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
  .fs55,
  .fs55 h1, .fs55 h2, .fs55 h3, .fs55 p {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }
  .fs40,
  .fs40 h1, .fs40 h2, .fs40 h3, .fs40 p {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }
  .fs35,
  .fs35 h1, .fs35 h2, .fs35 h3, .fs35 p {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  .fs24,
  .fs24 h1, .fs24 h2, .fs24 h3, .fs24 p {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
  .fs22,
  .fs22 h1, .fs22 h2, .fs22 h3, .fs22 p {
    font-size: 17px !important;
    line-height: 1.4 !important;
  }
  /* =======================================================
     3. CLASSES D'ESPACEMENT (padding.scss)
     Les grandes marges gauche/droite deviennent la marge mobile standard,
     les espaces verticaux sont réduits proportionnellement.
     ======================================================= */
  .pl-278, .pl-280 {
    padding-left: 20px !important;
  }
  .pr-76, .pr-85, .pr-100, .pr-278, .pr-300 {
    padding-right: 20px !important;
  }
  .plr-176, .plr-300, .plr-416, .plr-455 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .pb-15 {
    padding-bottom: 10px !important;
  }
  .pb-20 {
    padding-bottom: 12px !important;
  }
  .pb-25 {
    padding-bottom: 14px !important;
  }
  .pb-50 {
    padding-bottom: 24px !important;
  }
  .pb-60 {
    padding-bottom: 28px !important;
  }
  .pb-80 {
    padding-bottom: 36px !important;
  }
  .pb-100 {
    padding-bottom: 44px !important;
  }
  .pb-105 {
    padding-bottom: 46px !important;
  }
  .pb-110 {
    padding-bottom: 48px !important;
  }
  .pb-135 {
    padding-bottom: 56px !important;
  }
  .pb-140 {
    padding-bottom: 58px !important;
  }
  .pb-150 {
    padding-bottom: 60px !important;
  }
  .pb-185 {
    padding-bottom: 64px !important;
  }
  .pb-210 {
    padding-bottom: 70px !important;
  }
  .pb-283 {
    padding-bottom: 80px !important;
  }
  .pt-90 {
    padding-top: 40px !important;
  }
  .pt-100 {
    padding-top: 44px !important;
  }
  .pt-110 {
    padding-top: 48px !important;
  }
  .pt-145 {
    padding-top: 58px !important;
  }
  .pt-150 {
    padding-top: 60px !important;
  }
  .pb-30-mob {
    padding-bottom: 30px;
  }
  /* =======================================================
     4. HERO SLIDER
     ======================================================= */
  .hero-slider .slider-col .vce-text-block {
    padding: 110px 20px 120px !important;
    text-align: center;
  }
  .hero-slider .vce-text-block-wrapper {
    max-width: 420px;
    margin: 0 auto;
  }
  .hero-slider .vce-col-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
  }
  .hero-slider .vce-col-content {
    position: relative;
    z-index: 2;
  }
  .hero-slider .inter-cta {
    margin-top: 24px;
  }
  .hero-slider .slick-dots {
    bottom: 28px;
  }
  .no-pr.pr-85, .no-pr.pr-100, .no-pr.pr-76 {
    padding-right: 0 !important;
  }
  /* =======================================================
     5. BOUTONS « inter-cta » (pilule beige)
     ======================================================= */
  .inter-cta, .beige-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 50px;
    padding: 0 28px;
    font-size: 16px;
  }
  /* =======================================================
     6. BLOC « Prenez rendez-vous en ligne » (carte blanche)
     ======================================================= */
  .cta-services__card {
    max-width: none;
  }
  .cta-services__btn {
    max-width: none;
    height: 52px;
  }
  /* =======================================================
     7. CARROUSEL SERVICES (Visual Composer)
     ======================================================= */
  .services-slider__track .slick-slide {
    margin-left: 8px;
    margin-right: 8px;
  }
  .services-slider__track .slick-slide > .vce-col-inner {
    border-radius: 20px;
  }
  .services-slider__track .slick-slide .vce-raw-html {
    height: 320px;
    padding: 36px 30px 0;
  }
  .services-slider__track .ss-card__title,
  .services-slider__track .vce-raw-html h3 {
    font-size: 22px;
    line-height: 1.25;
  }
  .services-slider__track .service-card__arrow {
    margin-top: 20px;
  }
  .services-slider__track .vce-col-inner:hover {
    transform: none;
    box-shadow: none;
  }
  .services-slider__track .slick-dots {
    padding: 30px 0 0 24px;
  }
  .services-slider__track .slick-dots button {
    font-size: 15px;
    padding-bottom: 12px;
  }
  /* =======================================================
     8. CARTES SERVICES (Nettoyage / Implants / Orthodontie)
     ======================================================= */
  .service-card {
    min-height: 350px;
    padding: 32px 28px;
  }
  .service-card__text {
    font-size: 15px;
  }
  .service-card:hover {
    transform: none;
  }
  /* =======================================================
     9. BLOC ÉQUIPE + CITATION
     ======================================================= */
  .equipe__quote {
    font-size: 26px;
    line-height: 1.3;
  }
  /* =======================================================
     10. FAQ
     ======================================================= */
  .list-faq .vce-faq-toggle-title-text {
    font-size: 18px;
    line-height: 1.3;
    padding-right: 56px;
  }
  .list-faq .vce-faq-toggle-icon {
    width: 40px;
    height: 40px;
    background-size: 14px auto;
  }
  .list-faq .vce-faq-toggle-text-block {
    padding-right: 0;
    font-size: 15px;
  }
  /* =======================================================
     11. IMAGES ET COLONNES
     ======================================================= */
  img {
    max-width: 100%;
    height: auto;
  }
  html,
  body {
    overflow-x: clip;
  }
}
/* =========================================================
   Petits téléphones (≤ 375px : iPhone SE, anciens Android)
   ========================================================= */
@media (max-width: 375px) {
  .fs95,
  .fs95 h1, .fs95 h2, .fs95 h3, .fs95 p {
    font-size: 34px !important;
  }
  .fs55,
  .fs55 h1, .fs55 h2, .fs55 h3, .fs55 p {
    font-size: 26px !important;
  }
  .hero-slider .slider-col .vce-text-block {
    padding-top: 90px !important;
    padding-bottom: 100px !important;
  }
}
/*# sourceMappingURL=../css/mobile.css.map */