/* ══════════════════════════════════════════════════════════════════════════
   « Proposer une étape » — composeur et carte d'étape (B3, tâche 040).

   Origine : le bloc `<style>` de `app/views/mockups/shared/_proposer_etape.html.erb`
   (messagerie V3 livrée par le client le 12/09), l. 27-266. La maquette fait
   foi : les tailles, les rayons, les espacements et la structure sont repris
   tels quels.

   ── POURQUOI UNE FEUILLE À PART, ET CE QU'ELLE NE REPREND PAS ─────────────

   `messagerie_v3.css` appartient à la tâche 035 et porte DÉJÀ une partie des
   règles `.pe-card-*` : celles qui étaient dans le `<style>` des deux pages de
   messagerie. Les réécrire ici ferait deux sources pour la même carte, et le
   jour où elles divergent la carte ne se dessine pas pareil selon la page.

   Ne sont donc PAS reprises ici, elles restent chez la 035 :
   `.pe-card-who` (et ses variantes), la marge de `.pe-card-when`,
   `.pe-card-cmain`, `.pe-card-cnote`, et tout le bloc `.pe-card.is-compact`.

   Ce que cette feuille ajoute : le COMPOSEUR entier (fenêtre, sections,
   champs, calendrier, créneaux, puces, pied) et les règles de carte que la
   035 n'avait pas à porter (bandeau, détails, pièces, actions).

   ── LES VARIABLES `--pe-*` ─────────────────────────────────────────────────

   `messagerie_v3.css` lit déjà `var(--pe-ink)` et `var(--pe-ink-500)` sans que
   personne ne les définisse : dans la maquette elles vivaient dans le `.pe-root`
   du composant, qui n'est pas porté. Elles sont donc posées ici, sur
   `.pe-root` ET sur `.pe-card` (la carte vit dans le fil, hors de `.pe-root`).

   ── LES DORÉS SONT PASSÉS AUX JETONS ───────────────────────────────────────

   Même geste que `messagerie_v3.css` (décision du 21/09) : une feuille neuve
   n'écrit pas un doré en dur. Correspondance, valeurs sources sans leur dièse
   (le garde-fou relit les commentaires) :

   | Source  | Jeton            | Écart |
   |---------|------------------|-------|
   | C4A559  | --gold-primary   | exact |
   | 6E582C  | --gold-700       | exact |
   | 4A3C1E  | --gold-800       | exact |
   | D0B87E  | --gold-300       | exact |
   | E4D3A6  | --gold-200       | exact |
   | C9A94E  | --gold-primary   | 11    |
   | 5B4720  | --gold-800       | 17    |
   | 8A5A12  | --gold-deep      | 17    |
   | 8C5A12  | --gold-deep      | 17    |
   | E7D9B4  | --gold-200       | 16    |
   | E9D6A8  | --gold-200       | 8     |
   | EBD4A3  | --gold-200       | 5     |
   | EEDFB4  | --gold-100       | 30    |
   | EFE2BC  | --gold-100       | 25    |
   | EFE2B8  | --gold-100       | 26    |
   | F0DEBE  | --gold-100       | 20    |
   | EBDAAC  | --gold-200       | 8     |
   | D4BC7A E5D4A0 EFE2B8 (dégradé du CTA) | absorbés dans --gold-fill | exact |
   | B23A2E  | --red            | 12    |
   | 1B7A4E  | --green          | exact |

   Les écarts sont des bordures, des liserés et des textes, jamais un aplat de
   fond — même constat qu'à la tâche 035. Consigné dans `decisions.md`.
   ══════════════════════════════════════════════════════════════════════════ */

.pe-root,
.pe-card {
  --pe-ink: var(--ink);
  --pe-ink-700: #3D3833;
  --pe-ink-500: #6B6660;
  --pe-ink-400: #9A938B;
  --pe-line: #E5E1DB;
  --pe-cream: #FBF5E4;
  --pe-cream-line: var(--gold-100);
  --pe-gold: var(--gold-primary);
  --pe-gold-700: var(--gold-700);
  --pe-gold-800: var(--gold-800);
  --pe-grad: linear-gradient(100deg, #FBF5E6 0%, #F4E7C4 58%, var(--gold-200) 100%);
  --pe-btn: var(--gold-fill);
  --pe-green: var(--green);
  --pe-red: var(--red);
  --pe-blue: #2A5C8F;
  font-family: 'Geist', system-ui, sans-serif;
  color: var(--pe-ink);
}

/* ── La fenêtre ──────────────────────────────────────────────────────────── */
.pe-scrim{ position:fixed; inset:0; z-index:900; background:rgba(26,22,20,.42); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding:28px 16px; overflow-y:auto; }
.pe-scrim[hidden]{ display:none; }
.pe-modal{ width:100%; max-width:520px; background:#fff; border-radius:22px; box-shadow:0 30px 80px rgba(26,22,20,.35); overflow:hidden; margin:auto 0; animation:pe-in .18s ease-out; }
@keyframes pe-in{ from{ transform:translateY(10px); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){ .pe-modal{ animation:none; } }
.pe-head{ position:relative; display:flex; align-items:center; gap:13px; padding:16px 56px 16px 20px; background:var(--pe-grad); border-bottom:1px solid var(--gold-100); }
.pe-head::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:38%; background:linear-gradient(100deg,transparent,var(--gold-200)); clip-path:polygon(28% 0,100% 0,100% 100%,0 100%); opacity:.55; pointer-events:none; }
.pe-av{ width:52px; height:52px; border-radius:50%; flex:0 0 auto; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fff; box-shadow:0 0 0 2.5px var(--gold-primary); font-family:'Playfair Display',serif; font-weight:700; font-size:18px; color:var(--gold-800); position:relative; z-index:1; }
.pe-av img{ width:100%; height:100%; object-fit:cover; }
.pe-head-t{ position:relative; z-index:1; min-width:0; }
.pe-eyebrow{ font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--pe-gold-700); }
.pe-name{ font-size:17px; font-weight:800; color:var(--pe-ink); margin-top:1px; }
.pe-sub{ font-size:12px; color:var(--pe-ink-500); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pe-x{ position:absolute; top:14px; right:14px; z-index:2; width:32px; height:32px; border-radius:50%; border:1px solid var(--pe-cream-line); background:#fff; color:var(--pe-ink-700); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; padding:0; text-decoration:none; }
.pe-x:hover{ color:var(--pe-ink); }
.pe-body{ padding:16px 20px 6px; max-height:calc(100vh - 210px); overflow-y:auto; }
.pe-sec{ font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pe-ink-400); margin:16px 0 8px; }
.pe-sec:first-child{ margin-top:0; }

/* ── Type d'engagement ───────────────────────────────────────────────────── */
.pe-types{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pe-type{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px 9px; border-radius:12px; border:1px solid var(--pe-line); background:#fff; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--pe-ink-700); cursor:pointer; transition:.14s; text-decoration:none; }
.pe-type .ic{ display:flex; color:var(--pe-gold-700); }
.pe-type .ic svg{ width:15px; height:15px; }
.pe-type:hover{ border-color:var(--gold-300); }
.pe-type[aria-pressed="true"]{ background:var(--pe-cream); border-color:var(--pe-gold); color:var(--pe-ink); box-shadow:0 0 0 1px var(--pe-gold) inset; }

/* ── Champs ──────────────────────────────────────────────────────────────── */
.pe-field{ position:relative; margin-top:8px; }
.pe-field:first-of-type{ margin-top:0; }
.pe-in, .pe-ta, .pe-sel{ width:100%; font-family:inherit; font-size:13px; color:var(--pe-ink); background:#fff; border:1px solid var(--pe-line); border-radius:12px; padding:11px 13px; outline:none; transition:border-color .14s, box-shadow .14s; }
.pe-in:focus, .pe-ta:focus, .pe-sel:focus{ border-color:var(--pe-gold); box-shadow:0 0 0 3px rgba(196,165,89,.16); }
.pe-in::placeholder, .pe-ta::placeholder{ color:var(--pe-ink-400); }
.pe-ta{ resize:vertical; min-height:64px; line-height:1.5; }
.pe-in.is-err, .pe-ta.is-err{ border-color:var(--pe-red); box-shadow:0 0 0 3px rgba(178,58,46,.12); }
.pe-err{ display:none; font-size:11px; color:var(--pe-red); margin:4px 2px 0; font-weight:600; }
.pe-err.show{ display:block; }
.pe-row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pe-hint{ font-size:11px; color:var(--pe-ink-400); margin:5px 2px 0; line-height:1.45; }
.pe-sugg{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.pe-sugg button{ font-family:inherit; font-size:11px; font-weight:600; color:var(--pe-ink-700); background:#F7F5F0; border:1px solid var(--pe-line); border-radius:999px; padding:4px 10px; cursor:pointer; }
.pe-sugg button:hover{ border-color:var(--pe-gold); color:var(--pe-gold-700); }
.pe-sugg button small{ color:var(--pe-ink-400); font-weight:500; margin-left:4px; }

/* ── Calendrier ──────────────────────────────────────────────────────────── */
.pe-cal{ border:1px solid var(--pe-line); border-radius:14px; padding:10px 12px 10px; background:#fff; }
.pe-cal-quick{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.pe-chip--q{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px; }
.pe-chip--q small{ font-size:10.5px; font-weight:700; color:var(--pe-ink-400); text-transform:uppercase; letter-spacing:.04em; }
.pe-chip--q[aria-pressed="true"] small{ color:var(--pe-gold-800); }
.pe-cal-h{ display:flex; align-items:center; gap:8px; }
.pe-cal-h b{ flex:1; font-size:14px; font-weight:800; color:var(--pe-ink); letter-spacing:-.01em; }
.pe-cal-nav{ width:30px; height:30px; border-radius:50%; border:1px solid var(--pe-line); background:#fff; color:var(--pe-ink-700); cursor:pointer; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; transition:border-color .15s, background .15s; }
.pe-cal-nav:hover{ border-color:var(--gold-300); background:var(--pe-cream); }
.pe-cal-nav:disabled{ opacity:.35; cursor:not-allowed; }
.pe-cal-today{ font-family:inherit; font-size:11px; font-weight:700; color:var(--pe-gold-800); background:none; border:1px solid transparent; border-radius:999px; padding:5px 9px; cursor:pointer; }
.pe-cal-today:hover{ border-color:var(--pe-gold); background:var(--pe-cream); }
.pe-wd{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:10px; }
.pe-wd span{ text-align:center; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--pe-ink-400); padding:2px 0; }
.pe-month{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:4px; }
.pe-day{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:40px; border-radius:10px; border:1px solid transparent; background:none; color:var(--pe-ink); cursor:pointer; font-family:inherit; transition:background .12s, border-color .12s, transform .12s; }
.pe-day b{ font-size:13.5px; font-weight:700; line-height:1; }
.pe-day:hover:not(:disabled):not(.is-active){ background:color-mix(in srgb, var(--gold-500) 10%, transparent); }
.pe-day:focus-visible{ outline:2px solid var(--pe-gold); outline-offset:1px; }
.pe-day.is-today b{ text-decoration:underline; text-decoration-color:var(--pe-gold); text-decoration-thickness:2px; text-underline-offset:3px; }
.pe-day.is-out{ color:var(--pe-ink-400); }
.pe-day.is-out b{ font-weight:500; }
.pe-day.is-on{ background:var(--pe-cream); border-color:var(--gold-200); }
/* #4481 « identique et partout » : le jour actif, aujourd'hui et le survol
   reprennent les couleurs du calendrier doré (gold_calendar.css .cal-d). */
.pe-day.is-active{ background:linear-gradient(135deg,var(--onb-gold-600),var(--onb-gold-btn-mid),var(--onb-gold-600)); color:var(--on-gold); border-color:transparent; transform:scale(1.04); box-shadow:0 3px 10px color-mix(in srgb, var(--gold-600) 36%, transparent); }
.pe-day.is-active b{ text-decoration:none; }
.pe-day.is-today:not(.is-active){ box-shadow:inset 0 0 0 1.5px var(--gold-200); }
.pe-day.is-today:not(.is-active) b{ color:var(--gold-600); }
.pe-day:disabled{ opacity:.28; cursor:not-allowed; }
.pe-dots{ display:flex; gap:2px; height:4px; }
.pe-dots i{ width:4px; height:4px; border-radius:50%; background:var(--pe-gold-700); display:block; }
.pe-day.is-active .pe-dots i{ background:var(--gold-100); }
.pe-hours{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--pe-line); }
.pe-hours[hidden]{ display:none; }
.pe-hours-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.pe-hours-h b{ font-size:13px; font-weight:800; color:var(--pe-ink); }
.pe-hours-h span{ font-size:11.5px; color:var(--pe-ink-400); }
.pe-hours-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(72px,1fr)); gap:6px; margin-top:8px; }
.pe-chip--h{ padding:7px 6px; text-align:center; border-radius:9px; font-variant-numeric:tabular-nums; }
.pe-chip--h:disabled{ opacity:.3; cursor:not-allowed; }
.pe-hours-free{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:8px; font-size:11.5px; color:var(--pe-ink-400); }
.pe-time-free{ font-family:inherit; font-size:12.5px; font-weight:700; color:var(--pe-ink); border:1px solid var(--pe-line); border-radius:9px; padding:5px 8px; background:#fff; }
.pe-time-free:focus{ border-color:var(--pe-gold); outline:none; }

/* ── Créneaux retenus ────────────────────────────────────────────────────── */
.pe-slots{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pe-slot{ display:inline-flex; align-items:center; gap:2px; padding:4px 4px 4px 0; border:1px solid var(--pe-line); border-radius:999px; background:#fff; transition:border-color .15s; }
.pe-slot.is-active{ border-color:var(--pe-gold); background:var(--pe-cream); }
.pe-slot-b{ font-family:inherit; display:inline-flex; align-items:center; gap:8px; padding:4px 6px 4px 14px; border:0; background:none; cursor:pointer; color:var(--pe-ink); }
.pe-slot-b b{ font-size:12.5px; font-weight:700; }
.pe-slot-h{ font-size:12px; font-weight:800; color:var(--pe-gold-800); font-variant-numeric:tabular-nums; }
.pe-slot .rm{ width:26px; height:26px; border-radius:50%; border:0; background:none; color:var(--pe-ink-400); cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; }
.pe-slot .rm:hover{ color:var(--pe-red); background:#FBEDED; }
.pe-slots-empty{ font-size:12px; color:var(--pe-ink-400); padding:6px 2px 0; }
.pe-inline{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; font-size:12px; color:var(--pe-ink-700); }
.pe-inline label{ display:flex; align-items:center; gap:7px; cursor:pointer; }
.pe-inline input[type=checkbox]{ accent-color:var(--pe-gold-700); margin:0; }
/* #4481 : l'échéance et la contre-proposition passent au calendrier doré commun
   (gold_calendar.css). La carte rogne ses coins (overflow:hidden) : le temps
   que le calendrier est ouvert, elle le laisse déborder. */
.pe-inline .cal-wrap{ flex:0 1 220px; }
.pe-card:has(.cal.open){ overflow:visible; }

/* ── Puces ───────────────────────────────────────────────────────────────── */
.pe-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.pe-chip{ font-family:inherit; font-size:12px; font-weight:600; color:var(--pe-ink-700); background:#fff; border:1px solid var(--pe-line); border-radius:999px; padding:7px 13px; cursor:pointer; transition:.14s; }
.pe-chip:hover{ border-color:var(--gold-300); }
.pe-chip[aria-pressed="true"]{ background:var(--pe-cream); border-color:var(--pe-gold); color:var(--pe-gold-800); }
.pe-chip-add{ display:inline-flex; align-items:center; gap:6px; }
.pe-chip-add input{ font-family:inherit; font-size:12px; border:1px solid var(--pe-line); border-radius:999px; padding:6px 11px; outline:none; width:150px; }
.pe-radio{ display:flex; gap:8px; }
.pe-radio .pe-chip{ flex:1; text-align:center; }
.pe-mask{ font-size:11.5px; color:var(--pe-ink-500); margin-top:6px; }

/* ── Pied de la fenêtre ──────────────────────────────────────────────────── */
.pe-foot{ display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:12px 20px 16px; border-top:1px solid var(--pe-line); background:#fff; flex-wrap:wrap; }
.pe-foot .pe-err{ margin:0 auto 0 0; }
.pe-btn{ font-family:inherit; font-size:13px; font-weight:700; border-radius:999px; padding:11px 20px; cursor:pointer; border:1px solid var(--pe-line); background:#fff; color:var(--pe-ink-700); transition:.14s; text-decoration:none; display:inline-flex; align-items:center; }
.pe-btn:hover{ border-color:var(--gold-300); }
.pe-btn.primary{ background:var(--pe-btn); color:#2B2210; border-color:transparent; box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 3px 12px rgba(207,160,78,.3); }
.pe-btn.primary:hover{ filter:brightness(1.04); }
.pe-btn.danger{ background:var(--red); color:#fff; border-color:transparent; }
.pe-recap{ padding:0 20px 8px; }
.pe-recap[hidden]{ display:none; }
.pe-recap-box{ border:1px solid var(--pe-cream-line); border-radius:14px; background:#FDFBF4; padding:12px 14px; }
.pe-recap-box h4{ margin:0 0 6px; font-size:12.5px; font-weight:800; color:var(--pe-gold-800); }
.pe-recap-box dl{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; font-size:12px; }
.pe-recap-box dt{ color:var(--pe-ink-500); }
.pe-recap-box dd{ margin:0; font-weight:700; color:var(--pe-ink); }

/* ── Carte d'étape dans le fil ───────────────────────────────────────────── */
.pe-card{ align-self:stretch; border:1px solid var(--pe-cream-line); border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 2px 12px rgba(26,22,20,.05); margin:4px 0; }
.pe-card-band{ display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--pe-grad); border-bottom:1px solid var(--gold-100); }
.pe-card-band .ic{ width:30px; height:30px; border-radius:50%; background:#fff; box-shadow:0 0 0 1.5px var(--gold-200); display:flex; align-items:center; justify-content:center; color:var(--pe-gold-700); }
.pe-card-band .ic svg{ width:15px; height:15px; }
.pe-card-band .lbl{ font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--pe-gold-800); }
.pe-card-band .st{ margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.04em; padding:4px 10px; border-radius:999px; background:#fff; border:1px solid var(--pe-cream-line); color:var(--pe-gold-800); white-space:nowrap; }
.pe-card-band .st.is-ok{ color:var(--pe-green); border-color:var(--green-200); background:var(--green-50); }
.pe-card-band .st.is-warn{ color:var(--gold-deep); border-color:var(--gold-100); background:#FDF6E9; }
.pe-card-band .st.is-bad{ color:var(--pe-red); border-color:var(--red-200); background:var(--red-50); }
.pe-card-band .st.is-muted{ color:var(--pe-ink-500); border-color:var(--pe-line); background:#F7F5F0; }
/* Icônes colorées par type : l'entretien parle (bleu), l'essai brille (vert),
   la prise de poste s'engage (or). */
.pe-card[data-step-kind="interview"] .pe-card-band .ic{ color:var(--pe-blue); background:#EAF1F9; box-shadow:0 0 0 1.5px #C9D9EC; }
.pe-card[data-step-kind="trial"] .pe-card-band .ic{ color:var(--green); background:var(--green-50); box-shadow:0 0 0 1.5px var(--green-200); }
.pe-card[data-step-kind="onboarding"] .pe-card-band .ic{ color:var(--gold-deep); background:#FBF1DD; box-shadow:0 0 0 1.5px var(--gold-200); }
.pe-card-body{ padding:14px 16px 12px; }
.pe-card-etab{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:800; }
.pe-card-etab .av{ width:30px; height:30px; border-radius:50%; overflow:hidden; background:#F3EFE6; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--gold-800); box-shadow:0 0 0 1px var(--pe-line); }
.pe-card-etab .av img{ width:100%; height:100%; object-fit:cover; }
.pe-card-when{ font-size:22px; font-weight:800; letter-spacing:-.3px; line-height:1.15; }
.pe-card-where{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--pe-gold-700); margin-top:4px; }
.pe-card-where .star{ color:var(--pe-gold); }
.pe-card-alts{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.pe-card-alt{ display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--pe-line); border-radius:11px; background:#fff; font-family:inherit; font-size:13px; font-weight:700; color:var(--pe-ink); text-align:left; }
.pe-card-alt small{ margin-left:auto; color:var(--pe-ink-400); font-weight:500; }
.pe-card-hr{ height:1px; background:var(--pe-line); margin:12px 0 10px; }
.pe-card-rows{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:12.5px; }
.pe-card-rows dt{ color:var(--pe-ink-400); }
.pe-card-rows dd{ margin:0; text-align:right; font-weight:700; color:var(--pe-ink); }
.pe-card-msg{ font-size:12.5px; color:var(--pe-ink-700); line-height:1.5; margin-top:10px; }
.pe-card-venir{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.pe-card-venir span{ font-size:11px; font-weight:700; color:var(--pe-gold-800); background:var(--pe-cream); border:1px solid var(--pe-cream-line); border-radius:999px; padding:4px 10px; }
.pe-card-hist{ margin-top:10px; font-size:11px; color:var(--pe-ink-400); line-height:1.5; }
.pe-card-acts{ display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.pe-card-acts .row{ display:flex; gap:7px; flex-wrap:wrap; }
.pe-cbtn{ flex:1 1 auto; font-family:inherit; font-size:12.5px; font-weight:700; padding:10px 14px; border-radius:11px; border:1px solid var(--pe-line); background:#fff; color:var(--pe-ink); cursor:pointer; transition:.14s; text-align:center; text-decoration:none; }
.pe-cbtn:hover{ border-color:var(--gold-300); }
.pe-cbtn.primary{ background:var(--pe-btn); border-color:transparent; color:#2B2210; }
.pe-cbtn.ghost{ font-weight:600; color:var(--pe-ink-700); }
.pe-cbtn.danger{ color:var(--pe-red); }
.pe-cbtn.danger:hover{ border-color:#E4B6AE; }
.pe-cbtn[disabled]{ opacity:.45; cursor:not-allowed; }
.pe-card-inline{ margin-top:10px; padding:11px 12px; border-radius:12px; background:#FBF8EF; border:1px solid var(--pe-cream-line); }
.pe-card-inline.is-red{ background:var(--red-50); border-color:var(--red-200); }
.pe-card-inline p{ margin:0 0 8px; font-size:12.5px; font-weight:700; color:var(--pe-ink); }
.pe-card-inline .acts{ display:flex; gap:7px; justify-content:flex-end; margin-top:8px; }
.pe-card-inline .pe-in{ font-size:12.5px; padding:8px 11px; border-radius:10px; }
.pe-card-inline .pe-hint{ font-weight:400; margin:6px 0 2px; }

/* B3 tache 041 — la version gelee (`.pe-card-figee` de la maquette, l.232). */
.pe-card-figee{ margin-top:10px; padding:8px 11px; border-radius:10px; background:#F1F8F3; border:1px solid #CFE6D8; font-size:11.5px; line-height:1.45; color:#2C4A37; }
.pe-card-figee b{ color:var(--green); }

/* B3 tache 045 — « Etape suivante » apres un bilan concordant (maquette
   `_proposer_etape.html.erb:257-258`, l.1174). Les deux regles sont recopiees
   telles quelles ; aucun style n'est ecrit dans la vue. */
.pe-card-next{ margin-top:12px; padding:12px; border-radius:12px; background:#F1F8F3; border:1px solid #CFE6D8; }
.pe-card-next p{ margin:0 0 8px; font-size:12.5px; font-weight:700; color:var(--pe-green); }
.pe-card-next .row{ display:flex; gap:7px; flex-wrap:wrap; }

/* B3 tache 041 — les panneaux de reponse du talent. La maquette les ouvre en
   JavaScript ; ici c'est un `<details>`, donc les trois gestes marchent meme
   si rien ne se charge. Le `summary` porte le meme bouton que la maquette. */
.pe-card-acts .pe-fold{ flex:1 1 auto; }
.pe-card-acts .pe-fold > summary{ display:block; list-style:none; }
.pe-card-acts .pe-fold > summary::-webkit-details-marker{ display:none; }
.pe-card-acts .pe-fold > summary::marker{ content:""; }
.pe-card-acts .pe-fold[open] > summary{ background:var(--pe-cream); border-color:var(--pe-gold); }
.pe-radio .pe-chip{ position:relative; }
.pe-radio .pe-chip:has(input:checked){ background:var(--pe-cream); border-color:var(--pe-gold); color:var(--pe-gold-800); }
.pe-radio .pe-chip:focus-within{ box-shadow:0 0 0 3px rgba(196,165,89,.16); }
.pe-visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.pe-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; font-size:11px; color:var(--pe-ink-400); }

/* ── Pièces d'une prise de poste ─────────────────────────────────────────── */
.pe-pieces{ margin-top:10px; padding:10px 12px; border-radius:11px; border:1px solid var(--pe-line); background:#fff; }
.pe-pieces-h{ font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--pe-gold-800); margin-bottom:6px; }
.pe-piece{ display:flex; align-items:center; gap:8px; padding:5px 0; border-top:1px dashed var(--pe-line); font-size:12.5px; }
.pe-piece:first-of-type{ border-top:0; }
.pe-piece .nom{ flex:1; font-weight:600; color:var(--pe-ink); }
.pe-piece .etat{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--pe-ink-400); }
.pe-piece.is-recue .etat{ color:var(--green); }
.pe-piece.is-demandee .etat{ color:var(--pe-gold-800); }
.pe-piece .pe-cbtn{ padding:4px 9px; font-size:11.5px; flex:0 0 auto; }

@media(max-width:560px){
  .pe-scrim{ padding:0; }
  .pe-modal{ border-radius:0; min-height:100vh; }
  .pe-body{ max-height:none; }
  .pe-types{ grid-template-columns:1fr; }
  .pe-row2{ grid-template-columns:1fr; }
  .pe-foot{ position:sticky; bottom:0; padding-bottom:max(16px, env(safe-area-inset-bottom)); }
}