/* Fiche établissement — mise en page, colonne de droite et fenêtres.

   #4552 à #4557 (Tatianna 06/10, GO Colin 06/10). Source qui fait foi :
   `Etablissement_recruteur_edition_complet.html` (Drive
   1ulcm_Fzne3fPW6TR3PP592AlBce4dA8o). Ses valeurs sont reprises en JETONS
   (design_tokens.css) : aucune couleur écrite en dur dans cette feuille.

   Correspondances retenues (maquette → jeton) :
     --gold #A38543       → --gold-500       --gold-deep #8C7233 → --gold-600
     --gold-tint-2 #FBF6EC → --gold-50       --gold-tint #F3EBD7 → --gold-100
     --ink-2 #4A463F      → --n-700          --ink-soft #8A857C  → --n-500
     --line #ECE6DB       → --n-warm-100     champ #FCFAF6       → --n-warm-50
     --green #2D7A4F      → --green          fermeture #F3F0E9   → --n-100

   Tailles : celles de la maquette, remontées quand elles passaient sous 11 px
   (même règle que les écrans transcrits de la B3). Chargée par
   talent/establishments/show après establishment.css. */

/* ══ Mise en page ══ */
.est-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.est-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 28px; padding-bottom: 64px; }
.est-main { min-width: 0; }
.est-main > * + * { margin-top: 38px; }
.est-rail { min-width: 0; }
.est-rail > * + * { margin-top: 20px; }
@media (min-width: 744px) {
  .est-wrap { padding: 0 30px; }
}
/* #4556 — deux colonnes jusqu'à 900 px (la maquette n'en descend jamais). */
@media (min-width: 900px) {
  .est-cols { grid-template-columns: minmax(0, 1fr) 340px; padding-top: 30px; padding-bottom: 70px; }
  .est-rail { position: relative; }
}

/* ══ Bandeau ══ */
.est-hero { height: 500px; }
@media (min-width: 744px) { .est-hero { height: clamp(460px, 42vw, 660px); } }
.est-hero-inner { position: relative; max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 16px; }
@media (min-width: 744px) { .est-hero-inner { padding: 0 30px; } }
/* La barre de navigation de l'application est FIXE (top 24 px, ~52 px de
   haut) : les commandes du haut du bandeau se placent dessous. */
.est-hero-tools { position: absolute; top: 92px; left: 16px; right: 92px; display: flex; flex-wrap: wrap; gap: 8px; z-index: 3; }
@media (min-width: 744px) { .est-hero-tools { left: 30px; right: 130px; } }
.est-cover-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--r-pill);
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--n-0); cursor: pointer;
  background: color-mix(in srgb, var(--n-warm-700) 72%, transparent); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .28);
}
.est-cover-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.est-cover-btn:hover { background: color-mix(in srgb, var(--n-warm-700) 88%, transparent); }
/* #4656 (07/10) : coin haut droit : « Modifier les photos » puis la vignette. */
.est-hero-corner { position: absolute; top: 92px; right: 16px; z-index: 3; display: flex; align-items: center; gap: 12px; }
@media (min-width: 744px) { .est-hero-corner { right: 30px; } }
.est-hero-thumb {
  position: relative; flex-shrink: 0; width: 64px; height: 64px; border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 4px 16px rgba(0, 0, 0, .35); background: var(--n-warm-700);
}
@media (min-width: 744px) { .est-hero-thumb { width: 76px; height: 76px; } }
@media (max-width: 480px) {
  .est-photos-btn { padding: 10px; }
  .est-photos-btn .est-photos-btn-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.est-hero-thumb > img, .est-hero-thumb > .est-logo-initials { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.est-thumb-edit, .est-ov-edit {
  display: flex; align-items: center; justify-content: center; border-radius: var(--r-pill); cursor: pointer; padding: 0;
}
.est-thumb-edit {
  position: absolute; right: -8px; bottom: -8px; width: 26px; height: 26px; z-index: 4;
  background: var(--n-0); color: var(--gold-600); border: 1px solid color-mix(in srgb, var(--gold-500) 28%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.est-thumb-edit svg { width: 13px; height: 13px; }
.est-hero-content { position: absolute; left: 16px; right: 16px; bottom: 64px; color: var(--n-0); }
@media (min-width: 744px) { .est-hero-content { left: 30px; right: 30px; bottom: 34px; } }
.est-hero-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.est-hero-badges .est-hbadges { margin: 0; }
.est-ov-edit {
  width: 32px; height: 32px; color: var(--n-0);
  background: color-mix(in srgb, var(--n-warm-700) 50%, transparent); border: 1px solid rgba(255, 255, 255, .3);
}
.est-ov-edit svg, .est-cover-btn svg { max-width: 22px; max-height: 22px; }
.est-ov-edit svg { width: 15px; height: 15px; }
.est-hero-carousel { position: absolute; right: 16px; bottom: 16px; z-index: 3; }
@media (min-width: 744px) { .est-hero-carousel { right: 30px; bottom: 34px; } }

/* ══ Sections de la colonne principale ══ */
.est-page .est-sec-head { margin-bottom: 0; }
.est-page .est-sec-head-row { align-items: center; margin-bottom: 16px; }
.est-page .est-sec-title { font-size: 20px; font-weight: 700; letter-spacing: -.2px; color: var(--gold-600); }
.est-prose { margin: 0; font-size: 14px; line-height: 1.65; color: var(--n-700); }
.est-tagline { margin: 0 0 12px; font-family: 'Playfair Display', serif; font-style: italic; font-size: 16px; color: var(--ink); }
.est-about-part { margin-top: 18px; }
.est-about-h { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.est-markers { display: flex; flex-wrap: wrap; gap: 9px; }
.est-markers--about { margin-top: 18px; }
.est-marker {
  display: inline-flex; align-items: center; padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--n-warm-100); font-size: 12px; font-weight: 600; color: var(--ink);
}
.est-empty-line { margin: 0; font-size: 13px; color: var(--n-500); }

/* Notre Vision */
.est-vision { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 600px) { .est-vision--media { grid-template-columns: 300px minmax(0, 1fr); gap: 22px; } }
.est-vision-media {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; cursor: pointer;
  border-radius: 14px; overflow: hidden; background: var(--gold-100);
}
div.est-vision-media { cursor: default; }
.est-vision-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.est-vision-play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); color: var(--gold-600);
}
.est-vision-play svg { width: 22px; height: 22px; margin-left: 3px; }
.est-vision-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.est-vision-sub { margin: 4px 0 14px; font-size: 13px; color: var(--n-500); }
.est-vision-desc { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--n-700); }
.est-quote { margin: 0; padding: 8px 0 8px 16px; border-left: 2px solid var(--gold-500); }
.est-quote .est-quote-text { margin: 0; font-family: 'Playfair Display', serif; font-style: italic; font-size: 15px; line-height: 1.55; color: var(--n-700); }
.est-quote .est-quote-attr { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--gold-600); }

/* Espaces */
.est-zones > .est-zone-group + .est-zone-group { margin-top: 38px; }

/* L'équipe en place (#4552) */
.est-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.est-tm { border: 1px solid var(--n-warm-100); border-radius: 14px; overflow: hidden; background: var(--n-0); }
.est-tm-img { position: relative; height: 130px; background: var(--gold-100); overflow: hidden; }
.est-tm-img > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.est-tm-av {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 22px; color: var(--gold-600); background: var(--gold-100);
}
.est-tm-mich { position: absolute; top: 8px; left: 8px; }
.est-tm-act { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.est-tm-act form { margin: 0; }
.est-tm-i {
  width: 28px; height: 28px; padding: 0; border-radius: var(--r-pill); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--n-warm-100); color: var(--n-700);
}
.est-tm-i svg { width: 13px; height: 13px; }
.est-tm-i:hover { color: var(--gold-600); }
.est-tm-del:hover { color: var(--red); }
.est-tm-body { padding: 14px 15px; }
.est-tm-n { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.est-tm-r { margin: 2px 0 8px; font-size: 12px; font-weight: 600; color: var(--gold-600); }
.est-tm-d { margin: 0; font-size: 12px; line-height: 1.5; color: var(--n-500); }

/* Postes ouverts */
.est-postes > * + * { margin-top: 14px; }
.est-page .est-pos-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px;
  background: var(--n-0); border: 1px solid var(--n-warm-100); border-radius: 14px; text-decoration: none;
}
.est-pos-h { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.est-pos-t { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.est-pos-sub { margin: 5px 0 0; font-size: 13px; color: var(--n-500); }
.est-page .est-pos-link { font-size: 13px; font-weight: 600; color: var(--gold-600); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.est-btn-publish {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--on-gold); text-shadow: var(--on-gold-shadow); text-decoration: none;
  background: var(--gold-fill-deep); box-shadow: 0 2px 8px color-mix(in srgb, var(--gold-500) 25%, transparent);
}
.est-btn-publish svg { width: 14px; height: 14px; }

/* ══ Colonne de droite ══ */
.est-rail-card { position: relative; overflow: hidden; padding: 22px; border-radius: 18px; background: var(--n-0); border: 1px solid var(--n-warm-100); }
.est-rail-card--tint {
  background: linear-gradient(180deg, var(--n-warm-50), var(--gold-50));
  border-color: color-mix(in srgb, var(--gold-500) 18%, transparent);
}
.est-rail .est-xc { border-radius: 18px; }
.est-rail-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.est-rail-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }

/* Rejoindre cette maison */
.est-rail .est-cta-card { border-color: color-mix(in srgb, var(--gold-500) 28%, transparent); }
.est-join-h { margin-bottom: 8px; }
.est-rail .est-cta-lead { margin: 0 0 18px; font-size: 13px; line-height: 1.6; }
.est-rail .est-cta-auto { margin: -8px 0 16px; }
.est-rail .est-cta-primary, .est-rail .est-cta-secondary {
  display: block; width: 100%; padding: 13px 14px; border-radius: var(--r-pill); text-align: center; text-decoration: none;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.est-rail .est-cta-primary { color: var(--on-gold); text-shadow: var(--on-gold-shadow); background: var(--gold-fill-deep); }
.est-rail .est-cta-secondary { background: var(--n-0); color: var(--ink); border: 1px solid color-mix(in srgb, var(--gold-500) 28%, transparent); opacity: 1; cursor: pointer; }
.est-rail button.est-cta-secondary[disabled] { opacity: .55; cursor: not-allowed; }

/* Informations (#4554) : carte resserrée, libellé au-dessus de la valeur. */
.est-info-item { padding: 8px 0; }
.est-info-l { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.est-info-l .est-info-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--gold-500); }
.est-rail .est-info-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--n-500); }
.est-info-v { display: block; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }

/* Distinctions (#4553) : une colonne de pastilles, comme la maquette. */
.est-dist { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.est-rail .est-distinction {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 13px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; line-height: 1.35;
  color: var(--gold-600); background: var(--gold-50); border: 1px solid color-mix(in srgb, var(--gold-500) 28%, transparent);
}
.est-rail .est-distinction svg { flex-shrink: 0; }

/* ══ Fenêtres (#4552, #4555, #4556) ══ */
.tp-dialog.estm { width: calc(100vw - 32px); max-width: 600px; border-radius: 20px; box-shadow: 0 24px 70px rgba(30, 24, 16, .34); }
.tp-dialog.estm--lg { max-width: 640px; }
.tp-dialog.estm > form { display: flex; flex-direction: column; max-height: 88vh; }
.tp-dialog.estm .tp-dialog-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: 6px 30px 10px; }
.tp-dialog.estm .estm-head { padding: 26px 30px 14px; border-bottom: 0; }
.tp-dialog.estm .estm-title { font-family: 'Playfair Display', serif; font-style: normal; font-size: 19px; font-weight: 700; color: var(--ink); }
.tp-dialog.estm .estm-close { width: 32px; height: 32px; border: 0; background: var(--n-100); color: var(--n-500); }
.tp-dialog.estm .estm-close svg { width: 13px; height: 13px; }
.tp-dialog.estm .estm-close:hover { background: var(--n-200); color: var(--ink); }
.tp-dialog.estm .estm-close:focus:not(:focus-visible) { outline: none; box-shadow: none; }

.tp-dialog.estm .tp-fg { margin-bottom: 16px; }
.tp-dialog.estm label:not(.fp) {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--n-500);
}
.tp-dialog.estm input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.tp-dialog.estm textarea,
.tp-dialog.estm select {
  width: 100%; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--n-warm-100);
  background: var(--n-warm-50); font-family: inherit; font-size: 14px; color: var(--ink);
}
.tp-dialog.estm input::placeholder, .tp-dialog.estm textarea::placeholder { color: var(--n-400); }
.tp-dialog.estm input:focus, .tp-dialog.estm textarea:focus, .tp-dialog.estm select:focus {
  outline: none; border-color: var(--gold-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-primary) 12%, transparent);
}
.tp-dialog.estm textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
.tp-dialog.estm input[type="checkbox"], .tp-dialog.estm input[type="radio"] { width: auto; accent-color: var(--gold-500); }
.tp-dialog.estm .tp-fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .tp-dialog.estm .tp-fg-row { grid-template-columns: 1fr; } }
.tp-dialog.estm .tp-fg-hint { font-size: 12px; }
.estm-cc { font-weight: 600; letter-spacing: 0; color: var(--n-400); }
.estm-cc.is-full { color: var(--red); }
.estm-gap { margin-top: 8px; }
.estm-sub { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--n-500); }
.estm-kicker { margin: 14px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-600); }
.tp-dialog.estm .estm-lbl-ic { display: inline-flex; align-items: center; gap: 6px; }
.tp-dialog.estm .estm-lbl-ic svg { width: 14px; height: 14px; color: var(--gold-500); }
.estm-lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tp-dialog.estm .estm-lbl-row > label { margin-bottom: 0; }
.tp-dialog.estm label.estm-opt, .tp-dialog.estm label.estm-check {
  display: inline-flex; justify-content: flex-start; gap: 6px; margin: 0; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--n-500);
}
.tp-dialog.estm label.estm-check { margin-top: 8px; }

/* Pied : enregistrement automatique + Terminer, ou Annuler + Ajouter. */
.tp-dialog.estm .estm-foot { align-items: center; justify-content: space-between; gap: 12px; padding: 14px 30px 22px; border-top: 1px solid var(--n-warm-100); }
.estm-autosave { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--n-500); }
.estm-autosave svg { width: 15px; height: 15px; flex-shrink: 0; display: none; }
.estm-autosave[data-state="saved"] { color: var(--green); }
.estm-autosave[data-state="saved"] svg { display: block; }
.estm-autosave[data-state="error"] { color: var(--red); }
.tp-dialog.estm .estm-done {
  margin-left: auto; padding: 11px 22px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--on-gold); text-shadow: var(--on-gold-shadow); background: var(--gold-fill-deep);
}
.tp-dialog.estm .estm-cancel { margin-left: 0; padding: 11px 20px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; border: 1px solid var(--n-warm-100); }
.tp-dialog.estm .estm-cancel + .estm-done { margin-left: 0; }
.tp-dialog.estm .estm-foot:has(.estm-cancel) { justify-content: flex-start; }

/* Pastilles (#4553, #4555) */
.estm-pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.estm-pill {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 8px 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--n-warm-100); background: var(--n-0); font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere;
}
.estm-pill-x { padding: 0 4px; border: 0; background: none; font-size: 15px; line-height: 1; color: var(--n-400); cursor: pointer; }
.estm-pill-x:hover { color: var(--red); }
/* #4652 (07/10) : la saisie reste DANS la rangée des pastilles, à sa taille
   (maquette `.pill-input`, min 130 px), au lieu de prendre toute une ligne. */
.tp-dialog.estm input.estm-pill-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
  flex: 0 1 190px; width: 190px; min-width: 130px; padding: 7px 13px; border-radius: var(--r-pill); font-size: 13px;
  border: 1px dashed color-mix(in srgb, var(--gold-500) 40%, transparent); background: var(--gold-50);
}
.estm-pill-hint { display: flex; justify-content: space-between; gap: 8px; }
.estm-suggest { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.estm-sug {
  padding: 6px 11px; border-radius: var(--r-pill); font-family: inherit; font-size: 12px; cursor: pointer;
  color: var(--gold-600); background: var(--gold-50); border: 1px dashed color-mix(in srgb, var(--gold-500) 40%, transparent);
}

/* #4657 chiffres clés libres (maquette `.kpi-row`, `.kpi-v` 96 px, `.mini-add`). */
.estm-kf-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tp-dialog.estm input.estm-kf-value:not([type="checkbox"]) { flex: 0 0 96px; width: 96px; }
.estm-kf-row > input:not(.estm-kf-value) { flex: 1 1 auto; min-width: 0; }
.estm-kf-x { flex-shrink: 0; padding: 0 4px; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--n-400); cursor: pointer; }
.estm-kf-x:hover { color: var(--red); }
.estm-kf-add {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--gold-600);
}
.estm-kf-add[hidden], .estm-suggest[hidden] { display: none; }

/* Choix en pastilles : étoiles, labels (maquette `.tagset` / `.tagc`). */
.estm-tagset { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-dialog.estm .estm-tagset { display: flex; }
.tp-dialog.estm label.estm-tagc { position: relative; display: inline-flex; margin: 0; letter-spacing: 0; text-transform: none; cursor: pointer; }
.tp-dialog.estm label.estm-tagc input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.estm-tagc span {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--n-warm-100); background: var(--n-0); font-size: 13px; font-weight: 600; color: var(--ink);
}
.estm-tagc:has(input:checked) span { border-color: var(--gold-500); background: var(--gold-50); color: var(--gold-600); }
.estm-tagc:has(input:focus-visible) span { outline: 2px solid var(--gold-primary); outline-offset: 2px; }

/* Rond photo du membre (maquette `.ph`) */
.estm-mrow { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.estm-mrow-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tp-dialog.estm label.estm-ph {
  position: relative; flex-shrink: 0; width: 70px; height: 70px; margin: 0; padding: 0; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: var(--r-pill);
  border: 2px dashed var(--n-warm-250); background: var(--n-warm-50); color: var(--n-400);
}
.estm-ph-ico { width: 22px; height: 22px; }
.estm-ph img { width: 100%; height: 100%; object-fit: cover; }
.tp-dialog.estm .estm-ph-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Catégories d'espace en vignettes (maquette `.lieu-grid`) */
.estm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tp-dialog.estm label.estm-tile {
  position: relative; display: flex; align-items: flex-end; height: 104px; margin: 0; padding: 12px; border-radius: 12px; overflow: hidden; cursor: pointer;
  background-color: var(--n-warm-700); background-size: cover; background-position: center;
  font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--n-0);
}
.tp-dialog.estm label.estm-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estm-tile span { position: relative; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.estm-tile:has(input:checked) { outline: 3px solid var(--gold-primary); outline-offset: -3px; }
.estm-tile:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-primary) 45%, transparent); }
.estm-tile--restaurants { background-image: linear-gradient(160deg, rgba(20, 16, 10, .12), rgba(20, 16, 10, .72)), url("/images/banner/sallecrestaurant.jpeg"); }
.estm-tile--bar { background-image: linear-gradient(160deg, rgba(20, 16, 10, .12), rgba(20, 16, 10, .72)), url("/images/banner/interior.jpg"); }
.estm-tile--spa { background-image: linear-gradient(160deg, rgba(20, 16, 10, .12), rgba(20, 16, 10, .72)), url("/images/spa/spa_1.jpg"); }
.estm-tile--chambres-suites { background-image: linear-gradient(160deg, rgba(20, 16, 10, .12), rgba(20, 16, 10, .72)), url("/images/hotel/palace_3.jpg"); }
.estm-tile--piscine { background-image: linear-gradient(160deg, rgba(20, 16, 10, .12), rgba(20, 16, 10, .72)), url("/images/spa/spa_2.jpg"); }
.estm-tile--golf-sport { background-image: linear-gradient(160deg, rgba(20, 16, 10, .12), rgba(20, 16, 10, .72)), url("/images/hotel/palace_4.jpg"); }
.estm-tile--seminaires-evenements { background-image: linear-gradient(160deg, rgba(20, 16, 10, .12), rgba(20, 16, 10, .72)), url("/images/hotel/palace_12.jpg"); }
.estm-tile--espaces-exterieurs { background-image: linear-gradient(160deg, rgba(20, 16, 10, .12), rgba(20, 16, 10, .72)), url("/images/hotel/palace_1.jpg"); }
.estm-tile--cuisine { background-image: linear-gradient(160deg, rgba(20, 16, 10, .12), rgba(20, 16, 10, .72)), url("/images/banner/noibile-fine-dining.jpg"); }

/* Vidéo de la vision : le cadre ne s'affiche que s'il porte un lecteur. */
.tp-dialog.estm .est-video-edit-frame:not(:has(*)) { display: none; }
.tp-dialog.estm .est-video-edit-actions { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tp-dialog.estm .est-video-edit-frame:not(:has(*)) + template + .est-video-edit-actions { margin-top: 0; }

@media (max-width: 480px) {
  .tp-dialog.estm .estm-head { padding: 20px 18px 10px; }
  .tp-dialog.estm .tp-dialog-body { padding: 4px 18px 8px; }
  .tp-dialog.estm .estm-foot { padding: 12px 18px 18px; }
  .estm-tiles { grid-template-columns: 1fr; }
}

/* ══ #4652 (07/10) : volet replié « Accroche, histoire et valeurs » ══ */
.estm-more { margin: 4px 0 8px; border-top: 1px solid var(--n-warm-100); }
.estm-more > summary {
  display: flex; align-items: center; gap: 8px; padding: 14px 0 6px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--gold-600);
}
.estm-more > summary::-webkit-details-marker { display: none; }
.estm-more > summary::after { content: "▾"; font-size: 11px; transition: transform .15s; }
.estm-more[open] > summary::after { transform: rotate(180deg); }
.estm-more-body { padding-top: 10px; }

/* ══ #4656 (07/10) : « Photos de couverture & profil » (maquette `.cover-grid`) ══ */
.estm-lbl {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--n-500);
}
.tp-dialog.estm .estm-hint-top { margin: 0 0 10px; }
.estm-cover-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.estm-photo-news { display: contents; }
.estm-photo {
  position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--n-warm-100); background: var(--n-warm-50);
}
.estm-photo > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--n-warm-100); }
.estm-photo--cover { border-color: var(--gold-500); }
.estm-photo--cover > img[hidden] + .estm-photo-badge { position: static; align-self: flex-start; margin: 10px 10px 0; }
.estm-photo-badge {
  position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; color: var(--gold-600); background: var(--n-0); box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.estm-photo--new { border-style: dashed; border-color: var(--gold-500); }
.tp-dialog.estm .estm-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tp-dialog.estm label.estm-photo-pick {
  position: relative; display: block; margin: 0; padding: 9px 10px; overflow: hidden; cursor: pointer; text-align: center;
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gold-600);
}
.estm-photo--cover:has(> img[hidden]) .estm-photo-pick { padding: 34px 10px; }
.estm-photo.is-picked .estm-photo-badge { background: var(--gold-50); }
.tp-dialog.estm label.estm-photo-add {
  display: flex; align-items: center; justify-content: center; min-height: 110px; margin: 0; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--gold-500) 40%, transparent); background: var(--gold-50);
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gold-600);
}
.tp-dialog.estm label.estm-photo-x {
  position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--n-0); color: var(--n-500); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); font-size: 16px; letter-spacing: 0;
}
.tp-dialog.estm label.estm-photo-x input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tp-dialog.estm label.estm-photo-x:hover { color: var(--red); }
.estm-photo-x:has(input:focus-visible) { outline: 2px solid var(--gold-primary); outline-offset: 2px; }
.estm-photo-gone { display: none; position: absolute; top: 34%; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--red); }
.estm-photo:has(.estm-photo-x input:checked) > img { opacity: .3; }
.estm-photo:has(.estm-photo-x input:checked) .estm-photo-gone { display: block; }
.estm-photo:has(.estm-photo-x input:checked) .estm-photo-x { color: var(--red); }
/* #4916 (15/10) : « Mettre en couverture » sous chaque photo de la galerie. */
.tp-dialog.estm label.estm-photo-use, .estm-photo-use.is-cover {
  position: relative; display: block; margin: 0; padding: 7px 9px; border-top: 1px solid var(--n-warm-100);
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; text-align: center; color: var(--gold-600); background: var(--n-0);
}
.tp-dialog.estm label.estm-photo-use { cursor: pointer; }
.tp-dialog.estm label.estm-photo-use:hover { background: var(--gold-50); }
.tp-dialog.estm label.estm-photo-use input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estm-photo-use:has(input:focus-visible) { outline: 2px solid var(--gold-primary); outline-offset: -2px; }
.estm-photo-use-on { display: none; }
.estm-photo-use:has(input:checked) { background: var(--gold-50); }
.estm-photo-use:has(input:checked) .estm-photo-use-l { display: none; }
.estm-photo-use:has(input:checked) .estm-photo-use-on { display: inline; }
.estm-photo:has(.estm-photo-use input:checked) { border-color: var(--gold-500); }
.estm-photo-use.is-cover { color: var(--n-500); background: var(--n-warm-50); }
.tp-dialog.estm input.estm-photo-cap:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) { margin: 0; padding: 7px 9px; border: 0; border-top: 1px solid var(--n-warm-100); border-radius: 0; font-size: 12px; background: var(--n-0); }
.estm-logo-pick { display: flex; align-items: center; gap: 16px; }
.estm-logo-thumb {
  position: relative; flex-shrink: 0; width: 76px; height: 76px; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--n-warm-700); border: 1px solid var(--n-warm-100);
}
.estm-logo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.estm-logo-initials { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--n-0); }
.tp-dialog.estm label.estm-pick-btn {
  position: relative; display: inline-flex; margin: 0; padding: 10px 16px; overflow: hidden; cursor: pointer; border-radius: var(--r-pill);
  border: 1.5px dashed color-mix(in srgb, var(--gold-500) 40%, transparent); background: var(--gold-50);
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gold-600);
}
@media (max-width: 480px) { .estm-cover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══ #4653 (07/10) : espace : « + Ajouter une photo » (maquette `.photo-box`)
   avec l'aperçu, et rappel de la section choisie à l'étape 2. ══ */
.tp-dialog.estm label.estm-photo-box {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 92px; margin: 0; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: 12px; border: 1.5px dashed var(--n-warm-250); background: var(--n-warm-50);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--n-500);
}
.tp-dialog.estm label.estm-photo-box:hover { border-color: var(--gold-500); }
.estm-photo-box > img { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 200px; object-fit: cover; }
.estm-photo-box:has(> img:not([hidden])) .estm-photo-box-l {
  position: absolute; right: 10px; bottom: 10px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--n-0); color: var(--gold-600); font-size: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.estm-photo-box:has(> img[hidden]) .estm-photo-box-l { padding: 32px 12px; }
.estm-kind-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.estm-kind-l { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--n-500); }
.estm-kind-chip {
  display: inline-flex; align-items: center; padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--gold-500); background: var(--gold-50); font-size: 13px; font-weight: 600; color: var(--gold-600);
}
.estm-link { margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--gold-600); text-decoration: underline; text-underline-offset: 3px; }

/* Une image d'aperçu sans photo reste cachée : `display: block` des règles
   ci-dessus battait l'attribut `hidden` (image cassée vue sur staging le 07/10). */
.estm-photo > img[hidden], .estm-photo-box > img[hidden], .estm-logo-thumb > img[hidden] { display: none; }

/* #4654 (GO Colin 08/10) — bloc « Inviter sur Tastellers » de la fenêtre
   membre, valeurs de la maquette `Etablissement_recruteur_edition_complet`
   (`.invite`, `.invite-row`, `.btn-mail`, `.or`, `.social`, `.soc`, `.astuce`). */
.estm-invite {
  margin-top: 4px; padding: 18px; border-radius: 14px;
  border: 1px solid rgba(163, 133, 67, .28); background: linear-gradient(180deg, var(--invite-bg-top), var(--invite-bg-bottom));
}
.estm-invite-t { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.estm-invite-p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--n-500); }
.estm-invite-row { display: flex; gap: 9px; }
/* Fond blanc de la maquette (`.invite-row .inp`) : la règle des champs de la
   fenêtre porte quatre `:not()`, il faut au moins autant pour passer devant. */
.tp-dialog.estm .estm-invite .estm-invite-row input[type="email"]:not([type="hidden"]):not([type="file"]) {
  flex: 1 1 auto; min-width: 0; background: var(--n-0);
}
.estm-btn-mail {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
  padding: 12px 16px; border: 0; border-radius: var(--r-pill); background: var(--n-warm-100); color: var(--n-500);
  font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.estm-btn-mail svg { width: 1em; height: 1em; flex-shrink: 0; }
/* Grisé comme la maquette tant que l'adresse n'est pas une adresse, doré ensuite. */
.estm-invite-row:has(input:valid) .estm-btn-mail { background: var(--gold-500); color: var(--n-0); }
.estm-invite-msg { margin: 8px 2px 0; font-size: 12.5px; font-weight: 600; }
.estm-invite-msg.is-sent { color: var(--green); }
.estm-invite-msg.is-error { color: var(--red); }
.estm-or {
  margin: 14px 0; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--n-500);
}
.estm-social { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.estm-soc {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px;
  border: 0; border-radius: 11px; font-family: inherit; font-size: 12.5px; font-weight: 700;
  line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
.estm-soc--li { background: var(--share-linkedin); color: var(--n-0); }
.estm-soc--wa { background: var(--share-whatsapp); color: var(--n-0); }
.estm-soc--cp { background: var(--n-0); border: 1px solid var(--n-warm-100); color: var(--ink); }
.estm-astuce {
  margin-top: 14px; padding: 11px 13px; border-radius: 8px; font-size: 12px; line-height: 1.5;
  background: var(--invite-tip-bg); border: 1px solid rgba(163, 133, 67, .28); border-left: 3px solid var(--gold-500); color: var(--n-700);
}
@media (max-width: 480px) {
  .estm-invite { padding: 14px; }
  .estm-invite-row { flex-direction: column; }
  .estm-social { grid-template-columns: 1fr; }
}