/**

 * Content Text Image

 * Bloc texte + image avec position configurable

 *

 * @package Dioqa_Starter_Custom

 */



/* ========================================

   BASE

   ======================================== */



.content-text-image {

  --cti-text-dark: var(--color-text-dark, #3b3949);

  --cti-text-muted: var(--color-text-muted, #6b687d);

  --cti-primary: var(--bs-primary, #94d2eb);



  padding-top: var(--section-pt, 5rem);

  padding-bottom: var(--section-pb, 5rem);

}



/* ========================================

   SECTION TITLE (Centered Top Title)

   ======================================== */



.content-text-image__section-title,

.content-text-image__section-title h1,

.content-text-image__section-title h2,

.content-text-image__section-title h3,

.content-text-image__section-title h4,

.content-text-image__section-title h5,

.content-text-image__section-title h6 {

  font-size: 42px;

  color: var(--cti-text-dark);

  line-height: 1.2;

  font-weight: 700;

  margin-bottom: 0;

}



/* ========================================

   BACKGROUNDS

   ======================================== */



.content-text-image--bg-white {

  background-color: #fff;

}



.content-text-image--bg-light {

  background-color: #f3f9fb;

}



.content-text-image--bg-transparent {

  background-color: transparent;

}



/* ========================================

   TITLE

   ======================================== */



.content-text-image__title,

.content-text-image__title h1,

.content-text-image__title h2,

.content-text-image__title h3,

.content-text-image__title h4,

.content-text-image__title h5,

.content-text-image__title h6 {

  font-size: 36px;

  color: var(--cti-text-dark);

  line-height: 1.3;

}



/* ========================================

   DESCRIPTION

   ======================================== */



.content-text-image__description {

  color: var(--cti-text-muted);

}



/* ========================================

   BUTTON

   ======================================== */



.content-text-image__button {

  background-color: var(--cti-primary);

  border: 1px solid var(--cti-primary);

  color: white;

  font-size: 16px;

  font-weight: 600;

  padding: 16px 28px;

  border-radius: 4px;

  text-decoration: none;

  display: inline-block;

  transition: all 0.3s ease;

}



.content-text-image__button:hover {

  background-color: #7bc4de;

  border-color: #7bc4de;

  color: white;

}



/* ========================================

   IMAGE

   ======================================== */



.content-text-image__image-container {

  width: 100%;

  max-width: 648px;

}



.content-text-image__image,

picture.content-text-image__image img {

  width: 100%;

  height: auto;

  object-fit: cover;

  border-radius: 10px;

}



picture.content-text-image__image {

  overflow: hidden;

  border-radius: 10px;

}



/* Image à droite : centrer l'image côté droit */

.flex-lg-row-reverse .content-text-image__image-container {

  margin-left: auto;

}



/* ========================================

   RESPONSIVE - LG (< 992px)

   ======================================== */



@media (max-width: 991.98px) {

  .content-text-image {

    padding-top: calc(var(--section-pt, 5rem) / 2);

    padding-bottom: calc(var(--section-pb, 5rem) / 2);

  }



  .content-text-image__section-title,

  .content-text-image__section-title h1,

  .content-text-image__section-title h2,

  .content-text-image__section-title h3,

  .content-text-image__section-title h4,

  .content-text-image__section-title h5,

  .content-text-image__section-title h6 {

    font-size: 34px;

  }



  .content-text-image__title,

  .content-text-image__title h1,

  .content-text-image__title h2,

  .content-text-image__title h3,

  .content-text-image__title h4,

  .content-text-image__title h5,

  .content-text-image__title h6 {

    font-size: 28px;

  }



  .content-text-image__image-container {

    max-width: 100%;

    margin: 0 auto;

  }

}



/* ========================================

   RESPONSIVE - MD (< 768px)

   ======================================== */



@media (max-width: 767.98px) {

  .content-text-image__section-title,

  .content-text-image__section-title h1,

  .content-text-image__section-title h2,

  .content-text-image__section-title h3,

  .content-text-image__section-title h4,

  .content-text-image__section-title h5,

  .content-text-image__section-title h6 {

    font-size: 28px;

  }



  .content-text-image__title,

  .content-text-image__title h1,

  .content-text-image__title h2,

  .content-text-image__title h3,

  .content-text-image__title h4,

  .content-text-image__title h5,

  .content-text-image__title h6 {

    font-size: 24px;

  }

}