/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    font-family: 'Nimbus Sans', Helvetica, Arial, sans-serif;
    background: white;
}

/* Main Container - Full viewport */
.container {
    background: white;
    width: 100vw;
    height: 114.06vh;
    position: relative;
    overflow: hidden;
}

/* Background - Full container */
.fond-textur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hero Image - Responsive */
.image-molly {
    position: absolute;
    top: 20.04vh;
    left: 50%;
    transform: translateX(-50%);
    width: 65.22vw;
    height: auto;
}

/* Quote Section */
.quote-section {
    position: absolute;
    top: 49.06vh;
    left: 50%;
    transform: translateX(-50%);
    width: 64.18vw;
    height: 14.16vh;
}

.quote-text {
    position: absolute;
    top: 4.31vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Nimbus Sans', Helvetica;
    font-weight: 300;
    font-style: italic;
    color: black;
    font-size: 1.27vw;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.54vh;
    width: 100%;
}

/* Guillemets */
.guillemet-bottom {
    position: absolute;
    width: 2.52%;
    height: 8.96%;
    top: 91.04%;
    left: 47.97%;
}

.guillemet-top {
    position: absolute;
    width: 2.52%;
    height: 8.96%;
    top: 0;
    left: 47.97%;
}

/* Decorative Lines */
.lignes-1 {
    position: absolute;
    top: 13.5vh;
    left: -0.12vw;
    width: 29.17vw;
    height: 0.3vh;
}

.lignes-2 {
    position: absolute;
    top: 0.61vh;
    left: -0.12vw;
    width: 29.17vw;
    height: 0.3vh;
}

.lignes-3 {
    position: absolute;
    top: 13.5vh;
    left: 35.07vw;
    width: 29.17vw;
    height: 0.3vh;
}

.lignes-4 {
    position: absolute;
    top: 0.61vh;
    left: 35.07vw;
    width: 29.17vw;
    height: 0.3vh;
}

/* Main Title */
.title {
    position: absolute;
    top: 30.19vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Nimbus Sans', Helvetica;
    font-weight: 900;
    color: white;
    font-size: 3.99vw;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

/* Header */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 11.42vh;
    background: transparent;
    z-index: 100;
}

.header-nav-bg {
    position: absolute;
    top: 7.21vh;
    left: 0;
    width: 100%;
    height: 4.21vh;
    background: white;
    box-shadow: 0px 0px 1.16vw rgba(0, 0, 0, 0.25);
}

.header-top-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 7.21vh;
    background: black;
    box-shadow: 0px 0px 1.16vw rgba(0, 0, 0, 0.25);
}

/* Navigation Links */
.nav-link {
    position: absolute;
    font-family: 'Nimbus Sans', Helvetica;
    font-weight: 700;
    color: black;
    font-size: 1.16vw;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s;
}

.nav-link:hover {
    opacity: 0.7;
}

.nav-blogue {
    top: 8.83vh;
    left: calc(50% - 3.94vw);
}

.nav-benevolat {
    top: 8.83vh;
    left: calc(50% + 7.87vw);
}

.nav-compte {
    top: 8.83vh;
    left: calc(50% + 21.06vw);
}

.nav-accueil {
    position: absolute;
    left: 22.16vw;
    top: 8.83vh;
}

.nav-emplois {
    position: absolute;
    left: 34.43vw;
    top: 8.83vh;
}

/* Logo */
.logo-container {
    position: absolute;
    top: 3.5vh;
    left: calc(50% - 2.08vw);
    width: 3.82vw;
    height: 1.02vh;
}

.logo-dot-1 {
    position: absolute;
    width: 6.68%;
    height: 40.55%;
    top: 59.45%;
    left: 26.03%;
}

.logo-dot-2 {
    position: absolute;
    width: 6.68%;
    height: 40.55%;
    top: 59.45%;
    left: 82.14%;
}

.logo-main {
    position: absolute;
    width: 99.99%;
    height: 99.97%;
    top: 0;
    left: 0;
}

/* Footer */
footer {
    position: absolute;
    top: 73.18vh;
    left: 0;
    width: 100%;
    height: 26.84vh;
    background: transparent;
}

.footer-bg {
    height: 100%;
    background: black;
    box-shadow: 0px 0px 1.16vw rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* Footer Links */
.footer-link {
    position: absolute;
    font-family: 'Nimbus Sans', Helvetica;
    color: white;
    font-size: 1.16vw;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s;
}

.footer-link:hover {
    opacity: 0.7;
}

.footer-link-light {
    font-weight: 300;
}

.footer-link-bold {
    font-weight: 700;
}

/* Footer Positioning */
.footer-accueil {
    top: 5.53vh;
    left: calc(50% - 38.37vw);
}

.footer-contact-title {
    top: 5.53vh;
    left: calc(50% - 14.87vw);
}

.footer-social-title {
    top: 16.64vh;
    left: calc(50% - 14.87vw);
}

.footer-phone {
    top: 7.26vh;
    left: calc(50% - 14.87vw);
}

.footer-email {
    top: 8.58vh;
    left: calc(50% - 14.87vw);
}

.footer-address-title {
    top: 5.53vh;
    left: calc(50% + 16.49vw);
}

.footer-emplois {
    top: 9.18vh;
    left: calc(50% - 38.37vw);
}

.footer-blogue {
    top: 12.84vh;
    left: calc(50% - 38.37vw);
}

.footer-benevolat {
    top: 16.49vh;
    left: calc(50% - 38.37vw);
}

.footer-compte {
    top: 20.14vh;
    left: calc(50% - 38.37vw);
}

.footer-address-1 {
    top: 19.43vh;
    left: calc(50% + 16.49vw);
}

.footer-address-2 {
    top: 20.65vh;
    left: calc(50% + 16.49vw);
}

/* Map Image */
.image-map {
    position: absolute;
    top: 7.36vh;
    left: 67.30vw;
    width: 19.85vw;
    height: 10.76vh;
}

/* Social Icons */
.social-icon-1 {
    position: absolute;
    top: 19.03vh;
    left: 35.82vw;
    width: 1.97vw;
    height: 1.73vh;
}

.social-icon-1 a {
    display: block;
    width: 100%;
    height: 100%;
}

.social-icon-1 img {
    width: 100%;
    height: 100%;
    display: block;
}

.social-icon-2 {
    position: absolute;
    top: 19.03vh;
    left: 38.77vw;
    width: 1.97vw;
    height: 1.73vh;
}

.social-icon-2 a {
    display: block;
    width: 100%;
    height: 100%;
}

.social-icon-2 img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Components */
.accueil-component {
    font-family: 'Nimbus Sans', Helvetica;
    font-weight: 700;
    color: black;
    font-size: 1.16vw;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.component-button {
    position: absolute;
    left: 43.17vw;
    top: 14.11vh;
}

.component-default {
    /* Styles pour le composant par défaut */
}

/* Responsive adjustments for very small screens */
@media screen and (max-width: 768px) {
    .quote-text {
        font-size: 2.5vw;
        line-height: 3vh;
    }

    .title {
        font-size: 6vw;
    }

    .nav-link,
    .footer-link,
    .accueil-component {
        font-size: 2vw;
    }
}

/* Adjustments for tablets */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .quote-text {
        font-size: 1.8vw;
    }

    .title {
        font-size: 4.5vw;
    }

    .nav-link,
    .footer-link,
    .accueil-component {
        font-size: 1.5vw;
    }
}