/* 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:var(--gold-primary);color:var(--gold-500);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:var(--gold-primary);color:var(--gold-500);background:#FAF5EB;}
/* flex-wrap : sur les titres longs (« Education & Distinctions »), le groupe
   d'actions sortait de sa propre carte en mobile et poussait la page vers la
   droite. Il passe sous le titre au lieu de deborder. */
.tp-section-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;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:var(--r-lg);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:var(--gold-200);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;}
/* `:not(.fp)` — demande Loïc 13/08 : le sélecteur de fichier habillé
   (shared/_file_picker) EST un <label>, et cette regle le rendrait `display:block`
   en petites capitales grises, cassant sa mise en page. */
.tp-dialog label:not(.fp){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:var(--gold-primary);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;}
/* Période année + mois facultatif (#2857) — l'année d'abord, courte, le mois
   ensuite : c'est l'année qui porte l'information, le mois est un complément. */
.tp-dialog .tp-date-pair{display:grid;grid-template-columns:5.5rem 1fr;gap:8px;}
.tp-dialog .tp-date-pair select{padding-left:8px;padding-right:8px;}
.tp-btn-save{padding:10px 24px;border-radius:9px;font-size:12px;font-weight:700;color:#fff; text-shadow: var(--on-gold-shadow);background:var(--gold-fill);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:var(--gold-200);}
.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:var(--gold-primary);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:var(--gold-200);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:var(--r-sm);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:var(--gold-200);}
.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,var(--gold-500),var(--gold-300));}
/* #2863 — quand le talent a écrit lui-même le titre de sa section, sa longueur
   n'est plus connue à l'avance : le bloc se rétrécit sur le titre et le filet
   prend toute sa largeur, au lieu des largeurs figées de #1603. */
#tp-signature-dishes .tp-title-fit{display:inline-block;}
#tp-signature-dishes .tp-title-fit .tp-title-underline{width:100%;}
/* Sous-titre de section (issue #1603 — galerie « Savoir-faire ») */
.tp-section-sub{font-size:13px;color:#777;margin-top:8px;}

/* Cadrage par point focal (issues #1576 cover / #1599 avatar) — mode
   « Ajuster » : drag de l'image dans son cadre + toolbar Annuler/Enregistrer. */
.tp-focus-adjusting{cursor:grab;}
.tp-focus-adjusting:active{cursor:grabbing;}
.tp-focus-adjusting img{pointer-events:none;user-select:none;}
.tp-focus-adjusting .tp-cover-edit,.tp-focus-adjusting .tp-avatar-edit-btn,.tp-focus-adjusting .tp-avatar-adjust-btn{display:none;}
.tp-focus-toolbar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);border-radius:100px;padding:6px 8px;z-index:6;white-space:nowrap;}
.tp-focus-toolbar[hidden]{display:none;}
.tp-focus-hint{color:#fff;font-size:11px;font-weight:600;padding:0 8px;}
.tp-focus-toolbar .tp-btn-save{padding:7px 16px;font-size:11px;}
.tp-focus-toolbar .tp-btn-cancel{padding:7px 14px;font-size:11px;background:transparent;color:#fff;border-color:rgba(255,255,255,.35);}
.tp-focus-toolbar .tp-btn-cancel:hover{border-color:#fff;}
.tp-focus-form{display:none;}
/* Variante avatar (#1599) : bouton « Ajuster » en miroir du bouton caméra,
   toolbar compacte sous le cercle. */
.tp-avatar-adjust-btn{position:absolute;bottom:6px;left:6px;width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:#1a1a1a;color:var(--gold-200);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-adjust-btn:hover{background:#000;}
.tp-focus-toolbar--below{bottom:auto;top:calc(100% + 10px);}

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

/* Decorative pattern overlay (sidebar cards) — full-bleed voilages motif,
   raised opacity so it reads clearly on all right-column cards (client retour). */
.tp-pattern-half{opacity:0.85;}

/* Edit-dialog hint text */
.tp-dialog-hint{font-size:11px;color:#999;margin-top:-8px;}
/* Retour Tatianna 11/08 (#2861) — « le texte de description est disproportionné
   en taille ». La capture jointe au ticket montre le paragraphe d'aide sous le
   label DESCRIPTION rendu plus gros que son propre label ET que le placeholder
   du champ : .tp-skc-hint n'avait AUCUNE règle et héritait donc du corps de
   page. Il prend la taille des autres aides de modale (.tp-dialog-hint), qui
   est celle de la maquette validée (app/views/mockups/talent/_profile_body,
   .tp-focus-hint et .tp-dialog textarea : 11px / #999). Corrige du même coup les
   aides « Compétences maîtrisées » et « Maisons où vous l'exercez », qui
   souffraient du même oubli.
   Le CHAMP n'est pas touché : rows=3 sous .tp-dialog textarea{min-height:100px}
   rend exactement la boîte de la maquette, dont la seule modale à textarea de
   description (dlg-experience) porte la même min-height. */
.tp-dialog .tp-skc-hint{font-size:11px;color:#999;margin:-2px 0 8px;}
/* Compteur de mots (issue #1600) — sous le textarea, dans le .tp-fg */
.tp-dialog .tp-word-count{margin-top:6px;margin-bottom:0;}

/* 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:var(--gold-200);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;}

/* #3238 (Kevin, 20/08) — mention « présentation proposée par Auguste ».
   Elle n'apparaît QUE sur le profil du talent lui-même, quand la section « À
   propos » a été rédigée à l'import du CV faute de texte, et disparaît dès qu'il
   enregistre le sien. Même vocabulaire graphique que le CTA « Rédiger avec
   Auguste » (pastille « IA » sur fond doré), aux jetons de la charte : cette
   feuille est servie sur toutes les pages, d'où le préfixe `tp-`. */
.tp-about-ai{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:12px;line-height:1.5;color:var(--n-700);}
.tp-about-ai-badge{flex-shrink:0;font-size:9px;font-weight:800;letter-spacing:.1em;padding:2px 7px;border-radius:3px;color:var(--on-gold);text-shadow:var(--on-gold-shadow);background:var(--gold-fill);}

/* ---- 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 var(--gold-200);}

/* ---- 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;}
/* #3263 (reponse Kevin 23/08) — le badge Verified rejoint la ligne du nom sur
   la fiche talent pleine page vue par le recruteur. Le nom etait un <h1> seul
   en flux bloc : il faut une rangee pour poser la pastille a cote. Selecteur
   porte par #tp-identity, parce que `:app` sert toutes les feuilles produit sur
   chaque page et qu'une classe courte non portee finit par en croiser une
   autre. `flex-wrap` + `row-gap` : a 390 px, un nom long fait passer le badge a
   la ligne au lieu de l'ecraser. La pastille elle-meme est le composant
   canonique .tsds-verified (components.css), rien n'est redecrit ici. */
#tp-identity .tp-name-row{display:flex;align-items:center;flex-wrap:wrap;column-gap:var(--sp-3);row-gap:var(--sp-1);}
.tp-role-line{font-family:'Playfair Display', serif;color:rgba(36,36,36,0.8);}
.tp-location{color:#949494;}
/* Retour Tatianna 12/08 (#2953) — icône pin devant la ville. `currentColor`
   suit la couleur du texte : aucune couleur en dur, aucun doré hors jetons. */
.tp-location-pin{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:5px;flex-shrink:0;}
.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 var(--gold-200);}
/* R7 (revue Loïc 06/08) — pastilles Visa & certifications du hero (maquette). */
.tp-cert-pill{background:rgba(229,212,160,0.28);color:#8B7355;border:1px solid var(--gold-200);}
.tp-pitch-btn{background:var(--gold-fill);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:var(--gold-200);}
.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:var(--gold-deep);border:1px solid var(--gold-500);}
.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, var(--gold-200) 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:var(--gold-primary);}
.tp-carousel-track{background:var(--gold-200);}

/* ---- Media carousel (galerie vidéos B2 tâche 018, #1564) — vraies flèches ---- */
.tp-carousel{position:relative;}
.tp-carousel-strip{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;}
.tp-carousel-strip::-webkit-scrollbar{display:none;}
.tp-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:#fff;color:var(--gold-500);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12);transition:all .15s;z-index:6;padding:0;}
.tp-carousel-arrow:hover{background:#1a1a1a;color:var(--gold-200);border-color:#1a1a1a;}
.tp-carousel-arrow svg{width:17px;height:17px;}
.tp-carousel-prev{left:-6px;}
.tp-carousel-next{right:-6px;}
/* `display:inline-flex` ci-dessus l'emporte sur [hidden] du navigateur : on le
   rétablit, sinon les flèches masquées par carousel#sync resteraient visibles. */
.tp-carousel-arrow[hidden]{display:none;}

/* ---- Carrousels Signature Dishes / Collections (retour Loïc 06/08,
   carrousels du profil) — mêmes largeurs que le mockup talent. ---- */
.tp-dishes-strip{gap:8px;}
.tp-dish-featured{flex:0 0 auto;width:min(58%,440px);min-width:300px;}
.tp-dish-stack{flex:0 0 auto;width:min(40%,300px);min-width:220px;}
.tp-collections-strip{gap:20px;}
.tp-collection-card{flex:0 0 auto;width:min(31%,260px);min-width:220px;}
.tp-collection-thumb{flex:0 0 auto;width:150px;}

/* ---- Videos gallery (B2 tâche 018, R20/AC20.1) ---- */
.tp-videos-sub{color:#6b6b6b;font-size:13px;margin:-4px 0 14px;}
.tp-videos-unavailable{color:var(--gold-600);background:#FAF5EB;border:1px solid #EADFC4;border-radius:10px;font-size:13px;padding:10px 14px;margin-bottom:12px;}
.tp-videos-count{color:var(--n-500);font-size:12px;margin:-6px 0 10px;}
/* Panneau d'upload : replié par défaut, ouvert par « Ajouter » ou « Remplacer ». */
.tpv-uploader{margin-bottom:16px;}
.tpv-uploader-replacing{color:var(--gold-600);background:var(--gold-50);border:1px solid var(--gold-200);border-radius:10px;font-size:12.5px;line-height:1.45;padding:8px 12px;margin-bottom:10px;}
.tpv-card{position:relative;flex:0 0 auto;width:280px;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;background:#000;}
.tpv-card.is-dragging{opacity:.5;}
.tpv-player{width:100%;height:100%;--controls:flex;}
.tpv-label{position:absolute;bottom:8px;left:10px;color:#fff;font-size:12px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none;}
/* Carte d'attente pendant l'encodage Mux : on occupe la place de la future
   vidéo plutôt que de laisser croire que rien ne s'est passé. */
.tpv-card.is-encoding{background:var(--gold-50);border:1px dashed var(--gold-200);}
.tpv-encoding{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:100%;padding:12px;text-align:center;}
.tpv-encoding-spin{width:20px;height:20px;border:2px solid var(--gold-200);border-top-color:var(--gold-500);border-radius:50%;animation:tpv-spin .8s linear infinite;}
.tpv-encoding-label{color:var(--gold-600);font-size:12.5px;font-weight:600;}
.tpv-encoding-hint{color:var(--n-500);font-size:11.5px;}
@keyframes tpv-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.tpv-encoding-spin{animation-duration:3s;}}
.tpv-tools{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:7;}
.tpv-tool{width:26px;height:26px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.tpv-tool svg{width:13px;height:13px;}
.tpv-tool:hover{background:rgba(0,0,0,.8);}
.tpv-tool--danger:hover{background:rgba(200,40,40,.9);}
.tpv-empty{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:100%;min-height:120px;color:#9a9a9a;font-size:13px;font-style:italic;border:1px dashed #E0D8C4;border-radius:var(--r-md);background:#FBF8F1;}

/* ---- References ---- */
.tp-ref-avatar{background:linear-gradient(135deg, var(--gold-200), #F5EDD8);color:#8B7355;}
/* #3195 — .tp-verified-badge retiree : la pastille Verified des references
   passe sur le composant canonique .tsds-verified (components.css), aligne sur
   la page Explorer Talent. Cette feuille etant servie APRES components.css,
   une regle maison survivante reprendrait la main sur la cascade. */
.tp-quote{color:#555;}

/* ---- Sidebar ---- */
.tp-card-plain{background:#fff;border:1px solid #E5E5E5;}
.tp-completion-pct{color:var(--gold-500);}
.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:var(--gold-500);}
.tp-header-mb12{margin-bottom:12px;}
.tp-header-mb16{margin-bottom:16px;}
/* #2862 — bouton d'action collé en haut à droite quand le titre passe sur
   plusieurs lignes : sans ça, l'align-items:center du header le descend au
   milieu du titre, alors que la card du dessus (titre court) l'a en haut. */
.tp-header-top{align-items:flex-start;}
.tp-lang-name{color:#1A1A1A;}
/* #2860 — « Langue maternelle · C2 » (116 px) ne tenait pas dans les 88 px que
   laissaient le drapeau, les 5 points et les deux boutons d'édition : il partait
   sur deux lignes. Le niveau devient une ligne à lui seul (flex-basis 100 %),
   calée sur le nom de la langue quand un drapeau est affiché. */
.tp-lang-row{flex-wrap:wrap;row-gap:2px;}
.tp-lang-level{color:#8A8A8A;flex:0 0 100%;white-space:nowrap;}
.tp-lang-row:has(.tp-lang-flag) .tp-lang-level{padding-left:32px;}
.tp-lang-flag{object-fit:cover;}
/* Campagne CV 13/08 — la jauge des 5 points sortait du gabarit en gold écrit en
   dur dans la vue. Elle passe en classes (donc en tokens de charte), et un
   niveau non reconnu n'allume aucun point : l'écran n'affirme rien. */
.tp-lang-dot{width:6px;height:6px;border-radius:9999px;background:var(--gold-100);}
.tp-lang-dot-on{background:var(--gold-fill-deep);}
.tp-lang-level-unset{font-style:italic;}

/* ---- 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, var(--gold-primary), var(--gold-300)); }

/* 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: var(--r-sm); 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: var(--gold-primary); font-weight: 700; font-size: 15px; letter-spacing: 0.5px; }

/* Modale pitch : zone d'upload (propriétaire) dans le pied. */
/* Le pitch se téléverse désormais par le bloc commun (shared/_video_uploader),
   posé dans le corps de la modale : une colonne, pas une ligne de pied. */
.tp-pitch-upload { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 0; }
.tp-pitch-player { width: 100%; height: 100%; --controls: flex; }
.tp-pitch-unavailable { color: var(--gold-600); background: var(--gold-50); border: 1px solid var(--gold-200); border-radius: 10px; font-size: 12.5px; line-height: 1.45; padding: 10px 13px; margin-top: 14px; }
.tp-pitch-delete { align-self: flex-start; border: 1px solid var(--n-300); background: var(--n-0); border-radius: 999px; padding: 5px 14px; font-size: 12px; color: var(--n-700); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.tp-pitch-delete:hover { border-color: #C24A4A; color: #A93636; }

/* 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: var(--gold-300); animation: tp-spin 0.8s linear infinite; }
@keyframes tp-spin { to { transform: rotate(360deg); } }


/* ============================================================================
   SKILL CARDS (R19/AC19.1) — design définitif « Meilleure Version » (Drive).
   Porté verbatim depuis le mockup app/views/mockups/talent/_profile_body ; les
   pourcentages dynamiques (score) passent par la variable de données --sk-score.
   ============================================================================ */
.tp-skintro{color:#6b6b6b;font-size:13px;margin:-6px 0 14px;}
.tp-sklegend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:#8A8175;margin:-2px 0 16px;}
.tp-sklegend span{display:inline-flex;align-items:center;gap:6px;}
.tp-sklegend i{width:7px;height:7px;border-radius:50%;background:var(--gold-primary);display:inline-block;}
.tp-sklegend i.green{background:#3d8c66;}
.tp-skgrid{display:grid;grid-template-columns:1.2fr .9fr .9fr;grid-auto-rows:168px;gap:10px;}
.tp-skcard{border:0;padding:0;margin:0;text-align:left;background:none;cursor:pointer;font-family:inherit;min-width:0;}
.tp-skcard.wide{grid-column:span 2;}
.tp-skcard.signature{grid-row:span 2;}
.tp-skinner{position:relative;height:100%;overflow:hidden;border:1px solid #E8DDC4;background:#FBF7EC;border-radius:var(--r-lg);padding:15px;box-shadow:0 6px 20px rgba(49,39,25,.04);transition:transform .3s ease,box-shadow .3s ease,background .3s ease;display:flex;flex-direction:column;}
.tp-skinner:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-38px;top:-44px;background:radial-gradient(circle,rgba(196,165,89,.28),transparent 70%);transition:transform .5s ease;pointer-events:none;}
.tp-skcard:hover .tp-skinner{transform:translateY(-4px);box-shadow:0 16px 34px rgba(49,39,25,.10);background:#fff;}
.tp-skcard:hover .tp-skinner:after{transform:scale(1.3) translate(-8px,8px);}
.tp-skcard:focus-visible .tp-skinner{outline:2px solid var(--gold-primary);outline-offset:2px;}
.tp-skcard.signature .tp-skinner{background:#1c1915;border-color:rgba(255,255,255,.1);color:#fff;padding:18px;}
.tp-skcard.signature:hover .tp-skinner{background:#211d18;}
.tp-skcard.signature .tp-skinner:after{width:190px;height:190px;background:radial-gradient(circle,rgba(212,176,91,.32),transparent 68%);right:-58px;top:-64px;}
.tp-skicon{position:relative;z-index:2;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--gold-500);box-shadow:0 6px 16px rgba(63,46,18,.07);}
.tp-skicon svg{width:18px;height:18px;}
.tp-skcard.signature .tp-skicon{background:rgba(255,255,255,.1);color:var(--gold-300);}
.tp-skstatus{position:absolute;z-index:3;top:14px;right:14px;padding:5px 9px;border-radius:var(--r-pill);font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.tp-skstatus.green{background:#eaf5ef;color:#286448;}
.tp-skstatus.amber{background:#fff5da;color:var(--gold-deep);}
.tp-skcard.signature .tp-skstatus.green{background:#e7f3ec;color:#286448;}
.tp-skcard.signature .tp-skstatus.amber{background:rgba(255,255,255,.12);color:var(--gold-200);}
.tp-skcopy{position:relative;z-index:2;margin-top:14px;}
.tp-skcopy h3{font-family:'Playfair Display',serif;font-weight:600;font-style:italic;font-size:17px;line-height:1.1;margin:0 0 5px;color:#1A1A1A;}
.tp-skcard.signature .tp-skcopy h3{font-size:24px;color:#fff;}
.tp-skcopy p{font-size:11.5px;line-height:1.45;color:#766f67;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tp-skcard.signature .tp-skcopy p{color:#c5bdb0;-webkit-line-clamp:3;}
.tp-skfoot{position:relative;z-index:2;margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tp-skcred{font-size:9px;font-weight:800;padding:5px 8px;border-radius:var(--r-pill);background:#fff;border:1px solid #E8DDC4;color:#5e574e;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}
.tp-skcred.verified{background:#eaf5ef;border-color:#cfe6da;color:#286448;}
.tp-skcard.signature .tp-skcred{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12);color:#dfd4c1;}
.tp-skcard.signature .tp-skcred.verified{background:#e7f3ec;border-color:transparent;color:#286448;}
.tp-skscore{margin-left:auto;width:34px;height:34px;position:relative;border-radius:50%;display:grid;place-items:center;flex:none;background:conic-gradient(var(--gold-primary) var(--sk-score,0%),rgba(103,91,72,.14) 0);}
.tp-skscore:before{content:"";position:absolute;inset:4px;border-radius:50%;background:#FBF7EC;}
.tp-skcard:hover .tp-skscore:before{background:#fff;}
.tp-skcard.signature .tp-skscore:before{background:#1c1915;}
.tp-skcard.signature:hover .tp-skscore:before{background:#211d18;}
.tp-skscore b{position:relative;z-index:2;font-size:9px;font-weight:800;color:var(--gold-deep);}
.tp-skcard.signature .tp-skscore b{color:var(--gold-300);}

/* Drawer preuve détaillée */
.tp-skdrawer{position:fixed;inset:0;z-index:120;display:none;}
.tp-skdrawer.open{display:block;}
.tp-skdrawer-backdrop{position:absolute;inset:0;background:rgba(25,22,18,.42);backdrop-filter:blur(6px);animation:tpskfade .28s ease;}
@keyframes tpskfade{from{opacity:0}to{opacity:1}}
.tp-skdrawer-panel{position:absolute;right:16px;top:16px;bottom:16px;width:min(540px,calc(100% - 32px));overflow:auto;border-radius:22px;background:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:0 32px 90px rgba(28,22,14,.28);padding:0;animation:tpskin .4s cubic-bezier(.2,.8,.2,1);scrollbar-width:thin;}
@keyframes tpskin{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.tp-skdrawer-close{position:absolute;top:14px;right:14px;z-index:6;width:38px;height:38px;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;font-size:20px;line-height:1;transition:all .15s;box-shadow:0 6px 16px rgba(62,45,20,.14);font-family:inherit;}
.tp-skdrawer-close:hover{background:#1a1a1a;color:var(--gold-200);border-color:#1a1a1a;}
.tp-skdrawer-content{display:flex;flex-direction:column;min-height:100%;}
.tp-skdrawer-content[hidden]{display:none;}
.tp-skd-band{position:relative;display:flex;gap:18px;align-items:flex-start;padding:26px 26px 20px;flex:none;background:linear-gradient(105deg,#ffffff 0%,#ffffff 34%,#FBF3E1 64%,var(--gold-200) 100%);}
.tp-skd-bandleft{max-width:60%;}
.tp-skd-bandright{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding-top:20px;}
.tp-skd-score{position:relative;width:58px;height:58px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 20px rgba(138,107,31,.22);background:conic-gradient(var(--gold-deep) var(--sk-score,0%),rgba(255,255,255,.55) 0);}
.tp-skd-score:before{content:"";position:absolute;inset:5px;border-radius:50%;background:rgba(255,255,255,.9);}
.tp-skd-score b{position:relative;font-family:'Playfair Display',serif;font-weight:600;font-style:italic;font-size:17px;color:#1A1A1A;line-height:1;}
.tp-skd-score i{position:relative;font-style:normal;font-size:5.5px;font-weight:800;letter-spacing:.05em;white-space:nowrap;text-transform:uppercase;color:var(--gold-deep);margin-top:2px;}
.tp-skd-kicker{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--gold-deep);}
.tp-skd-title{font-family:'Playfair Display',serif;font-weight:600;font-style:italic;font-size:29px;line-height:1.06;margin:9px 0 8px;color:#1A1A1A;}
.tp-skd-lead{font-size:12.5px;color:#666;line-height:1.6;margin:0;}
.tp-skd-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
.tp-skd-badges span{padding:6px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.7);font-size:9.5px;font-weight:700;color:#625b52;}
.tp-skd-badges span.green{background:#eaf5ef;color:#286448;}
.tp-skd-body{flex:1;padding:18px 22px 22px;}
.tp-skd-work{padding:16px;border-radius:var(--r-lg);border:1px solid rgba(196,165,89,.2);background:linear-gradient(150deg,#fffcf4,#faf7f0);position:relative;overflow:hidden;}
.tp-skd-work:before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;top:-80px;right:-45px;background:radial-gradient(circle,rgba(196,165,89,.18),transparent 68%);pointer-events:none;}
.tp-skd-workhead{position:relative;display:flex;align-items:center;gap:8px;}
.tp-skd-workhead h4{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#837665;margin:0;}
.tp-skd-auguste{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-deep);background:#fff;border:1px solid rgba(196,165,89,.3);padding:4px 8px;border-radius:var(--r-pill);}
.tp-skd-auguste svg{width:10px;height:10px;}
.tp-skd-video{position:relative;display:flex;align-items:center;gap:14px;width:100%;margin-top:12px;padding:14px 16px;border:0;border-radius:18px;cursor:pointer;text-align:left;color:#F5EFE0;overflow:hidden;font-family:inherit;background:linear-gradient(110deg,#241f18 0%,var(--gold-800) 55%,var(--gold-500) 100%);box-shadow:0 12px 30px rgba(35,26,15,.24);transition:transform .25s,box-shadow .25s;}
.tp-skd-video:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(35,26,15,.32);}
.tp-skd-video:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-40px;top:-66px;background:radial-gradient(circle,rgba(229,212,160,.32),transparent 70%);pointer-events:none;}
.tp-skd-vplay{position:relative;width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--gold-fill);color:var(--on-gold);text-shadow:var(--on-gold-shadow);border:3px solid rgba(255,255,255,.32);box-shadow:0 10px 24px rgba(0,0,0,.3);}
.tp-skd-vplay svg{width:15px;height:15px;margin-left:3px;}
.tp-skd-vbody{position:relative;min-width:0;}
.tp-skd-vbody b{display:block;font-size:13px;font-weight:700;}
.tp-skd-vbody i{display:block;font-style:normal;font-size:10px;color:var(--gold-300);margin-top:3px;}
.tp-skd-vopen{position:relative;margin-left:auto;flex:none;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);}
.tp-skd-houses{position:relative;display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.tp-skd-house{flex:1 1 calc(33.333% - 8px);min-width:120px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:11px 12px;border-radius:15px;border:1.5px solid rgba(122,95,42,.10);background:#fff;box-shadow:0 5px 14px rgba(62,45,20,.05);cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s;text-align:left;font-family:inherit;}
.tp-skd-house:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(62,45,20,.10);}
.tp-skd-mono{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;font-size:9px;font-weight:800;color:#fff;margin-bottom:7px;box-shadow:0 4px 10px rgba(35,26,15,.18);}
.tp-skd-house b{font-size:11px;font-weight:700;color:#1A1A1A;line-height:1.2;}
.tp-skd-house i{font-style:normal;font-size:9px;font-weight:600;color:#9a917f;margin-top:2px;}
.tp-skd-house em{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin-top:5px;color:var(--gold-deep);}
.tp-skd-house.c-gold{background:#FDF8EC;}
.tp-skd-house.c-gold .tp-skd-mono{background:linear-gradient(135deg,var(--gold-primary),var(--gold-200));}
.tp-skd-house.c-green{background:#EFF6F1;}
.tp-skd-house.c-green .tp-skd-mono{background:linear-gradient(135deg,#2e5d46,#57866c);}
.tp-skd-house.c-green em{color:#2e5d46;}
.tp-skd-house.c-wine{background:#F9EFF0;}
.tp-skd-house.c-wine .tp-skd-mono{background:linear-gradient(135deg,#7e3b44,#a8626b);}
.tp-skd-house.c-wine em{color:#7e3b44;}
.tp-skd-house.c-copper{background:#F9F1EA;}
.tp-skd-house.c-copper .tp-skd-mono{background:linear-gradient(135deg,#a05c32,#c98a5b);}
.tp-skd-house.c-copper em{color:#a05c32;}
.tp-skd-house.is-on{transform:translateY(-2px);}
.tp-skd-house.c-gold.is-on{border-color:var(--gold-primary);box-shadow:0 12px 26px rgba(196,165,89,.24);}
.tp-skd-house.c-green.is-on{border-color:#2e5d46;box-shadow:0 12px 26px rgba(46,93,70,.20);}
.tp-skd-house.c-wine.is-on{border-color:#7e3b44;box-shadow:0 12px 26px rgba(126,59,68,.20);}
.tp-skd-house.c-copper.is-on{border-color:#a05c32;box-shadow:0 12px 26px rgba(160,92,50,.20);}
.tp-skd-panel{position:relative;}
.tp-skd-panel[hidden]{display:none;}
.tp-skd-role{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:13px;font-size:11px;font-weight:600;color:#8a8175;}
.tp-skd-state{display:inline-flex;padding:4px 8px;border-radius:var(--r-pill);font-size:8.5px;font-weight:800;background:#fff5da;color:var(--gold-deep);}
.tp-skd-state.green{background:#eaf5ef;color:#286448;}
.tp-skd-group{position:relative;margin-top:13px;}
.tp-skd-group h5{display:flex;align-items:center;gap:6px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;color:var(--gold-500);margin:0 0 8px;}
.tp-skd-group h5:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-primary);flex:none;}
.tp-skd-pills{display:flex;flex-wrap:wrap;gap:6px;}
.tp-skd-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:var(--r-pill);border:1px solid #E8DDC4;background:#fff;font-size:11px;font-weight:600;color:#4A443C;box-shadow:0 4px 12px rgba(62,45,20,.04);text-align:left;}
.tp-skd-pill .ic{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#F4EFE3;color:var(--gold-deep);flex:none;}
.tp-skd-pill .ic svg{width:11px;height:11px;}
.tp-skd-pill .ic.gold{background:linear-gradient(135deg,var(--gold-primary),var(--gold-200));color:#fff; text-shadow: var(--on-gold-shadow);box-shadow:0 3px 8px rgba(196,165,89,.32);}
.tp-skd-pill .ic.green{background:#eaf5ef;color:#286448;}
.tp-skd-pill i{font-style:normal;font-size:10px;font-weight:600;color:#9a917f;}
.tp-skd-pill em{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;color:var(--gold-deep);padding:0 3px;}
button.tp-skd-pill{cursor:pointer;font-family:inherit;transition:transform .2s,box-shadow .2s,border-color .2s;}
button.tp-skd-pill:hover{transform:translateY(-1px);border-color:var(--gold-primary);box-shadow:0 6px 16px rgba(62,45,20,.10);}
.tp-skd-pill.doc{background:linear-gradient(120deg,#ffffff,#FBF3E1);}
.tp-skd-pill.add{border-style:dashed;border-color:rgba(163,133,67,.38);background:rgba(255,255,255,.5);color:var(--gold-600);padding:8px 13px;}
.tp-skd-pill.add:hover{background:#fff;border-color:var(--gold-primary);}
.tp-skd-note{position:relative;font-size:10px;color:#958d83;line-height:1.45;margin:12px 0 0;}
/* border-top explicite : le filet venait d'un `footer{border-top:1px solid ...}`
   de lovable/not-found-page.css, servi par erreur sur toutes les pages produit. */
.tp-skd-foot{display:flex;align-items:center;gap:12px;padding:14px 22px;flex:none;border-top:1px solid #E8E4DE;background:linear-gradient(120deg,#1d1a16,#2d2519);}
.tp-skd-brand{flex:none;font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:15px;color:var(--gold-200);}
/* Le pied passe à la ligne : côté propriétaire il porte trois actions en plus
   de la mention, qui ne tiennent pas sur la largeur du panneau. */
.tp-skd-foot{flex-wrap:wrap;}
.tp-skd-foot p{flex:1 1 200px;font-size:9.5px;color:#a89e8c;line-height:1.45;margin:0;}
.tp-skd-signature{flex:none;border:0;border-radius:11px;padding:9px 14px;background:var(--gold-fill);color:var(--on-gold);text-shadow:var(--on-gold-shadow);font-size:10px;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap;transition:transform .2s;}
.tp-skd-signature:hover{transform:translateY(-1px);}
/* Actions propriétaire du pied de drawer (modifier / supprimer la carte) */
.tp-skd-delform{margin:0;flex:none;}
.tp-skd-act{flex:none;border:1px solid rgba(255,255,255,.22);border-radius:11px;padding:9px 14px;background:transparent;color:var(--gold-200);font-size:10px;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .2s,border-color .2s;}
.tp-skd-act:hover{background:rgba(255,255,255,.09);border-color:var(--gold-primary);}
.tp-skd-act.danger{color:#e9b4a8;}
.tp-skd-act.danger:hover{border-color:#e9b4a8;}

/* État vide de la section (propriétaire uniquement) */
.tp-skempty{display:flex;align-items:center;justify-content:center;min-height:120px;color:#9a9a9a;font-size:13px;font-style:italic;border:1px dashed #E0D8C4;border-radius:var(--r-md);background:#FBF8F1;text-align:center;padding:0 16px;}

/* Modale d'une Skill Card : choix du métier (radio) + badges du métier choisi.
   La révélation est purement CSS (frère suivant d'un radio non coché masqué) :
   aucun JS n'est nécessaire pour ce formulaire. */
.tp-dialog .tp-skc-option{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 10px;border:1.5px solid rgba(0,0,0,.08);border-radius:11px;padding:11px 13px;margin-bottom:8px;}
.tp-dialog .tp-skc-option:has(input[type="radio"]:checked){border-color:var(--gold-primary);background:#FBF8F1;}
.tp-dialog .tp-skc-option input[type="radio"]{width:16px;height:16px;margin:0;padding:0;accent-color:var(--gold-primary);cursor:pointer;}
.tp-dialog .tp-skc-name{grid-column:2;margin:0;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:#1A1A1A;cursor:pointer;}
.tp-dialog .tp-skc-items{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}
.tp-dialog .tp-skc-option input[type="radio"]:not(:checked) ~ .tp-skc-items{display:none;}
.tp-dialog .tp-skc-item{display:inline-flex;align-items:center;gap:7px;margin:0;padding:5px 12px 5px 8px;border-radius:var(--r-pill);border:1px solid #E8DDC4;background:#fff;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:#4A443C;cursor:pointer;}
.tp-dialog .tp-skc-item:hover{border-color:var(--gold-primary);}
.tp-dialog .tp-skc-item input[type="checkbox"]{width:14px;height:14px;margin:0;padding:0;accent-color:var(--gold-primary);cursor:pointer;}
.tp-dialog.tp-dialog-sm{max-width:420px;}
.tp-dialog .tp-skc-confirm{margin:0;font-size:13px;line-height:1.5;color:#4A443C;}
.tp-btn-danger{background:#b91c1c;box-shadow:0 2px 10px rgba(185,28,28,.22);text-shadow:none;}
.tp-btn-danger:hover{background:#991b1b;}
.tp-dialog .tp-skc-errors:empty{display:none;}
.tp-dialog .tp-skc-errors{margin-top:10px;}
.tp-dialog .tp-skc-errors .tp-dialog-errmsg{padding:0;}

/* Visionneuse de document (image uploadée) */
.tp-docmodal{position:fixed;inset:0;z-index:140;display:none;}
.tp-docmodal.open{display:grid;place-items:center;}
.tp-docmodal-bd{position:absolute;inset:0;background:rgba(25,22,18,.5);backdrop-filter:blur(9px);animation:tpskfade .28s ease;}
.tp-docsheet{position:relative;width:min(580px,calc(100% - 28px));max-height:84vh;overflow:auto;border-radius:22px;background:#FFFDF9;box-shadow:0 36px 100px rgba(28,22,14,.35);animation:tpskin .4s cubic-bezier(.2,.8,.2,1);scrollbar-width:thin;}
.tp-docclose{position:absolute;top:15px;right:15px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.85);display:grid;place-items:center;cursor:pointer;font-size:16px;color:#4a443c;box-shadow:0 6px 16px rgba(62,45,20,.12);font-family:inherit;}
.tp-docband{position:relative;display:flex;align-items:center;gap:16px;padding:22px 60px 20px 26px;background:linear-gradient(105deg,#ffffff 0%,#FBF3E1 48%,var(--gold-200) 100%);}
.tp-dockicker{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep);}
.tp-dockicker svg{width:11px;height:11px;flex:none;}
.tp-docband h3{font-family:'Playfair Display',serif;font-weight:600;font-style:italic;font-size:24px;letter-spacing:-.2px;margin:7px 0 4px;color:#1A1A1A;}
.tp-docbody{padding:18px 26px 22px;}
.tp-docimg{width:100%;height:auto;border-radius:14px;border:1px solid rgba(122,95,42,.12);display:block;}

/* Lecteur vidéo (Mux) */
.tp-vidmodal{position:fixed;inset:0;z-index:150;display:none;}
.tp-vidmodal.open{display:grid;place-items:center;}
.tp-vidmodal-bd{position:absolute;inset:0;background:rgba(20,17,13,.62);backdrop-filter:blur(10px);animation:tpskfade .28s ease;}
.tp-vidsheet{position:relative;width:min(640px,calc(100% - 28px));border-radius:22px;overflow:hidden;background:#171410;box-shadow:0 40px 110px rgba(0,0,0,.5);animation:tpskin .4s cubic-bezier(.2,.8,.2,1);}
.tp-vidclose{position:absolute;top:13px;right:13px;z-index:4;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(23,20,16,.6);color:#fff;display:grid;place-items:center;cursor:pointer;font-size:16px;font-family:inherit;}
.tp-vidmount{aspect-ratio:16/9;background:#241f18;}
.tp-vidplayer{width:100%;height:100%;--controls:flex;}
.tp-vidbody{padding:14px 18px 6px;color:#E9DFCA;}
.tp-vidbody h4{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:17px;margin:0;}
.tp-vidfoot{padding:10px 0 12px;font-size:9.5px;color:#8f867a;line-height:1.5;margin:0;}

@media(max-width:900px){.tp-skgrid{grid-template-columns:repeat(2,1fr);}.tp-skcard.wide{grid-column:span 2;}}
@media(max-width:640px){.tp-skgrid{grid-template-columns:1fr;grid-auto-rows:auto;}.tp-skcard.wide,.tp-skcard.signature{grid-column:auto;grid-row:auto;}.tp-skinner{min-height:168px;}.tp-skdrawer-panel{inset:8px;width:auto;}.tp-skd-band{flex-direction:column;padding:22px 18px 16px;}.tp-skd-bandleft{max-width:100%;}.tp-skd-bandright{margin-left:0;flex-direction:row;align-items:center;padding-top:4px;}.tp-skd-badges{justify-content:flex-start;}.tp-skd-body{padding:14px;}.tp-skd-house{flex:1 1 100%;}.tp-skd-foot{flex-wrap:wrap;}}

/* Retour client 06/08 — tags des références (maquette : 1er doré, suivants neutres). */
.tp-ref-tag-gold{background:#fff4d7;color:var(--gold-deep);border:1px solid var(--gold-500);}
.tp-ref-tag{background:#f9f9f9;color:#242424;border:1px solid rgba(0,0,0,.08);}

/* Audit engagements IA 06/08, écart E1 — bloc « Mon CV » (sidebar profil).
   Dropzone d'import / remplacement + état « analyse en cours ». */
.tp-cv-pill{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);background:#fff4d7;border:1px solid var(--gold-500);border-radius:var(--r-pill);padding:3px 8px;}
.tp-cv-drop{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:16px 12px;border:1.5px dashed rgba(122,95,42,.35);border-radius:var(--r-md);background:#fcfaf5;cursor:pointer;transition:border-color .15s,background .15s;}
.tp-cv-drop:hover{border-color:var(--gold-500);background:#fff9ec;}
/* #2938 — le bandeau de flash en haut de page passait inapercu : au retour d'un
   import, la carte « Mon CV » porte elle-meme la confirmation, avec le nom du
   fichier qui vient d'etre analyse. */
.tp-cv-fresh{display:flex;align-items:center;gap:7px;margin-bottom:10px;padding:8px 10px;
  border-radius:var(--r-md);background:#EDF7F2;border:1px solid rgba(30,110,79,.22);
  color:#1E6E4F;font-size:12px;line-height:1.35;}
.tp-cv-fresh svg{flex-shrink:0;}
.tp-cv-fresh b{font-weight:700;}
.tp-cv-drop-title{font-size:12px;font-weight:600;color:#1A1A1A;line-height:1.35;}
.tp-cv-filename{font-size:12px;font-weight:600;color:var(--gold-deep);word-break:break-all;}
.tp-cv-status{font-size:11px;font-weight:600;color:var(--gold-deep);}
.tp-cv-formats{font-size:10px;color:#999;}
.tp-cv-actions{display:flex;gap:14px;margin-top:10px;}
.tp-cv-link{appearance:none;background:transparent;border:0;padding:0;font:inherit;font-size:11px;font-weight:600;color:var(--gold-deep);text-decoration:underline;cursor:pointer;}
.tp-cv-link[disabled]{color:#999;cursor:default;}
form.is-analyzing .tp-cv-drop,form.is-analyzing .tp-cv-actions{opacity:.6;pointer-events:none;}

/* ---- Vidéo d'une Skill Card (R19 + R20/AC20.1) : dépôt, remplacement, retrait
   depuis le drawer. Replié derrière un <details> pour ne pas alourdir la lecture
   de la preuve côté recruteur, qui n'en voit rien. ---- */
.tp-skd-vedit{margin-top:10px;}
.tp-skd-vedit>summary{cursor:pointer;list-style:none;font-size:11.5px;font-weight:700;color:var(--gold-600);padding:6px 0;}
.tp-skd-vedit>summary::-webkit-details-marker{display:none;}
.tp-skd-vedit>summary::before{content:"+";display:inline-block;width:13px;font-weight:800;}
.tp-skd-vedit[open]>summary::before{content:"–";}
.tp-skd-vdelete{margin-top:8px;border:1px solid var(--n-300);background:var(--n-0);border-radius:999px;padding:4px 13px;font-size:11.5px;color:var(--n-700);cursor:pointer;font-family:inherit;}
.tp-skd-vdelete:hover{border-color:#C24A4A;color:#A93636;}
.tp-skd-vunavailable{margin-top:10px;color:var(--gold-600);background:var(--gold-50);border:1px solid var(--gold-200);border-radius:10px;font-size:11.5px;line-height:1.45;padding:8px 12px;}

/* « À préciser pour renforcer la preuve » (retour Loïc 10/08) : ce qui manque à
   la carte, calculé sur ses propres données, visible du seul propriétaire. Le
   bloc disparaît quand la carte est complète. */
.tp-skd-todo-list{margin:0;padding-left:16px;list-style:disc;}
.tp-skd-todo-list li{font-size:11.5px;line-height:1.5;color:#6b6459;margin-bottom:3px;}

/* Références réordonnables (retour Loïc 10/08) : la poignée est la ligne entière,
   on signale juste qu'elle se saisit, et l'élément en cours de déplacement
   s'efface pour qu'on voie où il va tomber. */
.tp-sortable { cursor: grab; }
.tp-sortable:active { cursor: grabbing; }
.tp-sortable.is-dragging { opacity: .45; }
.tp-sortable:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: -2px; border-radius: 8px; }

/* Retour Loïc 11/08 — « je ne vois pas les boutons séparés ». Le bouton d'ajout
   par collection EXISTAIT dans le HTML mais n'avait AUCUN style : il tombait
   dans le flux sous la carte, comme un élément quelconque, au lieu d'être la
   pastille posée sur la vignette. Il devient un rond doré en haut à droite de
   sa carte, visible sans survol.
   Le lien qui ouvre la collection prend toute la carte : la pastille passe donc
   au-dessus. */
.tp-collection-card { position: relative; }
.tp-collection-open { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.tp-collection-add {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.55); background: rgba(20,18,16,.55); color: #fff;
  backdrop-filter: blur(2px);
}
.tp-collection-add:hover { background: var(--gold-fill); color: var(--on-gold); border-color: transparent; }
.tp-collection-add:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: 2px; }

/* Import de CV destructif (12/08) : le retour arriere doit etre visible sans
   crier plus fort que la confirmation. */
.tp-cv-undo{margin:8px 0 10px;font-size:11.5px;color:var(--n500,#8A857A);line-height:1.4;}
.tp-cv-undo-form{display:inline;margin:0;}
.tp-cv-undo .tp-cv-link{background:none;border:0;padding:0;cursor:pointer;font-size:11.5px;}

/* Épinglage d'une formation en tête — décision Tatianna 21/08 (#3221).
   Tout est scopé à #tp-education : « pin » est un mot court, et le pipeline
   Propshaft sert des dizaines de feuilles produit sur la même page, dont
   plusieurs redéclarent des classes de ce gabarit. */
#tp-education .tp-edu-pin-hint{margin:-6px 0 14px;font-size:12px;line-height:1.5;color:#8A8A8A;}
#tp-education .tp-pin-btn.is-pinned{border-color:var(--gold-primary);color:var(--gold-500);background:#FAF5EB;}
#tp-education .tp-edu-pinned{display:inline-flex;align-items:center;gap:4px;margin-bottom:5px;padding:3px 9px;border-radius:100px;background:var(--gold-fill);color:var(--on-gold);text-shadow:var(--on-gold-shadow);font-size:10px;font-weight:800;letter-spacing:.02em;line-height:1.3;}
#tp-education .tp-edu-pinned svg{width:10px;height:10px;flex:none;}
/* 390 px : trois boutons ronds de 32 px plus l'icône de 40 px ne laissaient
   plus assez de large au titre de la formation. Les actions passent sous le
   texte, en ligne, plutôt que de l'écraser. */
@media(max-width:430px){
  #tp-education .space-y-0 > div{flex-wrap:wrap;}
  #tp-education .tp-edu-actions{width:100%;justify-content:flex-end;padding-left:56px;}
}

/* ============================================================================
   INDEX DES COMPÉTENCES (#3222) — colonne gauche de la section Skill Cards,
   portée de la maquette cliente du 19/08 (`#skill-index`, `.skill-index-pills`,
   `#skill-index-more`, `.skill-pill`, `.skill-index-edit`).

   Toutes les règles sont préfixées `tp-skidx` : 66 feuilles produit sont servies
   sur la même page et plusieurs redéclarent des classes courtes sans portée, on
   ne compte jamais sur l'ordre de chargement.

   Aucune couleur en dur : jetons de design_tokens.css. La maquette écrit
   #fbf7ee pour le fond du panneau, c'est --gold-50 au caractère près.
   ============================================================================ */
.tp-sklayout{display:grid;grid-template-columns:224px minmax(0,1fr);gap:11px;align-items:start;}
.tp-sklayout .tp-skmosaic{min-width:0;}
.tp-skidx{display:flex;flex-direction:column;padding:16px 15px 12px;border:1px solid var(--gold-200);border-radius:var(--r-lg);background:var(--gold-50);}
.tp-skidx-head{display:flex;align-items:baseline;gap:8px;}
.tp-skidx-title{flex:1;min-width:0;color:var(--gold-deep);font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;}
.tp-skidx-count{color:var(--gold-600);font-size:11px;font-weight:800;}
.tp-skidx-edit{width:22px;height:22px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--n-200);border-radius:50%;background:var(--n-0);color:var(--gold-deep);cursor:pointer;padding:0;transition:border-color .15s,color .15s;}
.tp-skidx-edit:hover{border-color:var(--gold-300);}
.tp-skidx-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px;align-content:flex-start;}
.tp-skidx-pill{display:inline-flex;align-items:baseline;padding:6px 9px;border:1px solid var(--n-200);border-radius:var(--r-pill);background:var(--n-0);color:var(--n-700);font-size:11px;font-weight:700;line-height:1.2;}
.tp-skidx-empty{margin-top:13px;color:var(--n-500);font-size:12px;line-height:1.5;}
.tp-skidx-more{margin-top:12px;border-top:1px solid var(--n-200);}
.tp-skidx-more>summary{display:flex;align-items:center;gap:6px;padding:10px 2px 2px;color:var(--gold-deep);font-size:11px;font-weight:700;cursor:pointer;list-style:none;}
.tp-skidx-more>summary::-webkit-details-marker{display:none;}
.tp-skidx-more>summary:hover{color:var(--gold-600);}
.tp-skidx-more[open]>summary .tp-skidx-more-show{display:none;}
.tp-skidx-more:not([open])>summary .tp-skidx-more-hide{display:none;}
.tp-skidx-more[open]>summary .tp-skidx-more-chevron{transform:rotate(180deg);}
.tp-skidx-pills-rest{max-height:220px;overflow-y:auto;}

/* Modale de sélection : le référentiel compte 544 compétences, rangées en 17
   catégories repliées. `.tp-dialog label:not(.fp)` passe TOUS les labels de
   modale en petites capitales grises et `display:block`, et `.tp-dialog input`
   en 100 % de large : les deux règles cassent une pastille à cocher. On les
   reprend ici avec une spécificité supérieure plutôt qu'en comptant sur l'ordre
   du fichier. */
.tp-skidx-dialog{max-width:640px;}
.tp-skidx-hint{margin:0 0 14px;color:var(--n-500);font-size:12px;line-height:1.5;}
.tp-skidx-group{border-bottom:1px solid var(--n-200);}
.tp-skidx-group>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 2px;font-size:12px;font-weight:700;color:var(--n-900);cursor:pointer;list-style:none;}
.tp-skidx-group>summary::-webkit-details-marker{display:none;}
.tp-skidx-group>summary b{flex-shrink:0;color:var(--gold-600);font-size:11px;font-weight:800;}
.tp-skidx-opts{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 12px;}
.tp-dialog .tp-skidx-opts label.tp-skidx-opt{display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 10px;border:1px solid var(--n-200);border-radius:var(--r-pill);background:var(--n-0);color:var(--n-700);font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer;}
.tp-dialog .tp-skidx-opt:hover{border-color:var(--gold-300);}
.tp-dialog .tp-skidx-opt input[type="checkbox"]{width:13px;height:13px;flex-shrink:0;margin:0;padding:0;accent-color:var(--gold-500);cursor:pointer;}
.tp-dialog .tp-skidx-opt:has(input:checked){border-color:var(--gold-300);background:var(--gold-50);color:var(--gold-800);}

/* La maquette bascule en une colonne à 1060 px et renvoie l'index SOUS la
   mosaïque (`order:2`). À 390 px, tout tient dans la largeur : les pastilles
   passent à la ligne, rien ne déborde. */
@media(max-width:1060px){
  .tp-sklayout{grid-template-columns:1fr;}
  .tp-sklayout .tp-skidx{order:2;}
  .tp-skidx-pills-rest{max-height:none;}
}