/* Talent public Profile (R3) — premium showcase page.
   Pixel-perfect copy of /mockups/talent/profile, styles extracted here so the
   view carries zero inline CSS. Names mirror the mockup (.tp-*).
   The talent layout wraps <main> in `max-w-7xl mx-auto px-4…`; the showcase is
   full-bleed, so we neutralise that wrapper on this page only. */
main:has(.tp-page) { max-width: none !important; padding: 0 !important; }
.tp-page { background: #FFFFFF; }

/* Edit buttons (owner tools) */
.tp-edit-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:#fff;color:#888;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;padding:0;flex-shrink:0;text-decoration:none;}
.tp-edit-btn:hover{border-color:#C4A559;color:#A38543;background:#FAF5EB;}
.tp-edit-btn svg{width:15px;height:15px;}
.tp-add-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:100px;border:1px solid rgba(0,0,0,.08);background:#fff;color:#888;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;text-decoration:none;}
.tp-add-btn:hover{border-color:#C4A559;color:#A38543;background:#FAF5EB;}
.tp-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.tp-section-header .tp-actions{display:flex;align-items:center;gap:6px;}

/* Cover edit overlay */
.tp-cover-edit{position:absolute;bottom:16px;right:16px;z-index:5;display:flex;gap:8px;}
.tp-cover-edit-btn{padding:8px 14px;border-radius:100px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:600;border:1px solid rgba(255,255,255,.15);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;font-family:inherit;}
.tp-cover-edit-btn:hover{background:rgba(0,0,0,.75);}

/* Dialog styling (edit dialogs + pitch modal) */
/* Explicit centering for the modal <dialog> (showModal). Native dialog centering
   (UA margin:auto) was unreliable here — the dialog rendered pinned to the
   top-left — so we center deterministically. No ancestor carries a transform/
   filter, so position:fixed resolves against the viewport. */
.tp-dialog{border:none;border-radius:16px;padding:0;max-width:560px;width:90vw;position:fixed;inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;box-shadow:0 24px 80px rgba(0,0,0,.2);overflow:hidden;font-family:'Geist',system-ui,sans-serif;}
.tp-dialog::backdrop{background:rgba(20,18,14,.5);backdrop-filter:blur(4px);}
.tp-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(0,0,0,.06);}
.tp-dialog-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:600;font-style:italic;color:#1A1A1A;}
.tp-dialog-close{width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:#fff;color:#666;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;padding:0;font-size:18px;line-height:1;}
.tp-dialog-close:hover{background:#1a1a1a;color:#E5D4A0;border-color:#1a1a1a;}
.tp-dialog-body{padding:24px;max-height:60vh;overflow-y:auto;}
.tp-dialog-foot{padding:16px 24px;border-top:1px solid rgba(0,0,0,.06);display:flex;justify-content:flex-end;gap:10px;}
.tp-dialog label{display:block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#888;margin-bottom:5px;}
.tp-dialog input,.tp-dialog textarea,.tp-dialog select{width:100%;padding:10px 12px;border-radius:9px;border:1.5px solid rgba(0,0,0,.06);font-size:13px;outline:none;transition:border .15s;font-family:'Geist',system-ui,sans-serif;box-sizing:border-box;}
.tp-dialog input:focus,.tp-dialog textarea:focus{border-color:#C4A559;box-shadow:0 0 0 3px rgba(196,165,89,.1);}
.tp-dialog textarea{min-height:100px;resize:vertical;}
.tp-dialog .tp-fg{margin-bottom:14px;}
.tp-dialog .tp-fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tp-btn-save{padding:10px 24px;border-radius:9px;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,#C4A559 0%,#D4BC7A 40%,#E5D4A0 70%,#EFE2B8 100%);box-shadow:0 2px 10px rgba(196,165,89,.25);border:none;cursor:pointer;transition:all .2s;font-family:inherit;}
.tp-btn-save:hover{background:#1a1a1a;color:#E5D4A0;}
.tp-btn-cancel{padding:10px 20px;border-radius:9px;font-size:12px;font-weight:600;color:#666;background:#fff;border:1.5px solid rgba(0,0,0,.08);cursor:pointer;transition:all .15s;font-family:inherit;}
.tp-btn-cancel:hover{border-color:#999;}
/* R3 edit — delete button, inline checkbox row, in-modal error message */
.tp-btn-delete{padding:10px 16px;border-radius:9px;font-size:12px;font-weight:600;color:#b91c1c;background:#fff;border:1.5px solid rgba(185,28,28,.25);cursor:pointer;transition:all .15s;font-family:inherit;}
.tp-btn-delete:hover{background:#b91c1c;color:#fff;border-color:#b91c1c;}
.tp-dialog form.button_to{margin:0;}
.tp-check-row{display:flex;align-items:center;gap:8px;margin:0 0 14px 2px;font-size:13px;color:#444;cursor:pointer;}
.tp-check-row input{width:auto;}
.tp-dialog-errmsg{margin:0;padding:10px 24px 0;font-size:12.5px;font-weight:600;color:#b91c1c;}
.tp-del-form{display:inline-flex;margin:0;}
.tp-del-btn:hover{color:#b91c1c;border-color:rgba(185,28,28,.3);}
.tp-pill-x{appearance:none;background:transparent;border:0;color:inherit;opacity:.5;font-size:15px;line-height:1;cursor:pointer;padding:0 3px;}
.tp-pill-x:hover{opacity:1;color:#b91c1c;}
.tp-avatar-initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a1a,#2C2A26);color:#DAA520;font-family:'Geist',system-ui,sans-serif;font-size:58px;font-weight:700;letter-spacing:.02em;}
.tp-avatar-edit-btn{position:absolute;bottom:6px;right:6px;width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:#1a1a1a;color:#E5D4A0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:all .15s;}
.tp-avatar-edit-btn:hover{background:#000;}
.tp-img-ctrl{width:28px;height:28px;border-radius:8px;border:none;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;}
.tp-img-ctrl:hover{background:rgba(0,0,0,.8);}
.tp-img-ctrl-del:hover{background:#b91c1c;}

/* Pitch modal — video frame inside the shared .tp-dialog (Brick 1, functional) */
.tp-pitch-dialog{max-width:760px;}
.tp-pitch-video{width:100%;aspect-ratio:16/9;background:#0d0c0a;display:flex;align-items:center;justify-content:center;color:#E5D4A0;}
.tp-pitch-video svg{width:64px;height:64px;opacity:.85;}

/* Section title gradient underline (width set per-section via data-attr) */
.tp-title-underline{height:2px;margin-top:4px;border-radius:9999px;background:linear-gradient(to right,#b8912a,#e8cc6e);}

/* Profile completion bar — width set on connect by the `progress` controller. */
.tp-progress-bar{height:100%;border-radius:9999px;background:linear-gradient(90deg,#C4A559,#E5D4A0);width:0;}

/* Decorative pattern overlay (sidebar cards). */
.tp-pattern-half{opacity:0.5;}

/* Edit-dialog hint text */
.tp-dialog-hint{font-size:11px;color:#999;margin-top:-8px;}

/* Future-brick annotation (Brique 3 = contact/proposal, Brique 4 = messagerie).
   Mirrors the talent_dashboard convention. */
.tp-future{position:relative;filter:grayscale(0.9);opacity:.55;pointer-events:none;}
.tp-future-badge{position:absolute;top:-10px;right:8px;z-index:2;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:100px;background:#1C1A17;color:#E8D49A;border:1px solid rgba(196,165,89,.35);box-shadow:0 1px 4px rgba(0,0,0,.15);pointer-events:auto;white-space:nowrap;}

/* ============================================================
   Static-style classes extracted from the profile partials.
   Each holds the exact declarations previously inline. Dynamic
   (ERB-interpolated) styles remain inline in the views.
   ============================================================ */

/* ---- Section H2 titles (Playfair, near-black) — repeated in
   _about, _experiences, _education, _skill_cards,
   _signature_dishes, _collections, _references ---- */
.tp-section-title{font-family:'Playfair Display',serif;color:#1A1A1A;}

/* ---- Sidebar H3 titles (Playfair, #131313) — Insight, Career,
   Visa, Languages cards ---- */
.tp-sidebar-title{font-family:'Playfair Display',serif;color:#131313;}

/* ---- Body / text colour helpers (repeated heavily) ---- */
.tp-text-body{color:#555;}        /* paragraph body (#555) */
.tp-text-ink{color:#1A1A1A;}      /* strong dark labels (#1A1A1A) */
.tp-text-muted{color:#777;}       /* secondary text (#777) */
.tp-text-meta{color:#888;}        /* meta text (#888) */
.tp-text-faint{color:#AAA;}       /* faint meta (#AAA) */
.tp-text-cream-body{color:#4c4c4c;} /* cream-card body text (#4c4c4c) */

/* ---- Gold pill (cream bg, gold text+border) — skill cards,
   career tags, visa tags ---- */
.tp-pill-gold{background:rgba(229,212,160,0.3);color:#8B7355;border:1px solid #E5D4A0;}

/* ---- Cream card surface (career/visa/lang sidebar) ---- */
.tp-card-cream{background:#fffdfa;border:1px solid #f8f4ed;}
/* ---- Skill-card surface (slightly different border than sidebar cream) ---- */
.tp-card-skill{background:#fffdfa;border:1px solid #f0e9da;}

/* ---- Hero ---- */
.tp-avatar-ring{background:linear-gradient(135deg, #8B7355, #6B5940);}
.tp-h1-name{color:#242424;}
.tp-role-line{font-family:'Playfair Display', serif;color:rgba(36,36,36,0.8);}
.tp-location{color:#949494;}
.tp-activity-pill{background:#f6f6f6;color:#777;border:1px solid #e4e4e4;}
.tp-response-pill{background:rgba(229,212,160,0.28);color:#8B7355;border:1px solid #E5D4A0;}
.tp-pitch-btn{background:linear-gradient(135deg, #C4A559 0%, #D4BC7A 40%, #E5D4A0 70%, #EFE2B8 100%);padding:5px 14px 5px 5px;font-family:inherit;}
.tp-pitch-scrim{background:rgba(0,0,0,0.3);}
.tp-pitch-play{transform:translate(-40%, -50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #fff;}
.tp-pitch-duration{color:rgba(255,255,255,0.85);}
.tp-cta-btn{padding:9px 16px;font-size:12px;display:inline-flex;align-items:center;gap:6px;}

/* ---- Experiences ---- */
.tp-estab-avatar{border-color:#E5D4A0;}
.tp-badge-available{background:#f0ffe3;color:#4a9f00;border:1px solid #4a9f00;}
.tp-badge-available-dot{background:#4a9f00;}
.tp-badge-michelin{background:#C0392B;color:#fff;}
.tp-tag-primary{background:#fff4d7;color:#966700;border:1px solid #b8912a;}
.tp-tag-neutral{background:#f9f9f9;color:#242424;border:1px solid rgba(0,0,0,0.08);}
.tp-expander-btn{color:#555;border:1px solid #E5E5E5;}

/* ---- Education / Skill Cards icon tile ---- */
.tp-icon-tile{background:linear-gradient(180deg, #E5D4A0 0%, #F5EDD8 100%);}
.tp-icon-tile-glyph{color:#8B7355;}

/* ---- Signature dishes / collections glass caption ---- */
.tp-glass-caption{background:rgba(255,255,255,0.55);}
.tp-dish-title{font-family:'Playfair Display', serif;color:#242424;}
.tp-glass-tag{background:#f9f9f9;border:1px solid rgba(0,0,0,0.08);color:#242424;}

/* ---- Collections carousel controls ---- */
.tp-carousel-chevron{color:#C4A559;}
.tp-carousel-track{background:#E5D4A0;}

/* ---- References ---- */
.tp-ref-avatar{background:linear-gradient(135deg, #E5D4A0, #F5EDD8);color:#8B7355;}
.tp-verified-badge{background:linear-gradient(135deg,#A38543 0%,#CDB563 50%,#B19136 100%);color:#242424;}
.tp-quote{color:#555;}

/* ---- Sidebar ---- */
.tp-card-plain{background:#fff;border:1px solid #E5E5E5;}
.tp-completion-pct{color:#A38543;}
.tp-progress-track{background:rgba(0,0,0,.04);}
.tp-text-hint{color:#999;}
.tp-card-insight{background:#fdf4e2;border:1px solid rgba(163,133,67,0.3);}
.tp-insight-dot{background:#A38543;}
.tp-header-mb12{margin-bottom:12px;}
.tp-header-mb16{margin-bottom:16px;}
.tp-lang-name{color:#1A1A1A;}
.tp-lang-level{color:#8A8A8A;}
.tp-lang-flag{object-fit:cover;}

/* ---- show.html.erb decorative footer ---- */
.tp-footer-deco{background:#FFFFFF;}
.tp-footer-deco-inner{opacity:0.35;}

/* Pitch : vignette dorée par défaut (pas de placeholder si pas d'avatar). */
.tp-pitch-thumb { background: linear-gradient(135deg, #C4A559, #D4BC7A); }

/* Modale pitch : outils (plein écran + fermer) + cadre en plein écran. */
.tp-pitch-tools { display: flex; align-items: center; gap: 4px; }
.tp-pitch-fs { background: none; border: none; cursor: pointer; color: #6B6560; padding: 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.tp-pitch-fs svg { width: 18px; height: 18px; }
.tp-pitch-fs:hover { background: #F3EFE6; color: #18140C; }
.tp-pitch-video:fullscreen { width: 100vw; height: 100vh; border-radius: 0; aspect-ratio: auto; }

/* Pastille d'expérience : initiales d'établissement (or sur noir, pas de placeholder). */
.tp-estab-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #0D0D0D; color: #C9A54A; font-weight: 700; font-size: 15px; letter-spacing: 0.5px; }

/* Modale pitch : zone d'upload (propriétaire) dans le pied. */
.tp-pitch-upload { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.tp-pitch-upload-status { font-size: 12px; color: #6B6560; }

/* Pitch : lecteur Mux + animation de chargement pendant l'upload/traitement. */
.tp-pitch-video { position: relative; overflow: hidden; }
.tp-pitch-video mux-player { width: 100%; height: 100%; }
.tp-pitch-spinner { display: none; }
.tp-pitch-video.is-loading .tp-pitch-placeholder-icon, .tp-pitch-video.is-loading mux-player { opacity: 0.12; }
.tp-pitch-video.is-loading .tp-pitch-spinner { display: block; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.16); border-top-color: #D4BC7A; animation: tp-spin 0.8s linear infinite; }
@keyframes tp-spin { to { transform: rotate(360deg); } }
.tp-pitch-upload-status { min-width: 0; }