/*
 * Biux — la candidature en popup plein écran (static/recrutement/index.html, assets/js/recrutement-flow.js) :
 * ses réglages par-dessus la feuille de l'ancien devis (devis-flow.css), chargée juste avant celle-ci.
 *
 * Ses champs et ses boutons à 40 px de haut, avec l'arrondi de 10 px des choix d'expérience et de collaboration
 * (Kevin, 29 octobre 2026 : « je veux que toutes les pages soient en 40px de hauteur avec le même arrondi que ces
 * cases-là »). Deux exceptions, revenues à l'ancien devis à sa demande le même jour : les cartes des postes
 * (« sur cette slide par contre remet comme avant ») et la case du CV (« ici remet la case CV comme avant »).
 * Chaque règle porte .biux-recrutement-overlay en plus de .biux-devis-overlay : elle passe ainsi devant celles de
 * l'ancien devis, y compris dans ses media queries de hauteur d'écran, et ne touche pas l'ancien devis.
 * Les !important répondent aux siens.
 */

/* « Étape x sur 4 » en haut, à la hauteur du logo et centré sur la page (Kevin, 29 octobre 2026 : « affiche tout
   en haut aligné avec le logo biux mais centré à la page "Étape x sur Y" »). Il se centre dans la barre haute,
   fixe, sans pousser le logo ni la croix ; ses chiffres gardent la même largeur d'une étape à l'autre. */
.biux-devis-overlay.biux-recrutement-overlay .flow-step-count {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
  color: var(--ink-55); font: 500 13px/1 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.biux-devis-overlay.biux-recrutement-overlay .flow-step-count[hidden] { display: none; }

/* Les champs d'une ligne : coordonnées et portfolio. Le champ caché de la case du CV garde les réglages de l'ancien devis. */
.biux-devis-overlay.biux-recrutement-overlay .flow-field input:not([type="file"]) { height: 40px; padding: 0 14px; border-radius: 10px; }

/* Le téléphone : le pays en liste déroulante, comme sur iClosed (assets/js/flow-phone.js ; Kevin, 29 octobre 2026 :
   « pour le téléphone je veux le pays comme ça en dropdown »). Le drapeau se pose à gauche dans le champ, séparé du
   numéro par un filet ; la liste s'ouvre dessous, avec sa recherche. */
.biux-devis-overlay.biux-recrutement-overlay .flow-phone { position: relative; }
.biux-devis-overlay.biux-recrutement-overlay .flow-field .flow-phone input[type="tel"] { padding-left: 60px; }
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__country {
  position: absolute; top: 1px; bottom: 1px; left: 1px; z-index: 1; width: 48px;
  display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0;
  border: 0; border-right: 1px solid var(--line); border-radius: 9px 0 0 9px;
  color: var(--ink); background: transparent; cursor: pointer;
}
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__country:hover { background: rgba(0, 3, 15, .03); }
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__country:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 16px; line-height: 1;
}
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__caret {
  width: 0; height: 0; border-top: 5px solid currentColor; border-right: 4px solid transparent; border-left: 4px solid transparent;
  opacity: .5; transition: transform .18s ease;
}
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__country[aria-expanded="true"] .flow-phone__caret { transform: rotate(180deg); }
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: min(300px, 100%); padding: 8px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 3, 15, .12);
}
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__menu[hidden] { display: none; }
.biux-devis-overlay.biux-recrutement-overlay .flow-field input.flow-phone__search {
  height: 34px; margin: 0 0 6px; padding: 0 10px; border-radius: 8px; -webkit-appearance: none; appearance: none;
}
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__list { position: relative; max-height: 220px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__option {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border-radius: 6px;
  color: var(--ink); font: 400 14px/1 var(--font-body); cursor: pointer;
}
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__option.is-active { background: rgba(0, 3, 15, .05); }
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__option[aria-selected="true"] { font-weight: 600; }
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__code { flex: none; color: var(--ink-55); }
.biux-devis-overlay.biux-recrutement-overlay .flow-phone__empty { padding: 8px; color: var(--ink-55); font: 400 13px/1.4 var(--font-body); }

/* Les postes : seulement ceux du pôle choisi, plus « Autre » (recrutement-flow.js cache les autres). */
.biux-devis-overlay.biux-recrutement-overlay .flow-card[hidden] { display: none; }

/* Quatre cartes par ligne quand une liste en a trop (Kevin, 29 octobre 2026 : « mets en 4 par ligne s'il y en a
   trop ») : recrutement-flow.js pose .flow-wrap--wide au-delà de six cartes visibles. La question et Retour suivent
   la grille élargie, alignés à gauche. Sur un écran trop étroit pour quatre cartes, la grille de l'ancien devis reste,
   en mosaïque sur téléphone (devis-flow.css). */
@media (min-width: 880px) {
  .biux-devis-overlay.biux-recrutement-overlay .flow-wrap--project.flow-wrap--wide { max-width: 774px; }
  .biux-devis-overlay.biux-recrutement-overlay .flow-wrap--wide .flow-list.flow-project-list { grid-template-columns: repeat(4, 186px); }
  .biux-devis-overlay.biux-recrutement-overlay .flow-wrap--wide .flow-project-actions { width: 774px; }
}

/* Les prétentions salariales : le montant en euros, puis son unité, fixe ou à choisir en freelance. */
.biux-devis-overlay.biux-recrutement-overlay .flow-salary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.biux-devis-overlay.biux-recrutement-overlay .flow-salary__amount { position: relative; flex: 0 1 200px; min-width: 140px; }
.biux-devis-overlay.biux-recrutement-overlay .flow-field .flow-salary input[data-salary-amount] { padding-right: 34px; }
.biux-devis-overlay.biux-recrutement-overlay .flow-salary__currency {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  color: var(--ink-55); font: 400 15px/1 var(--font-body); pointer-events: none;
}
.biux-devis-overlay.biux-recrutement-overlay .flow-salary__unit { color: var(--ink-55); font: 400 14px/1 var(--font-body); }
.biux-devis-overlay.biux-recrutement-overlay .flow-salary__unit[hidden] { display: none; }

/* Une liste déroulante au design du site, jamais le menu de l'appareil (assets/js/flow-select.js ; Kevin, 29 octobre
   2026 : « le dropdown dans le design du site pas un design device ») : le bouton a l'allure des champs, la liste
   reprend le panneau des pays du téléphone. En freelance, elle porte l'unité des prétentions. */
.biux-devis-overlay.biux-recrutement-overlay .flow-select { position: relative; flex: 0 1 170px; }
.biux-devis-overlay.biux-recrutement-overlay .flow-select[hidden] { display: none; }
.biux-devis-overlay.biux-recrutement-overlay .flow-select__button {
  position: relative; display: flex; align-items: center; width: 100%; height: 40px; padding: 0 36px 0 14px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--ink);
  font: 300 15px/1.4 var(--font-body); text-align: left; cursor: pointer; transition: border-color .18s ease;
}
.biux-devis-overlay.biux-recrutement-overlay .flow-select__button:focus-visible,
.biux-devis-overlay.biux-recrutement-overlay .flow-select__button[aria-expanded="true"] { outline: none; border-color: var(--ink); }
.biux-devis-overlay.biux-recrutement-overlay .flow-select__caret {
  position: absolute; top: 50%; right: 14px; width: 0; height: 0; margin-top: -2px;
  border-top: 5px solid currentColor; border-right: 4px solid transparent; border-left: 4px solid transparent;
  opacity: .5; transition: transform .18s ease;
}
.biux-devis-overlay.biux-recrutement-overlay .flow-select__button[aria-expanded="true"] .flow-select__caret { transform: rotate(180deg); }
.biux-devis-overlay.biux-recrutement-overlay .flow-select__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 100%; min-width: 160px; margin: 0; padding: 6px;
  list-style: none; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 3, 15, .12);
}
.biux-devis-overlay.biux-recrutement-overlay .flow-select__menu[hidden] { display: none; }
.biux-devis-overlay.biux-recrutement-overlay .flow-select__menu:focus { outline: none; }
.biux-devis-overlay.biux-recrutement-overlay .flow-select__option {
  display: flex; align-items: center; height: 34px; padding: 0 10px; border-radius: 6px;
  color: var(--ink); font: 400 14px/1 var(--font-body); cursor: pointer;
}
.biux-devis-overlay.biux-recrutement-overlay .flow-select__option.is-active { background: rgba(0, 3, 15, .05); }
.biux-devis-overlay.biux-recrutement-overlay .flow-select__option[aria-selected="true"] { font-weight: 600; }

/* Le CV et la lettre de motivation côte à côte, le CV à gauche, chacun sur la moitié de la ligne (Kevin, 29 octobre
   2026) ; l'un sous l'autre sur téléphone (.flow-row de l'ancien devis). Les deux moitiés restent égales quel que soit
   le fichier déposé : un nom trop long se coupe par des points de suspension, les cases ne bougent pas. */
.biux-devis-overlay.biux-recrutement-overlay .flow-files-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.biux-devis-overlay.biux-recrutement-overlay .flow-files-row > .flow-field { min-width: 0; }
@media (max-width: 560px) {
  .biux-devis-overlay.biux-recrutement-overlay .flow-files-row { grid-template-columns: minmax(0, 1fr); }
}

/* Le message part sur une grande case, pour qu'on comprenne qu'il attend un vrai texte (Kevin, 29 octobre 2026 :
   « que le message soit plus gros »), et grandit avec ce qu'on écrit (recrutement-flow.js, 280 px au plus). */
.biux-devis-overlay.biux-recrutement-overlay .flow-project-form textarea {
  height: 120px !important; min-height: 120px !important; padding: 12px 14px; line-height: 20px; resize: none; overflow-y: hidden;
}

/* Les boutons : Retour, Continuer, l'envoi et le retour au site.
   Le Retour des postes, rangé dans .flow-project-actions, garde celui de l'ancien devis. */
.biux-devis-overlay.biux-recrutement-overlay .flow-actions .flow-project-back { height: 40px; }
.biux-devis-overlay.biux-recrutement-overlay .flow-btn {
  height: 40px !important; padding-inline: 14px !important; border-radius: 10px !important; letter-spacing: 0; text-transform: none;
}

/* Le merci : son bouton centré sous le titre et le texte (Kevin, 29 octobre 2026 : « ici centre le bouton »).
   L'ancien devis l'aligne à gauche. */
.biux-devis-overlay.biux-recrutement-overlay [data-final] .flow-actions { justify-content: center; }