/* ==========================================================
   MISE EN PAGE
   Fichier : css/layout.css
   Version : 3.5.0
========================================================== */

.container {
    width: min(calc(100% - 2rem), var(--container-width));
    margin-inline: auto;
}

.section {
    padding-block: var(--space-5xl);
}

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

.section-dark {
    color: var(--color-text-on-dark);
    background: var(--color-primary);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: var(--header-height);
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(222, 223, 223, 0.82);
    backdrop-filter: blur(18px);
}

.header-inner,
.footer-inner,
.contact-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
}

.header-inner {
    min-height: var(--header-height);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.7vw, 2.25rem);
}

.hero {
    position: relative;
    padding-block: clamp(5rem, 12vw, 9.5rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 17%, rgba(227, 27, 35, 0.12), transparent 28%),
        linear-gradient(180deg, #f7f7f5 0%, #ffffff 88%);
}

.hero::after {
    position: absolute;
    right: -15%;
    bottom: -45%;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(227, 27, 35, 0.13);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.hero-grid,
.split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
    align-items: center;
    gap: clamp(2.5rem, 8vw, 7rem);
}

.hero-actions,
.trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.proof-strip {
    border-block: 1px solid var(--color-border);
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.card-grid,
.steps-grid,
.jobs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.section-heading {
    max-width: 810px;
    margin-bottom: var(--space-2xl);
}

.section-heading-light p {
    color: var(--color-text-soft-on-dark);
}

.rich-text {
    max-width: 620px;
}

.site-footer {
    padding-block: var(--space-2xl);
    background: var(--color-primary);
}

.footer-meta {
    text-align: right;
}

.site-footer p {
    margin: 0;
    color: var(--color-text-soft-on-dark);
}

@media (max-width: 860px) {
    .section {
        padding-block: var(--space-4xl);
    }

    .hero-grid,
    .split-layout {
        grid-template-columns: 1fr;
    }

    .proof-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-grid,
    .steps-grid,
    .jobs-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-meta {
        text-align: left;
    }
}

@media (max-width: 720px) {
    .header-inner {
        min-height: 76px;
    }

    .main-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: grid;
        gap: 0;
        padding: var(--space-md);
        visibility: hidden;
        background: var(--color-white);
        border-bottom: 1px solid var(--color-border);
        opacity: 0;
        transform: translateY(-8px);
        transition:
            opacity var(--transition-fast),
            transform var(--transition-fast),
            visibility var(--transition-fast);
    }

    .main-nav.is-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    .contact-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .container {
        width: min(calc(100% - 1.25rem), var(--container-width));
    }

    .hero {
        padding-block: var(--space-4xl);
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .proof-grid {
        grid-template-columns: 1fr;
    }
}


.section-jobs {
    background: var(--color-background-muted);
}


/* ==========================================================
   MISE EN PAGE — CANDIDATURE
========================================================== */

.application-section {
    background: var(--color-background-muted);
}

.application-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(440px, 1.28fr);
    align-items: start;
    gap: clamp(2rem, 7vw, 6rem);
}

@media (max-width: 900px) {
    .application-layout {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   MODULE 5 — BARRE DE RECHERCHE DES OFFRES
========================================================== */
.jobs-toolbar {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.jobs-search {
    width: 100%;
}


/* MODULE 6 — grilles de confiance */
.trust-section { background: var(--color-background-warm); }
.trust-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
@media (max-width: 1020px) { .trust-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .trust-card-grid { grid-template-columns: 1fr; } }