/* ==========================================================
   COMPOSANTS VISUELS
   Fichier : css/components.css
   Version : 3.6.0

   🟡 MODIFICATION AVEC VÉRIFICATION
   Une modification ici peut changer plusieurs éléments
   simultanément dans toute l'application.
========================================================== */

/* ==========================================================
   🟢 LOGO OFFICIEL DE L'AGENCE
   ----------------------------------------------------------
   Le fichier se trouve dans :
   assets/logos/logo-activ-interim.jpg

   Pour remplacer le logo plus tard :
   1. conserver exactement le même nom de fichier ;
   2. remplacer simplement l'ancienne image ;
   3. ne pas modifier le HTML.

   La taille générale peut être réglée dans variables.css avec :
   --logo-width
========================================================== */

.brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.brand-logo {
    width: var(--logo-width);
    height: auto;
    object-fit: contain;
}

.skip-link {
    position: fixed;
    top: var(--space-md);
    left: var(--space-md);
    z-index: 100;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

.main-nav a {
    position: relative;
    padding-block: var(--space-sm);
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: color var(--transition-fast);
}

.main-nav a:not(.nav-contact)::after {
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    height: 2px;
    background: var(--color-accent);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-base);
}

.main-nav a:hover {
    color: var(--color-primary);
}

.main-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-contact {
    padding: 0.72rem 1rem !important;
    color: var(--color-white) !important;
    background: var(--color-primary);
    border-radius: var(--radius-pill);
}

.menu-toggle {
    display: none;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.menu-toggle-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.menu-toggle-lines {
    display: grid;
    width: 22px;
    gap: 6px;
}

.menu-toggle-lines span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform var(--transition-fast);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-lines span:first-child {
    transform: translateY(4px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-lines span:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

.eyebrow {
    margin-bottom: var(--space-md);
    color: var(--color-accent);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-text {
    max-width: 620px;
    margin-bottom: var(--space-xl);
    font-size: var(--font-size-lg);
}

.button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-weight: 700;
    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    color: var(--color-white);
    background: var(--color-accent);
    box-shadow: 0 10px 26px rgba(227, 27, 35, 0.20);
}

.button-primary:hover {
    background: var(--color-accent-dark);
    box-shadow: 0 14px 32px rgba(227, 27, 35, 0.26);
}

.button-secondary {
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.75);
    border-color: var(--color-border);
}

.trust-list {
    padding: 0;
    margin: var(--space-xl) 0 0;
    list-style: none;
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
}

.trust-list li::before {
    margin-right: 0.45rem;
    color: var(--color-accent);
    content: "✓";
    font-weight: 700;
}

.hero-panel,
.sector-card,
.contact-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.hero-panel {
    position: relative;
    padding: clamp(1.6rem, 4vw, 2.7rem);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.hero-panel::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: var(--color-accent);
    content: "";
}

.hero-panel-top {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.status-dot {
    width: 9px;
    height: 9px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--color-accent-soft);
}

.hero-panel-label {
    margin-bottom: var(--space-sm);
    color: var(--color-accent);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-panel-statement {
    margin-bottom: var(--space-2xl);
    color: var(--color-text);
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.025em;
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.hero-metrics div {
    display: grid;
    gap: var(--space-xs);
}

.hero-metrics strong {
    font-size: 2rem;
    line-height: 1;
}

.hero-metrics span {
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
}

.proof-grid p {
    padding: var(--space-lg);
    margin: 0;
    color: var(--color-text);
    border-right: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: center;
}

.proof-grid p:last-child {
    border-right: 0;
}

.sector-card {
    min-height: 300px;
    padding: var(--space-xl);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.sector-card:hover {
    border-color: rgba(227, 27, 35, 0.35);
    transform: translateY(-7px);
    box-shadow: var(--shadow-sm);
}

.card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2xl);
}

.card-number {
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.card-arrow {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    background: var(--color-background-muted);
    border-radius: 50%;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: 0;
    margin: var(--space-xl) 0 0;
    list-style: none;
}

.card-tags li {
    padding: 0.4rem 0.65rem;
    color: var(--color-text-soft);
    background: var(--color-background-muted);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.steps-grid {
    padding: 0;
    margin: 0;
    list-style: none;
}

.step-card {
    padding: var(--space-xl);
    border-top: 1px solid var(--color-border-dark);
}

.step-card > span {
    display: inline-block;
    margin-bottom: var(--space-3xl);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.step-card h3 {
    color: var(--color-text-on-dark);
}

.step-card p {
    color: var(--color-text-soft-on-dark);
}

.contact-panel {
    padding: clamp(1.6rem, 5vw, 3.2rem);
}

.footer-brand {
    color: var(--color-white);
    font-size: 1.15rem;
    font-weight: 700;
}

@media (max-width: 860px) {
    .proof-grid p:nth-child(2) {
        border-right: 0;
    }

    .proof-grid p:nth-child(-n + 2) {
        border-bottom: 1px solid var(--color-border);
    }

    .sector-card {
        min-height: auto;
    }
}

@media (max-width: 720px) {
    .brand-logo {
        width: 140px;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .main-nav a {
        padding: var(--space-md);
        border-bottom: 1px solid var(--color-border);
    }

    .main-nav a:not(.nav-contact)::after {
        display: none;
    }

    .nav-contact {
        margin-top: var(--space-sm);
        text-align: center;
    }
}

@media (max-width: 520px) {
    .proof-grid p {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .proof-grid p:last-child {
        border-bottom: 0;
    }

    .button {
        width: 100%;
    }
}


/* ==========================================================
   🟡 OFFRES D'EMPLOI
========================================================== */

.jobs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.job-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.filter-button {
    padding: 0.7rem 1rem;
    color: var(--color-text-soft);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.filter-button:hover,
.filter-button.is-active {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.filter-button:focus-visible {
    outline: 3px solid var(--color-accent-soft);
    outline-offset: 2px;
}

.jobs-count {
    flex: 0 0 auto;
    margin: 0;
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.job-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: var(--space-xl);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.job-card:hover {
    border-color: rgba(227, 27, 35, 0.35);
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.job-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.job-sector,
.job-featured {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.job-sector {
    color: var(--color-text);
    background: var(--color-background-muted);
}

.job-featured {
    color: var(--color-accent-dark);
    background: var(--color-accent-soft);
}

.job-card h3 {
    margin-bottom: var(--space-lg);
}

.job-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    padding-block: var(--space-md);
    margin: 0 0 var(--space-lg);
    border-block: 1px solid var(--color-border);
}

.job-meta div {
    min-width: 0;
}

.job-meta dt {
    margin-bottom: var(--space-xs);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
}

.job-meta dd {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.job-description {
    margin-bottom: var(--space-lg);
}

.job-skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: 0;
    margin: 0 0 var(--space-xl);
    list-style: none;
}

.job-skills li {
    padding: 0.38rem 0.62rem;
    color: var(--color-text-soft);
    background: var(--color-background-muted);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
}

.job-apply {
    width: 100%;
    margin-top: auto;
}

.jobs-empty {
    padding: var(--space-2xl);
    text-align: center;
    background: var(--color-white);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

.jobs-empty p {
    margin-bottom: var(--space-lg);
}

@media (max-width: 620px) {
    .jobs-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .job-meta {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   🟡 FORMULAIRE DE CANDIDATURE
========================================================== */

.application-intro {
    position: sticky;
    top: calc(var(--header-height) + var(--space-xl));
}

.application-intro > p {
    max-width: 550px;
}

.application-promise {
    padding: var(--space-lg);
    margin-top: var(--space-xl);
    background: var(--color-white);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.application-promise p {
    margin: var(--space-xs) 0 0;
}

.application-form {
    padding: clamp(1.25rem, 4vw, 2.5rem);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-field-full {
    grid-column: 1 / -1;
}

.form-field label,
.consent-field {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 650;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field textarea {
    min-height: 130px;
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
    outline: 0;
}

.form-field input[type="file"] {
    padding: 0.75rem;
}

.form-field small,
.form-note {
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
}

.consent-field {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-block: var(--space-xl);
    cursor: pointer;
}

.consent-field input {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    margin-top: 0.1rem;
    accent-color: var(--color-accent);
}

.form-submit {
    width: 100%;
}

.form-note {
    margin: var(--space-sm) 0 0;
    text-align: center;
}

.form-honeypot {
    position: absolute;
    left: -9999px;
}

@media (max-width: 900px) {
    .application-intro {
        position: static;
    }
}

@media (max-width: 620px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field-full {
        grid-column: auto;
    }
}


.confirmation-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: var(--space-xl);
    background: var(--color-background-muted);
}

.confirmation-card {
    width: min(100%, 650px);
    padding: clamp(2rem, 6vw, 4rem);
    text-align: center;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.confirmation-card img {
    width: min(230px, 70%);
    height: auto;
    margin-inline: auto;
    margin-bottom: var(--space-xl);
}

.confirmation-card p:not(.eyebrow) {
    margin-bottom: var(--space-xl);
}

/* ==========================================================
   MODULE 5 — INTERACTIONS ET RECHERCHE
========================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.jobs-search input {
    width: min(100%, 420px);
    min-height: 48px;
    padding: 0.8rem 1rem;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.jobs-search input:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.main-nav a.is-active:not(.nav-contact) {
    color: var(--color-accent);
}

.application-form-column {
    min-width: 0;
}

.application-selection {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    margin-bottom: var(--space-md);
    background: var(--color-accent-soft);
    border: 1px solid rgba(227, 27, 35, 0.25);
    border-radius: var(--radius-md);
}

.application-selection[hidden] {
    display: none;
}

.application-selection span {
    color: var(--color-accent-dark);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.application-selection strong {
    color: var(--color-text);
}

.application-selection button {
    width: max-content;
    padding: 0;
    color: var(--color-text-soft);
    background: none;
    border: 0;
    font: inherit;
    font-size: var(--font-size-xs);
    text-decoration: underline;
    cursor: pointer;
}

.back-to-top {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 30;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    visibility: hidden;
    color: var(--color-white);
    background: var(--color-primary);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(12px);
    cursor: pointer;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.back-to-top.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-3px);
}


/* ==========================================================
   MODULE 6 — CONFIANCE, CLARTÉ ET PREUVES
   🟢 Ces styles concernent uniquement les nouvelles sections.
========================================================== */
.jobs-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.spontaneous-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    margin-top: var(--space-2xl);
    background: var(--color-primary);
    border: 1px solid var(--color-primary-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.spontaneous-callout h3,
.spontaneous-callout p:not(.eyebrow) { color: var(--color-text-on-dark); }
.spontaneous-callout p:not(.eyebrow) { max-width: 720px; color: var(--color-text-soft-on-dark); }
.spontaneous-callout .button { flex: 0 0 auto; background: var(--color-white); }

.trust-card {
    position: relative;
    min-height: 280px;
    padding: clamp(1.4rem, 3vw, 2rem);
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.trust-card::after {
    position: absolute;
    right: -40px;
    bottom: -70px;
    width: 150px;
    height: 150px;
    background: var(--color-accent-soft);
    border-radius: 50%;
    content: "";
    transition: transform var(--transition-base);
}
.trust-card:hover { transform: translateY(-6px); border-color: rgba(227, 27, 35, .32); box-shadow: var(--shadow-hover); }
.trust-card:hover::after { transform: scale(1.15); }
.trust-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    margin-bottom: var(--space-2xl);
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border-radius: 50%;
    font-size: var(--font-size-sm);
    font-weight: 700;
}
.trust-card p { position: relative; z-index: 1; }

.reviews-placeholder {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-xl);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    margin-top: var(--space-2xl);
    background: var(--color-background-warm);
    border: 1px dashed #c9c9c5;
    border-radius: var(--radius-lg);
}
.reviews-mark {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    color: var(--color-accent);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.reviews-placeholder .eyebrow { margin-bottom: var(--space-xs); }
.reviews-placeholder h3 { margin-bottom: var(--space-xs); }
.reviews-placeholder p:last-child { margin: 0; }

.job-card .button { position: relative; overflow: hidden; }
.job-card .button::after {
    margin-left: .55rem;
    content: "→";
    transition: transform var(--transition-fast);
}
.job-card:hover .button::after { transform: translateX(4px); }

@media (max-width: 760px) {
    .jobs-overview,
    .spontaneous-callout { align-items: flex-start; flex-direction: column; }
    .reviews-placeholder { grid-template-columns: 1fr; }
}


/* ==========================================================
   MODULE 7 — IDENTITÉ, PREUVES ET EXPÉRIENCE
========================================================== */
.hero-support { display:flex; gap:1rem; align-items:flex-start; padding:1rem; background:var(--color-background-warm); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.hero-support > span { display:grid; flex:0 0 auto; width:34px; height:34px; place-items:center; color:var(--color-white); background:var(--color-accent); border-radius:50%; font-weight:800; }
.hero-support strong { display:block; margin-bottom:.3rem; }
.hero-support p { margin:0; color:var(--color-text-soft); font-size:var(--font-size-sm); }
.reviews-heading { max-width:760px; margin-top:clamp(3rem,7vw,5rem); margin-bottom:var(--space-xl); }
.reviews-heading h3 { font-size:clamp(1.7rem,4vw,2.5rem); }
.reviews-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-lg); }
.review-card { display:flex; min-height:100%; flex-direction:column; padding:clamp(1.35rem,3vw,2rem); background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base); }
.review-card:hover { transform:translateY(-5px); border-color:rgba(227,27,35,.25); box-shadow:var(--shadow-hover); }
.review-card-top { display:flex; gap:.85rem; align-items:center; }
.review-avatar { display:grid; width:44px; height:44px; place-items:center; color:var(--color-white); background:var(--color-primary); border-radius:50%; font-weight:800; }
.review-card h4,.review-card-top p { margin:0; }
.review-card-top p { color:var(--color-text-soft); font-size:var(--font-size-xs); }
.review-stars { margin:1.25rem 0 .85rem; color:#f5b700; letter-spacing:.12em; }
.review-card blockquote { margin:0; color:var(--color-text); line-height:1.75; }
.reviews-action { display:flex; justify-content:center; margin-top:var(--space-xl); }
.company-section { padding-top:0; }
.company-panel { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2xl); padding:clamp(2rem,5vw,4rem); color:var(--color-text-on-dark); background:linear-gradient(135deg,var(--color-primary),#242a35); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.company-panel > div { max-width:760px; }
.company-panel h2 { color:var(--color-white); }
.company-panel p:not(.eyebrow) { color:var(--color-text-soft-on-dark); }
.form-field.has-error input,.form-field.has-error select,.form-field.has-error textarea { border-color:#c62828; background:#fff8f8; box-shadow:0 0 0 3px rgba(198,40,40,.10); }
.consent-field.has-error { padding:.85rem; background:#fff8f8; border:1px solid #c62828; border-radius:var(--radius-sm); }
.field-error { min-height:1.25em; margin:.4rem 0 0; color:#b42318; font-size:var(--font-size-xs); font-weight:600; }
.consent-error { display:block; width:100%; }
@media (max-width:900px){ .reviews-grid{grid-template-columns:1fr;} .company-panel{align-items:flex-start;flex-direction:column;} }


/* ==========================================================
   MODULE 8 — EXPÉRIENCE CANDIDAT
========================================================== */
.jobs-overview { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); margin-bottom:var(--space-xl); }
.jobs-status { flex:0 0 auto; margin:0; color:var(--color-text-soft); font-size:var(--font-size-sm); font-weight:600; }
.jobs-grid:focus { outline:none; }
.job-card { scroll-margin-top:calc(var(--header-height) + 1rem); }
.job-card:focus-within { border-color:rgba(227,27,35,.42); box-shadow:0 0 0 4px var(--color-accent-soft),var(--shadow-md); }
.form-intro { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); padding-bottom:var(--space-lg); margin-bottom:var(--space-xl); border-bottom:1px solid var(--color-border); }
.form-intro span { color:var(--color-text-soft); font-size:var(--font-size-sm); }
.form-intro strong { padding:.4rem .75rem; color:var(--color-accent-dark); background:var(--color-accent-soft); border-radius:var(--radius-pill); font-size:var(--font-size-xs); }
.form-feedback { padding:1rem 1.1rem; margin-bottom:var(--space-lg); border-radius:var(--radius-md); font-size:var(--font-size-sm); font-weight:650; }
.form-feedback.is-error { color:#8f1d17; background:#fff2f1; border:1px solid rgba(180,35,24,.28); }
.file-name { color:var(--color-text-soft); font-size:var(--font-size-xs); overflow-wrap:anywhere; }
.form-reassurance { display:flex; align-items:flex-start; gap:.7rem; margin-top:var(--space-md); color:var(--color-text-soft); font-size:var(--font-size-xs); }
.form-reassurance span { display:grid; width:22px; height:22px; flex:0 0 auto; place-items:center; color:var(--color-white); background:var(--color-primary); border-radius:50%; font-size:.7rem; font-weight:800; }
.form-reassurance p { margin:0; }
.form-submit:disabled { cursor:wait; opacity:.82; }
.form-submit.is-loading { position:relative; }
.form-submit.is-loading::after { width:16px; height:16px; margin-left:.7rem; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; content:""; animation:submit-spin .7s linear infinite; }
@keyframes submit-spin { to { transform:rotate(360deg); } }
@media (max-width:760px) {
  .jobs-overview { align-items:flex-start; flex-direction:column; }
  .job-filters { width:100%; flex-wrap:nowrap; padding-bottom:.35rem; overflow-x:auto; scrollbar-width:thin; }
  .filter-button { flex:0 0 auto; min-height:44px; }
  .jobs-status { font-size:var(--font-size-xs); }
  .job-card { padding:1.25rem; }
  .job-meta { gap:.75rem; }
  .application-form { padding:1.15rem; border-radius:var(--radius-md); }
  .form-field input,.form-field select,.form-field textarea { min-height:48px; font-size:16px; }
  .form-field textarea { min-height:130px; }
  .consent-field { min-height:48px; }
  .form-submit { min-height:50px; }
}


/* ==========================================================
   CORRECTIF MODULE 8.1 — CV ET VOLUME D’OFFRES
========================================================== */
.file-selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding: 0.65rem 0.8rem;
    background: var(--color-background-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.file-selection[hidden] {
    display: none;
}

.file-selection .file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-name-empty {
    display: block;
    margin-top: var(--space-sm);
}

.file-name-empty[hidden] {
    display: none;
}

.file-remove-button {
    flex: 0 0 auto;
    padding: 0.45rem 0.7rem;
    color: var(--color-primary);
    background: var(--color-white);
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.file-remove-button:hover {
    color: var(--color-white);
    background: var(--color-primary);
}

.file-remove-button:focus-visible {
    outline: 3px solid var(--color-accent-soft);
    outline-offset: 2px;
}


/* ==========================================================
   CORRECTIF MODULE 8.3 — CONFIRMATION INTÉGRÉE
========================================================== */
.application-confirmation {
    padding: clamp(1.5rem, 4vw, 3rem);
    text-align: center;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.application-confirmation[hidden] { display: none; }
.application-confirmation .confirmation-icon {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-lg);
    place-items: center;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 50%;
    font-size: 1.75rem;
    font-weight: 800;
}
.application-confirmation h2 { max-width: none; margin-inline: auto; }
.application-confirmation > p:not(.eyebrow) { max-width: 56ch; margin-inline: auto; }
.application-confirmation .confirmation-next {
    margin: var(--space-xl) 0;
    padding: var(--space-lg);
    text-align: left;
    background: var(--color-background-muted);
    border-radius: var(--radius-md);
}
.application-confirmation .confirmation-next strong { display: block; margin-bottom: .35rem; }
.application-confirmation .confirmation-next p { margin: 0; }
.application-confirmation .button { margin: .35rem; }

/* ==========================================================
   VERSION 0.6 — ANCRAGE LOCAL
========================================================== */
.local-section {
    background: var(--color-background-warm);
}

.agency-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: var(--space-xl);
    align-items: stretch;
}

.agency-visual,
.agency-contact-panel,
.team-preview {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.agency-visual {
    overflow: hidden;
}

.photo-placeholder {
    min-height: 360px;
    display: grid;
    place-content: center;
    gap: var(--space-xs);
    padding: var(--space-xl);
    text-align: center;
    color: var(--color-text-soft);
    background:
        linear-gradient(135deg, rgba(227, 27, 35, 0.08), transparent 45%),
        repeating-linear-gradient(-45deg, #f3f3f1, #f3f3f1 16px, #fafaf8 16px, #fafaf8 32px);
}

.photo-placeholder-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto var(--space-xs);
    border-radius: 50%;
    color: var(--color-white);
    background: var(--color-accent);
    font-size: 1.8rem;
}

.photo-placeholder strong {
    color: var(--color-text);
    font-size: 1.1rem;
}

.photo-placeholder small {
    font-size: var(--font-size-sm);
}

.agency-visual-caption,
.agency-contact-panel,
.team-preview {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.agency-visual-caption h3,
.agency-contact-panel h3,
.team-preview h3 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.agency-contact-panel {
    display: flex;
    flex-direction: column;
}

.contact-actions {
    display: grid;
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.contact-card:hover,
.contact-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(227, 27, 35, 0.4);
    box-shadow: var(--shadow-sm);
}

.contact-card > span {
    width: 42px;
    height: 42px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    font-weight: 700;
}

.contact-card small,
.contact-card strong {
    display: block;
}

.contact-card small {
    color: var(--color-text-soft);
}

.contact-card strong {
    overflow-wrap: anywhere;
}

.contact-location {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    font-weight: 600;
}

.contact-location span {
    color: var(--color-accent);
}

.team-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xl);
    align-items: center;
    margin-top: var(--space-xl);
}

.team-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(2, 128px);
    gap: var(--space-md);
}

.team-placeholder {
    aspect-ratio: 1 / 1.15;
    display: grid;
    place-content: center;
    gap: var(--space-xs);
    text-align: center;
    border: 1px dashed #bfc1c4;
    border-radius: var(--radius-md);
    color: var(--color-text-soft);
    background: var(--color-background-muted);
}

.team-placeholder span {
    font-size: 2rem;
}

@media (max-width: 850px) {
    .agency-showcase,
    .team-preview {
        grid-template-columns: 1fr;
    }

    .team-placeholder-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .photo-placeholder {
        min-height: 250px;
    }

    .team-placeholder-grid {
        gap: var(--space-sm);
    }

    .contact-card {
        align-items: flex-start;
    }
}