/*
  Talent · Establishment public page (R5) — migrated from the canonical mockup
  app/views/mockups/talent/establishment.html.erb (inline <style> + scattered
  inline style= attributes). Zero inline CSS: every literal style= value below
  is a semantic class here. Tailwind utilities still carry the layout/spacing;
  these classes carry colors/gradients/borders the mockup hardcoded inline.
  Dynamic per-record values (cover/avatar/video URLs) ride on data-attrs or img
  src (justified dynamic). Source de vérité graphique : Figma 08/04/26.
*/

/* Full-bleed: on neutralise le gutter horizontal du conteneur applicatif
   (max-w-7xl + px-*) ET le padding vertical, pour que le hero atteigne les bords
   du viewport et passe SOUS la navbar flottante (effet immersif, comme la
   maquette et les pages profil). Le contenu se recentre via ses propres
   conteneurs (max-w-[1312px] mx-auto).
   NB : l'ancienne approche `margin: calc(50% - 50vw)` ne fonctionnait pas car
   `.est-page { width: 100% }` empêchait l'élément de s'élargir → hero collé à
   gauche. */
main:has(.est-page) { max-width: none; padding: 0; }
.est-page, .est-page--bleed { width: 100%; margin-left: 0; margin-right: 0; }

.est-root { background: #FFFFFF; }

/* ── Échelle typographique unique (retour client 06/08 — la maquette B3 la
   normalise via #1861 : mêmes tailles pour toute la page, quel que soit le
   contexte hérité). ── */
.est-page .text-body-lg { font-size: 13.5px; line-height: 1.55; }
.est-page .text-body-md { font-size: 12.5px; line-height: 1.5; }
.est-page .text-body-sm { font-size: 11px; line-height: 1.45; }
.est-page .text-title-lg { font-size: 17px; line-height: 1.3; }

.est-playfair { font-family: 'Playfair Display', serif; }
/* Explicit centering for the modal <dialog> (showModal); native centering was
   unreliable (pinned top-left). No transformed ancestor → fixed = viewport. */
.est-video-dialog { border: none; position: fixed; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }

/* ── Section heads → editorial (Playfair gold title). Retour client 06/08 :
   les surtitres « 01 · … » (.est-eyebrow) n'existent pas sur la maquette
   (elle les masque) → supprimés ; tailles alignées sur son rendu final. ── */
.est-sec-head { display: block; margin-bottom: 16px; }
.est-sec-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 800; line-height: 1.15;
  letter-spacing: -0.3px; color: var(--gold-500);
}

/* ── Hero ── */
.est-hero-scrim {
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.3) 50%, rgba(0,0,0,.1));
}
.est-logo-frame { border: 2px solid rgba(255,255,255,.2); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.est-hero-rule { background: rgba(255,255,255,.2); }

.est-badge-glass {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
}
.est-badge-outline { border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(4px); }

/* Marqueurs du héros (retour client 06/08 — même gabarit .est-hbadge que la
   maquette #1860 : la couleur seule varie). */
.est-hbadge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; padding: 4px 11px; border-radius: 9999px;
  white-space: nowrap; line-height: 1.2;
}
.est-hbadge-glass { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(6px); }
.est-hbadge-michelin { background: #C0392B; border: 1px solid #C0392B; color: #fff; }
.est-hbadge-gold {
  background: var(--gold-fill);
  border: 1px solid var(--gold-300); color: #fff; text-shadow: 0 1px 2px rgba(60,44,10,.45);
}

/* Michelin chip (red pill) — reused across hero, restaurant card, team, etc. */
.est-michelin {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 100px;
  background: #C0392B; color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; vertical-align: middle;
}
.est-michelin--lg {
  padding: 6px 11px; border-radius: 9999px; font-size: 11px; gap: 4px;
}

/* Hero carousel control cluster (retour client 06/08 — pastille bas-droite de
   la maquette : flèches or --gold-fill + points, point actif or élargi). */
.est-carousel { background: rgba(255,255,255,.75); backdrop-filter: blur(4px); }
.est-carousel-btn {
  background: var(--gold-fill);
  color: #fff; text-shadow: 0 1px 2px rgba(60,44,10,.45);
  border: none; cursor: pointer;
}
.est-hero-dot {
  width: 10px; height: 10px; border-radius: 9999px; background: #d4d4d4;
  border: none; padding: 0; cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.est-hero-dot.is-active { width: 28px; background: var(--gold-500); }

/* ── Tab bar ── */
.est-tabbar { background: #FFFFFF; }
.est-tabs-shell { background: #FFFFFF; border: 1px solid rgba(0,0,0,.06); }
.est-tab--active { background: linear-gradient(328deg, rgb(66,45,5) 25%, rgb(33,23,0) 87%); }
.est-tab-count { color: var(--gold-500); }
/* La pilule d'onglets ne se replie pas : a 390px elle mesure 509px pour 342px
   utiles et, centree, elle debordait des deux cotes (la page entiere partait a
   droite). Sous 640px elle defile au doigt et s'aligne a gauche, les onglets
   gardent leur taille de cible tactile. */
@media (max-width: 640px) {
  .est-tabs-row { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .est-tabs-row::-webkit-scrollbar { display: none; }
}

/* ── Vision / quote ── */
.est-play {
  background: rgba(255,255,255,.3); backdrop-filter: blur(4px);
  transition: background .15s;
}
.est-play:hover { background: rgba(255,255,255,.4); }
.est-quote-card { border: 1px solid #E5E5E5; }
.est-quote-text { font-family: 'Playfair Display', serif; }
.est-quote-attr { color: var(--gold-500); }

/* ── À propos / spa / hotel : chips descriptives (retour client 06/08 —
   même hauteur et même typo que la maquette, .est-chip). ── */
.est-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-sm);
  background: #fff; border: 1px solid rgba(0,0,0,.09); color: #1a1a1a;
}
.est-chip svg { color: var(--gold-500); flex-shrink: 0; }

/* ── Restaurant card ── */
.est-card { border: 1px solid rgba(0,0,0,.04); }
.est-card-michelin-overlay { box-shadow: 0 2px 8px rgba(0,0,0,.25); border-radius: 100px; }
.est-chef-bar {
  border: 1px solid rgba(201,165,74,.35);
  background: rgba(201,165,74,.16);
}
.est-chef-avatar { border: 2px solid var(--brand-gold-200, var(--gold-200)); }

/* ── Award badge (Meilleur Spa / Relais & Châteaux) — pastille de distinction
   posée à côté d'un titre, même gabarit que la maquette (.est-pill). ── */
.est-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 9999px;
  white-space: nowrap;
  background: rgba(184,151,90,.10); border: 1px solid rgba(184,151,90,.35);
  color: var(--gold-600);
}
.est-room-card { border: 1px solid #E5E5E5; }

/* « Voir les X autres espaces » — <details> stylé comme le bouton toggle de la
   maquette (.est-toggle-more), caret qui pivote à l'ouverture. */
.est-zone-more > summary {
  list-style: none; display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%; padding: 12px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid rgba(0,0,0,.06); background: #FAFAFA;
  font-weight: 700; color: #1a1a1a; transition: background .15s;
}
.est-zone-more > summary:hover { background: #F5F5F5; }
.est-zone-more > summary::-webkit-details-marker { display: none; }
.est-more-caret { transition: transform .2s; }
.est-zone-more[open] > summary .est-more-caret { transform: rotate(180deg); }

/* ── Team cards ── */
.est-team-card { border: 1px solid rgba(0,0,0,.03); background: #FAFAFA; }
.est-team-role { color: var(--gold-primary); }
.est-team-actions { border-top: 1px solid rgba(0,0,0,.06); }
/* Suivre / Connecter — design du mockup, grisés (réseau = Brique 4). */
.est-team-btn-follow { border: 1px solid var(--gold-500); color: var(--gold-500); background: transparent; }
.est-team-btn-connect { color: var(--on-gold); text-shadow: 0 1px 1px rgba(0,0,0,.15); background: var(--gold-fill); }
.est-team-btn-follow[disabled], .est-team-btn-connect[disabled] { opacity: .5; cursor: not-allowed; }
.est-btn-follow { border: 1px solid var(--gold-500); color: var(--gold-500); background: transparent; }
.est-btn-follow:hover { background: rgba(163,133,67,.06); }
.est-btn-connect {
  background: var(--gold-fill);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.15);
}

/* ── Open positions ── */
.est-pos-card { border: 1px solid #E5E5E5; background: #fff; }
.est-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 9999px;
  white-space: nowrap;
}
.est-status-green { background: rgba(27,122,78,.08); border: 1px solid rgba(27,122,78,.35); color: var(--green); }
.est-status-orange { background: rgba(217,119,6,.10); border: 1px solid rgba(217,119,6,.40); color: #C2700A; }
.est-status-gold { background: rgba(184,151,90,.10); border: 1px solid rgba(184,151,90,.35); color: var(--gold-600); }
.est-pos-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--gold-500);
  white-space: nowrap; transition: color .15s;
}
.est-pos-link:hover { color: var(--gold-600); }

/* ── Sidebar ── */
.est-cta-card {
  background: linear-gradient(160deg, #FBF1D6 0%, var(--gold-100) 100%);
  border: 1px solid rgba(184,151,90,.25);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.est-cta-pattern { opacity: .45; mix-blend-mode: multiply; }
.est-cta-lead { color: var(--gold-700); }
.est-cta-primary {
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-300) 40%, var(--gold-200) 70%, var(--gold-300) 100%);
  color: #fff; border: none; cursor: pointer; transition: filter .15s;
}
.est-cta-primary:hover { filter: brightness(1.05); }
/* Contacter l'établissement — Brique 3 (visible, grayed, non-functional). */
.est-cta-secondary {
  border: 1px solid rgba(0,0,0,.10); color: #383838; background: #fff;
  position: relative; cursor: not-allowed; opacity: .55;
}
.est-brique-tag {
  display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: var(--gold-500);
}

.est-info-card { background: #fffdfa; border: 1px solid #f8f4ed; }
.est-info-icon { color: var(--gold-500); }
.est-info-label { color: #6b7280; }
.est-info-value { color: #1a1a1a; }
.est-info-value--link { color: #2563EB; text-decoration: underline; }

.est-distinction-card { background: #fffdfa; border: 1px solid #f8f4ed; }
.est-distinction {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 9999px;
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  background: rgba(229,212,160,.3); color: #8B7355; border: 1px solid var(--gold-200);
}

/* ── Hors Brique 1 : blocs grisés + badge « À venir » (la vraie data vit
   ailleurs ; ces sections n'ont pas encore de modèle). ── */
.est-soon { filter: grayscale(.9); opacity: .5; pointer-events: none; }
.est-soon-badge {
  display: inline-flex; align-items: center; margin-left: 10px; vertical-align: middle;
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: #1C1A17; color: var(--gold-200); border: 1px solid rgba(196,165,89,.35);
}

/* Avatar équipe en initiales (pas de photo d'inconnu). Dégradés de repli dans
   la charte (ors et neutres), déterministes par nom via .est-team-grad-N. */
.est-team-initials { color: #fff; font-family: 'Playfair Display', serif; font-weight: 800; }
.est-team-initials > span { font-size: 30px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.est-team-grad-0 { background-image: linear-gradient(135deg, var(--gold-600), var(--gold-primary)); }
.est-team-grad-1 { background-image: linear-gradient(135deg, var(--gold-primary), var(--gold-200)); }
.est-team-grad-2 { background-image: linear-gradient(135deg, #2B2A27, #6B675F); }
.est-team-grad-3 { background-image: linear-gradient(135deg, var(--gold-400), var(--gold-600)); }

/* ══ GALERIE — carrousel (points + flèches) ══ */
.est-gallery-dot { width: 8px; height: 6px; border-radius: 9999px; background: rgba(255,255,255,.4); transition: width .3s ease, background .3s ease; }
.est-gallery-dot.is-active { width: 32px; background: #fff; }
.est-gallery-arrow { width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,.2); backdrop-filter: blur(4px); transition: background .15s; }
.est-gallery-arrow:hover { background: rgba(255,255,255,.3); }
/* Audit couverture 07/08 — la légende d'une photo du carrousel est désormais
   modifiable, elle doit donc aussi se voir sur la diapo. */
.est-gallery-caption { margin: 0; padding: 5px 12px; border-radius: 9999px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); }

/* ═══════════════════════════════════════════════════════════════
   R3 — Édition inline « Mon établissement » (crayons + dialogs).
   Bloc porté depuis talent_profile.css (mêmes classes tp-* ; la page
   établissement ne charge pas talent_profile.css → aucune collision).
═══════════════════════════════════════════════════════════════ */
.est-sec-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}

.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;}

.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);}

.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;}
.tp-btn-save{padding:10px 24px;border-radius:9px;font-size:12px;font-weight:700;color:var(--on-gold); 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;}
.tp-del-btn:hover{border-color:#b91c1c;color:#b91c1c;background:#fef2f2;}
form.button_to{margin:0;display:inline;}
/* #3282 — distinctions structurées : sélecteur d'étoiles, cases à cocher de la
   liste fermée, aide sous chaque champ. `.tp-dialog label:not(.fp)` rend tout
   <label> bloc et en petites capitales : la case à cocher a besoin de reprendre
   une ligne normale, d'où la surcharge ciblée. */
.est-dlabels{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 14px;margin-top:2px;}
.tp-dialog label.est-dlab{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:#3a3a3a;cursor:pointer;line-height:1.3;}
.tp-dialog label.est-dlab input[type="checkbox"]{width:auto;flex:0 0 auto;margin:0;accent-color:var(--gold-primary);cursor:pointer;}
.tp-dialog label.est-dlab:hover{color:#1a1a1a;}
.est-dhint{margin:7px 0 0;font-size:11.5px;line-height:1.45;color:#8a8377;}

/* R3 — dialog vidéo (Mux) */
.est-video-edit-frame{position:relative;width:100%;aspect-ratio:16/9;background:#1a1a1a;border-radius:var(--r-md);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.est-video-edit-player{width:100%;height:100%;--controls:flex;}
.est-video-edit-ph{width:46px;height:46px;color:rgba(255,255,255,.5);}
.est-video-edit-frame.is-loading .est-video-edit-ph,.est-video-edit-frame.is-loading mux-player{opacity:.25;}
/* Le bloc d'upload commun (.vu) remplace le bouton + le texte de statut maison. */
.est-video-edit-actions{margin-top:14px;}
.est-video-unavailable{margin-top:14px;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;}
.hidden{display:none;}

/* Audit de véracité 07/08 — repli sans image inventée : bannière en aplat
   neutre, logo remplacé par les initiales de la maison. */
.est-hero-empty { background: linear-gradient(135deg, #1A1614, #2C2A26); }
.est-logo-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #0D0D0D; color: var(--gold-primary); font-family: 'Geist', system-ui, sans-serif; font-weight: 700; font-size: 24px; letter-spacing: 1px; }

/* Invite affichée au propriétaire quand la section « Notre Vision » est vide.
   Une section vide est masquée pour tout le monde (règle #1605) : sans cette
   invite, le recruteur ne pouvait pas deviner qu'il avait trois textes à
   écrire. Elle n'apparaît QUE sur sa propre fiche. */
.est-empty-invite {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 12px;
  border: 1px dashed var(--gold-300); background: transparent;
}
.est-empty-invite:hover { border-color: var(--gold-500); background: rgba(196, 165, 89, .05); }
.est-empty-invite-title { display: block; font-weight: 700; font-size: 13.5px; color: var(--gold-600); }
.est-empty-invite-sub { display: block; margin-top: 3px; font-size: 12.5px; color: #6b6459; }