/*
  Talent Explorer (R12) — migrated verbatim from the canonical mockup
  app/views/mockups/talent/explorer.html.erb (inline <style> block).
  Zero inline CSS: the view body carries only class hooks; dynamic values
  (photo background, gradients) go through data-attrs + Stimulus.
  Future-brick (Brick 3 AI search/match) annotations at the bottom.
*/

/* Reset the talent layout wrapper padding for the full-bleed explorer */
main:has(.te-page){max-width:none;padding:0;padding-top:90px;margin:0;background:#FBFBFB;}

/* === PAGE === */
/* Retour client 06/08 — le hero, les tabs, la barre de filtres et le quota
   consommaient une copie locale des jetons gold (--gold-fill, --gold-fill-deep,
   --gold-text-grad, --on-gold). Copie supprimée : ils viennent maintenant de
   design_tokens.css, qui porte les valeurs validées avec la cliente. */
.te-page{min-height:100vh;background:#FBFBFB;font-family:'Geist',system-ui,sans-serif;color:#000;overflow-x:hidden;}
.te-page ::-webkit-scrollbar{height:5px;width:5px;}
.te-page ::-webkit-scrollbar-thumb{background:#E3E3E3;border-radius:3px;}
.te-page button{cursor:pointer;border:none;background:none;font-family:inherit;}
.te-page a{text-decoration:none;color:inherit;}
.te-page textarea{font-family:inherit;}

/* === HERO === */
/* Retour client 06/08 — titre calé sur le mockup B3 (#2242) :
   34px / 600 / -.03em, italique en dégradé or (anti-crop inline-block). */
.te-hero{max-width:1200px;margin:0 auto;padding:48px 32px 24px;text-align:center;}
.te-hero-title{font-family:'Geist',system-ui,sans-serif;font-size:34px;font-weight:600;letter-spacing:-.03em;color:#1a1a1a;line-height:1.1;margin:0 0 8px;}
.te-hero-title i{font-style:italic;display:inline-block;padding-right:.14em;margin-right:-.14em;background:var(--gold-text-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:600;}
.te-hero-sub{font-size:13px;color:#6B6660;margin-bottom:18px;}
.te-hero-sub b{color:#1a1a1a;font-weight:700;}

/* === TABS / TOGGLE (mockup B3, #2242 : calé sur .ts-mode-toggle de talent_search) ===
   Préfixe .te-page : les .ts-mode-btn des autres feuilles (recruiter_talent_search,
   expert_opportunities) partagent la classe et écrasent sinon la couleur avec des
   variables --ts-* indéfinies ici. */
.te-tabs{display:inline-flex;gap:4px;background:#F4F2EE;border:none;border-radius:var(--r-pill);padding:4px;margin-bottom:14px;box-shadow:none;}
.te-page .te-tab{padding:9px 18px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:#8A857A;border:none;background:transparent;cursor:pointer;transition:all .18s;font-family:inherit;display:inline-flex;align-items:center;gap:7px;text-decoration:none;}
.te-page .te-tab svg{width:15px;height:15px;}
.te-page .te-tab:hover{color:var(--gold-700);}
.te-page .te-tab.active{color:var(--on-gold);font-weight:700;background:var(--gold-fill);box-shadow:0 2px 8px rgba(189,151,51,.30);text-shadow:var(--on-gold-shadow);}
.te-page .te-beta{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:6px;background:var(--gold-50);color:var(--gold-700);border:1px solid var(--gold-200);margin-left:2px;}
.te-page .te-tab.active .te-beta{background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.10);color:var(--gold-700);}

/* === FILTER BAR === */
/* #1611 : barre de recherche textuelle du hero (mockup, reprise du composant
   .ts-hero-search de recruiter/talent_search). */
.te-hero-search{display:flex;align-items:center;gap:8px;max-width:620px;margin:0 auto 18px;padding:6px 6px 6px 16px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--r-pill);box-shadow:0 2px 14px rgba(44,44,44,.06);transition:border-color .15s, box-shadow .15s;}
.te-hero-search:focus-within{border-color:var(--gold-200);box-shadow:0 4px 18px rgba(163,133,67,.14);}
.te-hero-search > svg{width:17px;height:17px;color:#8A857A;flex-shrink:0;}
.te-hero-search input[type="search"]{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:13.5px;color:#1a1a1a;padding:9px 0;}
.te-hero-search input[type="search"]::placeholder{color:#8A857A;}
.te-hero-search input[type="submit"]{flex-shrink:0;height:36px;padding:0 20px;border:none;border-radius:var(--r-pill);background:var(--gold-fill);color:var(--on-gold);text-shadow:var(--on-gold-shadow);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(163,133,67,.28);transition:filter .15s;}
.te-hero-search input[type="submit"]:hover{filter:brightness(1.04);}
/* Retour client 06/08 — barre unifiée du mockup B3 (#2242/#2243) : pilule
   blanche unique, 7 facettes séparées par des filets, reset rond transparent,
   loupe dorée. */
.te-filter-bar{display:flex;align-items:center;gap:2px;padding:7px;max-width:1180px;margin:0 auto;background:#fff;border:1px solid #E8E2D6;border-radius:var(--r-xl);box-shadow:0 3px 18px rgba(44,44,44,.05);}
.te-sf-wrap{flex:1;position:relative;min-width:0;}
.te-sf-divider{width:1px;height:26px;background:#E8E2D6;flex-shrink:0;}
.te-sf{width:100%;display:block;position:relative;text-align:left;padding:8px 26px 8px 13px;border-radius:14px;border:none;background:transparent;cursor:pointer;transition:background .15s;user-select:none;min-width:0;}
.te-sf:hover,.te-sf.filled{background:var(--gold-50);}
/* Bug #1610 — z-index élevé : .te-sf.open crée le stacking context qui contient
   le dropdown (.te-sf-drop) ; il doit dépasser les cartes (z-index descendants
   ≤ 5, contextes de hover), sinon le menu passe DERRIÈRE les cards. */
.te-sf.open{background:var(--gold-50);z-index:100;}
/* Bug #1610 (suite) — les animations te-fadeUp (fill:both) posent un stacking
   context sur le hero ET sur la grille de cards ; la grille, plus tard dans le
   DOM, repasse au-dessus du menu. Quand un menu est ouvert, on élève le bloc
   qui le contient au-dessus de la grille. */
.te-hero:has(.te-sf.open),.te-results-header:has(.te-sf.open){position:relative;z-index:100;}
.te-sf.disabled{opacity:.5;cursor:not-allowed;}
/* #1974 : libellé (icône + intitulé) sur le dessus, valeur en dessous. */
.te-sf-name{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
/* #2379 : intitulés de recherche en or (icône + texte) */
.te-sf-ico{width:11px;height:11px;color:var(--gold-500);opacity:.9;flex-shrink:0;}
/* inline-block + padding : anti-crop de la dernière lettre sous background-clip:text */
/* Retour Loïc 10/08 — « la police est un peu petite par rapport à la maquette
   sur les titres des filtres ». La maquette porte une taille PROPRE sur le
   libellé (11.5px), l'app le laissait hériter des 9px de .te-sf-name. */
.te-sf-label{font-size:11.5px;line-height:1.3;flex:1 1 0;min-width:0;display:inline-block;padding-right:.12em;margin-right:-.12em;background:var(--gold-text-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.te-sf-value{display:block;margin-top:2px;font-size:13px;color:#1E1C18;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.te-sf.filled .te-sf-value{color:var(--gold-600);}
.te-sf-arr{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:12px;height:12px;color:#8A857A;opacity:.55;pointer-events:none;transition:transform .18s ease;}
.te-sf.open .te-sf-arr{transform:translateY(-50%) rotate(180deg);opacity:.9;}
.te-sf-drop{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:200px;max-width:300px;background:#fff;border:1px solid #E8E2D6;border-radius:14px;padding:6px;box-shadow:0 12px 32px rgba(44,44,44,.14);z-index:50;max-height:320px;overflow-y:auto;animation:teMenuIn .14s ease;}
.te-sf.open .te-sf-drop{display:block;}
@keyframes teMenuIn{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}
.te-sf-o{padding:9px 12px;border-radius:var(--r-sm);font-size:12px;font-weight:600;color:#1a1a1a;cursor:pointer;transition:all .15s;text-align:left;display:flex;align-items:center;text-decoration:none;}
.te-sf-o:hover{background:#FBF4E2;color:var(--gold-600);}
.te-sf-o.sel{background:linear-gradient(135deg,rgba(248,226,122,.25),rgba(237,202,80,.18));color:var(--gold-700);font-weight:800;}
.te-sf-o.sel::after{content:"\2713";float:right;color:var(--gold-primary);font-weight:900;margin-left:auto;padding-left:8px;}
.te-sf-o-clear{color:#A09A94;font-weight:600;}
/* #2242 : reset/recherche calés sur talent_search (reset rond transparent, loupe dorée) */
.te-page .te-reset-btn{width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:#8A857A;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;text-decoration:none;}
.te-page .te-reset-btn:hover{color:var(--gold-700);background:#F4F2EE;}
.te-page .te-search-btn{width:46px;height:46px;border-radius:50%;border:none;flex-shrink:0;background:var(--gold-fill);color:var(--on-gold);text-shadow:var(--on-gold-shadow);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 10px rgba(163,133,67,.30);transition:filter .15s;}
.te-page .te-search-btn:hover{filter:brightness(1.04);}

/* === AI PANEL (Brick 3) === */
/* B2 (R14/AC14.1) — conteneur du panneau Auguste partagé (shared/ai_search_panel,
   styles dans ai_search.css) : même gabarit centré que le panneau du mockup. */
.te-ai-wrap{max-width:760px;margin:0 auto;text-align:left;}
.te-ai-panel{max-width:760px;margin:0 auto;background:linear-gradient(180deg,#fff,#FBF8F2);border:1.5px solid rgba(184,145,42,.2);border-radius:18px;padding:22px 24px;text-align:left;box-shadow:0 8px 32px rgba(184,145,42,.08);display:none;}
.te-ai-panel.visible{display:block;}
.te-ai-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.te-ai-ico{width:42px;height:42px;border-radius:var(--r-md);background:var(--gold-fill);display:flex;align-items:center;justify-content:center;color:#fff; text-shadow: var(--on-gold-shadow);font-size:20px;font-weight:700;box-shadow:0 4px 14px rgba(184,145,42,.35);}
.te-ai-lbl{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--gold-600);text-transform:uppercase;}
.te-ai-sub{font-size:13px;color:#6B6660;margin-top:2px;}
.te-ai-quicks-label{font-size:9px;font-weight:800;letter-spacing:.14em;color:#A09A94;text-transform:uppercase;margin-bottom:8px;}
.te-ai-quicks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.te-ai-quick{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:100px;border:1.5px solid rgba(0,0,0,.08);background:#fff;font-size:11.5px;font-weight:600;color:#1a1a1a;cursor:pointer;transition:all .2s;font-family:inherit;}
.te-ai-quick:hover{border-color:var(--gold-primary);background:#FBF4E2;color:var(--gold-600);transform:translateY(-1px);box-shadow:0 2px 10px rgba(184,145,42,.15);}
.te-ai-input-wrap{display:flex;gap:8px;align-items:flex-start;}
.te-ai-input{flex:1;padding:13px 14px;border:1.5px solid rgba(0,0,0,.08);border-radius:var(--r-md);background:#fff;font-size:13px;font-family:inherit;color:#1a1a1a;line-height:1.5;resize:none;outline:none;transition:all .2s;min-height:60px;}
.te-ai-input::placeholder{color:#A09A94;font-style:italic;}
.te-ai-input:focus{border-color:var(--gold-primary);background:#FBF8F2;box-shadow:0 0 0 3px rgba(184,145,42,.08);}
.te-ai-launch{flex-shrink:0;height:60px;padding:0 22px;border:none;border-radius:var(--r-md);font-size:13px;font-weight:800;font-family:inherit;cursor:pointer;background:var(--gold-fill);color:#fff;box-shadow:0 4px 14px rgba(184,145,42,.35);transition:all .2s;text-shadow:0 1px 2px rgba(0,0,0,.15);}
.te-ai-launch:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(184,145,42,.45);}

/* === MAIN CONTENT === */
.te-main{max-width:1380px;margin:0 auto;padding:24px 32px 60px;}
.te-results-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.te-results-count{font-size:13px;font-weight:700;white-space:nowrap;flex-shrink:0;}
.te-results-count span{color:var(--gold-400);}
.te-sort-select{border:1px solid rgba(0,0,0,.08);border-radius:var(--r-sm);padding:5px 10px;font-size:11px;font-weight:600;background:#fff;cursor:pointer;outline:none;}
/* Tri figé (un seul ordre) : on affiche la valeur, sans affordance de menu. */
.te-sort-static{display:inline-flex;align-items:center;color:#1a1a1a;cursor:default;white-space:nowrap;}
/* R16/AC16.3 — la facette « qualité de match » (mode IA) vit dans le header de
   résultats, hors barre : elle garde le pattern te-sf mais en chip autonome. */
.te-match-facet{width:auto;flex-shrink:0;min-width:170px;background:#fff;border:1px solid #E8E2D6;border-radius:14px;}

/* === CARDS GRID === */
.te-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;}
.te-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:#9A948C;font-size:14px;}
.te-empty-reset{color:var(--gold-400);font-weight:700;}

/* === OPPORTUNITY CARD === */
.te-opp-card{background:#fff;border-radius:14px;border:1px solid rgba(0,0,0,.05);box-shadow:0 2px 14px rgba(0,0,0,.05);overflow:hidden;transition:all .3s;display:flex;flex-direction:column;position:relative;}
.te-opp-card:hover{box-shadow:0 8px 30px rgba(0,0,0,.1);transform:translateY(-3px);}
.te-opp-link{position:absolute;inset:0;z-index:1;}
.te-opp-card>*:not(.te-opp-link){position:relative;z-index:2;}
.te-opp-actions,.te-opp-actions *{position:relative;z-index:3;}
.te-opp-preview{position:relative;z-index:3;}

/* PHOTO */
.te-opp-photo{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:14px 14px 0 0;}
.te-opp-photo-img{position:absolute;inset:0;background-size:cover;background-position:center;}
/* B2 (R14/AC14.1) — languette de match Grille de Match, du mockup (#1908) :
   collée à droite, tranchée, à cheval sur la couture photo / fiche. Overflow
   visible seulement quand la languette est là (mode IA) ; le clipping des
   angles passe alors sur l'image (#1908), et la 1ère rangée de la fiche
   descend pour dégager la languette (#1961). */
.te-opp-mtab{position:absolute;right:0;bottom:0;transform:translateY(50%);z-index:6;display:inline-flex;border-radius:999px 0 0 999px;overflow:hidden;box-shadow:0 3px 12px rgba(30,28,24,.20);}
.te-opp-mtab .tsm-badge{border-radius:999px 0 0 999px;border-right:none;padding-right:11px;}
.te-opp-photo:has(.te-opp-mtab){overflow:visible;}
.te-opp-photo:has(.te-opp-mtab) .te-opp-photo-img{border-radius:14px 14px 0 0;}
.te-opp-card:has(.te-opp-mtab) .te-opp-info{padding-top:22px;}
.te-opp-photo-grad{position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);pointer-events:none;}
.te-opp-estab-type{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:4px;border-radius:var(--r-pill);padding:4px 9px 4px 8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;z-index:5;box-shadow:0 2px 6px rgba(0,0,0,.18);}
.te-opp-photo-badges{position:absolute;top:8px;right:8px;display:flex;gap:5px;z-index:5;}
.te-opp-photo-badge{font-size:7.5px;font-weight:800;padding:2px 7px;border-radius:100px;backdrop-filter:blur(8px);letter-spacing:.4px;}
.te-opp-photo-badge.featured{background:rgba(184,151,90,.92);color:#fff;}
.te-opp-photo-badge.urgent{background:rgba(211,47,47,.9);color:#fff;}
.te-opp-roletag{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:#fff;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:6px;font-family:'Geist',system-ui,sans-serif;font-style:italic;z-index:4;}

/* INFO */
.te-opp-info{padding:10px 12px 0;flex:1;display:flex;flex-direction:column;}
.te-opp-name-row{display:flex;align-items:center;gap:8px;}
.te-opp-name-block{display:flex;align-items:center;gap:5px;flex:1;min-width:0;}
.te-opp-name{font-family:'Geist',system-ui,sans-serif;font-size:15px;font-weight:700;color:#18140C;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.te-opp-check{flex-shrink:0;}
.te-opp-logo{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:rgba(255,255,255,.9);flex-shrink:0;}
.te-opp-role{font-size:11.5px;font-weight:600;color:var(--gold-300);margin-top:1px;}
.te-opp-status{display:flex;align-items:center;gap:9px;margin-top:5px;font-size:10.5px;color:#6B6560;flex-wrap:wrap;}
.te-opp-status-item{display:flex;align-items:center;gap:4px;}
.te-opp-dot-green{width:6px;height:6px;border-radius:50%;background:#2E7D32;}
.te-opp-michelin{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:100px;background:#C0392B;text-transform:uppercase;letter-spacing:.3px;}
.te-opp-michelin svg,.te-opp-michelin img{width:9px;height:9px;}
.te-opp-michelin b{font-weight:800;color:#fff;font-size:9px;}
.te-opp-currently{margin-top:4px;font-size:11px;}
.te-opp-currently .te-opp-salary{color:var(--gold-600);font-weight:700;}
.te-opp-section-lbl{font-size:8.5px;font-weight:700;letter-spacing:1px;color:#A09890;text-transform:uppercase;margin:8px 0 4px;}
.te-opp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.te-opp-thumb{aspect-ratio:1.4;border-radius:6px;background-size:cover;background-position:center;border:1px solid rgba(0,0,0,.06);transition:all .15s;}
.te-opp-thumb.active{border:1.5px solid var(--gold-300);box-shadow:0 0 0 2px rgba(201,165,74,.15);}
.te-opp-thumb:hover{transform:scale(1.04);}
.te-opp-conds{display:flex;gap:5px;flex-wrap:wrap;}
.te-opp-cond{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--gold-700);background:linear-gradient(180deg,#FBF4DC,var(--gold-200));border:1px solid rgba(184,151,90,.32);padding:2px 7px 2px 6px;border-radius:var(--r-pill);line-height:1;}
.te-opp-cond svg{color:var(--gold-500);flex-shrink:0;}
.te-opp-creds{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap;}
.te-opp-cred{font-size:9.5px;font-weight:500;color:#6B6560;padding:2px 7px;border:1px solid rgba(0,0,0,.08);border-radius:4px;}
/* Bug #1609 — margin-top:auto pousse la zone CTA ("Aperçu rapide") en bas de la
   carte (flex column) : les CTA s'alignent quel que soit le remplissage. */
.te-page .te-opp-preview{margin-top:auto;width:100%;padding:8px 12px;border-radius:var(--r-sm);border:1px solid var(--gold-300);background:linear-gradient(135deg,rgba(201,165,74,.10),rgba(232,204,110,.05));color:var(--gold-700);font-size:11.5px;font-weight:700;letter-spacing:.3px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;transition:all .15s;text-decoration:none;}
.te-page .te-opp-preview:hover{filter:brightness(1.03);border-color:var(--gold-primary);}

/* ACTIONS */
.te-opp-actions{padding:8px 12px 12px;display:flex;gap:8px;align-items:stretch;}
/* button_to wraps the toggle in a <form>; make it behave like a flex child */
.te-opp-actions turbo-frame{flex:1;display:flex;}
.te-opp-actions form{flex:1;margin:0;display:flex;}
.te-opp-shortlist{flex:1;padding:9px 0;border-radius:var(--r-sm);border:1.5px solid rgba(201,165,74,.45);background:#fff;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-size:11.5px;font-weight:700;letter-spacing:.3px;color:var(--gold-deep);font-family:inherit;transition:all .15s;text-transform:uppercase;}
.te-opp-shortlist:hover{background:linear-gradient(135deg,rgba(201,165,74,.10),rgba(232,204,110,.05));border-color:var(--gold-300);}
.te-opp-shortlist.saved{background:linear-gradient(135deg,rgba(201,165,74,.18),rgba(232,204,110,.10));border-color:var(--gold-300);color:var(--gold-700);}
.te-opp-shortlist svg{flex-shrink:0;}
.te-page .te-opp-apply{flex:1;padding:9px 0;border-radius:var(--r-sm);border:none;background:var(--gold-fill);color:var(--on-gold);text-shadow:var(--on-gold-shadow);font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all .2s;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;}
.te-opp-apply:hover{filter:brightness(1.05);}
/* #2870 — « CANDIDATURE ENVOYÉE » (19 caractères) tombait sur deux lignes : la
   moitié de la rangée d'actions ne fait que 129 px à la largeur mini de carte
   (colonne de 290 px). Corps et interlettrage resserrés pour ce seul état, le
   libellé tient alors sur une ligne (122,9 px mesurés) et les deux boutons
   gardent la même largeur. */
.te-page .te-opp-apply-sent{filter:grayscale(.2);opacity:.85;white-space:nowrap;font-size:10px;letter-spacing:.2px;}

/* === FOOTER === */
.te-footer{text-align:center;padding:40px 32px 24px;font-size:10px;color:#ccc;letter-spacing:1px;}
.te-footer b{color:var(--gold-400);}

/* === ANIMATIONS === */
@keyframes te-fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.te-anim-1{animation:te-fadeUp .5s ease .05s both;}
.te-anim-2{animation:te-fadeUp .5s ease .15s both;}
.te-anim-3{animation:te-fadeUp .5s ease .25s both;}

/* === FUTURE-BRICK (Brick 3 — AI search + match score) === */
.te-future{position:relative;filter:grayscale(.9);opacity:.55;pointer-events:none;}
.te-future-badge{position:absolute;top:10px;right:12px;z-index:6;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;}
.te-tab.te-future-tab{position:relative;filter:grayscale(.8);opacity:.6;}

/* === RESPONSIVE === */
/* #2243 : sur grand écran les 7 filtres tiennent sur une ligne ; en dessous
   de 1180px la barre passe en plusieurs lignes (comme talent_search). */
@media (max-width:1180px){
  .te-filter-bar{flex-wrap:wrap;border-radius:18px;}
  .te-sf-divider{display:none;}
  .te-sf-wrap{flex:1 1 30%;}
}
@media (max-width:760px){
  .te-hero{padding:28px 16px 16px;}
  .te-hero-title{font-size:26px;}
  .te-hero-search{flex-wrap:wrap;border-radius:18px;}
  .te-sf-wrap{flex:1 1 45%;}
  .te-sf-drop{min-width:100%;}
  .te-main{padding:20px 16px 40px;}
  .te-cards-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .te-ai-input-wrap{flex-direction:column;}
  .te-ai-launch{width:100%;height:48px;}
}
@media (max-width:480px){
  .te-cards-grid{grid-template-columns:1fr;}
}

/* =====================================================
 * QUICK PREVIEW SIDE DRAWER (te-ov-*) — ported from the explorer mockup.
 * Loaded into a Turbo frame; bound to a real JobPosition + establishment.
 * ===================================================== */
.te-ov-bd{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(20,18,15,.45);backdrop-filter:blur(5px);z-index:200;display:none;}
.te-ov-bd.open{display:block;}
.te-ov-sl{position:fixed;top:0;right:-560px;width:520px;max-width:94vw;height:100vh;background:#fff;z-index:201;transition:right .35s cubic-bezier(.22,1,.36,1);overflow-y:auto;box-shadow:-12px 0 50px rgba(0,0,0,.18);display:flex;flex-direction:column;}
.te-ov-sl.open{right:0;}
.te-ov-sl turbo-frame{display:flex;flex-direction:column;flex:1;min-height:0;}

.te-ov-topbar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:10px;padding:11px 18px;background:#fff;border-bottom:1px solid rgba(0,0,0,.06);}
.te-ov-topbar-label{display:flex;align-items:center;gap:8px;font-size:9px;font-weight:700;letter-spacing:1.4px;color:#8a8378;text-transform:uppercase;}
.te-ov-topbar-label b{color:var(--gold-400);letter-spacing:1.4px;}
.te-ov-topbar-sep{color:#d4cfc6;}
.te-ov-topbar-dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--gold-200),var(--gold-primary));box-shadow:0 0 0 3px rgba(184,151,90,.12);}
.te-ov-topbar-counter{margin-left:auto;font-size:11px;font-weight:700;color:#1a1a1a;font-variant-numeric:tabular-nums;padding:4px 10px;border-radius:100px;background:#FAF7F0;border:1px solid rgba(184,151,90,.18);}
.te-ov-topbar-close{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid rgba(0,0,0,.08);background:#fff;color:#666;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0;line-height:1;}
.te-ov-topbar-close:hover{background:#1a1a1a;color:var(--gold-200);border-color:#1a1a1a;}

.te-page .te-ov-nav{position:fixed;top:50%;transform:translateY(-50%) scale(.85);width:46px;height:46px;border-radius:50%;background:#fff;color:#1a1a1a;border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 24px rgba(0,0,0,.22),0 1px 3px rgba(0,0,0,.08);z-index:202;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.22,1,.36,1);padding:0;text-decoration:none;}
body.te-ov-open .te-ov-nav{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1);}
.te-page .te-ov-nav:hover{background:linear-gradient(135deg,#1a1a1a,#2C2A26);color:var(--gold-200);border-color:#1a1a1a;transform:translateY(-50%) scale(1.08);}
/* Retour Loïc 10/08 — « la flèche pour parcourir les opportunités à droite est
   mal placée par rapport à la maquette ». La maquette pose les deux flèches
   côte à côte, centrées verticalement, au bord gauche du volet (prev 538px,
   next 456px). Mais son next à 456px tombe DANS le volet de 520px, sur le
   texte : c'est exactement ce dont le client se plaignait en #1612, et qui
   avait fait déplacer la flèche au bord droit.
   On garde donc la paire côte à côte de la maquette, mais entièrement HORS du
   volet : les deux retours sont tenus. */
.te-page .te-ov-nav-prev{right:calc(520px + 18px + 46px + 10px);}
/* Retour client #1612 : la flèche "suivant" chevauchait le contenu du panneau
   (elle était 64px À L'INTÉRIEUR du bord gauche du volet de 520px, sur le texte).
   Déplacée sur le bord droit du volet pour ne pas gêner la lecture. */
.te-page .te-ov-nav-next{right:calc(520px + 18px);background:linear-gradient(135deg,var(--gold-200),var(--gold-300),var(--gold-primary));color:var(--on-gold);text-shadow:var(--on-gold-shadow);border-color:rgba(184,145,42,.45);box-shadow:0 8px 24px rgba(184,145,42,.35);}
.te-page .te-ov-nav-next:hover{background:#1a1a1a;color:var(--gold-200);}

.te-ov-hero{position:relative;height:200px;overflow:hidden;flex-shrink:0;}
.te-ov-hero-bg{width:100%;height:100%;background-size:cover;background-position:center;position:relative;}
/* Maison sans photo (ni couverture ni galerie) : aplat sombre neutre, aucune
   image d'emprunt. Le titre reste lisible par-dessus. */
.te-ov-hero-bg-empty{background:linear-gradient(135deg,#1A1614,#2C2A26);}
.te-ov-hero-bg::after{content:'';position:absolute;bottom:0;left:0;right:0;height:75%;background:linear-gradient(0deg,rgba(0,0,0,.88),transparent);}
.te-ov-hc{position:absolute;bottom:18px;left:22px;right:22px;z-index:4;}
.te-ov-e{font-family:'Geist',system-ui,sans-serif;font-size:21px;font-weight:700;color:#fff;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.4);}
.te-ov-r{font-size:12px;font-weight:700;color:var(--gold-200);margin-top:3px;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.4);}

.te-ov-body{padding:0;flex:1;}
.te-ov-sec{padding:18px 22px;border-bottom:1px solid rgba(0,0,0,.04);position:relative;}
.te-ov-sec:last-child{border-bottom:none;}
.te-ov-st{font-size:8px;font-weight:800;letter-spacing:1.5px;color:var(--gold-400);text-transform:uppercase;margin-bottom:8px;}
.te-ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.te-ov-d{display:flex;align-items:center;gap:5px;font-size:10px;color:#555;font-weight:500;}
.te-ov-d span{flex-shrink:0;}
.te-ov-sal-block{margin-top:14px;padding-top:12px;border-top:1px solid rgba(0,0,0,.04);}
.te-ov-sal-lbl{font-size:8px;font-weight:800;letter-spacing:1.5px;color:var(--gold-400);text-transform:uppercase;margin-bottom:6px;}
.te-ov-sal{font-size:18px;font-weight:800;}
.te-ov-sal span{font-size:11px;font-weight:500;color:#999;}
.te-ov-desc{font-size:11px;color:#555;line-height:1.7;}
.te-ov-tags{display:flex;flex-wrap:wrap;gap:4px;}
.te-ov-tag{font-size:8px;font-weight:600;padding:3px 9px;border-radius:100px;background:#FAFAFA;border:1px solid rgba(0,0,0,.05);color:#777;}

.te-ov-gallery{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.te-ov-gallery::-webkit-scrollbar{height:3px;}
.te-ov-gallery-img{width:140px;height:95px;border-radius:10px;flex-shrink:0;scroll-snap-align:start;border:1.5px solid rgba(0,0,0,.04);background-size:cover;background-position:center;}

.te-ov-team-grid{display:flex;gap:8px;flex-wrap:wrap;}
.te-ov-team-member{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:#FAFAFA;border:1px solid rgba(0,0,0,.04);flex:0 0 auto;min-width:170px;}
.te-ov-tm-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;color:var(--gold-primary);background:linear-gradient(135deg,#1a1a1a,#333);}
.te-ov-tm-name{font-size:10px;font-weight:700;color:#1a1a1a;}
.te-ov-tm-role{font-size:8px;color:#999;}
.te-ov-team-invite{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:rgba(184,151,90,.03);border:1.5px dashed rgba(184,151,90,.25);min-width:140px;}
.te-ov-ti-icon{width:32px;height:32px;border-radius:50%;border:2px dashed rgba(184,151,90,.3);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--gold-400);flex-shrink:0;}
.te-ov-ti-text{font-size:10px;font-weight:700;color:var(--gold-400);}
.te-ov-ti-sub{font-size:8px;color:#ccc;}
.te-page .te-ov-team-cta{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:var(--r-sm);font-size:10px;font-weight:700;color:var(--gold-400);cursor:pointer;transition:all .15s;margin-top:8px;width:100%;background:none;border:none;font-family:inherit;text-decoration:none;}
.te-page .te-ov-team-cta:hover{background:rgba(184,151,90,.04);}

.te-ov-compat-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.te-ov-compat-track{flex:1;height:6px;background:rgba(0,0,0,.04);border-radius:3px;overflow:hidden;}
.te-ov-compat-fill{height:100%;border-radius:3px;}
.te-ov-compat-pct{font-size:16px;font-weight:800;}
/* B2 (AC14.6) — section active depuis un résultat IA : barre remplie du mockup
   (dégradé bleu), badge Grille de Match à droite (même score que la card). */
.te-ov-compat-on{background:#FAFAFA;}
.te-ov-compat-on .te-ov-compat-bar{margin-bottom:0;}
/* Audit engagements IA 06/08, ecart E4 : explication du match sous la barre. */
.te-ov-compat-why{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--n-700);}
.te-ov-compat-why b{color:#1E1C18;font-weight:700;margin-right:4px;}
.te-ov-compat-fill-on{background:linear-gradient(90deg,#1565C0,#42A5F5);}

.te-ov-actions{position:sticky;bottom:0;padding:14px 22px;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-top:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;gap:8px;}
.te-ov-actions-row{display:flex;gap:8px;width:100%;}
.te-page .te-btn-gold{padding:12px;border-radius:var(--r-sm);font-size:12px;font-weight:800;color:var(--on-gold);text-shadow:var(--on-gold-shadow);background:var(--gold-fill);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 3px 10px rgba(150,120,62,.2);transition:all .2s;text-align:center;position:relative;overflow:hidden;white-space:nowrap;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;letter-spacing:.5px;}
.te-page .te-btn-gold:hover{background:linear-gradient(180deg,#000,#1a1a1a);color:var(--gold-primary);}
.te-page .te-btn-outline{padding:12px 18px;border-radius:var(--r-sm);font-size:11px;font-weight:700;color:#1a1a1a;background:#fff;border:1px solid rgba(0,0,0,.1);transition:all .2s;cursor:pointer;font-family:inherit;}
.te-page .te-btn-outline:hover{border-color:var(--gold-400);color:var(--gold-400);}
.te-page .te-btn-estab{width:100%;padding:11px 14px;border-radius:9999px;background:#fff;border:1.5px solid rgba(184,151,90,.35);color:var(--gold-500);font-weight:600;font-size:12px;letter-spacing:.3px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;}
.te-page .te-btn-estab:hover{border-color:var(--gold-300);background:#FBF8F2;}
/* button_to wraps in a form: keep the row layout intact */
.te-ov-actions-row form{flex:1;display:flex;}
.te-ov-actions-row form .te-btn-gold{flex:1;}
.te-ov-actions-row form:first-child{flex:0 0 auto;}

@media (max-width:760px){
  .te-ov-sl{width:100%;right:-100%;}
  .te-page .te-ov-nav{top:auto;bottom:84px;transform:none;}
  body.te-ov-open .te-page .te-ov-nav{transform:none;}
  .te-page .te-ov-nav-prev{left:14px;right:auto;}
  .te-page .te-ov-nav-next{right:14px;}
}

/* R14/AC14.6 — apercu enrichi, quota, carte chef : regles completes du mockup. */
/* === QUOTA (20 candidatures / semaine) ===
   Retour client 06/08 (#2378) — pilule compacte du mockup B3, placée à droite
   du header de résultats (avec le tri), texte « 12 candidatures restantes ».
   La carte complète reste sur « Mes candidatures ». */
.te-results-header-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.te-quota {
    display:inline-flex; align-items:center; gap:7px;
    background:var(--gold-50); border:1px solid var(--gold-200);
    border-radius:var(--r-pill); padding:6px 13px; line-height:1;
    box-shadow:0 2px 10px rgba(163,133,67,.10);
    position:relative; z-index:30;
  }
.te-quota-num { font-size:14px; font-weight:800; color:var(--gold-600); line-height:1; letter-spacing:-.01em; }
.te-quota-label { font-size:12px; font-weight:700; color:#1E1C18; white-space:nowrap; }
/* icone d'aide + infobulle */
  .te-quota-help { position:relative; display:inline-flex; }
.te-quota-help-btn {
    width:19px; height:19px; border-radius:var(--r-pill);
    border:1.5px solid rgba(163,133,67,.5); color:var(--gold-500);
    background:transparent; cursor:pointer;
    font-family:inherit; font-size:11px; font-weight:700; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .18s ease, color .18s ease;
  }
.te-quota-help:hover .te-quota-help-btn,
  .te-quota-help-btn:focus-visible { border-color:var(--gold-600); color:var(--gold-600); outline:none; }
.te-quota-tip {
    position:absolute; top:calc(100% + 10px); right:-6px; left:auto;
    width:290px; background:#2C2C2C; color:#fff;
    font-size:13px; font-weight:400; line-height:1.5;
    padding:14px 16px; border-radius:14px; text-align:left;
    opacity:0; visibility:hidden; transform:translateY(-4px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:40; box-shadow:0 12px 32px rgba(44,44,44,.22);
  }
.te-quota-tip::before {
    content:""; position:absolute; bottom:100%; right:14px;
    border:7px solid transparent; border-bottom-color:#2C2C2C;
  }
.te-quota-help:hover .te-quota-tip,
  .te-quota-help-btn:focus-visible + .te-quota-tip {
    opacity:1; visibility:visible; transform:translateY(0);
  }
.te-ov-sal { font-size:18px; font-weight:800; }
.te-ov-sal span { font-size:11px; font-weight:500; color:#999; }
/* Chef card */
  .te-ov-chef-card { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; border-radius:var(--r-md); background:#FAFAFA; border:1px solid rgba(0,0,0,.04); transition:all .2s; }
.te-ov-chef-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.05); border-color:rgba(184,151,90,.2); }
.te-ov-chef-av { width:48px; height:48px; border-radius:50%; border:2.5px solid var(--gold-400); display:flex; align-items:center; justify-content:center; font-family:'Geist',system-ui,sans-serif; font-size:16px; font-weight:700; color:var(--gold-primary); background:linear-gradient(135deg,#1a1a1a,#333); flex-shrink:0; }
.te-ov-chef-info { flex:1; min-width:0; }
.te-ov-chef-name { font-size:13px; font-weight:700; color:#1a1a1a; }
.te-ov-chef-title { font-size:10px; color:var(--gold-400); font-weight:600; margin-top:1px; }
.te-ov-chef-sub { font-size:9px; color:#999; margin-top:2px; }
.te-ov-chef-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.te-ov-chef-tag { font-size:8px; font-weight:800; letter-spacing:.4px; padding:3px 8px; border-radius:100px; text-transform:uppercase; }
.te-ov-chef-tag.ambassador { background:var(--gold-fill); color:var(--on-gold); text-shadow:var(--on-gold-shadow); border:1px solid rgba(196,165,89,.4); }
.te-ov-chef-tag.verified { background:rgba(46,125,50,.08); color:#2E7D32; border:1px solid rgba(46,125,50,.2); }
.te-ov-chef-connect { align-self:center; flex-shrink:0; font-size:11px; font-weight:700; letter-spacing:.3px; padding:8px 14px; border-radius:100px; cursor:pointer; transition:all .2s; background:var(--gold-fill); color:var(--on-gold); text-shadow:var(--on-gold-shadow); border:1px solid rgba(196,165,89,.4); box-shadow:0 2px 8px rgba(196,165,89,.18); font-family:inherit; }
.te-ov-chef-connect:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(196,165,89,.32); }
/* Chef name/avatar as buttons (reset .te-page button) */
  .te-page .te-ov-chef-av { cursor:pointer; padding:0; }
.te-page .te-ov-chef-name-btn { background:none; border:none; padding:0; cursor:pointer; font-family:inherit; text-align:left; }
.te-page .te-ov-chef-name-btn:hover { color:var(--gold-600); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(196,165,89,.5); }
/* Salary range slider */
  .te-ov-sal-block { margin-top:14px; padding-top:12px; border-top:1px solid rgba(0,0,0,.04); }
.te-ov-sal-lbl { font-size:8px; font-weight:800; letter-spacing:1.5px; color:var(--gold-400); text-transform:uppercase; margin-bottom:6px; }
.te-ov-sal-track { position:relative; height:8px; background:rgba(0,0,0,.04); border-radius:4px; margin-top:8px; overflow:visible; }
.te-ov-sal-fill { position:absolute; top:0; height:100%; background:linear-gradient(90deg,var(--gold-primary),var(--gold-400)); border-radius:4px; }
.te-ov-sal-dot { position:absolute; top:-3px; width:14px; height:14px; border-radius:50%; background:#fff; border:2.5px solid var(--gold-400); box-shadow:0 2px 6px rgba(0,0,0,.15); transform:translateX(-50%); }
.te-ov-sal-scale { display:flex; justify-content:space-between; margin-top:6px; font-size:9px; color:#999; font-weight:600; }
.te-ov-tm-name .te-v-check { font-size:8px; color:#2E7D32; }
.te-ov-compat-cards { display:flex; gap:8px; }
.te-ov-compat-card { flex:1; display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; background:#fff; border:1.5px solid rgba(0,0,0,.06); cursor:pointer; transition:all .2s; }
.te-ov-compat-card.gold { border-color:rgba(184,151,90,.15); }
.te-ov-compat-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.06); }
.te-ov-cc-icon { font-size:16px; flex-shrink:0; }
.te-ov-cc-title { font-size:10px; font-weight:700; color:#1a1a1a; }
.te-ov-cc-title.gold { color:var(--gold-400); }
.te-ov-cc-sub { font-size:8px; color:#ccc; }

/* Aplat neutre quand la Maison n'a ni couverture ni galerie (retour Loïc 07/08).
   Même dégradé que .te-ov-hero-bg-empty et .tes-card-photo-empty : on ne montre
   rien plutôt que le décor d'un autre établissement. */
.te-opp-photo-empty{background:linear-gradient(135deg,#1A1614,#2C2A26);}

/* Retour Loïc 10/08 — « le tooltip [candidatures restantes] apparaît en dessous
   des cartes opportunité donc illisible ».
   La bande de résultats porte une animation d'entrée, donc un `transform`, donc
   un CONTEXTE D'EMPILEMENT : le z-index:40 du tooltip ne valait qu'à
   l'intérieur de cette bande, et la bande elle-même (z-index auto) se dessinait
   avant la grille de cartes, qui est positionnée. Le tooltip passait dessous
   quel que soit son propre z-index. On donne son rang à la bande. */
.te-page .te-results-header { position: relative; z-index: 60; }