/**
 * Vauban — Landing marketing/SEO de la candidature équipier ménage.
 *
 * Namespace .vcl-* (Vauban Cleaner Landing), jumeau du formulaire .vca-*.
 * Même langage visuel : indigo signature (#4F46E5 → #4338CA), fond bleuté
 * (#edf2ff), cartes blanches (bord #DCE7F8, rayon 14px), police Inter.
 * Page publique standalone (pas de mode sombre) — couleurs alignées sur les
 * sous-fichiers cleaner-application/ existants.
 *
 * @since 20.9.0
 */

/* ─── Défilement doux vers le formulaire ───
   Activé par JS une fois la page posée (classe `vcl-smooth-ready`, cf.
   assets/js/cleaner-application-landing.js), et NON au chargement. Appliqué dès le
   parsing, `scroll-behavior: smooth` jouait en glissement animé TOUT défilement non
   initié par le visiteur — y compris la position restaurée par le navigateur au
   retour sur la page. Ouvrir « Recrutement » donnait alors l'impression d'être
   redirigé automatiquement vers le formulaire, tout en bas. */
@media (prefers-reduced-motion: no-preference) {
    html.vcl-smooth-ready {
        scroll-behavior: smooth;
    }
}

#vauban-cleaner-application {
    scroll-margin-top: 72px;
}

/* ─── Conteneur full-bleed (identique à .vca-wrap pour un raccord invisible) ─── */
.vcl-wrap {
    display: block;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 20px;
    background: #edf2ff;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #111827;
}

.has-global-padding > .vcl-wrap,
.wp-block-post-content > .vcl-wrap,
.entry-content > .vcl-wrap {
    margin-left:  calc(-1 * var(--wp--style--root--padding-left,  var(--wp--custom--spacing--outer, 0px))) !important;
    margin-right: calc(-1 * var(--wp--style--root--padding-right, var(--wp--custom--spacing--outer, 0px))) !important;
    width: calc(100%
        + var(--wp--style--root--padding-left,  var(--wp--custom--spacing--outer, 0px))
        + var(--wp--style--root--padding-right, var(--wp--custom--spacing--outer, 0px))
    ) !important;
    max-width: none !important;
}

/* Full-bleed générique : masque le titre WP et casse l'espacement du thème sur
   toute page portant une `.vcl-wrap` (candidature ET page satellite Aix). */
body:has(.vcl-wrap) .entry-title,
body:has(.vcl-wrap) .page-title,
body:has(.vcl-wrap) h1.page-title,
body:has(.vcl-wrap) h1.entry-title,
body:has(.vcl-wrap) .wp-block-post-title {
    display: none !important;
}

body:has(.vcl-wrap) .wp-block-post-content,
body:has(.vcl-wrap) .entry-content,
body:has(.vcl-wrap) .wp-block-template-part {
    padding-top: 0 !important;
    margin-top: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

body:has(.vcl-wrap) :where(.is-layout-constrained) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
}

body:has(.vcl-wrap) .wp-site-blocks > .wp-block-group:first-child,
body:has(.vcl-wrap) main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Thèmes CLASSIQUES (Astra, thème actif de la vitrine) — les règles ci-dessus ne
   nomment que les conteneurs des thèmes de blocs. Astra emboîte le contenu dans
   `.site-content > .ast-container > #primary > .site-main`, dont le `max-width` et
   le padding latéral laissaient le hero à 1225 px pour une fenêtre de 1280 : le
   dégradé s'arrêtait ~27 px avant chaque bord, ce qui se lit comme une page qui
   n'est pas en pleine largeur. Restreint à `.site-content` — `.ast-container` sert
   aussi à l'en-tête, qui doit garder sa gouttière. */
body:has(.vcl-wrap) .site-content > .ast-container,
body:has(.vcl-wrap) .site-content #primary,
body:has(.vcl-wrap) .site-content .site-main,
body:has(.vcl-wrap) .site-content .ast-article-single {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.vcl-container {
    max-width: 1120px;
    margin: 0 auto;
}

.vcl-container--narrow {
    max-width: 820px;
}

.vcl-band {
    padding: clamp(44px, 7vw, 80px) 0;
}

/* ─── Hero ─── */
/* Un seul message par écran : le titre doit dominer largement l'accroche, laquelle
   domine les actions. Les faits « en bref » et la mention pilote sont sortis du hero
   (bande `.vcl-facts` et section « projet qui grandit ») — empilés ici, ils mettaient
   huit blocs de même poids en concurrence et le titre s'y noyait. */
.vcl-hero {
    position: relative;
    overflow: hidden;
    margin: 0 -20px;
    padding: clamp(54px, 8vw, 104px) 20px clamp(46px, 6vw, 84px);
    background: linear-gradient(160deg, #4F46E5 0%, #4338CA 100%);
    text-align: center;
    color: #ffffff;
}

/* Voiles décoratifs : très discrets, ils ne doivent jamais concurrencer le titre. */
.vcl-hero::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -120px;
    width: 380px;
    height: 380px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    pointer-events: none;
}

.vcl-hero::after {
    content: '';
    position: absolute;
    bottom: -160px;
    left: -110px;
    width: 340px;
    height: 340px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.vcl-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

.vcl-eyebrow {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vcl-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(34px, 6.2vw, 62px);
    font-weight: 780;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

/* ─── Titre du hero en deux registres (page satellite) ───
   Une seule balise `h1` — Google en lit tout le texte — mais deux poids visuels :
   l'affirmation d'audience en très gros, pour qu'un visiteur sache en un coup d'œil
   à qui la page s'adresse, et la longue traîne SEO juste dessous, en corps de texte.
   Sans ce dédoublement il fallait choisir entre un titre clair et un titre optimisé.
   L'échelle est portée par `.vcl-title` : les deux pages partagent le même registre. */
.vcl-title__main {
    display: block;
}

.vcl-title__sub {
    display: block;
    max-width: 620px;
    margin: 16px auto 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(15px, 1.9vw, 19px);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
}

.vcl-lead {
    max-width: 660px;
    margin: 20px auto 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(15px, 1.9vw, 19px);
    line-height: 1.6;
    text-wrap: pretty;
}

/* ─── Aiguillage d'audience ───
   Toujours dans le hero — un propriétaire arrivé par « Recrutement » doit savoir sans
   défiler que la page ne lui est pas destinée — mais réduit à une ligne posée SOUS les
   actions, séparée par un simple filet. En encart encadré au-dessus des CTA, il lisait
   comme un second bloc de contenu et coupait le titre de son appel à l'action. */
.vcl-audience {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 16px;
    max-width: 720px;
    margin: 34px auto 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.vcl-audience__title {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
}

.vcl-audience__text {
    color: rgba(255, 255, 255, 0.68);
}

.vcl-audience__links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.vcl-audience__links a {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vcl-audience__links a:hover,
.vcl-audience__links a:focus {
    color: #ffffff;
    text-decoration-thickness: 2px;
}

.vcl-audience__links a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ─── Bande de faits « en bref » ───
   Les conditions concrètes (statut, secteur, rémunération, linge, type de missions)
   restent lisibles dès le premier écran, mais sur fond clair et hors du hero : elles
   informent celui qui a lu le titre, elles ne se disputent plus son attention. */
.vcl-facts {
    margin: 0 -20px;
    padding: 18px 20px;
    background: #ffffff;
    border-bottom: 1px solid #E4EAF6;
}

/* Chips = étiquettes plates et discrètes (pas des boutons) */
.vcl-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.vcl-chips li {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border: 1px solid #DCE7F8;
    border-radius: 999px;
    background: #F8FAFF;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.vcl-hero__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}

/* ─── Boutons ─── */
.vcl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 30px;
    border: 0;
    border-radius: 11px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.vcl-btn:focus { outline: none; }

.vcl-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

/* CTA principal : blanc plein, dominant */
.vcl-btn--primary {
    background: #ffffff;
    color: #3730A3;
    box-shadow: 0 8px 22px rgba(23, 20, 82, 0.30);
}

.vcl-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(23, 20, 82, 0.36);
    color: #312E81;
}

/* Sur fond clair (CTA final), inverser le contraste */
.vcl-cta-final .vcl-btn--primary {
    background: linear-gradient(160deg, #4F46E5 0%, #4338CA 100%);
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(79, 70, 229, 0.30);
}

.vcl-cta-final .vcl-btn--primary:hover {
    color: #ffffff;
}

.vcl-hero__note {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 500;
}

/* ─── En-tête de section ─── */
.vcl-section-head {
    max-width: 700px;
    margin: 0 auto clamp(28px, 4vw, 44px);
    text-align: center;
}

.vcl-kicker {
    margin: 0 0 8px;
    color: #4F46E5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vcl-section-head h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(23px, 3.4vw, 32px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.vcl-section-sub {
    margin: 12px auto 0;
    max-width: 620px;
    color: #4B5563;
    font-size: 15.5px;
    line-height: 1.6;
}

/* ─── Cartes « profil recherché » ─── */
.vcl-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.vcl-card {
    padding: 26px 22px;
    background: #ffffff;
    border: 1px solid #DCE7F8;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.06);
}

.vcl-card h3 {
    margin: 16px 0 8px;
    color: #111827;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
}

.vcl-card p {
    margin: 0;
    color: #4B5563;
    font-size: 14px;
    line-height: 1.6;
}

.vcl-card::before {
    content: '';
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background-color: #EEF2FF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

.vcl-card--rigor::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
}

.vcl-card--trust::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.vcl-card--auto::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.2 4.6 5 .7-3.6 3.5.9 5L12 13.9 7.5 15.8l.9-5L4.8 7.3l5-.7z'/%3E%3C/svg%3E");
}

.vcl-card--care::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3C/svg%3E");
}

/* ─── Timeline « comment ça marche » ─── */
.vcl-steps {
    background: #ffffff;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.vcl-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.vcl-timeline__item {
    position: relative;
    padding-top: 6px;
}

.vcl-timeline__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: linear-gradient(160deg, #4F46E5 0%, #4338CA 100%);
    color: #ffffff;
    font-size: 17px;
    font-weight: 750;
}

.vcl-timeline__item h3 {
    margin: 0 0 6px;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.vcl-timeline__item p {
    margin: 0;
    color: #4B5563;
    font-size: 14px;
    line-height: 1.6;
}

/* ─── Vision pilote / plateforme ─── */
.vcl-vision__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.vcl-vision__col {
    padding: 30px 28px;
    background: #ffffff;
    border: 1px solid #DCE7F8;
    border-radius: 16px;
}

.vcl-vision__col--accent {
    background: linear-gradient(165deg, #EEF2FF 0%, #E4E9FF 100%);
    border-color: #C7D2FE;
}

.vcl-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: #EEF2FF;
    color: #4338CA;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vcl-tag--accent {
    background: #4F46E5;
    color: #ffffff;
}

.vcl-vision__col h3 {
    margin: 14px 0 10px;
    color: #111827;
    font-size: 19px;
    font-weight: 730;
    line-height: 1.3;
}

.vcl-vision__col p {
    margin: 0 0 10px;
    color: #374151;
    font-size: 14.5px;
    line-height: 1.62;
}

.vcl-vision__note {
    font-weight: 600;
    color: #4338CA !important;
}

.vcl-reassure {
    margin: 24px auto 0;
    max-width: 760px;
    padding: 14px 20px;
    border: 1px dashed #C7D2FE;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    color: #4B5563;
    font-size: 13.5px;
    line-height: 1.55;
    text-align: center;
}

/* ─── FAQ ─── */
.vcl-faq {
    background: #ffffff;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.vcl-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vcl-faq-item {
    border: 1px solid #DCE7F8;
    border-radius: 12px;
    background: #F8FAFF;
    overflow: hidden;
}

.vcl-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    color: #111827;
    font-size: 15.5px;
    font-weight: 650;
    line-height: 1.4;
    list-style: none;
}

.vcl-faq-item summary::-webkit-details-marker {
    display: none;
}

.vcl-faq-item summary::after {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform 0.2s ease;
}

.vcl-faq-item[open] summary::after {
    transform: rotate(180deg);
}

.vcl-faq-answer {
    padding: 0 20px 18px;
}

.vcl-faq-answer p {
    margin: 0;
    color: #4B5563;
    font-size: 14.5px;
    line-height: 1.65;
}

/* ─── CTA final ─── */
.vcl-cta-final__inner {
    text-align: center;
}

.vcl-cta-final h2 {
    margin: 0 0 10px;
    color: #111827;
    font-size: clamp(22px, 3.2vw, 30px);
    font-weight: 750;
    line-height: 1.2;
}

.vcl-cta-final p {
    margin: 0 auto 24px;
    max-width: 560px;
    color: #4B5563;
    font-size: 15.5px;
    line-height: 1.6;
}

/* ─── Rangée d'actions du hero (candidature + contact) ─── */
.vcl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Bouton secondaire discret : le CTA principal reste dominant */
.vcl-btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.40);
    box-shadow: none;
    font-weight: 600;
}

.vcl-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.75);
    color: #ffffff;
    box-shadow: none;
}

/* ─── Note « espace pilote » (info, pas un bouton) ───
   Les deux landings l'ont sortie du hero pour la section qui traite du périmètre
   géographique (« Secteurs couverts » sur la satellite, « Un projet qui grandit » sur
   la candidature) : c'était un bloc de plus à lire avant de comprendre l'offre. Fond
   clair, donc voile indigo léger et texte indigo foncé. Centrage explicite —
   `.vcl-container` n'aligne pas au centre, seul `.vcl-section-head` le fait. */
.vcl-pilot {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 560px;
    margin: clamp(22px, 3vw, 30px) auto 0;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(79, 70, 229, 0.08);
    color: #3730A3;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
}

.vcl-pilot__dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4F46E5;
}

/* ─── Zones / communes couvertes (chips clairs sur fond clair) ─── */
.vcl-zones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vcl-zones li {
    padding: 8px 15px;
    border: 1px solid #DCE7F8;
    border-radius: 999px;
    background: #ffffff;
    color: #374151;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
    .vcl-cards,
    .vcl-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
    .vcl-vision__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vcl-hero {
        padding: 44px 16px 36px;
    }
    .vcl-lead {
        margin-top: 16px;
        font-size: 15px;
    }
    .vcl-pilot {
        font-size: 11.5px;
    }
    .vcl-audience {
        margin-top: 26px;
        padding-top: 14px;
        font-size: 12.5px;
    }
    .vcl-audience__links a {
        font-size: 12.5px;
    }
    .vcl-facts {
        padding: 14px 16px;
    }
    .vcl-chips li {
        font-size: 12px;
        padding: 5px 11px;
    }
    /* Boutons empilés, pleine largeur, lisibles au pouce */
    .vcl-hero__actions {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }
    .vcl-hero__actions .vcl-btn {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .vcl-cards,
    .vcl-timeline {
        grid-template-columns: 1fr;
    }
    .vcl-cta-final .vcl-btn {
        width: 100%;
    }
}