/* style.css */

:root {
    /* Fonts */
    --font-primary: 'Manrope', sans-serif;
    --font-secondary: 'Rubik', sans-serif;

    /* Neutral Color Scheme */
    --color-text: #363636; /* Bulma default text color - good dark grey */
    --color-text-light: #f5f5f5; /* Light grey for dark backgrounds */
    --color-text-medium: #7a7a7a; /* For subtitles or less important text */
    --color-text-heading: #222222; /* Darker for main headings */
    --color-text-hero: #FFFFFF; /* White text specifically for hero */

    --color-background: #fdfdfd; /* Very light, almost white */
    --color-background-offset: #f0f2f5; /* Slightly off-white for section differentiation */
    --color-section-darker-bg: #1f2937; /* Dark cool grey for "Behind the Scenes" like sections */
    --color-footer-bg-glass: rgba(17, 24, 39, 0.85); /* Dark grey for footer background */
    
    --color-primary: #48C774; /* Bulma's default success color - vibrant green */
    --color-primary-dark: #3EAE62;
    --color-primary-light: #62d98d;
    
    --color-link: #3273dc; /* Bulma's default link color - blue */
    --color-link-hover: #2763ba;

    --color-border: #e0e0e0; /* Light border color */
    --color-border-dark: #4b5563; /* Border for elements on dark backgrounds */

    /* Glassmorphism */
    --color-glass-bg-light: rgba(255, 255, 255, 0.6); /* Glass on light backgrounds */
    --color-glass-border-light: rgba(255, 255, 255, 0.3);
    --color-glass-bg-dark: rgba(41, 52, 69, 0.5); /* Glass on dark backgrounds */
    --color-glass-border-dark: rgba(75, 85, 99, 0.4);

    /* UI Elements */
    --border-radius-small: 6px;
    --border-radius-medium: 12px;
    --border-radius-large: 20px;
    
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.1);
    --shadow-volumetric: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
    --shadow-volumetric-hover: 0 7px 14px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.08);
    --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.05);

    /* Transitions */
    --transition-fast: all 0.2s ease-in-out;
    --transition-smooth: all 0.3s ease-in-out;

    /* Header */
    --header-height: 3.25rem; /* Default Bulma navbar height */
    --header-height-padded: calc(var(--header-height) + 40px); /* For padding on content pages */
}

/* Global Styles & Resets */
html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-secondary);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6, .title {
    font-family: var(--font-primary);
    color: var(--color-text-heading);
    font-weight: 800; /* Manrope bold */
}

.subtitle {
    font-family: var(--font-secondary);
    color: var(--color-text-medium);
    font-weight: 400; /* Rubik regular */
}

p, li, span, .content {
    font-family: var(--font-secondary);
    font-weight: 400; /* Rubik regular */
}

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

.section-title {
    margin-bottom: 1.5rem !important; /* Bulma override */
    position: relative;
    padding-bottom: 0.75rem;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: var(--border-radius-small);
}
.section-title.has-text-white::after {
    background-color: var(--color-primary-light);
}


/* Layout: Navbar */
.navbar.is-fixed-top {
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.navbar.is-transparent {
    background-color: transparent !important; /* Bulma override */
}
.navbar.is-scrolled { /* Add this class with JS on scroll */
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-subtle);
}
.navbar-item, .navbar-link {
    font-family: var(--font-secondary);
    font-weight: 500; /* Rubik medium */
    font-size: 0.95rem;
    color: var(--color-text);
    transition: var(--transition-fast);
}
.navbar.is-transparent .navbar-item,
.navbar.is-transparent .navbar-link {
    color: var(--color-text-light); /* Light text for transparent navbar on dark hero */
}
.navbar.is-transparent .navbar-item:hover,
.navbar.is-transparent .navbar-link:hover,
.navbar.is-transparent .navbar-item.is-active,
.navbar.is-transparent .navbar-link.is-active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-text-hero) !important;
}

.navbar.is-scrolled .navbar-item,
.navbar.is-scrolled .navbar-link {
    color: var(--color-text);
}
.navbar.is-scrolled .navbar-item:hover,
.navbar.is-scrolled .navbar-link:hover,
.navbar.is-scrolled .navbar-item.is-active,
.navbar.is-scrolled .navbar-link.is-active {
    background-color: var(--color-background-offset) !important;
    color: var(--color-primary) !important;
}

.navbar-burger span {
    background-color: var(--color-text);
    height: 2px;
}
.navbar.is-transparent .navbar-burger span {
     background-color: var(--color-text-light);
}
.navbar-menu {
    /* background-color: var(--color-background); Default for mobile */
    box-shadow: var(--shadow-medium);
}
@media screen and (max-width: 1023px) {
    .navbar.is-transparent .navbar-menu {
        background-color: rgba(30,30,30,0.95); /* Darker for mobile when hero is transparent */
    }
    .navbar.is-transparent .navbar-menu .navbar-item,
    .navbar.is-transparent .navbar-menu .navbar-link {
        color: var(--color-text-light);
    }
    .navbar.is-transparent .navbar-menu .navbar-item:hover,
    .navbar.is-transparent .navbar-menu .navbar-link:hover {
         background-color: rgba(255, 255, 255, 0.1) !important;
         color: var(--color-text-hero) !important;
    }
}


/* Layout: Footer */
.footer.glass-footer {
    background-color: var(--color-footer-bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-text-light);
    padding: 3rem 1.5rem 3rem; /* Reduced bottom padding */
}
.footer .title {
    color: var(--color-text-hero); /* White titles in footer */
    font-weight: 700; /* Manrope bold */
}
.footer .content p, .footer .content {
    color: var(--color-text-light);
}
.footer a {
    color: var(--color-primary-light);
    font-weight: 500;
}
.footer a:hover {
    color: var(--color-text-hero);
    text-decoration: underline;
}
.footer hr {
    background-color: rgba(255, 255, 255, 0.15);
}
.footer .social-links {
    list-style: none;
    margin-left: 0;
}
.footer .social-links li {
    margin-bottom: 0.5rem;
}
.footer .social-links li a {
    color: var(--color-text-light);
    font-size: 1rem;
    transition: var(--transition-fast);
    padding: 0.25rem 0; /* For better touch target */
}
.footer .social-links li a:hover {
    color: var(--color-primary);
    text-decoration: none;
}
.footer .footer-title {
    margin-bottom: 1rem;
}


/* Buttons & Forms (Global) */
.button, button, input[type="submit"], input[type="button"], input[type="reset"] {
    font-family: var(--font-secondary);
    font-weight: 500; /* Rubik Medium */
    border-radius: var(--border-radius-medium);
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-volumetric);
    padding: 0.75em 1.5em; /* More padding */
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-volumetric-hover);
}
.button:active, button:active, input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active {
    transform: translateY(0px);
    box-shadow: var(--shadow-inner);
}
.button.is-primary {
    background-color: var(--color-primary);
    border-color: transparent;
    color: var(--color-text-hero);
}
.button.is-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: transparent;
    color: var(--color-text-hero);
}
.button.is-link {
    background-color: var(--color-link);
    border-color: transparent;
    color: var(--color-text-hero);
}
.button.is-link:hover {
    background-color: var(--color-link-hover);
    border-color: transparent;
    color: var(--color-text-hero);
}
.button.is-link.is-outlined {
    background-color: transparent;
    border-color: var(--color-link);
    color: var(--color-link);
}
.button.is-link.is-outlined:hover {
    background-color: var(--color-link);
    border-color: var(--color-link);
    color: var(--color-text-hero);
}


/* Volumetric Button (specific class if needed for more pronounced effect) */
.volumetric-button {
    /* Styles already covered by global .button, but can add more specific 3D aspects if desired */
    /* For example, a subtle gradient */
    /* background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.1)); */
}


/* Form Inputs (Volumetric/Glassmorphism) */
.input, .textarea, .select select {
    font-family: var(--font-secondary);
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-inner);
    transition: var(--transition-smooth);
    padding: 0.75em 1em; /* Consistent padding */
}
.input:focus, .textarea:focus, .select select:focus,
.input:active, .textarea:active, .select select:active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.125em rgba(var(--color-primary), 0.25), var(--shadow-inner);
}
.form-input-volumetric { /* Applied in HTML */
    background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent for depth */
    /* backdrop-filter: blur(2px); For subtle glass, but can impact performance on many inputs */
}
.label.form-label {
    color: var(--color-text-heading);
    font-weight: 500; /* Rubik Medium */
}
.checkbox:hover {
    color: var(--color-primary);
}


/* Cards (Global Pattern) */
.card {
    background: var(--color-glass-bg-light);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--color-glass-border-light);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: var(--transition-smooth);
    overflow: hidden; /* Ensures image radius is clipped */
    display: flex; /* For centering content */
    flex-direction: column;
    height: 100%; /* Make cards in a row same height */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.card .card-image { /* This is Bulma's .card-image */
    width: 100%; /* Ensure it takes full width of card */
    margin: 0 auto; /* Center the container itself if it's smaller */
}
.card .card-image figure.image { /* This is Bulma's figure.image */
    margin: 0 !important; /* Remove Bulma's default margins on figure */
}
.card .card-image img {
    width: 100%;
    height: 220px; /* Fixed height for card images */
    object-fit: cover;
    border-top-left-radius: var(--border-radius-large); /* Match card's radius */
    border-top-right-radius: var(--border-radius-large);
    display: block; /* Remove bottom space */
}
.card .card-content {
    padding: 1.75rem;
    text-align: left; /* Default text align, can be overridden */
    flex-grow: 1; /* Allows content to fill space, pushing buttons down */
    display: flex;
    flex-direction: column;
}
.card .card-content .title {
    margin-bottom: 0.75rem;
    color: var(--color-text-heading);
    font-size: 1.3rem; /* Slightly smaller for cards */
}
.card .card-content .subtitle {
    color: var(--color-text-medium);
    margin-bottom: 1rem;
    font-size: 0.85rem;
}
.card .card-content .content {
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}
.card .button.is-link.is-outlined {
    margin-top: auto; /* Push button to bottom of card content */
    align-self: flex-start; /* Align button to the left */
}


/* Specific Card types for dark sections */
.glass-card-dark { /* For accordions or cards on dark backgrounds */
    background: var(--color-glass-bg-dark);
    border: 1px solid var(--color-glass-border-dark);
    border-radius: var(--border-radius-medium);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-text-light);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.glass-card-dark .title, .glass-card-dark a {
    color: var(--color-text-hero);
}
.glass-card-dark a:hover {
    color: var(--color-primary-light);
}


/* Sections */
.section {
    padding: 4rem 1.5rem; /* Vertical rhythm */
}
.section-lighter {
    background-color: var(--color-background-offset);
}
.section-darker {
    background-color: var(--color-section-darker-bg);
    color: var(--color-text-light);
}
.section-darker .title, .section-darker .subtitle {
    color: var(--color-text-light);
}
.section-darker .label { /* For forms in dark sections if any */
    color: var(--color-text-light);
}


/* Hero Section */
#hero.hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#hero .title, #hero .subtitle {
    color: var(--color-text-hero);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* Enhanced text shadow for readability */
}
#hero .title {
    font-size: 3.5rem; /* Larger for hero */
    font-weight: 800;
    margin-bottom: 1rem;
}
#hero .subtitle {
    font-size: 1.5rem;
    font-weight: 400; /* Rubik regular for hero subtitle */
    line-height: 1.5;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.animated-text-hero { /* For JS animation */
    opacity: 0;
    transform: translateY(30px);
}


/* Behind the Scenes Section */
#coulisses .accordion-item {
    margin-bottom: 1rem;
}
#coulisses .accordion-header {
    cursor: pointer;
    padding: 1rem 1.5rem;
    background: rgba(255,255,255,0.05); /* Slightly different from card body */
    border-radius: var(--border-radius-medium);
    transition: var(--transition-fast);
}
#coulisses .accordion-header:hover {
    background: rgba(255,255,255,0.1);
}
#coulisses .accordion-content {
    background: transparent; /* Content is inside glass-card-dark */
    padding-top: 1rem; /* Already has padding from .glass-card-dark */
}
#coulisses .info-card-volumetric {
    background: var(--color-glass-bg-dark);
    border-radius: var(--border-radius-large);
    padding: 2rem;
    box-shadow: var(--shadow-volumetric);
    transition: var(--transition-smooth);
    height: 100%;
}
#coulisses .info-card-volumetric:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-volumetric-hover);
}
#coulisses .info-card-volumetric .title {
    color: var(--color-text-hero);
}


/* Media Section */
#medias .media-logo-container {
    background: rgba(255,255,255,0.7);
    border-radius: var(--border-radius-medium);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-subtle);
    transition: var(--transition-smooth);
}
#medias .media-logo-container:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-medium);
}
#medias .media-logo-container img {
    max-height: 80px; /* Adjust based on logo aspect ratios */
    width: auto;
    object-fit: contain;
}


/* Awards Section */
#recompenses .award-card {
    text-align: center;
}
#recompenses .award-card .card-image {
    padding: 1rem; /* Space around the award image */
    /* display: flex; */
    justify-content: center;
    align-items: center;
}
#recompenses .award-card .award-logo-container img {
    /* height: 150px; Fixed height for award "logos"
    width: 150px; */
    object-fit: contain; /* Or 'cover' if they are square and should fill */
    border-radius: 50%; /* If they are seal-like */
    background-color: rgba(255,255,255,0.1); /* Slight bg for the image itself */
    padding: 0.5rem;
    box-shadow: var(--shadow-inner);
}


/* External Resources Section */
#ressources-externes .external-resource-card {
    padding: 1.5rem;
    transition: var(--transition-smooth);
    height: 100%;
}
#ressources-externes .external-resource-card:hover {
    background: rgba(var(--color-primary-rgb), 0.1); /* Subtle primary color tint on hover */
    transform: translateY(-3px);
}
#ressources-externes .external-resource-card h3 a {
    text-decoration: none;
}
#ressources-externes .external-resource-card h3 a:hover {
    text-decoration: underline;
}

/* Page Specific Styles */
.page-header-section {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 4rem;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.page-header-section .title, .page-header-section .subtitle {
    color: var(--color-text-hero);
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7);
}
.content-page { /* For About, Privacy, Terms */
    padding-top: 2rem; /* Space from page-header or navbar if no header */
}
.privacy-terms-page main .section:first-child { /* Specific for privacy/terms */
    padding-top: var(--header-height-padded);
}
.success-page-section {
    min-height: calc(100vh - var(--header-height)); /* Full viewport minus header */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: var(--header-height);
}
.success-page-section .success-animation-container svg .success-circle {
    animation: success-circle-anim 0.5s ease-out forwards;
}
.success-page-section .success-animation-container svg .success-checkmark {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: success-checkmark-anim 0.4s 0.3s ease-out forwards;
}
@keyframes success-circle-anim {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
@keyframes success-checkmark-anim {
    to { stroke-dashoffset: 0; }
}


/* Contact Page Specifics */
#contactForm .label {
    color: var(--color-text-heading);
}
.contact-info-card {
    padding: 2rem;
    text-align: left;
}
.contact-info-card .title {
    color: var(--color-text-heading);
}


/* Cookie Consent Popup */
#cookieConsentPopup {
    font-family: var(--font-secondary);
}
#cookieConsentPopup p a {
    font-weight: 500;
}
#cookieConsentPopup button {
    font-family: var(--font-secondary);
    font-weight: 500;
    box-shadow: none; /* Simpler button for popup */
}
#cookieConsentPopup button:hover {
    transform: none;
    box-shadow: none;
    background-color: var(--color-primary-dark) !important; /* Ensure hover for Bulma override */
}


/* Animations (Initial states for JS-driven animations) */
.animated-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Fallback if JS fails or for CSS-only reveal */
}
.animated-card.is-visible { /* Class to be added by JS */
    opacity: 1;
    transform: translateY(0);
}


/* Utility Classes */
.mt-auto { margin-top: auto; }
.mb-6 { margin-bottom: 3rem !important; } /* Bulma override if needed */


/* Responsive Adjustments (Bulma handles most, add specifics if needed) */
@media screen and (max-width: 768px) {
    #hero .title {
        font-size: 2.5rem;
    }
    #hero .subtitle {
        font-size: 1.2rem;
    }
    .section {
        padding: 3rem 1rem;
    }
    .columns.is-centered .column.is-one-third {
        max-width: 90%; /* Make cards wider on mobile in centered columns */
    }
    .card .card-image img {
        height: 180px;
    }
}

/* Ensure high contrast and readability throughout */
/* Dark text on light backgrounds, light text on dark backgrounds */
.has-text-white, .has-text-light {
    color: var(--color-text-hero) !important; /* Ensure important for Bulma overrides */
}
.section-title.has-text-white {
     color: var(--color-text-hero) !important;
}

/* General page containers for pages like about, contacts, privacy, terms */
.page-container {
    padding-top: var(--header-height-padded); /* Default padding for pages with fixed header */
}
.page-container.no-banner { /* If a page has no banner, but still needs header clearance */
    padding-top: var(--header-height-padded);
}

/* Specific for privacy & terms to ensure header doesn't overlap */
body.privacy-page .section:first-of-type,
body.terms-page .section:first-of-type {
    padding-top: calc(var(--header-height) + 3rem); /* Adjust as needed */
}