/*
  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); }
/* #4657 (08/10) — chiffre clé libre : un texte ordinaire aux bornes (12 + 24
   caractères) tient sur une ligne même à 390 px (mesuré : 343 px de ligne).
   Seul un libellé hors du commun (24 capitales) dépasserait : il passe alors
   à la ligne DANS l'écran, le chiffre ne se coupe jamais. */
.est-hero-stats [data-key-figure] { min-width: 0; max-width: 100%; }
.est-hero-stats [data-key-figure] > span:first-child { flex-shrink: 0; }
.est-hero-stats [data-key-figure] > span:last-child { min-width: 0; overflow-wrap: anywhere; }

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

/* B3 tâche 009 — AC21.7. Les marqueurs de typologie et de nature.
   Asymétrie VOULUE entre les deux référentiels (note Private / Hospitality
   v1.2 du 09/09, bloc 04) : côté Hospitality la COULEUR porte le niveau, côté
   Private la couleur porte la famille (même aubergine pour les quatre natures,
   Yachting aligné dessus par l'arbitrage WhatsApp du 09/09) et c'est l'ICÔNE
   qui porte la nature. Deux marqueurs au maximum : la borne est dans le helper,
   pas ici. */
.est-hbadges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.est-hbadge-ico { width: 12px; height: 12px; flex-shrink: 0; }

.est-hbadge--verified { background: rgba(20,16,10,.55); border: 1px solid var(--gold-300); color: var(--gold-200); }
.est-hbadge--michelin { background: #C0392B; border: 1px solid #C0392B; color: #fff; }

/* Hospitality — la couleur dit le niveau. Les dorés passent par les jetons :
   la note parle de « noir/or », « doré », « sable », pas d'hexadécimaux, et le
   garde-fou du design system refuse une dixième variante du même or. */
.est-hbadge--palace { background: #111; border: 1px solid var(--gold-primary); color: var(--gold-primary); }
.est-hbadge--hotel-5 { background: var(--gold-fill); border: 1px solid var(--gold-300); color: var(--on-gold); text-shadow: var(--on-gold-shadow); }
.est-hbadge--hotel-4 { background: var(--gold-200); border: 1px solid var(--gold-300); color: #2A2118; }
.est-hbadge--restaurant-starred { background: #6E1B2A; border: 1px solid #6E1B2A; color: #fff; }
.est-hbadge--restaurant-gastronomic { background: #2F5D45; border: 1px solid #2F5D45; color: #fff; }

/* Private — même fond aubergine pour les quatre natures, seule l'icône change. */
.est-hbadge--private-household,
.est-hbadge--yachting,
.est-hbadge--villa,
.est-hbadge--chalet { background: #220A38; border: 1px solid #220A38; color: #fff; }

/* #4846 : le type déclaré pas encore contrôlé, vu par la Maison seule, sur sa
   fiche en édition. Même couleur que le marqueur, trait en pointillé et
   mention « en vérification » en casse normale. */
.est-hbadge.est-hbadge--pending { border-style: dashed; }
.est-hbadge-pending { text-transform: none; letter-spacing: 0; font-weight: 600; opacity: .85; }

/* 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); }
/* #4368 — note d'édition sous l'accroche de « Rejoindre cette maison ». */
.est-cta-auto { margin: -8px 0 16px; font-size: 12px; line-height: 1.5; color: var(--n-500); }
/* #4369 / #4367 — aide sous un champ des fenêtres d'édition de la fiche. */
.tp-dialog .tp-fg-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--n-500); }
.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); }
/* Bouton secondaire de la carte « Rejoindre cette maison » (Candidature spontanée). */
.est-cta-secondary {
  border: 1px solid rgba(0,0,0,.10); color: #383838; background: #fff;
  position: relative; cursor: not-allowed; opacity: .55;
}

.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. */
/* #4277 (Tatianna 01/10) — sans photo, le hero est expresso et non plus noir ;
   le voile prévu pour une photo ne l'assombrit plus. Toujours aucune photo
   par défaut : une image qui n'est pas celle de la Maison serait fausse. */
.est-hero-empty { background: var(--espresso-fill); }
.est-hero-empty ~ .est-hero-scrim { display: none; }
.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; }

/* #4276 (Tatianna 01/10) — carte d'extraction de la colonne de droite, valeurs
   de la maquette (`mockups/recruiter/establishment`, `.re-compl-*`). */
.est-xc { background: #fff; border: 1px solid #ede6d6; padding: 22px 20px; }
.est-xc-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.est-xc-lbl { font-size: 13px; font-weight: 600; color: var(--ink, #1a1614); }
.est-xc-pct { font-size: 13px; font-weight: 700; color: var(--gold-600); white-space: nowrap; }
.est-xc-track { height: 9px; background: #f0e9d8; border-radius: 99px; overflow: hidden; margin: 14px 0 10px; border: 1px solid rgba(163, 133, 67, .14); }
.est-xc-fill { height: 100%; background: linear-gradient(90deg, var(--gold-400), var(--gold-500)); border-radius: 99px; }
.est-xc-state { font-size: 12.5px; line-height: 1.5; color: #5c564b; margin: -4px 0 12px; }
.est-xc-st { display: inline-block; margin-right: 4px; font-weight: 700; color: var(--gold-600); }
.est-xc-st--failed { color: #a73a2a; }
.est-xc-st--applied { color: #2d7a4f; }
.est-xc-sub { font-size: 13px; line-height: 1.55; color: #7c766b; margin: 0 0 14px; }
.est-xc-ia { width: 100%; display: flex; align-items: center; gap: 10px; background: #f9f5ec; border: 1px solid #e6dcc4; border-radius: 10px; padding: 10px 12px; text-decoration: none; transition: .15s; }
.est-xc-ia:hover { border-color: var(--gold-400); box-shadow: 0 3px 12px rgba(163, 133, 67, .12); }
.est-xc-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--gold-fill); color: var(--on-gold); text-shadow: var(--on-gold-shadow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.est-xc-ia b { font-size: 13px; color: var(--ink, #1a1614); font-weight: 600; }
/* #4848 : « Valider » et « Relancer l'analyse » côte à côte, à parts égales. */
.est-xc-acts.is-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.est-xc-acts.is-split .est-xc-ia { padding: 9px 10px; gap: 8px; min-height: 44px; }
.est-xc-acts.is-split .est-xc-ic { width: 24px; height: 24px; }
.est-xc-acts.is-split .est-xc-ia b { font-size: 12.5px; line-height: 1.25; }
.est-xc-acts .se-relaunch-form { margin: 0; display: flex; }
.est-xc-relaunch { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px; border-radius: 10px; border: 1px solid #e6dcc4; background: var(--n-0, #fff); color: var(--ink, #1a1614); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.25; cursor: pointer; transition: .15s; text-align: left; }
.est-xc-relaunch:hover { border-color: var(--gold-400); color: var(--gold-600); }
.est-xc-relaunch svg { flex-shrink: 0; color: var(--gold-500); }