/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1. ROOT VARIABLES
2. GLOBAL STYLES
3. HELPER & UTILITY CLASSES
4. HEADER & NAVIGATION
5. HERO SECTION
6. BUTTONS & FORMS
7. CARD STYLES
8. SECTION SPECIFIC STYLES
    8.1 Calculator Section
    8.2 Features Section
    8.3 History Section
    8.4 Insights Section
    8.5 Testimonials Section (Customer Stories)
    8.6 Blog Section
    8.7 External Resources Section
    8.8 Press Section
    8.9 Sustainability Section
    8.10 Contact Section
9. FOOTER
10. ANIMATIONS & TRANSITIONS
11. SPECIFIC PAGE STYLES (SUCCESS, PRIVACY, TERMS)
12. RESPONSIVE ADJUSTMENTS (Bulma handles most, add if needed)
-------------------------------------------------------------------*/

/* 1. ROOT VARIABLES */
:root {
    --primary-color: #e6a756;
    /* Soft Orange/Gold - Main Accent */
    --secondary-color: #f0e6da;
    /* Light Beige/Cream - Subtle Backgrounds/Accents */
    --text-color: #333333;
    /* Dark Gray - Main Body Text */
    --text-color-light: #555555;
    /* Medium Gray - Subtitles, secondary text */
    --heading-color: #222222;
    /* Very Dark Gray/Off-Black - Main Headings */
    --background-color: #ffffff;
    /* White - Default Page Background */
    --background-pastel-light: #fdf6f0;
    /* Very Light Pastel - Section Background */
    --background-pastel-medium: #faf5ef;
    /* Another Light Pastel - Section Background */
    --card-background: #ffffff;
    --card-border-color: #f2e4d5;
    --card-shadow-color: rgba(0, 0, 0, 0.07);
    --card-hover-shadow-color: rgba(0, 0, 0, 0.1);
    --button-primary-bg: var(--primary-color);
    --button-primary-text: #ffffff;
    --button-primary-hover-bg: #d99343;
    /* Darker shade of primary */
    --link-color: var(--primary-color);
    --link-hover-color: #d99343;
    --footer-background: #333333;
    --footer-text-color: #f5f5f5;
    --footer-link-color: #f0e6da;
    /* Pastel accent for footer links */
    --footer-link-hover-color: var(--primary-color);

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Merriweather', serif;

    --transition-smooth: all 0.3s ease-in-out;
    --border-radius-standard: 8px;
    --border-radius-small: 4px;
}

/* 2. GLOBAL STYLES */
html {
    scroll-behavior: smooth;
    background-color: var(--background-color);
    /* Fallback for Barba.js transitions */
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    line-height: 1.7;
    /* Improved readability */
    font-size: 1rem;
    /* Base font size for rem units, Bulma default is 16px */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--background-color);
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.subtitle {
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-weight: 700;
    /* Montserrat bold */
}

.title.is-1 {
    font-size: 3rem;
}

.title.is-2 {
    font-size: 2.5rem;
}

.title.is-3 {
    font-size: 2rem;
}

.title.is-4 {
    font-size: 1.5rem;
}

.title.is-5 {
    font-size: 1.25rem;
}

p {
    margin-bottom: 1rem;
    /* Consistent paragraph spacing */
    color: var(--text-color);
    /* Ensure default p color */
}

.content p:not(:last-child),
.content ul:not(:last-child),
.content ol:not(:last-child),
.content blockquote:not(:last-child) {
    margin-bottom: 1.25em;
    /* Bulma's default, ensure consistency */
}

.content ul {
    list-style-type: disc;
    padding-left: 20px;
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: var(--transition-smooth);
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

.section {
    padding: 4rem 1.5rem;
    /* Increased vertical padding for sections */
}

.section-title {
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

.section .subtitle {
    font-family: var(--font-body);
    color: var(--text-color-light);
    margin-bottom: 3rem;
    line-height: 1.6;
}

/* 3. HELPER & UTILITY CLASSES */
.has-text-shadow {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.is-visually-hidden {
    /* For accessibility */
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* For scroll animations - to be triggered by JS */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 4. HEADER & NAVIGATION */
.header {
    background-color: rgba(255, 255, 255, 0.95);
    /* Slight transparency for modern feel */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    /* Sticky header */
    top: 0;
    z-index: 1000;
    /* Ensure it's above other content */
    width: 100%;
}

.navbar {
    min-height: 4.25rem;
    /* Bulma default is 3.25rem, increase for more presence */
    background-color: transparent;
    /* Handled by .header */
}

.navbar-item,
.navbar-link {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    /* Merriweather bold for nav items */
    color: var(--text-color);
    transition: var(--transition-smooth);
}

.navbar-item:hover,
.navbar-link:hover,
.navbar-item.is-active,
.navbar-link.is-active {
    background-color: transparent !important;
    /* Override Bulma's hover bg */
    color: var(--primary-color) !important;
}

.navbar-brand .navbar-item {
    /* Site Title Link */
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--heading-color);
    /* Darker for brand */
}

.navbar-burger {
    color: var(--heading-color);
}

.navbar-burger span {
    background-color: var(--heading-color);
    height: 2px;
    /* Thicker burger lines */
}

/* Adjust padding for fixed/sticky header if content is overlapped */
body {
    /* padding-top: 4.25rem; /* If navbar is fixed and this height */
    /* This is not applied globally, specific pages like privacy/terms handle it */
}


/* 5. HERO SECTION */
.hero {
    position: relative;
    /* For potential overlays */
    background-size: cover !important;
    /* Ensure !important if inline styles are present */
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.hero .hero-body {
    padding: 6rem 1.5rem;
    /* More padding for hero content */
    position: relative;
    z-index: 1;
    /* Ensure text is above pseudo-elements if any */
}

.hero .title.is-1 {
    font-size: 3.5rem;
    /* Larger hero title */
    color: #FFFFFF !important;
    /* Explicitly white as per requirement */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.hero .subtitle.is-3 {
    font-size: 1.5rem;
    /* Larger hero subtitle */
    color: #FFFFFF !important;
    /* Explicitly white */
    line-height: 1.5;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* Dark overlay for hero text readability if not handled by inline style */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)); */
    /* This is already handled by an inline styled div in the HTML for the text container */
    z-index: 0;
}


/* 6. BUTTONS & FORMS */
.button {
    font-family: var(--font-heading);
    font-weight: 700;
    border-radius: var(--border-radius-small);
    transition: var(--transition-smooth), transform 0.15s ease-out;
    text-transform: uppercase;
    /* Modern touch */
    letter-spacing: 0.5px;
    padding: 0.75em 1.75em;
    /* More padding */
}

.button.is-primary {
    background-color: var(--button-primary-bg);
    border-color: transparent;
    color: var(--button-primary-text);
}

.button.is-primary:hover {
    background-color: var(--button-primary-hover-bg);
    border-color: transparent;
    color: var(--button-primary-text);
}

.button.is-link.is-outlined {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.button.is-link.is-outlined:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--button-primary-text);
}

/* General hover effect for buttons with this class */
.has-hover-effect:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.button.is-large {
    font-size: 1.25rem;
    /* Ensure large buttons are noticeable */
}

/* Modern Input Fields */
.modern-input,
.modern-select select,
.modern-textarea {
    font-family: var(--font-body);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-standard);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    transition: var(--transition-smooth);
    font-size: 1rem;
    color: var(--text-color);
}

.modern-input:focus,
.modern-select select:focus,
.modern-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.15em rgba(230, 167, 86, 0.2);
    /* Primary color focus glow */
    outline: none;
}

.modern-select {
    /* For the Bulma .select wrapper */
    border-radius: var(--border-radius-standard);
}

.modern-select::after {
    /* Style Bulma's select arrow */
    border-color: var(--primary-color) !important;
    /* Use important if needed to override Bulma */
    right: 1.25em;
    /* Adjust position */
}

.label {
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-weight: 700;
    margin-bottom: 0.75em;
    /* Spacing for labels */
}

/* Switch styling (basic, assumes Bulma-Switch or similar might be used) */
input[type="checkbox"].switch {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 50px;
    height: 28px;
    background-color: #ccc;
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s;
    vertical-align: middle;
    /* Align with label text */
}

input[type="checkbox"].switch::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: white;
    top: 3px;
    left: 3px;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

input[type="checkbox"].switch:checked {
    background-color: var(--primary-color);
}

input[type="checkbox"].switch.is-info:checked {
    background-color: hsl(204, 86%, 53%);
    /* Bulma's info color */
}

input[type="checkbox"].switch:checked::before {
    transform: translateX(22px);
}

/* Label text next to the switch */
.field .switch+label {
    margin-left: 0.5em;
    font-family: var(--font-body);
    color: var(--text-color);
    cursor: pointer;
    vertical-align: middle;
}

/* 7. CARD STYLES */
.card {
    background-color: var(--card-background);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-standard);
    box-shadow: 0 5px 15px var(--card-shadow-color);
    transition: var(--transition-smooth);
    overflow: hidden;
    /* Important for rounded corners with images */
    display: flex;
    /* For vertical alignment of content within card */
    flex-direction: column;
    height: 100%;
    /* Make cards in a row equal height if needed in columns */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--card-hover-shadow-color);
}

.card .card-image {
    /* Bulma's div for image */
    width: 100%;
    position: relative;
    /* For potential overlays on image */
    /* Ensure Bulma's aspect ratio figures work well */
}

.card .card-image .image img,
/* Covers <figure class="image"><img ...></figure> */
.card .image-container img,
/* Covers <div class="image-container"><img ...></div> */
.card .card-image>img

/* Covers <div class="card-image"><img ...></div> */
    {
    width: 100%;
    height: 100%;
    /* Crucial for object-fit with aspect ratio containers */
    object-fit: cover;
    display: block;
}

/* If card-image itself has rounded top corners (if no overflow:hidden on .card) */
/* .card .card-image {
    border-top-left-radius: var(--border-radius-standard);
    border-top-right-radius: var(--border-radius-standard);
    overflow: hidden;
} */

.card .card-content {
    padding: 1.5rem;
    /* Standard padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Allows content to fill space if card has fixed height or in flex row */
    text-align: center;
    /* Center text and inline-block elements by default */
}

.card .card-content .title,
.card .card-content .subtitle {
    margin-bottom: 0.75rem;
    color: var(--heading-color);
    /* Ensure consistent heading color in cards */
}

.card .card-content .title.is-5 {
    font-size: 1.15rem;
    /* Slightly smaller for card titles */
}

.card .card-content .content {
    font-size: 0.95rem;
    /* Slightly smaller body text in cards */
    color: var(--text-color-light);
    flex-grow: 1;
    /* Push buttons/links to bottom if card content varies */
}

.card .card-content .has-text-justified {
    text-align: justify !important;
}

.card .card-content .button {
    /* Button at the bottom of a card */
    margin-top: auto;
    /* Pushes button to the bottom if card-content is flex-grow */
    align-self: center;
    /* Center button if card-content has text-align: center */
}

/* Specific Card types */
.feature-card .card-image {
    padding: 1.5rem 0 0.5rem 0;
    /* Space for icon */
}

.feature-card .icon {
    font-size: 3rem;
    /* Make icons prominent */
    color: var(--primary-color);
}

.resource-card {
    background-color: var(--background-pastel-light);
}

.resource-card .card-content .title a {
    color: var(--heading-color);
}

.resource-card .card-content .title a:hover {
    color: var(--primary-color);
}

/* 8. SECTION SPECIFIC STYLES */

/* 8.1 Calculator Section */
.calculator-section .box {
    background-color: var(--background-pastel-light);
    border: 1px solid var(--card-border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    padding: 2.5rem;
    /* More padding for the form box */
}

#calculatorResult {
    margin-top: 2rem;
    padding: 1rem;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius-small);
    border: 1px dashed var(--primary-color);
}

/* 8.2 Features Section */
.features-section {
    background-color: var(--background-pastel-medium);
}

/* 8.3 History Section */
.history-section .content.is-medium {
    font-size: 1.1rem;
    line-height: 1.8;
}

.history-section .icon.is-large {
    font-size: 2.5rem;
    /* Adjust icon size for steps */
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    /* Consistent icon color */
}

/* 8.4 Insights Section */
.insights-section {
    background-color: var(--background-pastel-light);
}

.insights-section .box {
    background-color: var(--background-color);
}

.insights-section ul li {
    margin-bottom: 0.5em;
    color: var(--text-color);
}

/* 8.5 Testimonials Section (Customer Stories) */
.testimonials-section .card {
    text-align: left;
    /* Override default card center for testimonial text flow */
}

.testimonials-section .card .card-content {
    text-align: left;
}

.testimonials-section .media-left img.is-rounded {
    border: 2px solid var(--primary-color);
    /* Highlight avatar */
}

.testimonials-section .media-content .title {
    color: var(--heading-color);
    margin-bottom: 0.25rem !important;
}

.testimonials-section .media-content .subtitle {
    color: var(--text-color-light);
}

.testimonials-section .content {
    /* Testimonial text */
    font-style: italic;
    color: var(--text-color);
    padding-top: 0.5rem;
    border-top: 1px solid var(--card-border-color);
    margin-top: 1rem;
}

/* 8.6 Blog Section */
.blog-section {
    background-color: var(--background-pastel-medium);
}

.blog-section .card .card-content .content {
    text-align: left;
    /* Blog snippet text */
}

.blog-section .card .card-content .button {
    /* "Lire la suite" button */
    align-self: flex-start;
    /* Align to left for blog cards */
}


/* 8.7 External Resources Section */
/* Uses .resource-card styles */

/* 8.8 Press Section */
.press-section {
    background-color: var(--background-pastel-light);
}

.press-section .image-container img {
    filter: grayscale(50%);
    /* Subtle effect for logos */
    transition: var(--transition-smooth);
    max-height: 80px;
    /* Control logo size */
    width: auto;
    object-fit: contain;
}

.press-section .image-container:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.press-section .column p {
    font-size: 0.9rem;
    color: var(--text-color-light);
}

/* 8.9 Sustainability Section */
.sustainability-section .content.is-medium {
    font-size: 1.1rem;
}

.sustainability-section ul li strong {
    color: var(--heading-color);
}

/* 8.10 Contact Section */
.contact-section {
    background-color: var(--background-pastel-medium);
}

.contact-section .box {
    /* The outer box with background image */
    background-size: cover !important;
    background-position: center center !important;
    padding: 0;
    /* Remove padding if inner div handles it */
    border: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.contact-section .box>div {
    /* Inner div with semi-transparent background */
    /* Styles are inline in HTML, this confirms they'd apply */
}

/* 9. FOOTER */
.footer {
    background-color: var(--footer-background);
    color: var(--footer-text-color);
    padding: 4rem 1.5rem 2rem;
    /* Generous padding */
}

.footer .title {
    color: #ffffff;
    /* White titles in footer */
    font-size: 1.25rem;
    /* Slightly smaller footer titles */
}

.footer p,
.footer li {
    font-family: var(--font-body);
    color: var(--footer-text-color);
    font-size: 0.95rem;
}

.footer a {
    color: var(--footer-link-color);
    transition: var(--transition-smooth);
}

.footer a:hover {
    color: var(--footer-link-hover-color);
    text-decoration: underline;
}

.footer .content p {
    /* Copyright text */
    color: #aaa;
    font-size: 0.9rem;
}

.footer .column ul {
    list-style: none;
    margin-left: 0;
}

.footer .column ul li:not(:last-child) {
    margin-bottom: 0.5em;
}

.footer .social-links a {
    /* Text links are styled by general footer 'a' styles */
    display: inline-block;
    /* For spacing if needed */
    margin-right: 10px;
    /* If they were on the same line */
}


/* 10. ANIMATIONS & TRANSITIONS */
/* General hover scale for interactive elements */
.hover-scale {
    transition: transform 0.2s ease-in-out;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Animated icons in feature cards */
.animated-icon {
    display: inline-block;
    transition: var(--transition-smooth);
}

.feature-card:hover .animated-icon {
    transform: scale(1.15) rotate(7deg);
    color: var(--button-primary-hover-bg);
    /* Change color on hover too */
}

.history-section .animated-icon {
    /* Icons in history steps */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    /* Bounce effect */
}

.history-section .column:hover .animated-icon {
    transform: translateY(-8px) scale(1.1);
}


/* 11. SPECIFIC PAGE STYLES */

/* For privacy.html, terms.html */
body.legal-page .main-content-area,
/* Assuming a wrapper for main content */
body.privacy-page main,
/* If targeting main element directly */
body.terms-page main {
    padding-top: 6rem;
    /* Adjust based on actual sticky header height + desired space */
    padding-bottom: 3rem;
}

body.privacy-page .container h1.title,
body.terms-page .container h1.title {
    margin-bottom: 2rem;
}

body.privacy-page .container .content,
body.terms-page .container .content {
    max-width: 800px;
    /* Improve readability for text-heavy pages */
    margin-left: auto;
    margin-right: auto;
}

/* For success.html (assuming it links this stylesheet) */
/* If success.html has a specific body class or ID, use that for scoping */
body#success-page-body,
/* Example if success.html has <body id="success-page-body"> */
.success-page-container

/* If success.html has a main container with this class */
    {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--background-pastel-light);
    text-align: center;
    padding: 2rem;
}

/* More generic targeting for success.html elements if no specific class/id is on body */
.success-content-wrapper {
    /* Assuming a wrapper div in success.html */
    background-color: var(--card-background);
    padding: 3rem 4rem;
    border-radius: var(--border-radius-standard);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 600px;
}

.success-content-wrapper .success-icon {
    /*  for an icon */
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.success-content-wrapper h1.title {
    color: var(--primary-color);
    /* Or a success green */
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.success-content-wrapper p {
    font-size: 1.15rem;
    color: var(--text-color-light);
    margin-bottom: 2rem;
}

.success-content-wrapper .button {
    margin-top: 1rem;
}


/* 12. RESPONSIVE ADJUSTMENTS (Bulma handles most) */
@media screen and (max-width: 768px) {
    .hero .title.is-1 {
        font-size: 2.5rem;
    }

    .hero .subtitle.is-3 {
        font-size: 1.25rem;
    }

    .section {
        padding: 3rem 1rem;
    }

    .navbar-menu {
        /* Style for mobile menu background */
        background-color: rgba(255, 255, 255, 0.98);
        box-shadow: 0 8px 16px rgba(10, 10, 10, .1);
        padding-bottom: 1rem;
        border-bottom-left-radius: var(--border-radius-standard);
        border-bottom-right-radius: var(--border-radius-standard);
    }

    .navbar-item {
        padding: 0.75rem 1rem;
        /* Adjust padding for mobile nav items */
    }

    .columns.is-centered .column.is-two-thirds {
        width: 100% !important;
        /* Full width on mobile for main form */
    }
}

/* Cookie Popup (basic styles from HTML, can be enhanced here) */
#cookie-popup {
    font-family: var(--font-body);
    /* Ensure correct font */
    /* Other styles are inline in HTML as per prompt */
}

#cookie-popup a {
    color: var(--footer-link-color);
    /* Consistent link style */
}

#cookie-popup a:hover {
    color: var(--primary-color);
}

#accept-cookies {
    font-family: var(--font-heading);
}

#cookie-popup p {
    color: #fff;
}

.title:not(.is-spaced)+.subtitle {
    margin: 0;
}