@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");

body {
  font-family: 'Inter', sans-serif;
  color: #263238;
  background-color: #F6F8F4;
		
}

h1, h2, h3, h4, h5, h6 .site-title {
  font-family: 'Manrope', sans-serif;
  color: #173943;
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
}

h2 {
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.15;
}

h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
}

p {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.75;
}

.section-white {
  background-color: #FFFDF8;
  color: #263238;
}

.section-light {
  background-color: #FBF6EE;
  color: #263238;
}

.section-blue-light {
  background-color: #E3F1F5;
  color: #263238;
}

.section-blue-lagoon {
  background-color: #A9D4DD;
  color: #F6F8F4;
}

.section-warm-sand {
  background-color: #EAD7B7;
  color: #263238;
}

.section-dark {
  background-color: #173943;
  color: #FFFDF8;
}

.section-dark h1,
.section-dark h2,
.section-dark h3
.section-dark h4
.section-dark h5
.section-dark h6 {
  color: #FFFDF8;
}

.section-dark p {
  color: #E3F1F5;
}
.btn-primary {
  background-color: #C8A96A;
  color: #173943;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  background-color: #D7B878;
  color: #173943;
}

.btn-secondary {
  background-color: transparent;
  color: #F8F6F1;
  border: 1px solid #F8F6F1;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.card {
  background-color: #FFFFFF;
  border: 1px solid #E4ECEC;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 12px 32px rgba(23, 57, 67, 0.08);
}

/* Menu Top line */
.main-navigation {
	

border-top: 1px solid rgba(23, 57, 67, 0.07);

}

/* Menu principal : liens */
.main-navigation a {
  position: relative;
  color: #173943;
  text-decoration: none;
  transition: color 0.25s ease;
}

/* Hover : texte */
.main-navigation a:hover {
  color: #173943;
}

/* Soulignement invisible par défaut */
.main-navigation a::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 8px;
  height: 1px;
  background-color: #C8A96A;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

/* Soulignement au survol */
.main-navigation a:hover::after {
  transform: scaleX(1);
}

/* Soulignement permanent sur la page active */
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after,
.main-navigation .current-menu-ancestor > a::after,
.main-navigation .current_page_ancestor > a::after {
  transform: scaleX(1);
}

/* Texte de la page active */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_ancestor > a {
  color: #173943;
  font-weight: 600;
}

 /* Affiche ou non les pages dédiées aux mobiles */
@media screen and (max-width: 680px) {
  .mobile-hide {
    display: none !important;
  }

  .mobile-show {
    display: block !important;
  }
}

@media screen and (min-width: 681px) {
  .mobile-hide {
    display: block !important;
  }

  .mobile-show {
    display: none !important;
  }
}



/* LIVEMESH SERVICES - titres */


.services-custom .lsow-service .lsow-service-text h3,
.services-custom .lsow-service .lsow-service-text h4,
.services-custom .lsow-service .lsow-service-text h5,
.services-custom .lsow-service .lsow-service-text .lsow-title,
.services-custom [class*="lsow-service"] h3,
.services-custom [class*="lsow-service"] h4,
.services-custom [class*="lsow-service"] h5,
.services-custom [class*="lsow-service"] .lsow-title {
  font-size: clamp(20px, 2.2vw, 26px) !important;
font-family: "Cormorant Garamond", serif !important;
				  font-style: italic !important;
  line-height: 1.3 !important;
  color: #F6F8F4 !important;
  font-weight: 600 !important;
}

/* LIVEMESH SERVICES - textes */
.services-custom .lsow-service .lsow-service-text,
.services-custom .lsow-service .lsow-service-text p,
.services-custom [class*="lsow-service"] .lsow-service-text,
.services-custom [class*="lsow-service"] p {
  font-size: clamp(24px, 1.6vw, 32px) !important;
font-family: "Cormorant Garamond", serif !important;
		  font-style: italic !important;
  line-height: 1.6 !important;
  color: #F6F8F4 !important;
  font-weight: 500 !important;
}

/* Livemesh Services 1 - texte */


.services-custom1 h3
.services-custom1 h4 
.services-custom1 h5
.services-custom1 h6 {
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
   color: #263238 !important;
}

.services-custom1 .lsow-service .lsow-service-text,
.services-custom1 .lsow-service .lsow-service-text p {
  font-size: 20px !important;
  line-height: 1.6 !important;
		 color: #263238 !important;
}

@media screen and (max-width: 768px) {
  .services-custom1 h3,
  .services-custom1 h4 {
    font-size: 16px !important;
  }

  .services-custom1 p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}

/* Editeur - texte */


.editeur p {
  font-size: 15px !important;
  line-height: 1.6 !important;

}

@media screen and (max-width: 768px) {

  .editeur p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* Ligne de séparation Footer */

#colophon {
  border-top: 1px solid rgba(227, 241, 245, 0.18);
}

/* HERO HEADER - mobile */
/* HERO ACCOMPAGNEMENTS - titre */
.hero-accompagnements h1,
.hero-accompagnements h2,
.hero-accompagnements h3,
.hero-accompagnements .sow-slider-image-wrapper h1,
.hero-accompagnements .sow-slider-image-wrapper h2,
.hero-accompagnements .sow-slider-image-wrapper h3 {
  font-size: clamp(17px, 4vw, 38px) !important;
  line-height: 1.22 !important;
}

/* HERO ACCOMPAGNEMENTS - sous-titre */

.hero-accompagnements p,
.hero-accompagnements .sow-slider-image-wrapper p,
.hero-accompagnements .sow-hero-sub-title,
.hero-accompagnements .sow-sub-headline {
  font-size: clamp(15px, 2.2vw, 20px) !important;
  line-height: 1.5 !important;
}

/* HERO ACCOMPAGNEMENTS - bouton */
.hero-accompagnements .sow-hero-buttons a,
.hero-accompagnements .sow-slider-image-wrapper a,
.hero-accompagnements a.sow-hero-button,
.hero-accompagnements .ow-button-base a {
  font-size: clamp(9px, 1.6vw, 16px) !important;
  line-height: 1.2 !important;
  padding: 12px 20px !important;
}


/* HERO LIVEMESH - PAGE APPROCHE : reset des effets */
.hero-approche,
.hero-approche * {
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Texte 1 : "Je propose une approche..." */
.hero-approche .lsow-hero-header .lsow-subheading,
.hero-approche .lsow-subheading {
  font-size: clamp(12px, 2.1vw, 18px) !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
}

/* Texte 2 : "Une approche à distance..." */
.hero-approche .lsow-hero-header .lsow-heading,
.hero-approche .lsow-heading {
  font-size: clamp(20px, 4vw, 28px) !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
}

/* Bouton Hero Livemesh */
.hero-approche a,
.hero-approche .lsow-button,
.hero-approche .lsow-button-wrap a,
.hero-approche [class*="button"] a {
  color: #FFFFFF !important;
  background-color: transparent !important;
  border: 1.5px solid #FFFFFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: clamp(14px, 1.6vw, 16px) !important;
}

/* Bouton au survol */
.hero-approche a:hover,
.hero-approche .lsow-button:hover,
.hero-approche .lsow-button-wrap a:hover,
.hero-approche [class*="button"] a:hover {
  color: #263238 !important;
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  box-shadow: none !important;
}





/* ===== Fluent Forms Conversational — premium doux ton sur ton ===== */

/* Fond général */
body {
  background: #FBF6EE;
}

/* Zone formulaire */
.ff_conv_app,
.fluentform.fluentform_wrapper {
  font-family: "Inter", "Segoe UI", sans-serif;
  background: transparent !important;
  color: #263238;
}

/* Fond conversationnel */
.ff_conv_app {
  background: transparent !important;
}

/* Titres / questions */
.ff_conv_app h1,
.ff_conv_app h2,
.ff_conv_app h3,
.ff_conv_app .ff_t_c,
.ff_conv_app .ff-el-input--label {
  color: #263238 !important;
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Texte secondaire */
.ff_conv_app p,
.ff_conv_app .ff_t_desc,
.ff_conv_app .ff-el-help-message,
.ff_conv_app .ff-el-is-error,
.ff_conv_app small {
  color: rgba(38, 50, 56, 0.72) !important;
  line-height: 1.65;
}

/* Réponses / cartes */
.ff_conv_app .ff-el-form-check,
.ff_conv_app .ff-el-input--content .ff_btn,
.ff_conv_app .ff-btn:not(.ff-btn-primary) {
  background: transparent !important;
  color: #263238 !important;
  border: 1px solid rgba(38, 50, 56, 0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(38, 50, 56, 0.045);
  transition: all 0.22s ease;
  backdrop-filter: blur(2px);
}

/* Survol réponses */
.ff_conv_app .ff-el-form-check:hover,
.ff_conv_app .ff-btn:not(.ff-btn-primary):hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(38, 50, 56, 0.07);
  border-color: rgba(38, 50, 56, 0.12) !important;
		 background: transparent !important;
}

/* Réponse sélectionnée */
.ff_conv_app input:checked + label,
.ff_conv_app .active,
.ff_conv_app .ff_selected {
  background: #F3EBDF !important;
  border-color: rgba(38, 50, 56, 0.16) !important;
  color: #263238 !important;
  box-shadow: 0 12px 30px rgba(38, 50, 56, 0.05);
}

/* Champs texte / email */
.ff_conv_app input[type="text"],
.ff_conv_app input[type="email"],
.ff_conv_app textarea {
 background: transparent !important;
  color: #263238 !important;
  border: 1px solid rgba(38, 50, 56, 0.08) !important;
  border-radius: 16px !important;
  padding: 15px 16px !important;
  box-shadow: 0 8px 22px rgba(38, 50, 56, 0.035);
}

/* Focus champs */
.ff_conv_app input[type="text"]:focus,
.ff_conv_app input[type="email"]:focus,
.ff_conv_app textarea:focus {
  outline: none !important;
  border-color: rgba(38, 50, 56, 0.18) !important;
  box-shadow: 0 0 0 4px rgba(38, 50, 56, 0.06) !important;
		 background: transparent !important;
}

/* Placeholder */
.ff_conv_app input::placeholder,
.ff_conv_app textarea::placeholder {
		 background: transparent !important;
  color: rgba(38, 50, 56, 0.42) !important;
}

/* Bouton principal */
.ff_conv_app .ff-btn-primary,
.ff_conv_app button[type="submit"],
.ff_conv_app .ff_submit_btn_wrapper .ff-btn {
  background: #263238 !important;
  color: #FBF6EE !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 14px 24px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 28px rgba(38, 50, 56, 0.16);
}

/* Hover bouton principal */
.ff_conv_app .ff-btn-primary:hover,
.ff_conv_app button[type="submit"]:hover,
.ff_conv_app .ff_submit_btn_wrapper .ff-btn:hover {
  background: #1f2a2e !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(38, 50, 56, 0.20);
}

/* Barre de progression */
.ff_conv_app .ff-step-progressbar,
.ff_conv_app .ff_progressbar {
  background: rgba(38, 50, 56, 0.08) !important;
  border-radius: 999px !important;
  overflow: hidden;
}

.ff_conv_app .ff-step-progressbar .ff-current-progress,
.ff_conv_app .ff_progressbar span {
  background: #263238 !important;
}

/* Bloc consentement */
.ff-consent-block {
  background: transparent !important;
  border: 1px solid rgba(38, 50, 56, 0.08);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 8px 22px rgba(38, 50, 56, 0.035);
}

/* Bloc contact */
.ff-contact-block {
  margin-top: 10px;
}

/* Mobile */
@media (max-width: 768px) {
  .ff_conv_app .ff-btn-primary,
  .ff_conv_app button[type="submit"],
  .ff_conv_app .ff_submit_btn_wrapper .ff-btn {
    width: 100%;
  }

  .ff_conv_app input[type="text"],
  .ff_conv_app input[type="email"],
  .ff_conv_app textarea {
    font-size: 16px !important;
  }
}



/* SiteOrigin Button - état normal */
.bouton-custom .ow-button-base a {
  background: #dd3333 !important;
  border: 2px solid #dd3333 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Texte interne du bouton */
.bouton-custom .ow-button-base a span {
  color: #FFFFFF !important;
}

/* SiteOrigin Button - survol */
.bouton-custom .ow-button-base a:hover {
  background: #FBF6EE !important;
  border-color: #dd3333 !important;
  color: #FFFFFF !important;
}

/* Texte interne au survol */
.bouton-custom .ow-button-base a:hover span {
  color: #263238 !important;
}

/* SiteOrigin Button Dark - état normal */
.bouton-custom-dark .ow-button-base a {
  background: #dd3333 !important;
  border: 2px solid #dd3333 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Texte interne du bouton */
.bouton-custom-dark .ow-button-base a span {
  color: #FFFFFF !important;
}

/* SiteOrigin Button - survol */
.bouton-custom-dark .ow-button-base a:hover {
  background: #173943 !important;
  border-color: #dd3333 !important;
  color: #FFFFFF !important;
}

/* Texte interne au survol */
.bouton-custom-dark .ow-button-base a:hover span {
  color: #FFFFFF !important;
}

/* Variante ciblée SiteOrigin Services / Features */
.services-bouton-plus a.sow-more-text {
  display: inline-block !important;
  margin-top: 14px !important;
  padding: 10px 20px !important;
  background: transparent !important;
  border: 2px solid #1F6F8B !important;
  color: #1F6F8B !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-size: clamp(14px, 1.5vw, 16px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.services-bouton-plus a.sow-more-text:hover {
  background: #1F6F8B !important;
  border-color: #1F6F8B !important;
  color: #FFFFFF !important;
}