/*
Theme Name: La Savonnerie des Clochettes

Theme URI: http://www.ncn-comm.fr
Description: Theme enfant de l'assiette de Lola
Author: NCN Comm’
Author Yuri : https://ncn-comm.fr
Version: 4.27.4
Template: Divi

*/@import url(« ../Divi/style.css");

/* --------- Insert your custom styles on next rows --------- */

/* Global font-size setting */

html {
  font-size: 62.5%;
}

/* Reset margins for text elements */
p, h1, h2, h3, h4, h5, h6, span, div, a {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Reset margins for buttons */
button, .et_pb_button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


p {
    margin-top: 1.5rem; /* Small top margin */
    margin-bottom: 1.5rem; /* Small bottom margin */
}

/* Button Margins */
button, .et_pb_button {
    margin-top: 1rem; /* Small margin above the button */
    margin-bottom: 1rem; /* Small margin below the button */
}

/* Section Margins */
.section {
    margin-top: 4rem; /* Large top margin */
    margin-bottom: 4rem; /* Large bottom margin */
}

/* ================== */
/* TYPOGRAPHY                 */
/* ================== */

/* Headings */
.sk h1 {
  font-size: clamp(3.5rem, calc(3.5rem + ((1vw - 0.48rem) * 2.8217)), 6rem);
  line-height: clamp(4.2rem, calc(4.2rem + ((1vw - 0.48rem) * 3.386)), 7.2rem);
  /*text-wrap: balance; /* Balance the line breaks */
  letter-spacing: -1px; /* Adjust letter spacing */
}

.sk h2 {
  font-size: clamp(2.8rem, calc(2.8rem + ((1vw - 0.48rem) * 2.2574)), 4.8rem);
  line-height: clamp(3.36rem, calc(3.36rem + ((1vw - 0.48rem) * 2.7089)), 5.76rem);
  /*text-wrap: balance; /* Balance the line breaks */
}

.sk h3 {
  font-size: clamp(2.24rem, calc(2.24rem + ((1vw - 0.48rem) * 1.8059)), 3.84rem);
  line-height: clamp(2.69rem, calc(2.69rem + ((1vw - 0.48rem) * 2.1671)), 4.61rem);
}

.sk h4 {
  font-size: clamp(2.2rem, calc(1.79rem + ((1vw - 0.48rem) * 1.4447)), 3.07rem);
  line-height: clamp(2.15rem, calc(2.15rem + ((1vw - 0.48rem) * 1.7337)), 3.68rem);
}

.sk h5 {
  font-size: clamp(2rem, calc(1.43rem + ((1vw - 0.48rem) * 1.1558)), 2.46rem);
  line-height: clamp(1.72rem, calc(1.72rem + ((1vw - 0.48rem) * 1.3869)), 2.95rem);
}

.sk h6 {
  font-size: clamp(1.8rem, calc(1.14rem + ((1vw - 0.48rem) * 0.9246)), 1.97rem);
  line-height: clamp(1.37rem, calc(1.37rem + ((1vw - 0.48rem) * 1.1095)), 2.36rem);
}


/* Apply to paragraphs, links, and list items */

.sk p, .sk a, .sk li {
  font-size: clamp(1.7rem, calc(1.7rem + ((1vw - 0.48rem) * 0.3386)), 1.9rem);
  line-height: clamp(2.38rem, calc(2.38rem + ((1vw - 0.48rem) * 0.3386)), 2.8rem);
  overflow-wrap: break-word; /* For consistent behavior across browsers */
  word-wrap: break-word; /* Fallback for older browsers */
  text-wrap: balance; /* Balances lines for optimal readability */
}


/* Text Transform */
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

/* Text Alignment */
.left {
  text-align: left !important;
}

.center {
  text-align: center !important;
}

.right {
  text-align: right !important;
}

.justify {
  text-align: justify !important;
}

/* ======================= */
/* CONTENT SECTION STYLING   */
/* ======================= */

.sk-content {
  font-size: clamp(1.7rem, calc(1.7rem + ((1vw - 0.48rem) * 0.3386)), 1.9rem);
  line-height: clamp(2.38rem, calc(2.38rem + ((1vw - 0.48rem) * 0.3386)), 2.8rem);
  max-width: 65ch;

  /* Centering */
  margin: 0 auto; /* Center horizontally */
  text-align: center; /* Optional: center text */

  /* Text wrapping */
  text-wrap: pretty; /* Improve text wrapping for a prettier appearance */
}

/* ===================== */
/* CUSTOM HEADINGS             */
/* ===================== */

.heading-xxlarge {
  font-size: clamp(5rem, 4.5vw, 6rem); /* Extra-large size for maximum prominence */
  letter-spacing: -1.2px; /* Slightly tighter letter spacing */
  line-height: 1.05; /* Even tighter for dramatic impact */
  text-wrap: balance; /* Maintain balanced line breaks */
}

.heading-xlarge {
  font-size: clamp(4rem, 3.5vw, 5rem); /* Larger size for prominent headings */
  letter-spacing: -1px;
  line-height: 1.1; /* Tightest for maximum impact */
  text-wrap: balance; /* Balance the line breaks */
}

.heading-large {
  font-size: clamp(3rem, 2.8vw, 4rem);
  letter-spacing: -1px;
  line-height: 1.2; /* Tight for large headings */
  text-wrap: balance; /* Balance the line breaks */
}

.heading-medium {
  font-size: clamp(2.4rem, 2.2vw, 3rem);
  letter-spacing: 0px;
  line-height: 1.3; /* Moderate for medium headings */
  text-wrap: balance; /* Balance the line breaks */
}

.heading-small {
  font-size: clamp(1.8rem, 1.6vw, 2.4rem);
  letter-spacing: 0px; /* Increased letter-spacing for small headings */
  line-height: 1.4; /* Slightly looser for smaller headings */
  text-wrap: balance; /* Balance the line breaks */
}

/* ======================== */
/* RESPONSIVE HERO SECTIONS    */
/* ======================== */

/* Hero Section */
.hero-section {
    padding: clamp(6rem, 10vw, 12rem) clamp(3rem, 6vw, 8rem);
}

/* Large Section */
.large-section {
    padding: clamp(4rem, 8vw, 10rem) clamp(2rem, 5vw, 6rem);
}

/* Medium Section */
.medium-section {
    padding: clamp(3rem, 6vw, 8rem) clamp(1.5rem, 4vw, 5rem);
}

/* Small Section */
.small-section {
    padding: clamp(2rem, 4vw, 6rem) clamp(1rem, 3vw, 4rem);
}

/* ======================= */
/* RESPONSIVE IMAGE RESET      */
/* ======================= */

img {
  max-width: 100%; /* Ensures images scale down with their container */
  height: auto; /* Maintains the aspect ratio */
  display: block; /* Prevents inline-block spacing issues */
  border: 0; /* Removes default borders in some browsers */
  vertical-align: middle; /* Aligns images vertically within text */
  border-radius: 0.5rem; /* Adds subtle rounded corners */
  object-fit: cover; /* Ensures images fill their container proportionally */
  width: 100%; /* Ensures images fill the width of the container */
}

/* ================== */
/* SHADOW CLASSES        */
/* ================== */

.shadow-small {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.shadow-medium {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.shadow-large {
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.05), 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-xlarge {
  box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.05), 0px 10px 10px rgba(0, 0, 0, 0.1);
}

.shadow-inset {
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.shadow-none {
  box-shadow: none;
}

/* =============== */
/* BORDER RADIUS      */
/* =============== */

.radius-small {
  border-radius: 0.25rem;
}

.radius-medium {
  border-radius: 0.5rem;
}

.radius-large {
  border-radius: 1rem;
}

.radius-pill {
  border-radius: 50px;
}

.radius-circle {
  border-radius: 50%;
}

/* ========= */
/* FLEXBOX     */
/* ========= */

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* Flexbox ALL-IN-ONE Class */
.flexbox {
  display: flex;
  flex: 1 1 0;
  gap: 2rem;
}

/* Tablet and Mobile View: Flex Column */
@media (max-width: 1024px) {
  .flexbox {
    flex-direction: column;
  }
}

/* Gap Utility Classes */
.gap-xsmall {
  gap: clamp(0.25rem, 0.5vw, 0.5rem);
}

.gap-small {
  gap: clamp(0.5rem, 1vw, 1rem);
}

.gap-medium {
  gap: clamp(1rem, 1.5vw, 1.5rem);
}

.gap-large {
  gap: clamp(1.5rem, 2vw, 2rem);
}

.gap-xlarge {
  gap: clamp(2rem, 3vw, 3rem);
}

/* =================== */
/* UTILITY TEXT CLASSES    */
/* =================== */

/* Weight Variants */
.weight-regular {
  font-weight: 400;
}

.weight-medium {
  font-weight: 500;
}

.weight-semibold {
  font-weight: 600;
}

.weight-bold {
  font-weight: 800;
}

/* ====================== */
/* TEXT SIZE CLASSES FOR UI   */
/* ====================== */

/* XSmall Text (Captions, Labels) */
.text-xsmall {
  font-size: clamp(1.2rem, 1vw, 1.4rem); /* Scales between 12px and 14px */
  line-height: 1.4; /* Consistent readability */
}

/* Small Text (Body, Secondary Text) */
.text-small {
  font-size: clamp(1.4rem, 1.1vw, 1.6rem); /* Scales between 14px and 16px */
  line-height: 1.5;
}

/* Medium Text (Default Paragraph Text) */
.text-medium {
  font-size: clamp(1.6rem, 1.3vw, 1.8rem); /* Scales between 16px and 18px */
  line-height: 1.6;
}

/* Large Text (Headings, Emphasized Text) */
.text-large {
  font-size: clamp(1.8rem, 1.5vw, 2rem); /* Scales between 18px and 20px */
  line-height: 1.6;
}

/* Extra Large Text (Subheadings, Callouts) */
.text-xlarge {
  font-size: clamp(2rem, 1.8vw, 2.4rem); /* Scales between 20px and 24px */
  line-height: 1.6;
}



/* ================= */
/* FLUID MARGINS           */     
/* ================ */

/* Extra Small Margin */
.margin-top-xsmall {
    margin-top: clamp(0.5rem, 1vw, 1rem) !important; /* ~8px to 16px */
}
.margin-bottom-xsmall {
    margin-bottom: clamp(0.5rem, 1vw, 1rem) !important; /* ~8px to 16px */
}

/* Small Margin */
.margin-top-small {
    margin-top: clamp(1rem, 2vw, 1.5rem) !important; /* ~16px to 24px */
}
.margin-bottom-small {
    margin-bottom: clamp(1rem, 2vw, 1.5rem) !important; /* ~16px to 24px */
}

/* Medium Margin */
.margin-top-medium {
    margin-top: clamp(2rem, 3vw, 3rem) !important; /* ~32px to 48px */
}
.margin-bottom-medium {
    margin-bottom: clamp(2rem, 3vw, 3rem) !important; /* ~32px to 48px */
}

/* Large Margin */
.margin-top-large {
    margin-top: clamp(4rem, 5vw, 6rem) !important; /* ~64px to 96px */
}
.margin-bottom-large {
    margin-bottom: clamp(4rem, 5vw, 6rem) !important; /* ~64px to 96px */
}

/* Extra Large Margin */
.margin-top-xlarge {
    margin-top: clamp(6rem, 7vw, 8rem) !important; /* ~96px to 128px */
}
.margin-bottom-xlarge {
    margin-bottom: clamp(6rem, 7vw, 8rem) !important; /* ~96px to 128px */
}


/* ========= */
/* NOTICES.     */      
/* ========= */

.notice {
  font-size: 1.6rem; 
  padding: 2rem;
  background-color: #BDD1F2;
  max-width: 65ch;
  border-radius: 0.4rem; 
  line-height: 1.5; 
  margin: 1rem 0; 
  border: 2px solid #8FBAFF;
}

/* Warning Notice Class */
.warning {
  font-size: 1.6rem; 
  padding: 2rem;
  background-color: #F7FFA0;
  max-width: 65ch;
  border-radius: 0.4rem; 
  line-height: 1.5; 
  margin: 1rem 0; 
  border: 2px solid #DEF300;
}

/* Success Notice Class */
.success {
  font-size: 1.6rem; 
  padding: 2rem;
  background-color: #9DFF98;
  max-width: 65ch;
  border-radius: 0.4rem; 
  line-height: 1.5; 
  margin: 1rem 0; 
  border: 2px solid #65FF5D;
}

/* Error Notice Class */
.error {
  font-size: 1.6rem; 
  padding: 2rem;
  background-color: #FF9F9F;
  max-width: 65ch;
  border-radius: 0.4rem; 
  line-height: 1.5; 
  margin: 1rem 0; 
  border: 2px solid #FF6F6F;
}

/* ====================== */
/* Padding For All Sides.              */       
/* ====================== */

/* Extra Small Padding */
.padding-xsmall {
    padding: clamp(0.5rem, 1vw, 1rem) !important; /* ~8px to 16px */
}

/* Small Padding */
.padding-small {
    padding: clamp(1rem, 2vw, 1.5rem) !important; /* ~16px to 24px */
}

/* Medium Padding */
.padding-medium {
    padding: clamp(2rem, 3vw, 3rem) !important; /* ~32px to 48px */
}

/* Large Padding */
.padding-large {
    padding: clamp(4rem, 5vw, 6rem) !important; /* ~64px to 96px */
}

/* Extra Large Padding */
.padding-xlarge {
    padding: clamp(6rem, 7vw, 8rem) !important; /* ~96px to 128px */
}


/* ============ */
/* Hover Scale       */       
/* ============ */

.hover-scale {
  transition: transform 0.4s ease-in-out; /* Slightly slower transition */
}

.hover-scale:hover {
  transform: scale(1.05); /* Subtle scaling effect */
}

/* ============ */
/* Hover Shadow   */       
/* ============ */

.hover-shadow {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}


/* =========== */
/* Transparency  */       
/* =========== */


/* 80% Opaque */
.transparent-20 {
    opacity: 0.8 !important;
}

/* 70% Opaque */
.transparent-30 {
    opacity: 0.7 !important;
}

/* 60% Opaque */
.transparent-40 {
    opacity: 0.6 !important;
}

/* 50% Opaque */
.transparent-50 {
    opacity: 0.5 !important; /* Half transparent */
}

/* 40% Opaque */
.transparent-60 {
    opacity: 0.4 !important;
}

/* 30% Opaque */
.transparent-70 {
    opacity: 0.3 !important;
}


.glass {
  background: rgba(255, 255, 255, 0.15); /* Transparent white background */
  backdrop-filter: blur(10px); /* Blur effect */
  -webkit-backdrop-filter: blur(10px); /* For Safari support */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle border */
  border-radius: 0.4rem; /* Rounded corners for a modern look */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  padding: 2rem; /* Optional: Spacing inside the element */
  color: #222222; /* White text for better contrast */
}

.bold { font-weight: bold; /* Applies bold styling */ } html {
	font-size: 62.5%;
}

.sk h1 {
    font-size: clamp(3.5rem, calc(3.5rem + ((1vw - 0.48rem) * 2.8217)), 6rem);
    line-height: clamp(4.2rem, calc(4.2rem + ((1vw - 0.48rem) * 3.386)), 7.2rem);
	padding-bottom: 0.5em;
}

.sk h2 {
    font-size: clamp(2.8rem, calc(2.8rem + ((1vw - 0.48rem) * 2.2574)), 4.8rem);
    line-height: clamp(3.36rem, calc(3.36rem + ((1vw - 0.48rem) * 2.7089)), 5.76rem);
	padding-bottom: 0.4em;
}

.sk h3 {
    font-size: clamp(2.24rem, calc(2.24rem + ((1vw - 0.48rem) * 1.8059)), 3.84rem);
    line-height: clamp(2.69rem, calc(2.69rem + ((1vw - 0.48rem) * 2.1671)), 4.61rem);
	padding-bottom: 0.3em;
}

.sk h4 {
    font-size: clamp(2.2rem, calc(1.79rem + ((1vw - 0.48rem) * 1.4447)), 3.07rem);
    line-height: clamp(2.15rem, calc(2.15rem + ((1vw - 0.48rem) * 1.7337)), 3.68rem);
	padding-bottom: 0.2em;
}

.sk h5 {
    font-size: clamp(2rem, calc(1.43rem + ((1vw - 0.48rem) * 1.1558)), 2.46rem);
    line-height: clamp(1.72rem, calc(1.72rem + ((1vw - 0.48rem) * 1.3869)), 2.95rem);
	padding-bottom: 0.2em;
}

.sk h6 {
    font-size: clamp(1.8rem, calc(1.14rem + ((1vw - 0.48rem) * 0.9246)), 1.97rem);
    line-height: clamp(1.37rem, calc(1.37rem + ((1vw - 0.48rem) * 1.1095)), 2.36rem);
	padding-bottom: 0.2em;
}

.sk p, a, li {
    font-size: clamp(1.7rem, calc(1.7rem + ((1vw - 0.48rem) * 0.3386)), 1.9rem);
    line-height: clamp(2.38rem, calc(2.38rem + ((1vw - 0.48rem) * 0.3386)), 2.8rem);
	padding-bottom: 0.6rem
}

.sk-fluid-sections {
    padding-top: clamp(3rem, 6vw, 8rem); /* Increased padding */
    padding-bottom: clamp(3rem, 6vw, 8rem); /* Increased padding */
    padding-left: clamp(2rem, 5vw, 6rem); /* Increased padding */
    padding-right: clamp(2rem, 5vw, 6rem); /* Increased padding */
}

/*portfolio image aspect ratio portrait 3:4*/
.pa-portfolio-image-3-4 .et_portfolio_image {
  padding-top: 133.33%;
  display: block;
}
.pa-portfolio-image-3-4 .et_portfolio_image img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}