/* ============================================================
   ANIMA — Module Recrutement (spec 2026-09-19 : fiche de poste, candidatures, diffusion)
   ------------------------------------------------------------
   Direction : liste des fiches, éditeur, Candidatures (pipeline), Diffusion.
   Public    : offre (#/offre/<slug>), confirmation (#/candidature/<token>).
   Animateur : « Mes candidatures » + landing sans séjour.
   Tokens + primitives de styles.css (.glass / .sf-btn / .auth-submit / .accueil-dir-*).
   Zéro emoji (glyphes monochromes ✕ ＋ ✎ ▸ ⚠), thème clair par tokens, mobile 390 px
   d'office puis 820 / 1440, cibles tactiles >= 44 px.
   ============================================================ */

.rec-shell{max-width:960px; margin:0 auto; padding:var(--sp-4) 0 96px; display:flex; flex-direction:column; gap:var(--sp-4)}
/* Harmonisation UX/UI (2026-09-30) : .wrap (css/styles.css) a ses propres marges auto, pensées pour un contexte
   NON flexbox (elle centre alors un contenu déjà à width:auto) ; en enfant DIRECT d'un .rec-shell (flex-column),
   les marges auto absorbent le stretch et réduisent .wrap à la largeur de son contenu (défaut mesuré : liste
   courte = bloc étroit excentré). Le forcer à occuper toute la largeur disponible. */
.rec-shell > .wrap{width:100%; max-width:none; margin:0}
.rec-loading{color:var(--text-3); font-size:.82rem}
.rec-error{color:var(--crit); background:var(--crit-bg); border:1px solid var(--crit-line); border-radius:var(--r-xs); padding:9px 12px; font-size:.84rem; margin:0}
.rec-note{color:var(--text-3); font-size:.8rem; line-height:1.5; margin:0}
.rec-mono-sm{font-size:.72rem; color:var(--text-3)}
.rec-link{background:none; border:0; padding:0; color:var(--accent); font:inherit; font-size:.86rem; cursor:pointer; text-align:left; min-height:44px; display:inline-flex; align-items:center}
.rec-link:hover{text-decoration:underline}
.rec-stack{display:flex; flex-direction:column; gap:var(--sp-4)}
.rec-stack-3{gap:var(--sp-3)}
.rec-stack-0{gap:4px}
.rec-back{align-self:flex-start; background:none; border:0; padding:0 var(--sp-2) 0 0; min-height:44px; color:var(--text-2); font:inherit; font-size:.86rem; cursor:pointer}
.rec-back:hover{color:var(--accent)}

/* ---------- Badges ---------- */
.rec-badge{display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.03em; padding:2px 9px; border-radius:20px; border:1px solid var(--line-2); color:var(--text-2); white-space:nowrap}
.rec-badge-ok{color:var(--ok); border-color:var(--ok-line); background:var(--ok-bg)}
.rec-badge-warn{color:var(--warn); border-color:var(--warn-line); background:var(--warn-bg)}
.rec-badge-crit{color:var(--crit); border-color:var(--crit-line); background:var(--crit-bg)}
.rec-badge-accent{color:var(--accent); border-color:var(--accent-glow); background:var(--accent-bg)}
.rec-badge-muted{color:var(--text-3)}

/* ---------- En-tête d'action (titre + bouton) ---------- */
.rec-headrow{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap}
.rec-headrow .subview-head{margin-bottom:0}
.rec-cta{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 var(--sp-4); border:0; border-radius:var(--r-sm); background:var(--accent); color:var(--bg-0); font:inherit; font-weight:600; font-size:.9rem; cursor:pointer}
.rec-cta:hover{filter:brightness(1.1)}
.rec-cta:disabled{opacity:.55; cursor:default; filter:none}

/* ---------- Champs ---------- */
.rec-input{width:100%; box-sizing:border-box; min-height:44px; padding:10px 13px; background:var(--surface-3); border:1px solid var(--line-2); border-radius:var(--r-sm); color:var(--text); font-family:var(--font-sans); font-size:1rem; transition:border-color .15s, box-shadow .15s}
.rec-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow)}
.rec-input::placeholder{color:var(--text-3); opacity:.7}
.rec-input.is-invalid{border-color:var(--crit)}
.rec-input:disabled{opacity:.6}
.rec-textarea{min-height:96px; resize:vertical; line-height:1.5}
.rec-select{appearance:auto}
.rec-field{display:flex; flex-direction:column; gap:6px; min-width:0}
.rec-field-lbl{font-size:.8rem; color:var(--text-2); font-weight:500; padding:0}
.rec-field-opt{color:var(--text-3); font-weight:400}
.rec-field-hint{font-size:.76rem; color:var(--text-3); line-height:1.4}
.rec-field-err{font-size:.8rem; color:var(--crit); line-height:1.4}
.rec-group{border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:6px}
.rec-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3) var(--sp-3)}
.rec-field-full{grid-column:1 / -1}
.rec-checks{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 var(--sp-3)}
.rec-check{display:flex; align-items:flex-start; gap:12px; min-height:44px; padding:10px 2px; cursor:pointer}
.rec-check input{width:22px; height:22px; flex:none; margin:0; accent-color:var(--accent); cursor:pointer}
.rec-check-body{display:flex; flex-direction:column; gap:2px; min-width:0}
.rec-check-lbl{font-size:.92rem; color:var(--text); line-height:1.35}
.rec-actions{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center}
.rec-actions .rec-spacer{flex:1}
.rec-btn-danger{border-color:var(--crit-line); color:var(--crit); margin-left:0}
.rec-btn-danger:hover{background:var(--crit-bg)}

/* ---------- Cartes / titres ---------- */
.rec-card{padding:var(--sp-4); border-radius:var(--r-lg); display:flex; flex-direction:column; gap:var(--sp-3)}
.rec-card-h{font-size:.95rem; font-weight:600; color:var(--text); margin:0}
.rec-card-sub{font-size:.84rem; color:var(--text-2); line-height:1.5; margin:0}

/* ---------- Onglets secondaires ---------- */
.rec-tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.rec-tabs::-webkit-scrollbar{display:none}
.rec-tab{position:relative; flex:none; display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:10px var(--sp-3); min-height:44px; color:var(--text-2); font:inherit; font-size:.88rem; font-weight:500; cursor:pointer}
.rec-tab:hover{color:var(--text)}
.rec-tab.active{color:var(--text)}
.rec-tab.active::after{content:''; position:absolute; left:var(--sp-2); right:var(--sp-2); bottom:-1px; height:2px; background:var(--accent); border-radius:2px}
.rec-tab-badge{min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--accent); color:var(--bg-0); font-size:.68rem; font-weight:600; display:inline-grid; place-items:center}

/* ---------- Liste des fiches ---------- */
.rec-filtres{display:flex; gap:8px; flex-wrap:wrap}
.rec-chip{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 var(--sp-4); border-radius:22px; border:1px solid var(--line-2); background:transparent; color:var(--text-2); font:inherit; font-size:.86rem; cursor:pointer}
.rec-chip:hover{color:var(--text); border-color:var(--text-3)}
.rec-chip.active{color:var(--accent); border-color:var(--accent-glow); background:var(--accent-bg)}
.rec-chip-n{font-family:var(--font-mono); font-size:.72rem; color:var(--text-3)}
.rec-chip.active .rec-chip-n{color:var(--accent)}
.rec-list{display:flex; flex-direction:column; gap:var(--sp-2)}
.rec-fiche{display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:72px; padding:var(--sp-3) var(--sp-4); text-align:left; color:var(--text); font:inherit; border-radius:var(--r-lg); cursor:pointer}
.rec-fiche:hover,.rec-fiche:focus-visible{border-color:var(--accent-glow); outline:none}
.rec-fiche-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.rec-fiche-titre{font-size:1rem; font-weight:600; overflow-wrap:anywhere}
.rec-fiche-meta{font-size:.78rem; color:var(--text-3); line-height:1.4; overflow-wrap:anywhere}
.rec-fiche-side{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none}
.rec-fiche-go{color:var(--accent); flex:none}
.rec-empty{display:flex; flex-direction:column; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-5) 0}
.rec-empty-title{font-size:1.05rem; font-weight:600; color:var(--text); margin:0}
.rec-empty-txt{color:var(--text-3); font-size:.9rem; line-height:1.5; max-width:56ch; margin:0}

/* ---------- Éditeur de fiche ---------- */
.rec-fiche-head{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.rec-fiche-head-titre{font-size:1.15rem; font-weight:700; margin:0; overflow-wrap:anywhere}
.rec-warn{display:flex; flex-direction:column; gap:6px; padding:var(--sp-3) var(--sp-4); border:1px solid var(--warn-line); background:var(--warn-bg); border-radius:var(--r-md); color:var(--text)}
.rec-warn-h{font-size:.82rem; font-weight:600; color:var(--warn)}
.rec-warn ul{margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:3px; font-size:.84rem; color:var(--text-2)}
.rec-lien-pub{display:flex; gap:var(--sp-2); align-items:stretch; flex-wrap:wrap}
.rec-lien-pub .rec-input{flex:1; min-width:200px; font-family:var(--font-mono); font-size:.84rem}
.rec-copy.is-done{color:var(--ok); border-color:var(--ok-line)}
.rec-rattache{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap}
.rec-statut-actions{display:flex; gap:var(--sp-2); flex-wrap:wrap}

/* Barre d'enregistrement : actions EN BAS du formulaire, collée en bas d'écran (mobile). */
.rec-savebar{position:sticky; bottom:var(--nav-bas-h, 0px); z-index:5; display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; padding:var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background:var(--bg-0); border-top:1px solid var(--line)}
.rec-savebar-txt{flex:1; min-width:120px; color:var(--warn); font-size:.74rem}

/* ---------- Sheet (bas d'écran sur mobile, centrée sur desktop) ---------- */
.rec-sheet-ov{position:fixed; inset:0; background:var(--voile-modal); z-index:9985; display:flex; align-items:flex-end; justify-content:center}
.rec-sheet{width:100%; max-height:92vh; display:flex; flex-direction:column; border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden}
.rec-sheet-head{display:flex; align-items:center; justify-content:space-between; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line)}
.rec-sheet-title{margin:0; font-size:.98rem; font-weight:600; color:var(--text)}
.rec-sheet-close{background:none; border:0; color:var(--text-2); font-size:1.1rem; width:44px; height:44px; cursor:pointer; border-radius:var(--r-xs)}
.rec-sheet-close:hover{color:var(--text); background:var(--surface-3)}
.rec-sheet-body{padding:var(--sp-4); overflow-y:auto; display:flex; flex-direction:column; gap:var(--sp-3); -webkit-overflow-scrolling:touch}
.rec-sheet > .sf-error{margin:0 var(--sp-4)}
.rec-sheet-actions{display:flex; gap:var(--sp-2); justify-content:flex-end; padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line); background:var(--surface)}
.rec-sheet-actions .sf-btn{flex:1}

/* ---------- Diffusion ---------- */
.rec-canaux{display:flex; gap:8px; flex-wrap:wrap}
.rec-diff-texte{min-height:220px; font-family:var(--font-sans); font-size:.9rem; line-height:1.55}
.rec-table{width:100%; border-collapse:collapse; font-size:.86rem}
.rec-table th{text-align:left; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); font-weight:500; padding:8px 0; border-bottom:1px solid var(--line)}
.rec-table td{padding:10px 0; border-bottom:1px solid var(--line); color:var(--text)}
.rec-table td:last-child,.rec-table th:last-child{text-align:right}
.rec-table tr:last-child td{border-bottom:0}
.rec-bar{display:block; height:6px; border-radius:3px; background:var(--accent-bg); margin-top:6px; overflow:hidden}
.rec-bar > i{display:block; height:100%; background:var(--accent); border-radius:3px}

/* ---------- Pipeline (candidatures) ---------- */
.rec-cand-list{display:flex; flex-direction:column; gap:var(--sp-2)}
.rec-cand{display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden}
.rec-cand.is-nouvelle{border-color:var(--accent-glow)}
.rec-cand-head{display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:64px; padding:var(--sp-3) var(--sp-4); background:none; border:0; text-align:left; color:var(--text); font:inherit; cursor:pointer}
.rec-cand-head:hover{background:var(--surface-2)}
.rec-cand-id{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.rec-cand-nom{font-size:.98rem; font-weight:600; overflow-wrap:anywhere; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rec-cand-sub{font-size:.76rem; color:var(--text-3); overflow-wrap:anywhere}
.rec-cand-chev{color:var(--text-3); transition:transform var(--dur-fast) var(--ease-out); flex:none}
.rec-cand.open .rec-cand-chev{transform:rotate(90deg)}
.rec-cand-body{display:none; flex-direction:column; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4) var(--sp-4); border-top:1px solid var(--line)}
.rec-cand.open .rec-cand-body{display:flex}
.rec-statuts{display:flex; gap:8px; flex-wrap:wrap}
.rec-statut{display:inline-flex; align-items:center; min-height:44px; padding:0 var(--sp-3); border-radius:22px; border:1px solid var(--line-2); background:transparent; color:var(--text-2); font:inherit; font-size:.84rem; cursor:pointer}
.rec-statut:hover{color:var(--text); border-color:var(--text-3)}
.rec-statut.active{color:var(--accent); border-color:var(--accent-glow); background:var(--accent-bg); font-weight:600}
.rec-statut:disabled{opacity:.6; cursor:default}
.rec-cand-infos{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-2) var(--sp-4)}
.rec-cand-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.rec-cand-info-lbl{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3)}
.rec-cand-info-val{font-size:.88rem; color:var(--text); overflow-wrap:anywhere}
.rec-cand-info-val a{color:var(--accent)}
.rec-cand-msg{margin:0; padding:var(--sp-3); background:var(--surface-2); border-radius:var(--r-sm); font-size:.88rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere}
.rec-histo{margin:0; padding-left:1.1em; font-size:.76rem; color:var(--text-3); display:flex; flex-direction:column; gap:2px}
.rec-invite{display:flex; flex-direction:column; gap:var(--sp-2)}

/* ---------- Page publique (offre, confirmation) ---------- */
body.rec-public-mode .wrap[data-app]{padding-top:0}
/* Gouttière latérale : celle de .wrap (24 px) — pas de double marge sur mobile. */
.rec-pub{max-width:720px; margin:0 auto; padding:var(--sp-5) 0 72px; display:flex; flex-direction:column; gap:var(--sp-4)}
.rec-pub .auth-brand{margin-bottom:var(--sp-1)}
.rec-pub-title{font-size:1.5rem; line-height:1.25; font-weight:700; letter-spacing:-.01em; margin:0; color:var(--text); overflow-wrap:anywhere}
.rec-pub-resp{font-size:.86rem; color:var(--text-2); margin:0}
.rec-facts{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:var(--sp-3) var(--sp-4)}
.rec-fact{display:flex; flex-direction:column; gap:2px; min-width:0}
.rec-fact-lbl{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3)}
.rec-fact-val{font-size:.94rem; color:var(--text); overflow-wrap:anywhere}
.rec-prose{margin:0; color:var(--text); font-size:.95rem; line-height:1.65; white-space:pre-line; overflow-wrap:anywhere}
.rec-h{font-size:.8rem; font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); margin:var(--sp-2) 0 0; font-weight:500}
.rec-banner{padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); border:1px solid var(--line-2); background:var(--surface-2); color:var(--text); font-size:.92rem; line-height:1.5}
.rec-banner-warn{border-color:var(--warn-line); background:var(--warn-bg)}
.rec-banner-ok{border-color:var(--ok-line); background:var(--ok-bg)}
.rec-banner strong{display:block; margin-bottom:2px}
.rec-form{display:flex; flex-direction:column; gap:var(--sp-4)}
.rec-form-h{font-size:1.1rem; font-weight:600; margin:0; color:var(--text)}
.rec-notice{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md)}
.rec-notice-h{margin:0; font-size:.86rem; font-weight:600; color:var(--text)}
.rec-notice-txt{margin:0; font-size:.84rem; color:var(--text-2); line-height:1.55}
.rec-notice details summary{min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--accent); font-size:.86rem; list-style:none}
.rec-notice details summary::-webkit-details-marker{display:none}
.rec-notice details summary::before{content:'▸'; margin-right:8px; transition:transform var(--dur-fast) var(--ease-out); display:inline-block}
.rec-notice details[open] summary::before{transform:rotate(90deg)}
.rec-notice-sec{display:flex; flex-direction:column; gap:2px; margin-bottom:var(--sp-2)}
.rec-notice-sec-h{margin:0; font-size:.82rem; font-weight:600; color:var(--text)}
.rec-notice-sec p{margin:0; font-size:.82rem; color:var(--text-2); line-height:1.55}
.rec-hp{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.rec-submit{width:100%; min-height:48px}
.rec-ou{display:flex; align-items:center; gap:var(--sp-3); color:var(--text-3); font-size:.78rem}
.rec-ou::before,.rec-ou::after{content:''; flex:1; height:1px; background:var(--line)}
.rec-confirm-ico{width:40px; height:40px; color:var(--ok)}
.rec-confirm-ico svg{width:100%; height:100%}
.rec-confirm-ico .ico{width:100%; height:100%; stroke-width:2}
.rec-benefices{margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:4px; font-size:.9rem; color:var(--text-2); line-height:1.5}
.rec-mes-cand{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-lg); flex-wrap:wrap}
.rec-mes-cand-main{flex:1; min-width:200px; display:flex; flex-direction:column; gap:3px}
.rec-mes-cand-titre{font-size:1rem; font-weight:600; color:var(--text); overflow-wrap:anywhere}

/* Ancre stylée en bouton (lien WhatsApp) + repli « postuler sans utiliser mon profil » */
.rec-pub a.sf-btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none; color:var(--text)}
.rec-alt{display:block}
.rec-alt > summary{min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--accent); font-size:.9rem; list-style:none}
.rec-alt > summary::-webkit-details-marker{display:none}
.rec-alt > summary::before{content:'▸'; margin-right:8px; display:inline-block; transition:transform var(--dur-fast) var(--ease-out)}
.rec-alt[open] > summary::before{transform:rotate(90deg)}
.rec-alt[open] > summary{margin-bottom:var(--sp-3)}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .rec-grid{grid-template-columns:1fr}
  .rec-cand-infos{grid-template-columns:1fr}
  .rec-fiche{align-items:flex-start}
  .rec-fiche-go{display:none}
  .rec-actions .sf-btn,.rec-actions .rec-cta{flex:1 1 auto}
  .rec-statut{flex:1 1 calc(50% - 8px); justify-content:center}
  .rec-pub-title{font-size:1.3rem}
}
@media (min-width:641px){
  .rec-sheet-ov{align-items:center; padding:16px}
  .rec-sheet{max-width:640px; border-radius:var(--r-lg)}
  .rec-sheet-actions .sf-btn{flex:none}
}
@media (min-width:1100px){
  .rec-checks{grid-template-columns:repeat(4, minmax(0,1fr))}
}