/* ==========================================================================
   POLICES ET TYPOGRAPHIE
   ========================================================================== */

/* Police Tangerine */
@font-face {
  font-display: swap;
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Tangerine_Regular.ttf') format('truetype'),
       url('../fonts/Tangerine_Regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Tangerine_Bold.ttf') format('truetype'),
       url('../fonts/Tangerine_Bold.woff2') format('woff2');
}

/* Fallback pour Google Fonts */
@font-face {
  font-family: 'Tangerine';
  src: url('/fonts/tangerine-v17-latin-regular.woff2') format('woff2'),
       url('/fonts/Tangerine-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tangerine';
  src: url('/fonts/tangerine-v17-latin-700.woff2') format('woff2'),
       url('/fonts/Tangerine-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   STYLES GLOBAUX
   ========================================================================== */

body {
  background-color: #faeff3;
}

/* ==========================================================================
   TYPOGRAPHIE - TITRES ET TEXTES
   ========================================================================== */

/* Titres h1 */
h1 {
  line-height: 36px !important;
}

h1 i {
  font-size: 2rem !important;
  font-style: normal;
}

.h1-on-background strong {
  font-weight: normal !important;
  font-size: 32px !important;
  line-height: 32px !important;
}

/* Titres h2-like */
.h2-like {
  font-weight: 500;
  font-size: 2rem !important;
  margin-bottom: 4px;
  margin-top: 20px;
}

.h2-bloc-pre-content {
  /* background-color: #ffffff !important; */
}

/* Titres h3-like */
.h3-like {
  font-size: 28px !important;
  font-weight: 500;
  line-height: 33.6px;
  margin-bottom: 0px;
  margin-top: 10px;
}

/* Titres h6 */
.h6, h6 {
  font-size: 1.2rem;
}

.h6-like u {
  font-weight: 200;
  font-size: 1.2rem;
  text-decoration: none !important;
}

.h6-like-temoignage u {
  display: block;
  font-weight: 200;
  font-size: 1.2rem;
  text-decoration: none !important;
}

/* Classes de mise en évidence */
.highlight {
  font-family: 'Tangerine', serif;
  font-weight: 400;
}
/* Styles de base (mobile first) */
.highlight {
  font-size: 3rem !important;
  line-height: 3rem !important;
}

/* Styles pour les écrans plus grands (768px et plus) */
@media screen and (min-width: 768px) {
  .highlight {
    font-size: 4rem !important;
    line-height: 5rem !important;
  }
}
.h4-like {
  font-size: 1rem !important;
  line-height: 1.1rem !important;
}

/* Styles pour les écrans plus grands (768px et plus) */
@media screen and (min-width: 768px) {
  .h4-like {
    font-size: 24px !important;
    line-height: 28px !important;
  }
}

.HLblanc {
  font-family: 'Tangerine', serif;
  font-weight: 400;
  font-size: 4rem;
  color: #ffffff !important;
}

.highlight-bold {
  font-family: 'Tangerine', serif;
  font-weight: 700;
  font-size: 4rem;
  color: #0b7a98;
}

/* Labels et espacement */
.label-title-smallspace {
  margin-top: 10px;
  margin-bottom: 0px;
}

/* ==========================================================================
   LISTES ET CONTENUS
   ========================================================================== */

ul.ul-content {
  list-style-type: none;
  padding-left: 1em;
}

ul.ul-content li::before {
  content: "– ";
  position: absolute;
  margin-left: -1em;
}
ul.ul-content li {
  padding: .25rem !important;
}

ul.ul-content li p {
  margin-bottom: 0;
  padding: .25rem !important;
}

/* ==========================================================================
   BOUTONS ET LIENS
   ========================================================================== */

.btn-d, .btn-d:hover, .btn-d:focus {
  color: #FFF;
  background-color: #1e9cb !important;
}

.cta-button {
  width: auto;
}

@media (max-width: 375px) {
  .cta-button {
    width: 100%;
  }
}

/* Liens du footer */
#footer-nav a:link, #footer-nav a:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}

#footer-nav a:hover, #footer-nav a:active {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Liens html dans les contenus texte */
.contenu-lien:link,
.contenu-lien:visited {
  color: #0B7A98 !important;
  text-decoration: underline !important;
  font-weight: bold;
}

.contenu-lien:hover,
.contenu-lien:active {
  color: #973568 !important;
  text-decoration: none !important;
  font-weight: bold;
}

/* Correction alignement boutons topnav en extra small */
@media (max-width: 575px) {
    .topnav-cta-button-horiz-b {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        text-align: center;
    }
    
    /* S'assurer que les deux boutons ont la même largeur et alignement */
    .topnav-cta-button-horiz-a,
    .topnav-cta-button-horiz-b {
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        max-width: none;
    }
}

/* ==========================================================================
   TABLEAUX
   ========================================================================== */

.table-custom {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: Arial, sans-serif !important;
  color: #333 !important;
  background-color: transparent !important;
}

.table-custom th, .table-custom td {
  padding: 8px 20px !important;
  border: none !important;
  vertical-align: top !important;
  font-size: 1rem !important;
}

.table-custom thead tr {
  border-bottom: 1px solid #d1d1d1 !important;
}

.table-custom th {
  font-weight: 600 !important;
  text-align: left !important;
  color: #555 !important;
  background-color: transparent !important;
}

.table-custom th:first-child, .table-custom td:first-child {
  width: 20% !important;
}

.table-custom th:nth-child(2), .table-custom td:nth-child(2) {
  width: 80% !important;
}

/* Alternance des lignes : 1ère ligne #ffffff, 2ème ligne #faeff3 */
.table-custom tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
}

.table-custom tbody tr:nth-child(even) {
  background-color: #faeff3 !important;
}

/* Rollover uniforme pour toutes les lignes */
.table-custom tbody tr {
  transition: background-color 0.2s ease !important;
}

.table-custom tbody tr:hover {
  background-color: #ffd9e7 !important;
}

@media (max-width: 768px) {
  .table-custom th, .table-custom td {
    padding: 12px 15px !important;
    font-size: 0.9rem !important;
  }
}

/* ==========================================================================
   CARTES ET ACCORDÉONS
   ========================================================================== */

/* Cards alignement et layout */
.massage-cards > [class*="col-"] {
  display: flex;
  align-items: flex-start;
  align-self: flex-start !important;
}

.card {
  height: 100% !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card h3 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (max-width: 767px) {
  .card {
    min-height: 100%;
  }
}

/* Accordéons */
.card-header,
.card-body.text-left,
.card-body.text-left * {
  text-align: left !important;
  background-color: #f4e3e9;
}

.card-header {
  padding: 0;
}

.card-header [data-toggle="collapse"] {
  width: 100%;
  height: 100%;
  padding: 0.75rem 1.25rem;
  text-align: left;
  border: none;
  background-color: rgba(151,53,104,0.6);
  display: block;
  color: #ffffff !important;
  text-decoration: none;
}

.card-header [data-toggle="collapse"]:hover {
  background-color: rgba(151,53,104,0.8);
  text-decoration: none;
  color: #ffffff !important;
}

.card-header [data-toggle="collapse"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(11,122,152,0.25);
}

.card.h-100 {
    height: auto !important;
}

/* Forcer les cards en flexbox pour aligner le bouton en bas */
.card.h-100 {
    display: flex !important;
    flex-direction: column !important;
}

.card.h-100 .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* Pousser le bouton en bas */
.card.h-100 .card-body .btn {
    margin-top: auto !important;
}

/* ==========================================================================
   BORDURES ET ARRIÈRE-PLANS
   ========================================================================== */

/* Bordures en pointillés */
.bloc-top-border {
  border-style: dashed;
  border-color: #cccccc !important;
  border-width: 1px 0px 0px 0px;
}

.bloc-bot-border {
  border-style: dashed;
  border-color: #cccccc !important;
  border-width: 0px 0px 1px 0px;
}

.bloc-topbot-border {
  border-style: dashed;
  border-color: #cccccc !important;
  border-width: 1px 0px 1px 0px;
}

/* Arrière-plans */
.bkg-change {
  background-color: #EDEEE1 !important;
}

/* ==========================================================================
   EFFETS ET IMAGES
   ========================================================================== */

/* Effet d'opacité spécifique */
#reflexo-plantaire.opacite-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.3 !important;
  z-index: 1;
  pointer-events: none;
}

/* Effet parallax */
.no-parallax-bkg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

@media (max-width: 600px) {
  .no-parallax-bkg {
    background-attachment: scroll;
    background-size: contain;
    background-position: top center;
  }
}

/* CSS corrigé pour JPG ET PNG vers WebP */
picture {
    display: inline-block;
    max-width: 100%;
}

picture img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Préserver les styles Bootstrap/BlocsApp pour toutes les images */
picture.img-responsive img,
picture .img-responsive,
picture.img-fluid img,
picture .img-fluid {
    max-width: 100%;
    height: auto;
}

/* Support spécifique pour les logos */
picture img[alt*="logo"],
picture img[alt*="Logo"] {
    width: auto;
    height: auto;
}

/* image de paragraphe alignee a droite du texte */
.paragraph-image {
  overflow: hidden !important;
  margin-bottom: 2rem !important;
}

.paragraph-image img {
  float: right !important;
  width: 40% !important;
  height: auto !important;
  margin-left: 1.5rem !important;
  margin-bottom: 1rem !important;
}

.paragraph-image h3,
.paragraph-image ul,
.paragraph-image p,
.paragraph-image blockquote {
  text-align: left !important;
}

/* 📱 Version mobile */
@media (max-width: 768px) {
  .paragraph-image img {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 auto 1rem auto !important;
  }

  .paragraph-image h3,
  .paragraph-image ul,
  .paragraph-image p,
  .paragraph-image blockquote {
    text-align: left !important;
  }
}






/* ==========================================================================
   NAVIGATION ET ANCRES
   ========================================================================== */

/* Décalage pour les liens d'ancre avec navbar fixe */
[id] {
  scroll-margin-top: 183px; /* Mobile */
}

@media (min-width: 768px) {
  [id] {
    scroll-margin-top: 221px; /* Tablette */
  }
}

@media (min-width: 1200px) {
  [id] {
    scroll-margin-top: 183px; /* Desktop */
  }
}

/* ==========================================================================
   UTILITAIRES ET CLASSES SPÉCIALES
   ========================================================================== */

.notab {
  padding: 0px 0px 0px 14px;
}

#domaines {
  color: #ffffff !important;
}

/* Icônes avec espacement */
.fa-phone::before, .icon-mail::before {
  padding-right: 8px;
}

/* Logo responsive */
@media only screen and (max-width: 600px) {
  .logo-xs {
    height: 270px;
    width: 270px;
  }
}



/* ==========================================================================
   RESPONSIVE DESIGN - IMAGES ET ARRIÈRE-PLANS
   ========================================================================== */

/* Gestion responsive des images de fond */
@media screen and (min-width: 768px) {
  .bkg-image-change {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .bkg-change {
    background-image: none !important;
    background-color: #cccccc !important;
  }
}


/+ Animations scroll-in scroll-out Labels logos */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media screen and (max-width: 767px) {
    .no-mobile-animations * {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* AJOUT pour les classes scroll-fx spécifiques */
@media screen and (max-width: 767px) {
  .scroll-fx-left-in,
  .scroll-fx-left-out,
  .scroll-fx-right-in,
  .scroll-fx-right-out,
  .scroll-fx-top-in,
  .scroll-fx-top-out,
  .scroll-fx-bottom-in,
  .scroll-fx-bottom-out,
  .scroll-fx-fade-in,
  .scroll-fx-fade-out,
  [class*="scroll-fx-"] {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }
}