/*--------------------------------------------------------------
# Quali'Tronic — surcharge de marque et d'équilibre visuel
# Chargée après style.css : recolore le thème Mediplace via ses
# variables racine (palette du logo : rouge #d92027, carbone #0d2833)
# puis corrige les endroits où nos visuels et nos textes français
# ne rentrent pas dans les gabarits prévus par le thème.
--------------------------------------------------------------*/
:root {
  --mediplace-base: #d92027;
  --mediplace-base-rgb: 217, 32, 39;
  --mediplace-black: #0d2833;
  --mediplace-black-rgb: 13, 40, 51;
}

/*--------------------------------------------------------------
# 1. Logo
--------------------------------------------------------------*/
.main-menu__logo img,
.sidebar-info-contents .logo img,
.mobile-nav__content .logo-box img {
  max-height: 72px;
  width: auto;
}

.footer-widget__about-logo img {
  max-height: 88px;
  width: auto;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 8px;
}

/*--------------------------------------------------------------
# 2. Typographie française
# Le thème capitalise chaque mot (usage anglais) — incorrect en français.
--------------------------------------------------------------*/
.banner-one__title,
.section-title__title,
.sliding-text-two__title,
.services-one__title,
.process-one__title,
.slogan-one__content-title h2,
.page-header__inner h3,
.service-details__title-1,
.service-details__services-title,
.service-details__get-started-title,
.service-details__img-box-content-title,
.why-choose-one__points-content h3,
.location-two__single-text h4,
.faq-one__right--instyle2-question .title h4,
.faq-one__right--instyle2-call-title h3,
.accrodion-title h4,
.footer-widget__title,
.footer-widget__newsletter-title,
.footer-widget__gallery-title h3,
.quick-contact-one__single-text h3,
.quick-contact-one__location-title h3,
.quick-contact-one__location-text h3,
.shop-one__content-title h3,
.cta-one__title,
.about-one__points-two-box h4,
.thm-breadcrumb li,
.error-page__content h2 {
  text-transform: none;
}

/*--------------------------------------------------------------
# 3. Bannière d'accueil
# Le visuel occupe la droite : le texte doit s'arrêter avant, sinon
# la fin du titre passe sous la photo.
--------------------------------------------------------------*/
.banner-one__img img {
  max-height: 560px;
  width: auto;
}

/* Graphique « dent » du thème dentaire — sans objet ici. */
.banner-one__shape-4 {
  display: none;
}

/* On borne le texte, pas le conteneur : `.banner-one__one-img-box` est un
   enfant flex de largeur nulle dont l'image déborde volontairement à droite.
   Contraindre `.banner-one__content` le pousserait hors écran. */
@media (min-width: 1200px) {
  .banner-one__sub-title,
  .banner-one__title,
  .banner-one__text {
    max-width: 60%;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .banner-one__sub-title,
  .banner-one__title,
  .banner-one__text {
    max-width: 68%;
  }
}

/*--------------------------------------------------------------
# 4. Une seule image par section, à pleine largeur de sa colonne
# Le thème compose un collage de 2-3 photos en positions absolues,
# masquées en portrait 450x600. Nos visuels sont des rendus produit
# et des illustrations aux formats variés : on repasse en flux, une
# seule image, sans recadrage destructeur.
--------------------------------------------------------------*/
.about-two__left,
.about-three__left {
  margin: 0;
  padding: 0;
  max-width: 100%;
}

/* Le thème réserve la place de la vignette superposée
   (`padding-right: 216px; padding-bottom: 144px`). Nous n'affichons plus
   qu'une image : ce gabarit doit être remis à zéro, sinon l'image occupe
   seulement la largeur restante. */
.about-two__left-img,
.about-three__img-box {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

/* Sélecteurs volontairement plus spécifiques : le thème fixe une largeur
   en dur (320px) sur ces emplacements depuis un sélecteur descendant. */
.about-two__left .about-two__left-img1,
.about-three__left .about-three__img {
  position: static;
  inset: auto;
  transform: none;
  mask: none;
  -webkit-mask: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 24px;
}

.about-two__left .about-two__left-img1 img,
.about-three__left .about-three__img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
}

/* Vignettes secondaires et décorations chiffrées du thème : sans objet. */
.about-two__left-img2,
.about-three__img-two,
.about-three__img-three,
.about-two__left-experience,
.about-two__left-total-leaners,
.about-three__experience-box {
  display: none;
}

.why-choose-one__img img {
  width: 100%;
  height: auto;
  border-radius: 24px;
}

/*--------------------------------------------------------------
# 5. Équilibre des grilles
# Règle générale : dans une même rangée, toutes les cartes ont la
# même hauteur, le titre est seul sur sa ligne au-dessus du texte.
--------------------------------------------------------------*/

/* 5a. Cartes produit (shop-one) — titre au-dessus, texte dessous, centré. */
.shop-one .row > [class*="col-"] {
  display: flex;
  margin-bottom: 30px;
}

.shop-one__single {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.shop-one__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background-color: var(--mediplace-white);
  padding: 16px;
  display: block;
}

.shop-one__content {
  display: block;
  flex: 1 1 auto;
  text-align: center;
  padding: 22px 20px 26px;
}

.shop-one__content-title {
  display: block;
  margin-bottom: 10px;
}

.shop-one__content-title h3 {
  display: block;
  margin: 0;
}

.shop-one__content-text {
  display: block;
  margin: 0;
}

/* 5b. Étapes / avantages (process-one) — texte centré, hauteurs égales. */
.process-one__inner .row > li {
  display: flex;
  margin-bottom: 30px;
}

.process-one__single {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: center;
}

.process-one__title,
.process-one__text {
  text-align: center;
}

.process-one__text {
  flex: 1 1 auto;
}

.process-one__icon {
  margin-left: auto;
  margin-right: auto;
}

/* Le thème décale les cartes 2 et 4 de 50px (zigzag). Nos quatre cartes
   ont désormais le même volume de texte : on aligne pour une lecture
   symétrique. */
.process-one ul li:nth-child(2) .process-one__single,
.process-one ul li:nth-child(4) .process-one__single {
  margin-top: 0;
}

.process-one__intro-text {
  max-width: 860px;
  margin: 0 auto 50px;
  text-align: center;
}

/* 5c. Cartes à icône (services-one) — hauteurs égales. */
.services-one .row > li {
  display: flex;
  margin-bottom: 30px;
}

.services-one__single {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.services-one__single-inner {
  flex: 1 1 auto;
}

/* 5d. Colonnes d'engagements / de fonctionnalités (cta-one). */
.cta-one {
  padding-top: 80px;
}

.cta-one__inner .row > li {
  display: flex;
  margin-bottom: 30px;
}

.cta-one__single {
  display: flex;
  width: 100%;
  height: 100%;
}

.cta-one__content {
  flex: 1 1 auto;
}

.cta-one__open-hours-list li p {
  margin-bottom: 6px;
}

/* 5e. Cartes « innovation » (services-one en fond clair) : titres sur
   deux lignes maximum, paragraphes alignés. */
.services-one__title {
  margin-bottom: 12px;
}

/*--------------------------------------------------------------
# 5f. Bloc pleine largeur « une seule idée » (accueil, NurseTab)
# Titre centré, grande illustration, bouton — comme le site de référence.
--------------------------------------------------------------*/
.qt-feature__lede {
  max-width: 820px;
  margin: 0 auto 32px;
  text-align: center;
}

.qt-feature__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  margin: 0 auto 46px;
  padding: 0;
  list-style: none;
}

.qt-feature__subtitle {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 30px;
  line-height: 1.35;
}

.qt-feature__figure {
  max-width: 1000px;
  margin: 0 auto 46px;
}

.qt-feature__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.qt-feature__btn {
  text-align: center;
}

/*--------------------------------------------------------------
# 5g. Ancres — le header collant ne doit pas masquer la cible
--------------------------------------------------------------*/
section[id] {
  scroll-margin-top: 120px;
}

/*--------------------------------------------------------------
# 6. Respiration entre les sections
--------------------------------------------------------------*/
.section-title {
  margin-bottom: 50px;
}

.about-two,
.about-three {
  padding-top: 90px;
  padding-bottom: 90px;
}

/*--------------------------------------------------------------
# 7. Mobile
# Le gabarit du thème réduit fortement le titre du héros, le logo
# et le bouton de menu : sur petit écran ils deviennent peu lisibles
# et sous la cible tactile recommandée (44x44 px).
--------------------------------------------------------------*/
@media (max-width: 991px) {

  /* Logo plus présent dans l'en-tête. */
  .main-menu__logo img,
  .mobile-nav__content .logo-box img {
    max-height: 62px;
  }

  /* Bouton hamburger : cible tactile confortable et bien visible. */
  .mobile-nav__toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 26px;
    color: var(--mediplace-black);
    border: 1px solid rgba(var(--mediplace-black-rgb), .12);
    border-radius: 14px;
    background-color: var(--mediplace-white);
  }

  .mobile-nav__toggler:hover,
  .mobile-nav__toggler:focus-visible {
    color: var(--mediplace-white);
    background-color: var(--mediplace-base);
    border-color: var(--mediplace-base);
  }
}

@media (max-width: 767px) {

  /* Titre du héros : plus grand et plus gras, c'est la première accroche. */
  .banner-one__title {
    font-size: 44px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.03em;
    max-width: 100%;
    margin-bottom: 18px;
  }

  .banner-one__sub-title,
  .banner-one__text {
    max-width: 100%;
  }

  .banner-one__text {
    margin-bottom: 30px;
  }

  /* Espace entre les textes et les boutons qui les suivent. */
  .banner-one__btn-and-call-box {
    gap: 22px;
    row-gap: 22px;
    margin-top: 6px;
  }

  .about-two__btn-and-author-box,
  .about-two__btn,
  .qt-feature__btn,
  .slogan-one__content-bottom,
  .service-details__get-started-btn-box {
    margin-top: 28px;
  }

  .section-title {
    margin-bottom: 36px;
  }

  .qt-feature__subtitle {
    font-size: 24px;
  }

  /* Les ancres visent plus haut : l'en-tête mobile est moins haut. */
  section[id] {
    scroll-margin-top: 90px;
  }
}

@media (max-width: 575px) {
  .banner-one__title {
    font-size: 38px;
  }
}

/*--------------------------------------------------------------
# 8. Finitions mobiles (retours client)
--------------------------------------------------------------*/
@media (max-width: 767px) {

  /* 8a. Héros — la photo est plus petite et respire davantage sous le texte.
     Le thème la passe en `width: 100%` sous 768px : on la borne. */
  .banner-one__one-img-box {
    margin-top: 64px;
  }

  .banner-one__img {
    text-align: right;
  }

  .banner-one__img img {
    width: auto;
    max-width: 86%;
    max-height: 360px;
    margin-left: auto;
  }

  /* 8b. Toujours de l'air entre un bouton et le texte qui le suit. */
  .about-two__btn,
  .about-two__btn-and-author-box,
  .about-three__btn,
  .qt-feature__btn,
  .slogan-one__content-btn,
  .service-details__get-started-btn-box,
  .contact-one__btn-box,
  .contact-page__btn {
    margin-bottom: 34px;
  }

  .about-two__sub-title,
  .qt-feature__subtitle {
    margin-top: 10px;
  }

  /* 8c. Puces à icône — alignées à gauche, icône et texte sur la même ligne.
     Le thème met `flex-wrap: wrap` sur le `li`, ce qui fait passer le texte
     sous l'icône ; et notre rangée centrée décalait la première puce. */
  .qt-feature__points {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 18px;
    text-align: left;
  }

  .qt-feature__points li,
  .about-three__points li,
  .about-two__points-list li {
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
  }

  .qt-feature__points li .icon,
  .about-three__points li .icon,
  .about-two__points-list li .icon {
    flex: 0 0 24px;
    margin-top: 4px;
  }

  .qt-feature__points li .text,
  .about-three__points li .text,
  .about-two__points-list li .text {
    flex: 1 1 auto;
    text-align: left;
  }
}