/*
 * POC — Candidature spontanée « conversationnelle » (façon TypeForm).
 * Styles activés quand le JS ajoute la classe .is-conversational (par défaut
 * sur le formulaire spontané). Tout est scopé pour ne pas affecter le
 * formulaire classique en fallback (sans JS).
 */

#wybe-addons-form.is-conversational {
    /* Charte Sigma 2026 : navy #00263E (Pantone 2965 C, fond de section),
       bleu accent #36B7EA (Pantone 2995 C), blanc. Police Circular. */
    --cv-accent: #36b7ea;
    --cv-navy: #00263e;
    --cv-ink: #fff;
    --cv-muted: rgba(255, 255, 255, .72);
    --cv-border: rgba(255, 255, 255, .5);
    --cv-error: #ff7a7a;

    position: relative;
    /* Largeur figée, identique sur toutes les étapes. */
    width: 680px;
    max-width: 100%;
    /* Aligné à gauche, centré verticalement dans sa section. */
    margin: 0 auto 0 0;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* form-offer.css impose `align-items: flex-start` sur le <form> : sans
       override, .cv-shell (barre + étapes) ne s'étire pas et se cale sur le
       contenu de l'étape (largeur variable). `stretch` la remet à 100% (680px). */
    align-items: stretch;
    color: var(--cv-ink);
    /* Police de la charte. La famille "Circular" n'est déclarée qu'en graisses
       400 / 600 / 800 (pas de 700 ni de "Book") : on s'y tient. */
    font-family: "Circular", sans-serif;
}

/* Les rangées d'origine deviennent vides (champs déplacés dans les slides).
   `.wybe-row-3cols` = candidature spontanée ; `.wybe-row` = candidature à une
   offre (mise en page legacy). */
#wybe-addons-form.is-conversational > .wybe-row-3cols,
#wybe-addons-form.is-conversational > .wybe-row {
    display: none !important;
}

/* ---- Barre de progression ---------------------------------------------- */
#wybe-addons-form.is-conversational .cv-progress {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    overflow: hidden;
}

#wybe-addons-form.is-conversational .cv-progress__bar {
    height: 100%;
    width: 0;
    background: #fff;
    border-radius: 999px;
    transition: width .35s ease;
}

/* ---- Étapes (slides) ---------------------------------------------------- */
#wybe-addons-form.is-conversational .cv-step {
    display: none;
    padding: 28px 0 8px;
}

#wybe-addons-form.is-conversational .cv-step.is-active {
    display: block;
    animation: cvStepIn .35s ease both;
}

@keyframes cvStepIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    #wybe-addons-form.is-conversational .cv-step.is-active { animation: none; }
    #wybe-addons-form.is-conversational .cv-progress__bar { transition: none; }
}

#wybe-addons-form.is-conversational .cv-step__title {
    margin: 0 0 6px;
    font-size: 1.7rem;
    line-height: 1.25;
    /* Circular Std Bold (= 800 dans la fonte du site) — « Grand titre » de la charte. */
    font-weight: 800;
}

#wybe-addons-form.is-conversational .cv-step__hint {
    margin: 0 0 22px;
    color: var(--cv-muted);
    font-size: 1rem;
}

#wybe-addons-form.is-conversational .cv-step__body {
    margin-bottom: 8px;
}

/* La question est portée par le titre de la slide : on masque les labels
   internes des champs (sauf les cases à cocher de consentement). */
/* Le titre de l'étape remplace visuellement le label du champ, qui reste lu
   par les lecteurs d'écran : masqué en display:none, il retirait au champ son
   nom accessible (RGAA 11.1). Le bouton d'ajout de fichier du contact
   entreprise est lui-même un label (input[type=file] + label, form-offer.css) :
   il reste affiché. */
#wybe-addons-form.is-conversational .cv-step__body .wybe-addons-input-wrapper > label:not(input + label) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Un wrapper actif est toujours visible, même si la logique legacy lui a
   laissé un attribut [hidden] résiduel. */
#wybe-addons-form.is-conversational .cv-step.is-active .wybe-addons-input-wrapper {
    display: block !important;
}

/* ---- Champs agrandis ---------------------------------------------------- */
#wybe-addons-form.is-conversational .cv-step__body input[type="text"],
#wybe-addons-form.is-conversational .cv-step__body input[type="email"],
#wybe-addons-form.is-conversational .cv-step__body input[type="tel"],
#wybe-addons-form.is-conversational .cv-step__body select.sigma-select,
#wybe-addons-form.is-conversational .cv-step__body textarea {
    width: 100%;
    font-size: 1.25rem;
    padding: 14px 4px;
    border: none;
    border-bottom: 2px solid #fff;
    border-radius: 0;
    background: transparent;
    color: #fff;
    transition: border-bottom-width .12s ease, padding-bottom .12s ease;
}

/* Texte saisi / placeholder en blanc (le menu natif des <select> garde son
   rendu navigateur : fond clair, texte foncé). */
#wybe-addons-form.is-conversational .cv-step__body input::placeholder {
    color: rgba(255, 255, 255, .7);
}

#wybe-addons-form.is-conversational .cv-step__body select.sigma-select option {
    color: var(--cv-navy);
}

/* Underline blanc au repos ; focus net = underline blanc épaissi (2→4px), sans
   flou. Le padding-bottom compense l'épaisseur pour éviter tout décalage
   vertical. Focus visible (RGAA) sans halo diffus ni couleur hors-charte. */
#wybe-addons-form.is-conversational .cv-step__body input:focus,
#wybe-addons-form.is-conversational .cv-step__body select:focus,
#wybe-addons-form.is-conversational .cv-step__body textarea:focus {
    outline: none;
    border-bottom-width: 4px;
    padding-bottom: 12px;
    box-shadow: none;
}

#wybe-addons-form.is-conversational .cv-step__body .sigma-select-wrapper {
    position: relative;
}

/* ---- Choix sous forme de boutons (remplace certains <select>) ---------- */
/* Le <select> natif reste dans le DOM (lu par la logique legacy) mais est
   masqué visuellement au profit des boutons. */
#wybe-addons-form.is-conversational .cv-has-choices .sigma-select-wrapper {
    display: none;
}

#wybe-addons-form.is-conversational .cv-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

#wybe-addons-form.is-conversational .cv-choice {
    flex: 0 1 auto;
    font-size: 1.05rem;
    line-height: 1.3;
    text-align: left;
    padding: 14px 20px;
    border: 1.5px solid rgba(255, 255, 255, .5);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .05s ease;
}

#wybe-addons-form.is-conversational .cv-choice:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
}

#wybe-addons-form.is-conversational .cv-choice:active {
    transform: translateY(1px);
}

#wybe-addons-form.is-conversational .cv-choice.is-selected {
    background: #fff;
    border-color: #fff;
    color: var(--cv-navy);
    font-weight: 600;
}

#wybe-addons-form.is-conversational .cv-choice:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---- Recherche / autocomplétion (remplace un <select> à longue liste) --- */
/* Le champ .cv-combo__input hérite du style des inputs (underline blanc). */
#wybe-addons-form.is-conversational .cv-combo {
    position: relative;
}

#wybe-addons-form.is-conversational .cv-combo__list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: var(--cv-navy);
    border: 1px solid var(--cv-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6);
}

#wybe-addons-form.is-conversational .cv-combo__option {
    padding: 10px 12px;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
}

#wybe-addons-form.is-conversational .cv-combo__option:hover,
#wybe-addons-form.is-conversational .cv-combo__option.is-active {
    background: rgba(255, 255, 255, .14);
}

/* ---- Téléphone (préfixe + numéro) -------------------------------------- */
#wybe-addons-form.is-conversational .cv-step__body .phone-wrapper {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

#wybe-addons-form.is-conversational .cv-step__body .phone-prefix-wrapper {
    flex: 0 0 auto;
    min-width: 110px;
}

#wybe-addons-form.is-conversational .cv-step__body .phone-number-wrapper {
    flex: 1 1 auto;
}

/* ---- Dropzone ----------------------------------------------------------- */
#wybe-addons-form.is-conversational .wybe-dropzone {
    border: 2px dashed var(--cv-border);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

#wybe-addons-form.is-conversational .wybe-dropzone:hover {
    border-color: var(--cv-accent);
    background: rgba(54, 183, 234, .08);
}

/* Liste des documents chargés : dans le flux (sous la dropzone) plutôt qu'en
   absolu, pour ne pas chevaucher la navigation de l'étape conversationnelle. */
#wybe-addons-form.is-conversational .wybe-filelist-wrapper {
    position: static;
    margin-top: 12px;
}

/* ---- Consentements ------------------------------------------------------ */
#wybe-addons-form.is-conversational .wybe-addons-inline-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

#wybe-addons-form.is-conversational .wybe-addons-inline-checkbox input {
    margin-top: 4px;
}

#wybe-addons-form.is-conversational .wybe-addons-inline-checkbox label {
    font-size: .95rem;
    color: var(--cv-muted);
    line-height: 1.4;
}

/* ---- Erreurs ------------------------------------------------------------ */
#wybe-addons-form.is-conversational .cv-step__error {
    min-height: 22px;
    margin: 6px 0 0;
    color: var(--cv-error);
    font-size: .9rem;
}

/* Champ en erreur : le style du parcours est conservé (fond transparent, texte
   blanc), seul le soulignement passe en rouge. Les !important neutralisent
   ceux de form-offer.css (fond blanc + cadre rouge du formulaire long), qui
   rendaient la saisie blanche invisible sur fond blanc. */
#wybe-addons-form.is-conversational .wybe-addons-input-wrapper.has-error input,
#wybe-addons-form.is-conversational .wybe-addons-input-wrapper.has-error select,
#wybe-addons-form.is-conversational .wybe-addons-input-wrapper.has-error textarea {
    background: transparent !important;
    border-width: 0 0 2px !important;
    border-style: solid !important;
    border-color: transparent transparent var(--cv-error) !important;
}

/* Dropzone en erreur : pointillé du parcours, dans la couleur d'erreur. */
#wybe-addons-form.is-conversational .wybe-addons-input-wrapper.has-error .wybe-dropzone {
    border: 2px dashed var(--cv-error) !important;
}

/* Focus sur un champ en erreur : même soulignement épaissi qu'au repos. */
#wybe-addons-form.is-conversational .wybe-addons-input-wrapper.has-error input:focus,
#wybe-addons-form.is-conversational .wybe-addons-input-wrapper.has-error select:focus,
#wybe-addons-form.is-conversational .wybe-addons-input-wrapper.has-error textarea:focus {
    border-bottom-width: 4px !important;
}

/* ---- Navigation --------------------------------------------------------- */
#wybe-addons-form.is-conversational .cv-step__nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    flex-wrap: wrap;
}

/* CTA de navigation (« Continuer » / « Précédent ») : même style que le bouton
   d'envoi du formulaire, piloté par Elementor via `{{WRAPPER}} button` (fond,
   bordure, couleur, padding, typographie, survol). On ne fixe donc AUCUNE de ces
   propriétés ici — uniquement la mise en page de l'icône — pour hériter à
   l'identique du CTA « Envoyer une candidature » et rester synchronisé si le
   style est modifié dans Elementor. */
#wybe-addons-form.is-conversational .cv-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Le footer existant (bouton submit + statut) rapatrié dans la dernière étape ;
   le bouton conserve son style Elementor natif. */
/* Dernière étape : le footer (CTA d'envoi + message de statut) est rapatrié
   dans la barre de navigation. Il y perd la mise en page du formulaire long
   (form-offer.css) : pleine largeur, qui le renvoyait sous « Précédent », et
   CTA calé à droite d'une colonne élargie par le message de statut. Les deux
   CTA se partagent donc la ligne, calés en haut, le message sous le bouton. */
#wybe-addons-form.is-conversational .cv-step:last-child .cv-step__nav {
    align-items: flex-start;
}

#wybe-addons-form.is-conversational .wybe-form-footer {
    margin: 0;
    width: auto;
    flex: 1 1 auto;
}

#wybe-addons-form.is-conversational .wybe-submit-button {
    width: auto;
    align-items: flex-start;
}

@media (max-width: 720px) {
    /* Sur petit écran, la colonne Elementor est en pleine largeur : on repasse
       en 100% pour éviter tout débordement de la largeur définie (680px). */
    #wybe-addons-form.is-conversational { width: 100%; }
}

@media (max-width: 600px) {
    #wybe-addons-form.is-conversational .cv-step__title { font-size: 1.4rem; }
}