/* =========================================================================
   Matrix Digital — forms.css
   Formulaires (devis 3 étapes, audit, contact). (P11)
   ========================================================================= */

.mx-devis-hero {
    position: relative;
    padding: 40px 0 24px; /* offset header géré globalement sur #mx-main */
    overflow: hidden;
    text-align: center;
}
.mx-devis-hero__sub { max-width: 52ch; margin: 12px auto 0; color: var(--mx-muted); }

/* ---------------------------------------------------------------- *
   FORM — conteneur
 * ---------------------------------------------------------------- */
.mx-form {
    background: var(--mx-dark);
    border: 1px solid var(--mx-border);
    border-radius: var(--card-radius);
    padding: clamp(20px, 4vw, 40px);
}

/* Progression */
.mx-steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: var(--gap-lg); }
.mx-step-dot {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem;
    color: var(--mx-muted);
    background: var(--mx-black);
    border: 1px solid var(--mx-border);
    transition: all var(--t-base);
}
.mx-step-dot.is-active { color: #fff; background: var(--mx-gradient); border-color: transparent; }
.mx-step-line { width: 48px; height: 2px; background: var(--mx-border); }

/* Étapes */
.mx-step { border: none; padding: 0; margin: 0; animation: revealUp .35s ease both; }
.mx-step__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--mx-white); margin-bottom: var(--gap-md); padding: 0; }
.mx-step__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: var(--gap-lg); }

/* Cases à cocher (étape 1) */
.mx-checkgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .mx-checkgrid { grid-template-columns: 1fr 1fr; } }
.mx-check {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--mx-black);
    border: 1px solid var(--mx-border);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.mx-check:hover { border-color: rgba(255, 255, 255,0.45); }
.mx-check input { width: 18px; height: 18px; accent-color: var(--mx-blue); flex: 0 0 auto; }
.mx-check:has(input:checked) { border-color: var(--mx-blue); background: rgba(255, 255, 255,0.08); }

/* Champs */
.mx-input.is-error, .mx-textarea.is-error, .mx-select.is-error {
    border-color: var(--status-danger);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}

/* Feedback */
.mx-form__feedback { margin-top: 16px; text-align: center; color: var(--mx-muted); }
.mx-form__feedback.is-error { color: var(--status-danger); }

/* Bouton en chargement */
.mx-btn.is-loading { opacity: 0.7; pointer-events: none; position: relative; }

/* Succès */
.mx-form-success {
    text-align: center;
    background: var(--mx-dark);
    border: 1px solid var(--mx-border);
    border-radius: var(--card-radius);
    padding: clamp(32px, 6vw, 64px);
}
.mx-form-success__icon {
    width: 64px; height: 64px; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #fff;
    background: var(--mx-gradient); border-radius: 50%;
    box-shadow: 0 0 30px rgba(255, 255, 255,0.4);
}
.mx-form-success h2 { margin-bottom: 10px; }
.mx-form-success .mx-btn { margin-top: 20px; }

/* ---------------------------------------------------------------- *
   AUDIT GRATUIT — landing (P12)
 * ---------------------------------------------------------------- */
.mx-audit-hero { position: relative; padding: 56px 0 64px; overflow: hidden; } /* offset header global */
.mx-audit-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-xl); align-items: start; }
@media (min-width: 960px) { .mx-audit-hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.mx-audit-hero__text h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 12px 0 16px; }
.mx-audit-hero__sub { color: var(--mx-muted); font-size: 1.1rem; margin-bottom: 28px; }

.mx-audit-benefices { display: flex; flex-direction: column; gap: 14px; }
.mx-audit-benefices li { display: flex; gap: 12px; color: var(--mx-off-white); line-height: 1.5; }
.mx-audit-benefices__check {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem; color: #fff;
    background: var(--mx-gradient);
}

.mx-audit-form-wrap { position: relative; }
.mx-audit-form__title { font-size: 1.3rem; margin-bottom: var(--gap-md); }
.mx-audit-form .mx-btn--block { margin-top: 8px; }

/* ---------------------------------------------------------------- *
   SUIVI DE DEMANDE — barre de progression (P13)
 * ---------------------------------------------------------------- */
.mx-suivi { padding-top: 24px; }
.mx-suivi__title { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 10px 0; }
.mx-suivi__services { margin-bottom: 36px; }
.mx-suivi__note { margin-top: 32px; }
.mx-suivi__note a { color: var(--mx-cyan); }
.mx-suivi__closed { margin-top: 24px; padding: var(--gap-lg); background: var(--mx-dark); border: 1px solid var(--mx-border); border-radius: var(--card-radius); }
.mx-suivi__closed p { margin-bottom: 16px; }

.mx-progress { position: relative; margin: 40px 0; }
.mx-progress__bar {
    position: absolute;
    top: 18px; left: 0; right: 0;
    height: 4px;
    background: var(--mx-border);
    border-radius: 4px;
    z-index: 0;
}
.mx-progress__bar span {
    display: block;
    height: 100%;
    width: var(--mx-progress, 0%);
    background: var(--mx-gradient);
    border-radius: 4px;
    transition: width 0.6s var(--ease);
}
.mx-progress__steps {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
}
.mx-progress__step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; text-align: center; }
.mx-progress__dot {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem;
    color: var(--mx-muted);
    background: var(--mx-dark);
    border: 2px solid var(--mx-border);
    transition: all var(--t-base);
}
.mx-progress__step.is-done .mx-progress__dot { color: #fff; background: var(--mx-gradient); border-color: transparent; }
.mx-progress__step.is-current .mx-progress__dot { box-shadow: 0 0 0 4px rgba(255, 255, 255,0.25); }
.mx-progress__label { font-size: 0.78rem; color: var(--mx-muted); }
.mx-progress__step.is-done .mx-progress__label { color: var(--mx-off-white); }

/* ---------------------------------------------------------------- *
   RESSOURCES — centre de guides gated (P14)
 * ---------------------------------------------------------------- */
.mx-ressources-hero { position: relative; padding: 56px 0 24px; overflow: hidden; }
.mx-ressources-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 12px 0; }
.mx-ressources-hero__sub { max-width: 56ch; color: var(--mx-muted); font-size: 1.1rem; }

.mx-ressource-card { padding: 0; overflow: hidden; }
.mx-ressource-card__cover {
    aspect-ratio: 16 / 10;
    background: var(--mx-navy-mid);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.mx-ressource-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.mx-ressource-card__ph { font-family: var(--font-mono); color: var(--mx-muted); font-size: 1.6rem; letter-spacing: 0.1em; }
.mx-ressource-card__body { padding: var(--gap-md); display: flex; flex-direction: column; gap: 10px; }
.mx-ressource-card__pages { color: var(--mx-muted); font-size: 0.8rem; }
.mx-ressource-card .mx-btn { margin-top: auto; }

/* ---------------------------------------------------------------- *
   MODAL (téléchargement gaté / popups)
 * ---------------------------------------------------------------- */
.mx-modal {
    position: fixed; inset: 0;
    z-index: var(--z-popup, 1200);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
/* IMPORTANT : restaure le masquage par l'attribut [hidden] (sinon display:flex l'emporte) */
.mx-modal[hidden] { display: none; }
.mx-modal__overlay {
    position: absolute; inset: 0;
    background: rgba(8, 8, 16, 0.7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.mx-modal__box {
    position: relative;
    z-index: 1;
    width: 100%; max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    padding: clamp(24px, 4vw, 36px);
    background: var(--mx-dark);
    border: 1px solid var(--mx-border);
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    animation: revealUp 0.3s ease both;
}
.mx-modal__close {
    position: absolute; top: 12px; right: 14px;
    width: 40px; height: 40px;
    font-size: 1.8rem; line-height: 1;
    color: var(--mx-off-white); border-radius: 8px;
}
.mx-modal__close:hover { background: var(--mx-navy-mid); color: #fff; }
.mx-modal__title { font-size: 1.4rem; margin-bottom: 4px; }
.mx-modal__sub { margin-bottom: var(--gap-md); }
.mx-modal .mx-form { background: none; border: none; padding: 0; }
.mx-modal .mx-form-success { background: none; border: none; padding: 8px 0; }

/* ---------------------------------------------------------------- *
   CARRIÈRES (P17)
 * ---------------------------------------------------------------- */
.mx-carrieres-hero { position: relative; padding: 56px 0 24px; overflow: hidden; }
.mx-carrieres-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 12px 0; }
.mx-carrieres-hero__sub { max-width: 56ch; color: var(--mx-muted); font-size: 1.1rem; }

.mx-offres-list { display: flex; flex-direction: column; gap: 14px; }
.mx-offre-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: clamp(18px, 3vw, 26px);
    background: var(--mx-dark);
    border: 1px solid var(--mx-border);
    border-radius: var(--card-radius);
    color: inherit;
    transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.mx-offre-row:hover { border-color: rgba(255, 255, 255,0.45); transform: translateX(4px); box-shadow: 0 0 30px rgba(255, 255, 255,0.15); }
.mx-offre-row__poste { font-size: 1.25rem; margin-bottom: 8px; }
.mx-offre-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--mx-muted); font-size: 0.85rem; }
.mx-offre-row__cta { flex: 0 0 auto; color: var(--mx-cyan); font-weight: 600; white-space: nowrap; }

.mx-offre-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; color: var(--mx-muted); margin-top: 14px; }
.mx-offre-body { display: flex; flex-direction: column; gap: var(--gap-lg); }
.mx-offre-block__title { font-size: 1.5rem; margin-bottom: 14px; }
.mx-offre-apply {
    margin-top: var(--gap-md);
    padding: clamp(20px, 4vw, 36px);
    background: var(--mx-dark);
    border: 1px solid var(--mx-border);
    border-radius: var(--card-radius);
}

/* ---------------------------------------------------------------- *
   CONTACT (P18)
 * ---------------------------------------------------------------- */
.mx-contact-hero { position: relative; padding: 56px 0 24px; overflow: hidden; }
.mx-contact-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 12px 0; }
.mx-contact-hero__sub { max-width: 56ch; color: var(--mx-muted); font-size: 1.1rem; }

.mx-contact__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-lg); }
@media (min-width: 900px) { .mx-contact__grid { grid-template-columns: 0.9fr 1.1fr; } }

.mx-contact__coords { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.mx-contact__coords li { display: flex; gap: 10px; color: var(--mx-off-white); }
.mx-contact__coords a { color: var(--mx-off-white); }
.mx-contact__coords a:hover { color: var(--mx-pink); }
.mx-contact__map {
    margin-top: 20px;
    border-radius: var(--card-radius);
    overflow: hidden;
    border: 1px solid var(--mx-border);
    aspect-ratio: 16 / 11;
}
.mx-contact__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.2) invert(0.92) hue-rotate(180deg); }
.mx-contact__maps-link { display: inline-block; margin-top: 12px; color: var(--mx-cyan); font-size: 0.9rem; }
.mx-contact__form-wrap { background: var(--mx-dark); border: 1px solid var(--mx-border); border-radius: var(--card-radius); padding: clamp(20px, 4vw, 36px); }
.mx-contact__form-wrap .mx-form { background: none; border: none; padding: 0; }

/* FAQ (accordéon) — partagé contact / services */
.mx-faq { display: flex; flex-direction: column; gap: 12px; }
.mx-faq__item { background: var(--mx-dark); border: 1px solid var(--mx-border); border-radius: var(--card-radius); padding: 4px 20px; }
.mx-faq__item[open] { border-color: rgba(255, 255, 255,0.45); }
.mx-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-family: var(--font-display); font-weight: 600; color: var(--mx-white); }
.mx-faq__q::-webkit-details-marker { display: none; }
.mx-faq__q::after { content: "+"; color: var(--mx-cyan); font-size: 1.4rem; transition: transform var(--t-fast); }
.mx-faq__item[open] .mx-faq__q::after { transform: rotate(45deg); }
.mx-faq__a { padding: 0 0 18px; color: var(--mx-muted); }

/* Champ fichier */
.mx-input--file { padding: 10px 12px; cursor: pointer; }
.mx-input--file::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: none; border-radius: var(--btn-radius);
    background: var(--mx-navy-mid); color: var(--mx-off-white);
    cursor: pointer;
}
.mx-input--file::file-selector-button:hover { background: var(--mx-violet); color: #fff; }