/* Espace membre du Club Privé (/espace-membre) : écran de connexion puis tableau de bord.
   Même univers que l'aperçu de la page Club : noir, gris, blanc, l'orange en touches. */
:root {
  --em-bg: #070708;
  --em-side: #0A0A0B;
  --em-card: #0E0E10;
  --em-raised: #131316;
  --em-line: #1C1C20;
  --em-line-2: #26262B;
  --em-ink: #FFFFFF;
  --em-text: #D4D4D8;
  --em-muted: #8A8A93;
  --em-dim: #52525B;
  --em-orange: #F1641E;
  --em-orange-soft: #F5A26B;
  --em-green: #4ADE80;
  --em-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --em-display: "Geist", "Inter", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Démarrage : la page reste invisible le temps de savoir qui l'ouvre (membre connecté ou démo), pour ne jamais montrer
   les données de Léa à un membre. Sécurité : tout réapparaît au bout de 4 s, même si un script ne s'est pas chargé. */
.em-boot .em-login, .em-boot .em-app { visibility: hidden; animation: em-boot-fin 0s linear 4s forwards; }
@keyframes em-boot-fin { to { visibility: visible; } }
html { scroll-behavior: smooth; }
body.em { margin: 0; min-height: 100vh; background: #000000; color: var(--em-text); font-family: var(--em-font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
/* Règles de base sans poids (:where) : les classes de la page passent toujours devant */
:where(.em) a { color: inherit; text-decoration: none; }
:where(.em) img { max-width: 100%; }
:where(.em) h1, :where(.em) h2, :where(.em) h3, :where(.em) p { margin: 0; }
:where(.em) button { font: inherit; color: inherit; }
.em :focus-visible { outline: 2px solid var(--em-orange); outline-offset: 2px; }
.em-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:where(.em) svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Éléments communs */
.em-logo { display: inline-block; flex: none; width: 28px; height: 28px; border-radius: 8px; background: #131316 url(../media/logo-blanc.png) center / 52% no-repeat; }
.em-logo-round { width: 44px; height: 44px; border-radius: 50%; }
.em-brand { display: flex; align-items: center; gap: 10px; font-family: var(--em-display); font-size: 16px; font-weight: 500; color: var(--em-ink); }
.em-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 0; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: transform 0.2s, background 0.2s, border-color 0.2s, color 0.2s; }
.em-btn:hover { transform: translateY(-1px); }
.em-btn-white { color: #131316; background: #FFFFFF; }
.em-btn-white:hover { background: #F1F1F2; }
.em-btn-dark { color: #FFFFFF; background: #151518; border: 1px solid var(--em-line-2); }
.em-btn-dark:hover { border-color: #3A3A40; }
.em-btn-line { padding: 10px 16px; border-radius: 12px; font-weight: 500; color: #FFFFFF; background: #151518; border: 1px solid var(--em-line-2); }
.em-btn-line:hover { border-color: rgba(241, 100, 30, 0.5); }
.em-icon-btn { position: relative; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid var(--em-line); background: transparent; color: #A1A1AA; cursor: pointer; }
.em-icon-btn:hover { color: #FFFFFF; border-color: var(--em-line-2); }
.em-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--em-orange); box-shadow: 0 0 0 2px #000000; }
.em-tag { display: inline-flex; padding: 3px 8px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #E4E4E7; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); white-space: nowrap; }
.em-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.em-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 13px; color: #E4E4E7; background: #151518; border: 1px solid #222226; }
.em-chips svg { width: 14px; height: 14px; color: #A1A1AA; }
.em-bar { display: block; height: 6px; border-radius: 6px; overflow: hidden; background: #222226; }
.em-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #F1641E, #F5A26B); transition: width 0.4s; }

/* ---------- 1. Connexion ---------- */
/* Le fond fumée du haut de la page Club et ses lignes de lumière ; une carte sombre en verre fumé (la fumée transparaît),
   qui annonce l'espace membre, noir lui aussi ; le bouton blanc au point orange, comme « Réserver un appel » */
.em-login { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 72px 16px 32px; overflow: hidden; background: #000000; }
.em-login-silk { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.em-login-back { position: absolute; top: 24px; left: 24px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #A1A1AA; background: rgba(12, 12, 14, 0.7); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.em-login-back:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.25); }

/* Lignes de lumière, à la même place que sur la page Club : deux verticales sur les côtés, une horizontale en haut */
.em-rails { position: absolute; top: 0; bottom: 0; left: 50%; width: min(970px, calc(100% - 32px)); transform: translateX(-50%); pointer-events: none; }
.em-line { position: absolute; overflow: hidden; pointer-events: none; background: rgba(255, 255, 255, 0.06); }
.em-line-v { top: 0; bottom: 0; width: 1px; container-type: size; }
.em-line-l { left: 0; }
.em-line-r { right: 0; }
.em-line-h { left: 0; right: 0; height: 1px; container-type: inline-size; }
.em-line-t { top: 0; }
.em-line i { position: absolute; top: 0; left: 0; }
.em-line-v i { width: 1px; height: 80px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); animation: em-line-down 5.5s linear infinite; }
.em-line-h i { width: 80px; height: 1px; background: linear-gradient(270deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); animation: em-line-across 5.5s linear infinite; }
.em-line-r i { animation-delay: -2.75s; }
@keyframes em-line-down { from { transform: translateY(-80px); } to { transform: translateY(100cqh); } }
@keyframes em-line-across { from { transform: translateX(-80px); } to { transform: translateX(100cqw); } }
@media (max-width: 700px) { .em-rails { display: none; } }

/* La carte : verre fumé dans un fin cadre, arrivée en léger zoom avant */
.em-login-shell { position: relative; z-index: 1; width: 100%; max-width: 450px; padding: 8px; border-radius: 34px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); animation: em-card-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes em-card-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.em-login-card { position: relative; display: grid; justify-items: center; gap: 14px; padding: 40px 34px 30px; border-radius: 27px; text-align: center; background: linear-gradient(180deg, rgba(22, 22, 25, 0.78), rgba(10, 10, 12, 0.86)); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 100px -30px rgba(0, 0, 0, 0.95); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.em-login-logo { width: 50px; height: 50px; margin-bottom: 6px; border-radius: 15px; background-color: #1A1A1D; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 24px -8px rgba(0, 0, 0, 0.8); }
.em-login-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #F5833F; }
.em-login-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--em-orange); box-shadow: 0 0 10px rgba(241, 100, 30, 0.9); }
.em-login-card h1 { font-family: var(--em-display); font-size: 36px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; color: #FFFFFF; text-wrap: balance; }
.em-login-card h1 span { display: block; color: #8E8E96; }
.em-login-lead { max-width: 330px; font-size: 16px; line-height: 1.55; color: #A1A1AA; text-wrap: balance; }
.em-login-form { width: 100%; display: grid; gap: 10px; margin-top: 10px; }
.em-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.em-field { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); text-align: left; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.em-field:focus-within { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05); }
/* Le cadre arrondi suffit : pas de contour rectangulaire autour du texte */
.em-field input:focus, .em-field input:focus-visible { outline: none; }
.em-field svg { color: #8A8A93; }
.em-field input { flex: 1; min-width: 0; height: 54px; border: 0; background: transparent; font: inherit; font-size: 16px; color: #FFFFFF; outline: none; }
.em-field input::placeholder { color: #71717A; }
.em-field.is-error { border-color: rgba(248, 113, 113, 0.7); }
.em-field-err { padding-left: 20px; font-size: 13px; text-align: left; color: #FCA5A5; }
.em-btn-cta { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06); }
.em-btn-cta .em-dot-o { width: 7px; height: 7px; border-radius: 50%; background: var(--em-orange); box-shadow: 0 0 10px rgba(241, 100, 30, 0.9); }
.em-btn-cta svg { width: 15px; height: 15px; }
.em-btn-ghost { color: #FFFFFF; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); }
.em-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.07); }
.em-btn-ghost svg { color: #F5833F; }
.em-login-form .em-btn { width: 100%; margin-top: 6px; padding: 16px 18px; font-size: 15.5px; }
.em-login-note { width: 100%; display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; font-size: 14px; color: #A1A1AA; background: rgba(241, 100, 30, 0.08); border: 1px solid rgba(241, 100, 30, 0.3); }
.em-login-note b { font-weight: 600; color: #FFB27F; }
.em-login-or { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 2px; font-size: 13px; color: #71717A; }
.em-login-or::before, .em-login-or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }
.em-login-card > .em-btn-ghost { width: 100%; padding: 15px 18px; font-size: 15.5px; }
.em-login-card > .em-login-demo { width: 100%; margin-top: 10px; padding: 16px 18px; font-size: 15.5px; }
.em-login-foot { margin-top: 6px; font-size: 14px; color: #8A8A93; }
.em-login-foot a { font-weight: 500; color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .em-line i { animation: none; opacity: 0; } .em-login-shell { animation: none; } }
@media (max-width: 480px) {
  .em-login { padding: 76px 12px 32px; }
  .em-login-back { top: 18px; left: 12px; }
  .em-login-shell { padding: 6px; border-radius: 30px; }
  .em-login-card { padding: 34px 20px 24px; border-radius: 25px; }
  .em-login-card h1 { font-size: 30px; }
}

/* ---------- 2. Espace membre ---------- */
.em-app { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; background: var(--em-bg); }
.em-demo { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 16px; font-size: 13px; color: #A1A1AA; background: #0C0C0E; border-bottom: 1px solid var(--em-line); }
.em-demo span { display: inline-flex; align-items: center; gap: 8px; }
.em-demo i { width: 7px; height: 7px; border-radius: 50%; background: var(--em-orange); box-shadow: 0 0 8px rgba(241, 100, 30, 0.9); }
/* Membre connecté : pas de bandeau « Démo » */
.em-app.is-membre .em-demo { display: none; }
.em-demo a { font-weight: 600; color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.35); }

/* Menu de gauche */
.em-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; padding: 16px 14px 12px; overflow-y: auto; background: var(--em-side); border-right: 1px solid var(--em-line); }
/* Le menu défile (molette, doigt) sans barre visible, pour garder toute sa largeur */
.em-side { scrollbar-width: none; }
.em-side::-webkit-scrollbar { display: none; }
.em-side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 12px; }
/* Badge « Bêta » à côté du nom, pour les membres */
.em-side-head .em-brand { white-space: nowrap; }
.em-beta { margin-left: -2px; padding: 1px 6px; border-radius: 6px; font-family: var(--em-font); font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #F5833F; background: rgba(241, 100, 30, 0.08); border: 1px solid rgba(241, 100, 30, 0.3); }
.em-beta.is-admin { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.6); }
/* L'offre du membre à côté du nom : CLUB PRIVÉ en or, ETSY PRINT en orange Etsy ; le nom se resserre pour que le badge tienne */
.em-beta.is-club { color: #E8C84A; background: rgba(232, 200, 74, 0.08); border-color: rgba(232, 200, 74, 0.6); }
.em-beta.is-print { color: #FF7415; background: rgba(255, 116, 21, 0.08); border-color: rgba(255, 116, 21, 0.6); }
.em-beta.is-club, .em-beta.is-print { padding: 1px 4px; font-size: 8px; letter-spacing: 0.02em; }
.em-brand:has(.em-beta.is-club), .em-brand:has(.em-beta.is-print) { font-size: 14.5px; }
.em-side-close { display: none; }
/* Catégories du menu : petit titre gris en capitales, bien distinct des liens ; un filet sépare chaque catégorie */
.em-groups { display: grid; gap: 10px; }
.em-group + .em-group { padding-top: 10px; border-top: 1px solid #141417; }
.em-group-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px 10px; border: 0; background: transparent; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #71717A; cursor: pointer; transition: color 0.15s; }
.em-group-btn:hover { color: #D4D4D8; }
.em-group-btn svg { width: 12px; height: 12px; color: var(--em-dim); transition: color 0.15s; }
.em-group-btn:hover svg { color: #A1A1AA; }
.em-group .em-ic-minus, .em-group.is-open .em-ic-plus { display: none; }
.em-group.is-open .em-ic-minus { display: block; }
.em-group .em-nav { display: none; }
.em-group.is-open .em-nav { display: grid; }
.em-nav { gap: 1px; margin: 0 0 0 14px; padding-left: 10px; border-left: 1px solid #1F1F23; }
.em-nav a { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; font-size: 14.5px; color: var(--em-muted); transition: color 0.15s, background 0.15s; }
.em-nav a:hover { color: #FFFFFF; background: #121214; }
/* Onglet sélectionné : fond plus clair, icône orange et un trait orange sur le rail de gauche */
.em-nav a[aria-current="page"] { font-weight: 500; color: #FFFFFF; background: rgba(255, 255, 255, 0.075); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.em-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -11px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--em-orange); }
.em-nav a[aria-current="page"] svg { color: #F5833F; }
.em-side-btn { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 12px; border-radius: 12px; font-size: 14.5px; font-weight: 500; color: #E4E4E7; background: #111113; border: 1px solid #1F1F23; transition: border-color 0.2s; }
.em-side-btn:hover { border-color: var(--em-line-2); }
button.em-side-btn { width: 100%; text-align: left; cursor: pointer; }
.em-side-white { margin-top: 12px; font-weight: 600; color: #131316; background: #FFFFFF; border-color: #FFFFFF; }
.em-side-white:hover { border-color: #FFFFFF; background: #F1F1F2; }
.em-side-btn .em-chev { margin-left: auto; width: 14px; height: 14px; }
.em-side-skool { width: 46px; height: auto; flex: none; }
.em-side-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #1C1C20; }
.em-side-ic svg { width: 15px; height: 15px; }
/* Pied du menu : Skool, le coach et le profil groupés en bas, toujours visibles (la navigation défile au-dessus si le menu est long) */
.em-side-foot { position: sticky; bottom: -12px; z-index: 2; display: grid; gap: 8px; margin: auto -14px -12px; padding: 20px 14px 12px; background: linear-gradient(180deg, rgba(10, 10, 11, 0) 0, var(--em-side) 18px); }
.em-side-foot .em-side-btn { margin-top: 0; }
.em-me { position: relative; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--em-line); }
.em-me-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; }
.em-me-btn:hover { background: #121214; }
/* Crayon sur la photo de profil : choisir une nouvelle photo */
.em-me-edit { position: absolute; left: 27px; top: 37px; z-index: 1; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #131316; background: #FFFFFF; box-shadow: 0 0 0 2px var(--em-side); cursor: pointer; transition: background 0.15s; }
.em-me-edit:hover { background: #E4E4E7; }
.em-me-edit svg { width: 10px; height: 10px; }
.em-me-edit:focus-within { outline: 2px solid #F5833F; outline-offset: 2px; }
.em-me-btn img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.em-me-btn b { display: block; font-size: 14.5px; font-weight: 500; color: #FFFFFF; }
.em-me-btn small { font-size: 12.5px; color: #71717A; }
.em-me-btn > svg { margin-left: auto; color: #71717A; }
.em-me-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); padding: 6px; border-radius: 12px; background: #141416; border: 1px solid var(--em-line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); }
.em-me-menu a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; font-size: 14px; color: #E4E4E7; }
.em-me-menu a:hover { background: #1C1C20; }
.em-overlay { display: none; }

/* Barre du haut et contenu */
.em-main { min-width: 0; display: flex; flex-direction: column; }
.em-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px 28px; background: rgba(7, 7, 8, 0.86); border-bottom: 1px solid #17171A; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.em-menu-btn { display: none; }
.em-crumb { min-width: 0; font-size: 13px; letter-spacing: 0.02em; color: #71717A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-crumb i { font-style: normal; }
.em-crumb b { font-weight: 500; letter-spacing: 0; color: #FFFFFF; }
.em-pill { margin-left: auto; padding: 8px 14px; border-radius: 10px; font-size: 13px; white-space: nowrap; color: #E4E4E7; background: var(--em-card); border: 1px solid #1F1F23; }
/* Parrainage : la pastille en haut à droite, avec le montant en blanc */
.em-refer { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color 0.2s; }
.em-refer:hover { border-color: #3A3A40; }
.em-refer svg { width: 15px; height: 15px; color: #A1A1AA; }
.em-refer b { font-weight: 700; color: #FFFFFF; }
/* Sur mobile, la pastille devient « Parrainage 300 € » */
.em-refer-court { display: none; }
.em-content { width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 28px 64px; }
.em-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; animation: em-in 0.35s ease-out; }
@keyframes em-in { from { opacity: 0; transform: translateY(6px); } }
.em-head { display: grid; gap: 6px; padding: 8px 0 6px; }
.em-head h1 { font-family: var(--em-display); font-size: 30px; font-weight: 500; letter-spacing: -0.03em; color: #FFFFFF; }
.em-head p { max-width: 640px; font-size: 15px; color: #A1A1AA; }
.em-head-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; }
.em-progress { display: grid; gap: 8px; min-width: 200px; font-size: 13px; color: var(--em-muted); }
.em-progress b { font-family: var(--em-display); font-size: 20px; font-weight: 500; color: #FFFFFF; }

/* Accueil */
.em-hero { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; min-height: 280px; padding: 28px 30px; overflow: hidden; border-radius: 20px; border: 1px solid #1F1F23; background: #050506; }
.em-hero-grid { position: absolute; left: 50%; top: 42%; height: 200%; width: auto; max-width: none; transform: translate(-50%, -50%); pointer-events: none; }
.em-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 5, 6, 0.97) 0%, rgba(5, 5, 6, 0.8) 32%, rgba(5, 5, 6, 0) 64%); }
.em-hero-txt, .em-hero .em-btn { position: relative; z-index: 1; }
.em-hero-txt { display: grid; gap: 6px; max-width: 560px; }
.em-hero-txt small { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: #A1A1AA; }
.em-hero-txt h1 { font-family: var(--em-display); font-size: 38px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: #FFFFFF; }
.em-hero-txt p { font-size: 15px; color: #A1A1AA; }
.em-callbar { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 18px; background: var(--em-card); border: 1px solid var(--em-line); }
.em-callbar-txt { flex: 1; min-width: 0; display: grid; gap: 6px; }
.em-callbar-txt h2 { font-size: 17px; font-weight: 500; color: #FFFFFF; }
.em-callbar-txt p { font-size: 14px; color: var(--em-muted); }
.em-callbar-txt .em-chips { margin-top: 4px; }
.em-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.em-card { display: grid; align-content: start; gap: 12px; padding: 20px; border-radius: 18px; color: #A1A1AA; background: var(--em-card); border: 1px solid var(--em-line); }
.em-card-k { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; color: #71717A; }
.em-card-v { font-size: 14px; font-weight: 600; letter-spacing: 0; color: #FFFFFF; }
.em-card-v i { font-style: normal; font-weight: 500; color: #71717A; }
.em-card-k em { font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--em-green); }
.em-card-p { font-size: 14px; line-height: 1.55; color: #A1A1AA; }
.em-hl { font-weight: 600; color: #FFFFFF; }
.em-who { display: flex; align-items: center; gap: 12px; }
.em-who b { display: block; font-size: 15.5px; font-weight: 500; color: #FFFFFF; }
.em-who small { font-size: 13px; color: var(--em-muted); }
.em-who .em-who-stat { display: block; margin-top: 2px; }
.em-who .em-who-stat b { display: inline; font-size: 13px; font-weight: 600; color: #FFFFFF; }
.em-av { position: relative; flex: none; }
.em-av img { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
/* Coach « En ligne » : pastille verte sur la photo */
.em-av i { position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--em-green); border: 2px solid var(--em-card); }
/* Coach hors de ses horaires : statut et pastille en rouge */
.em-coach.is-off .em-card-k em { color: #F87171; }
.em-coach.is-off .em-av i { background: #EF4444; }
.em-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: #FFFFFF; }
.em-link svg { width: 14px; height: 14px; transition: transform 0.2s; }
.em-link:hover svg { transform: translateX(2px); }
.em-rdv { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 13px; background: var(--em-raised); border: 1px solid #1F1F23; transition: border-color 0.2s; }
.em-rdv:hover { border-color: #3A3A40; }
button.em-rdv { width: 100%; text-align: left; cursor: pointer; }
.em-rdv > span:nth-child(2) { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.em-rdv b { font-size: 14.5px; font-weight: 500; color: #FFFFFF; }
.em-rdv small { font-size: 13px; color: var(--em-muted); }
.em-rdv-note { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--em-muted); }
.em-rdv-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #E4E4E7; background: #151518; border: 1px solid var(--em-line-2); }
.em-rdv-ic-big { width: 48px; height: 48px; border-radius: 14px; }
.em-rdv-ic-big svg { width: 22px; height: 22px; }
.em-rdv-go { width: 32px; height: 32px; padding: 8px; border-radius: 50%; color: #FFFFFF; background: #1C1C20; border: 1px solid #2A2A2F; }
/* Etsy Print : le Live et l'Atelier créatif restent visibles, mais indisponibles */
.em-rdv.is-off { cursor: default; }
.em-rdv.is-off:hover { border-color: #1F1F23; }
.em-rdv.is-off .em-rdv-ic, .em-rdv.is-off > span:nth-child(2) { opacity: 0.45; }
.em-rdv-tag { flex: none; padding: 3px 9px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 600; color: #A1A1AA; background: #151518; border: 1px dashed #3A3A40; }
.em-weeks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.em-weeks i { display: grid; gap: 6px; font-style: normal; }
.em-weeks i::before { content: ""; height: 6px; border-radius: 3px; background: #222226; }
.em-weeks i.now::before { background: linear-gradient(90deg, #F1641E 55%, #3A2A22 55%); box-shadow: 0 0 8px rgba(241, 100, 30, 0.45); }
.em-weeks b { font-size: 10.5px; font-weight: 600; text-align: center; color: var(--em-dim); }
.em-weeks i.now b { color: #FFFFFF; }
.em-weeks i.done::before { background: rgba(241, 100, 30, 0.55); }
.em-weeks i.done b { color: #A1A1AA; }

/* Tâches (Accueil et To-do list) */
.em-tasks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.em-task { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1px solid #1F1F23; background: var(--em-raised); font-size: 14.5px; text-align: left; color: #E4E4E7; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.em-task:hover { border-color: var(--em-line-2); }
.em-task.is-done { color: #71717A; text-decoration: line-through; text-decoration-color: var(--em-dim); }
.em-chk { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; border: 1.5px solid #3F3F46; color: transparent; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.em-chk svg { width: 13px; height: 13px; stroke-width: 2.6; }
.em-task.is-done .em-chk { color: #0A0A0B; border-color: #FFFFFF; background: #FFFFFF; }
.em-task-end { margin-left: auto; color: #A1A1AA; }
.em-tasks-mini .em-task { padding: 9px 11px; font-size: 14px; }
.em-mini-k { display: flex; justify-content: space-between; margin-top: 4px; font-size: 13px; font-weight: 500; color: #E4E4E7; }
.em-mini-k span { font-variant-numeric: tabular-nums; color: #71717A; }
.em-mini-more { margin-top: 2px; }
.em-mini-done { padding: 11px 12px; border-radius: 12px; font-size: 14px; color: var(--em-green); background: rgba(74, 222, 128, 0.06); border: 1px solid rgba(74, 222, 128, 0.25); }
/* Actions ajoutées par le membre (données par son coach) : champ en bas de chaque semaine, bouton pour supprimer */
.em-tasks li { display: flex; align-items: stretch; gap: 6px; }
.em-tasks li > .em-task { flex: 1; min-width: 0; }
.em-task-del { flex: none; width: 40px; display: grid; place-items: center; padding: 0; border-radius: 12px; border: 1px solid #1F1F23; background: var(--em-raised); color: #71717A; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.em-task-del:hover { color: #FCA5A5; border-color: rgba(248, 113, 113, 0.4); }
.em-task-del svg { width: 14px; height: 14px; }
.em-task-own .em-task-txt { overflow-wrap: anywhere; }
/* « Écrire pourquoi tu te lances » (semaine 1) : dessinée comme la carte de l'appel, avec la boussole de Mes objectifs ;
   une flèche tant qu'elle reste à faire, puis « Fait » (sans texte barré) */
.em-task.em-task-why { gap: 12px; padding: 10px 12px; background: rgba(241, 100, 30, 0.05); border-color: rgba(241, 100, 30, 0.25); }
.em-task.em-task-why:hover { border-color: rgba(241, 100, 30, 0.5); }
.em-task.em-task-why.is-done { color: #E4E4E7; text-decoration: none; }
.em-task-why-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #F5A26B; background: rgba(241, 100, 30, 0.1); }
.em-task-why-ic svg { width: 16px; height: 16px; }
.em-task-why-txt { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.em-task-why-txt b { font-size: 14px; font-weight: 500; color: #FFFFFF; }
.em-task-why-txt small { font-size: 12.5px; color: var(--em-muted); }
.em-task-why-go { flex: none; width: 16px; height: 16px; color: #F5A26B; }
.em-task-why .em-task-why-done, .em-task-why .em-task-why-ok, .em-task-why.is-done .em-task-why-todo, .em-task-why.is-done .em-task-why-go { display: none; }
.em-task-why.is-done .em-task-why-done { display: block; }
.em-task-why.is-done .em-task-why-ok { display: inline-flex; }
.em-add-open { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; margin-left: -10px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--em-muted); cursor: pointer; transition: color 0.15s, background 0.15s; }
.em-add-open:hover { color: #FFFFFF; background: #151518; }
.em-add-open svg { width: 14px; height: 14px; }
.em-add { display: flex; gap: 6px; }
.em-add input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px dashed #2E2E34; background: rgba(255, 255, 255, 0.02); font: inherit; font-size: 14px; color: #FFFFFF; outline: none; transition: border-color 0.2s, background 0.2s; }
.em-add input::placeholder { color: #71717A; }
.em-add input:focus { border-style: solid; border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.04); }
.em-add button { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: #FFFFFF; color: #131316; cursor: pointer; }
.em-add button svg { width: 16px; height: 16px; stroke-width: 2.2; }
/* To-do list en frise : le repère de la période à gauche (S1, J15…), relié au suivant par un trait ; la carte à droite */
.em-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.em-weekblock { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding-bottom: 14px; }
.em-weekblock:last-child { padding-bottom: 0; }
.em-weekblock::before { content: ""; position: absolute; left: 26px; top: 56px; bottom: 4px; width: 1px; background: #222226; }
.em-weekblock:last-child::before { display: none; }
.em-weekblock.is-done::before { background: #3A3A40; }
.em-week-mark { position: relative; z-index: 1; width: 52px; height: 52px; margin-top: 4px; display: grid; place-items: center; border-radius: 15px; font-family: var(--em-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #A1A1AA; background: var(--em-raised); border: 1px solid #222226; }
.em-weekblock.is-done .em-week-mark { color: #71717A; }
.em-weekblock.is-now .em-week-mark { color: #FFFFFF; background: var(--em-orange); border-color: var(--em-orange); box-shadow: 0 0 24px -6px rgba(241, 100, 30, 0.7); }
.em-weekblock.is-ads .em-week-mark { color: #FFFFFF; }
.em-week-card { min-width: 0; border-radius: 18px; background: var(--em-card); border: 1px solid var(--em-line); }
.em-weekblock.is-now .em-week-card { border-color: rgba(255, 255, 255, 0.16); }
.em-weekblock.is-ads .em-week-card { border-color: var(--em-line-2); }
.em-week-h { font-size: inherit; font-weight: inherit; }
.em-week-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 0; background: none; text-align: left; cursor: pointer; }
.em-week-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.em-week-name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.em-week-name b { font-size: 16px; font-weight: 600; color: #FFFFFF; }
.em-week-title small { font-size: 13px; color: var(--em-muted); }
.em-week-meta { flex: none; display: flex; align-items: center; gap: 12px; }
.em-week-state { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; font-weight: 600; color: #FFFFFF; }
.em-week-state.is-done { color: #A1A1AA; }
.em-week-state svg { width: 13px; height: 13px; color: #A1A1AA; }
.em-week-count { min-width: 30px; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; color: var(--em-muted); }
.em-week-chev { width: 15px; height: 15px; color: var(--em-dim); transform: rotate(90deg); transition: transform 0.2s; }
.em-weekblock.is-collapsed .em-week-chev { transform: none; }
.em-week-head:hover .em-week-chev { color: #FFFFFF; }
.em-week-body { display: grid; gap: 10px; padding: 0 18px 18px; }
.em-weekblock.is-collapsed .em-week-body { display: none; }
.em-week-hint { font-size: 13.5px; color: var(--em-muted); }
/* Une semaine sans action prévue : la phrase disparaît dès qu'une action y est ajoutée */
.em-tasks:not(:empty) + .em-week-empty { display: none; }
/* L'appel de la semaine, dans la frise : un repère (pas une case à cocher), qui mène à Mes appels */
.em-week-call { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(241, 100, 30, 0.05); border: 1px solid rgba(241, 100, 30, 0.25); transition: border-color 0.2s; }
.em-week-call:hover { border-color: rgba(241, 100, 30, 0.5); }
.em-tasks + .em-week-call { margin: 10px 0 0; }   /* l'appel stratégique, après les actions de la semaine 1 */
.em-week-call-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #F5A26B; background: rgba(241, 100, 30, 0.1); }
.em-week-call-ic svg { width: 16px; height: 16px; }
.em-week-call-txt { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.em-week-call-txt b { font-size: 14px; font-weight: 500; color: #FFFFFF; }
.em-week-call-txt small { font-size: 12.5px; color: var(--em-muted); }
.em-weekblock.is-ads .em-week-hint { color: var(--em-muted); }
/* Étapes Etsy Ads (jour 15 et jour 45) : étiquette #EtsyAds avec le « E » d'Etsy, pour les repérer d'un coup d'œil */
.em-ads-tag { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 999px; font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; color: #FFFFFF; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); }
.em-ads-e { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: #F1641E; }
.em-ads-e img { width: 12px; height: 12px; }

/* Mes appels */
.em-calls { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.em-call { display: flex; align-items: center; gap: 18px; padding: 20px; border-radius: 18px; background: var(--em-card); border: 1px solid var(--em-line); }
.em-call.is-next { border-color: rgba(255, 255, 255, 0.16); }
.em-call-week { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; font-family: var(--em-display); font-size: 18px; font-weight: 600; color: #A1A1AA; background: var(--em-raised); border: 1px solid #222226; }
.em-call.is-next .em-call-week { color: #FFFFFF; background: var(--em-orange); border-color: var(--em-orange); }
.em-call-body { flex: 1; min-width: 0; display: grid; gap: 8px; }
.em-call-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.em-call-top h2 { font-size: 17px; font-weight: 500; color: #FFFFFF; }
.em-call-body p { font-size: 14px; color: var(--em-muted); }
.em-status { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #A1A1AA; background: #151518; border: 1px solid #26262B; }
.em-status-ok { color: var(--em-green); background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.35); }
/* Appel passé : statut gris avec une coche, carte un peu effacée */
.em-status-done { display: inline-flex; align-items: center; gap: 5px; color: #D4D4D8; }
.em-status-done svg { width: 12px; height: 12px; color: var(--em-green); }
.em-call.is-done .em-call-week { color: var(--em-dim); }
.em-call.is-done .em-call-top h2 { color: #D4D4D8; }

/* Replays des appels */
/* Mes appels : après l'appel (replay et lien vers les actions), avant l'appel (de quoi le préparer) */
.em-call-after { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }
.em-call-replay { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 12px; border: 1px solid var(--em-line-2); background: var(--em-raised); text-align: left; cursor: pointer; transition: border-color 0.2s; }
.em-call-replay:hover { border-color: #3A3A40; }
/* Appel fait, replay pas encore ajouté par Thomas */
.em-call-replay.is-soon, .em-call-replay.is-soon:hover { cursor: default; border-color: var(--em-line-2); opacity: 0.6; }
.em-call-thumb { width: 54px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: #FFFFFF; background: radial-gradient(70% 90% at 50% 40%, rgba(241, 100, 30, 0.35), rgba(241, 100, 30, 0) 70%), #18181B; }
.em-call-thumb svg { width: 16px; height: 16px; }
.em-call-replay b { display: block; font-size: 14px; font-weight: 500; color: #FFFFFF; }
.em-call-replay small { font-size: 12.5px; color: var(--em-muted); }
.em-call-prep { display: grid; gap: 8px; margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: var(--em-raised); border: 1px solid var(--em-line); }
.em-call-prep small { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #71717A; }
.em-call-prep ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.em-call-prep li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--em-text); }
.em-call-prep li svg { width: 14px; height: 14px; color: var(--em-muted); }
.em-call-prep a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.3); }

.em-fathom { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 14px; border-radius: 999px; font-size: 13px; color: var(--em-muted); background: #111113; border: 1px solid #1F1F23; }
.em-fathom img { height: 15px; width: auto; }

/* Boîte à outils : une carte par étape, un outil par ligne ; les logos en blanc, comme la bande des partenaires de la page Club */
.em-toolcat { padding: 4px 20px; border-radius: 18px; background: var(--em-card); border: 1px solid var(--em-line); }
.em-toolcat h2 { display: flex; align-items: center; gap: 12px; padding: 14px 0; font-size: 15px; font-weight: 600; color: #FFFFFF; }
.em-toolcat-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #E4E4E7; background: #151518; border: 1px solid var(--em-line-2); }
.em-toolcat-ic svg { width: 16px; height: 16px; }
.em-tool { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 14px 0; border-top: 1px solid var(--em-line); }
.em-tool-logo { width: 96px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: var(--em-raised); border: 1px solid var(--em-line-2); transition: background 0.25s, border-color 0.25s; }
.em-tool-logo img { height: var(--h); width: auto; max-width: 70px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.9; transition: filter 0.25s, opacity 0.25s; }
/* Au survol d'un outil, son logo reprend ses couleurs officielles : fond blanc (fond sombre pour Unlens, dégradé Canva pour Canva) */
.em-tool:hover .em-tool-logo { background: #FFFFFF; border-color: #FFFFFF; }
.em-tool:hover .em-tool-logo img { filter: none; opacity: 1; }
.em-tool:hover .em-tool-logo-dark { background: var(--em-raised); border-color: var(--em-line-2); }
/* Canva : le logo est déjà blanc (pas de filtre, donc pas de gris pendant la transition) et son dégradé apparaît en fondu */
.em-tool-logo-canva { position: relative; overflow: hidden; }
.em-tool-logo-canva::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #00C4CC, #7D2AE8); opacity: 0; transition: opacity 0.25s; }
.em-tool-logo-canva img, .em-tool:hover .em-tool-logo-canva img { position: relative; filter: none; }
.em-tool:hover .em-tool-logo-canva { background: var(--em-raised); border-color: transparent; }
.em-tool:hover .em-tool-logo-canva::before { opacity: 1; }
.em-tool:hover .em-tool-word { color: #131316; }
.em-tool-word { padding: 0 8px; font-family: var(--em-display); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; text-align: center; color: #FFFFFF; transition: color 0.25s; }
.em-tool-txt { display: grid; gap: 3px; }
.em-tool h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 500; color: #FFFFFF; }
.em-tool p { font-size: 13.5px; color: var(--em-muted); }
.em-tool-go { grid-column: 4; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #FFFFFF; background: #151518; border: 1px solid var(--em-line-2); transition: border-color 0.2s; }
.em-tool-go:hover { border-color: #3A3A40; }
.em-tool-go svg { width: 14px; height: 14px; color: #FFFFFF; transition: transform 0.2s; }
.em-tool-go:hover svg { transform: translateX(2px); }
/* Lien partenaire : l'offre passe par le bouton « Ouvrir » (lien d'affiliation), à la place d'un code promo */
.em-aff { grid-column: 3; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 500; color: #D4D4D8; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--em-line-2); white-space: nowrap; }
.em-aff svg { width: 14px; height: 14px; color: #A1A1AA; }
/* Code promo : un clic le copie, l'icône passe en coche verte un instant */
.em-code { grid-column: 3; display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.22); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.em-code span { font-size: 12px; color: var(--em-muted); }
.em-code b { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: #FFFFFF; }
.em-code svg { width: 15px; height: 15px; color: #A1A1AA; }
.em-code:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.05); }
.em-code-ok { display: none; }
.em-code.is-copied { border-style: solid; border-color: rgba(74, 222, 128, 0.5); }
.em-code.is-copied .em-code-copy { display: none; }
.em-code.is-copied .em-code-ok { display: block; color: var(--em-green); }

/* Boîte à outils : un outil sans lien d'affiliation ni code promo reste grisé chez les membres (« Bientôt disponible ») */
.em-tool.is-soon .em-tool-logo, .em-tool.is-soon .em-tool-txt { opacity: 0.45; }
.em-tool.is-soon:hover .em-tool-logo { background: var(--em-raised); border-color: var(--em-line-2); }
.em-tool.is-soon:hover .em-tool-logo img { filter: brightness(0) invert(1); opacity: 0.9; }
.em-tool.is-soon:hover .em-tool-word { color: #FFFFFF; }
.em-tool.is-soon:hover .em-tool-logo-canva::before { opacity: 0; }
.em-tool-soon { grid-column: 4; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: #A1A1AA; background: #151518; border: 1px dashed #3A3A40; }
.em-tool-soon svg { width: 14px; height: 14px; }
.em-tools-none { padding: 20px; font-size: 14px; color: var(--em-muted); }
/* Celle de l'admin : ce qui manque à chaque outil, « Modifier », « Ajouter un outil » et le formulaire, à la place de l'outil */
.em-tool-adm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.em-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 600; color: #A1A1AA; background: #151518; border: 1px solid var(--em-line-2); }
.em-chip.is-ok { color: var(--em-green); border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.08); }
.em-chip.is-soon { color: var(--em-orange-soft); border-color: rgba(241, 100, 30, 0.35); background: rgba(241, 100, 30, 0.08); }
.em-tool-edit { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding: 2px 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: #FFFFFF; cursor: pointer; }
.em-tool-edit svg { width: 12px; height: 12px; }
.em-tool-edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.em-tool-add { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 16px; padding: 8px 12px; border-radius: 10px; font: inherit; font-size: 13px; color: var(--em-orange-soft); background: rgba(241, 100, 30, 0.06); border: 1px dashed rgba(241, 100, 30, 0.5); cursor: pointer; transition: border-color 0.15s; }
.em-tool-add:hover { border-color: var(--em-orange-soft); }
.em-tool-add svg { width: 13px; height: 13px; }
.em-adm-toolform { margin: 10px 0 16px; }
.em-adm-toolform .em-adm-f textarea { background: var(--em-card); }
.em-adm-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.em-adm-checks { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.em-adm-tool-del { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: #A1A1AA; cursor: pointer; transition: color 0.15s; }
.em-adm-tool-del:hover { color: #FCA5A5; }
.em-adm-tool-del svg { width: 15px; height: 15px; }
.em-tools-setup { padding: 12px 14px; border-radius: 12px; font-size: 13.5px; color: #D4D4D8; background: rgba(241, 100, 30, 0.06); border: 1px dashed rgba(241, 100, 30, 0.5); }
.em-tools-setup code { font-size: 12.5px; color: #FFFFFF; }
/* Les fournisseurs : le code promo sous « Crée ton compte » (et, pour l'admin, ce qui manque et « Modifier ») */
.em-claude-txt .em-code { grid-column: auto; margin-top: 4px; }

/* Ton Accueil : les cartes de l'accueil des membres (« Ton coach », « Rendez-vous »), avec « Modifier » ; le formulaire prend toute la largeur */
.em-adm-k2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; font-family: var(--em-display); font-size: 19px; font-weight: 500; color: #FFFFFF; }
.em-adm-k2 small { font-family: var(--em-font); font-size: 13px; font-weight: 400; color: #71717A; }
.em-adm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.em-adm-card-edit { justify-self: start; }
.em-adm-cardform { grid-column: 1 / -1; }
.em-adm-cardform .em-adm-f textarea { background: var(--em-card); }
.em-adm-cardform .em-tool-add { justify-self: start; margin: 0; }
.em-adm-rdvs { display: grid; gap: 10px; }
.em-adm-rdv { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px 12px; padding: 12px; border-radius: 12px; background: var(--em-card); border: 1px solid var(--em-line-2); }
.em-adm-rdv .em-adm-wide { grid-column: 1 / 4; }
.em-adm-rdv .em-adm-f input, .em-adm-rdv .em-adm-f select { background: var(--em-raised); }
.em-adm-rdv .em-adm-act-del { margin: 0 0 6px; }
@container (max-width: 560px) {
  .em-adm-cards { grid-template-columns: minmax(0, 1fr); }
  .em-adm-rdv { grid-template-columns: minmax(0, 1fr) auto; }
  .em-adm-rdv .em-adm-f, .em-adm-rdv .em-adm-wide { grid-column: 1; }
  .em-adm-rdv .em-adm-act-del { grid-column: 2; grid-row: 1; align-self: start; }
}

/* Connecter Claude : Claude et le « E » d'Etsy reliés par un trait, le bouton pour connecter la boutique, puis des demandes à copier */
/* Unlens.io dans « Mes outils » : logo en blanc, ses couleurs au survol, et l'offre à droite */
.em-nav-unlens img { flex: none; width: 16px; height: 16px; object-fit: cover; object-position: 3% 50%; filter: brightness(0) invert(1); opacity: 0.85; transition: filter 0.2s, opacity 0.2s; }
.em-nav a.em-nav-unlens:hover img { filter: none; opacity: 1; }
.em-nav-ext .em-tag { margin-left: auto; padding: 2px 7px; font-size: 10.5px; }
/* Unlens.io et sa pastille « 500 crédits offerts » : plus serrés que les autres liens, pour tenir dans la ligne quel que soit le navigateur */
.em-nav a.em-nav-unlens { gap: 6px; padding-right: 6px; }
.em-nav-unlens .em-tag { padding: 2px 5px; font-size: 9.5px; letter-spacing: 0; }
/* Mes fournisseurs : les logos en blanc (le fournisseur poster écrit comme un logo) ;
   au survol, la ligne passe sur fond blanc et chaque logo reprend ses couleurs officielles, comme dans la boîte à outils */
.em-nav a.em-nav-brand { transition: background 0.2s, color 0.2s; }
.em-nav-brand img { flex: none; height: var(--h); width: auto; filter: brightness(0) invert(1); opacity: 0.8; transition: filter 0.2s, opacity 0.2s; }
.em-nav-brand b { font-family: var(--em-display); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #E4E4E7; transition: color 0.2s; }
.em-nav a.em-nav-brand:hover { color: #131316; background: #FFFFFF; }
.em-nav a.em-nav-brand:hover img { filter: none; opacity: 1; }
.em-nav a.em-nav-brand:hover b { color: #131316; }
/* Printify : son logo foncé sur son vert de marque, comme sur son site */
.em-nav a.em-nav-printify:hover { background: #AEFF6E; }
/* Le fournisseur poster écrit comme son logo, en deux mots : blanc au repos, ses couleurs officielles au survol */
.em-nav-brand .em-ps-word { font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
.em-ps-word span { transition: color 0.2s; }
.em-nav a.em-nav-brand:hover .em-ps-word span:first-child { color: #282222; }
.em-nav a.em-nav-brand:hover .em-ps-word span:last-child { color: #FB9818; }
.em-nav a.em-nav-brand:hover .em-tag { color: #131316; background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.15); }
.em-nav-claude { flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url(../media/partenaires/claude.svg) center / contain no-repeat; mask: url(../media/partenaires/claude.svg) center / contain no-repeat; }
.em-nav a[aria-current="page"] .em-nav-claude { background: #F5833F; }
.em-claude { display: flex; align-items: center; gap: 24px; padding: 24px; border-radius: 18px; background: var(--em-card); border: 1px solid var(--em-line); }
.em-claude-link { flex: none; display: flex; align-items: center; }
.em-claude-link i { width: 34px; border-top: 1px dashed #3A3A40; }
.em-claude-logo { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--em-raised); border: 1px solid var(--em-line-2); }
.em-claude-logo img { width: 28px; height: 28px; }
/* Le bleu de l'app Etsy Seller (« Vendre sur Etsy »), celle des vendeurs */
.em-claude-etsy { background: #4D6BC6; border-color: #4D6BC6; }
.em-claude-etsy img { width: 22px; height: 22px; }
.em-claude-txt { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 6px; }
.em-claude-state { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--em-muted); }
.em-claude-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--em-dim); }
.em-claude-txt h2 { font-family: var(--em-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: #FFFFFF; }
.em-claude-txt h2 span { color: #8A8A93; }
.em-claude-txt p { max-width: 520px; font-size: 14px; color: var(--em-muted); }
.em-claude-txt .em-link { margin-top: 4px; }
/* Unlens : « Créer mon compte » puis « J’ai créé mon compte » (WhatsApp), l’un sous l’autre */
.em-claude-acts { flex: none; display: grid; gap: 10px; }
.em-btn-wa svg { width: 16px; height: 16px; color: #25D366; }
/* FAQ : une page par question ; dans le menu, le numéro de la question à la place de l'icône */
.em-nav-num { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; font-size: 11px; font-weight: 700; color: #A1A1AA; background: #1A1A1D; border: 1px solid var(--em-line-2); }
.em-nav a[aria-current="page"] .em-nav-num { color: #FFFFFF; background: var(--em-orange); border-color: var(--em-orange); }
.em-faq-k { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #71717A; }
.em-faq-a { display: grid; gap: 12px; padding: 24px 26px; border-radius: 18px; background: var(--em-card); border: 1px solid var(--em-line); font-size: 15px; line-height: 1.65; color: #D4D4D8; }
.em-faq-a h3 { margin: 10px 0 -4px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; }
.em-faq-a p, .em-faq-a ul, .em-faq-a dl { margin: 0; }
.em-faq-a b { color: #FFFFFF; }
.em-faq-a ul { display: grid; gap: 6px; padding-left: 20px; }
.em-faq-a li::marker { color: #52525B; }
.em-faq-a a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.3); }
.em-faq-dl { display: grid; }
.em-faq-dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--em-line); }
.em-faq-dl > div:first-child { border-top: 1px solid var(--em-line); }
.em-faq-dl dt { color: var(--em-muted); }
.em-faq-dl dd { margin: 0; font-weight: 500; text-align: right; color: #FFFFFF; }
.em-faq-source { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: #71717A; }
.em-faq-tip { margin-top: 6px !important; padding: 14px 16px; border-radius: 12px; background: var(--em-raised); border: 1px solid var(--em-line-2); }
.em-faq-nav { display: flex; justify-content: space-between; gap: 12px; }
.em-faq-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #FFFFFF; background: #151518; border: 1px solid var(--em-line-2); transition: border-color 0.2s; }
.em-faq-nav a:hover { border-color: #3A3A40; }
.em-faq-nav svg { width: 15px; height: 15px; }
.em-skill-video .em-link { margin-top: 4px; }
/* Vidéo pas encore disponible (fournisseurs sans tutoriel) : grisée, avec « À venir » */
.em-skill-video.is-soon { opacity: 0.55; }
.em-skill-video.is-soon h3 { display: flex; align-items: center; gap: 8px; }

/* Unlens.io : sa page reprend la carte de Connecter Claude ; avant/après avec curseur ; étapes numérotées */
.em-logo-unlens img { width: 28px; height: 28px; object-fit: cover; object-position: 3% 50%; }
/* Pages des fournisseurs : le logo en blanc dans une tuile plus large (le fournisseur poster écrit comme son logo, le 2e mot en orange) */
.em-claude-logo.is-wide { width: 124px; padding: 0 14px; }
.em-claude-logo.is-wide img { width: auto; max-width: 100%; height: var(--h); filter: brightness(0) invert(1); }
.em-claude-logo .em-ps-word { font-family: var(--em-display); font-size: 14px; font-weight: 800; letter-spacing: 0.02em; color: #FFFFFF; }
.em-claude-logo .em-ps-word span:last-child { color: #FB9818; }
/* Pages fournisseurs : le logo dans ses couleurs officielles, sur fond blanc (Printify : sur son vert), comme au survol du menu */
.em-claude-logo.is-color { background: #FFFFFF; border-color: #FFFFFF; }
.em-claude-logo.is-color img { filter: none; }
.em-claude-logo.is-color .em-ps-word span:first-child { color: #282222; }
.em-claude-logo.is-printify { background: #AEFF6E; border-color: #AEFF6E; }
.em-ba-card { grid-template-columns: minmax(0, 1fr); }
/* Aperçu du site d’un fournisseur : la capture de sa page d’accueil (16:9, 1600 × 900) dans un cadre de navigateur, cliquable */
.em-site { transition: border-color 0.2s; }
.em-site:hover { border-color: var(--em-line-2); }
.em-site-frame { overflow: hidden; border-radius: 12px; border: 1px solid var(--em-line-2); background: #FFFFFF; }
.em-site-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #151518; border-bottom: 1px solid var(--em-line-2); }
.em-site-bar i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2A2A30; }
.em-site-bar span { margin: 0 auto; padding: 3px 14px; border-radius: 6px; font-size: 12px; color: #A1A1AA; background: #0E0E10; }
.em-site-bar::after { content: ""; flex: none; width: 39px; }
.em-site-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }
.em-ba { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 14px; background: #111113; user-select: none; }
.em-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.em-ba-after { clip-path: inset(0 0 0 var(--pos)); }
.em-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #FFFFFF; box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); pointer-events: none; }
.em-ba-line i { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.em-ba-line i::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700; letter-spacing: 2px; color: #131316; }
.em-ba-tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #FFFFFF; background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.em-ba-tag.is-after { left: auto; right: 12px; }
.em-ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.em-ba input:focus-visible + * { outline: none; }
.em-ba:has(input:focus-visible) { outline: 2px solid var(--em-orange); outline-offset: 2px; }
.em-step { font-family: var(--em-display); font-size: 16px; font-weight: 600; }

/* Connecter Claude : les skills à créer (une ligne par skill, icône, titre, explication) */
.em-skills-intro { margin: -4px 0 6px; font-size: 13.5px; color: var(--em-muted); }
.em-skill { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--em-line); }
.em-skill-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: #FFFFFF; background: #151518; border: 1px solid var(--em-line-2); }
.em-skill-ic svg { width: 18px; height: 18px; }
.em-skill-txt { display: grid; gap: 3px; }
.em-skill h3 { font-size: 15px; font-weight: 600; color: #FFFFFF; }
.em-skill p { font-size: 13.5px; line-height: 1.55; color: var(--em-muted); }
.em-prompt { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--em-line); }
.em-prompt p { flex: 1; min-width: 0; font-size: 14.5px; color: var(--em-text); }

/* Événements : le pass à gauche, les infos à droite ; « Réserver ma place » grisé tant que ce n'est pas ouvert */
.em-event { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); overflow: hidden; border-radius: 20px; background: var(--em-card); border: 1px solid var(--em-line); }
/* Le pass, comme sur la page Club : fond sombre avec une lueur orange */
.em-event-visual { display: grid; place-content: center; justify-items: center; gap: 22px; min-height: 300px; padding: 30px 20px; background: radial-gradient(55% 70% at 50% 45%, rgba(241, 100, 30, 0.22), rgba(241, 100, 30, 0) 70%), #0B0B0D; border-right: 1px solid var(--em-line); }
/* Le pass, façon Apple Wallet comme sur la page Club : fond noir, date en grand, accès réservé, QR code (il ouvre cet onglet Événements) */
.em-pass { width: 320px; max-width: 100%; padding: 12px 16px 13px; border-radius: 18px; color: #FFFFFF; background: linear-gradient(160deg, #232327, #121214 60%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.em-pass-top { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.em-pass-logo { flex: none; width: 24px; height: 24px; border-radius: 7px; background: #131316 url(../media/logo-blanc.png) center / 52% no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.em-pass-top b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.em-pass-top span { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: #A1A1AA; }
.em-pass-main { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 10px; }
.em-pass-info { display: grid; gap: 2px; min-width: 0; }
.em-pass small { font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8A8A93; }
.em-pass-info > b { font-family: var(--em-display); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; }
.em-pass-field { display: grid; gap: 2px; margin-top: 6px; }
.em-pass-field em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 13px; font-weight: 500; white-space: nowrap; }
.em-pass-field em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F1641E; }
.em-qr { flex: none; width: 80px; height: 80px; padding: 5px; border-radius: 10px; background: #FFFFFF; }
/* Les icônes de l'espace membre sont tracées en contour : le QR code, lui, est plein et sans contour */
.em-qr svg { display: block; width: 100%; height: 100%; stroke: none; }
.em-event-body { display: grid; align-content: start; gap: 20px; padding: 26px 28px; }
.em-event-info { display: grid; margin: 0; }
.em-event-soon { margin: 0; padding: 16px 0; border-top: 1px solid var(--em-line); border-bottom: 1px solid var(--em-line); font-size: 15px; color: #D4D4D8; }
.em-event-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #71717A; }
.em-event-info > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--em-line); }
.em-event-info > div:first-child { border-top: 1px solid var(--em-line); }
.em-event-info dt { font-size: 13px; color: var(--em-muted); }
.em-event-info dd { margin: 0; font-size: 14px; font-weight: 500; text-align: right; color: #FFFFFF; }
/* Les infos réglées par l'admin : le lieu avec son adresse et « Voir sur la carte », le programme sur plusieurs lignes */
.em-event-info dd b, .em-event-info dd small, .em-event-info dd a { display: block; }
.em-event-info dd small { margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--em-muted); }
.em-event-info dd a { margin-top: 4px; font-size: 13px; font-weight: 500; color: #FFFFFF; text-decoration: underline; text-decoration-color: #52525B; text-underline-offset: 3px; }
.em-event-info > div.is-long { display: grid; gap: 6px; }
.em-event-info > div.is-long dd { font-weight: 400; line-height: 1.55; text-align: left; white-space: pre-line; color: #D4D4D8; }
.em-event-faces { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; color: #E4E4E7; }
.em-event-faces span { display: flex; padding-left: 8px; }
.em-event-faces i { width: 28px; height: 28px; margin-left: -9px; border-radius: 50%; background: #26262B center / cover; box-shadow: 0 0 0 2px #0B0B0D; }
.em-event-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.em-event-cta .em-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.em-event-cta small { font-size: 13px; color: var(--em-muted); }

/* Rejoindre l'équipe : une carte par poste en pleine largeur, la mission et le profil côte à côte, puis « Postuler sur WhatsApp » */
.em-jobs { display: grid; gap: 14px; }
.em-job { display: grid; align-content: start; gap: 18px; padding: 22px; border-radius: 18px; background: var(--em-card); border: 1px solid var(--em-line); }
.em-job-top { display: flex; align-items: center; gap: 14px; }
.em-job-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #FFFFFF; background: #151518; border: 1px solid var(--em-line-2); }
.em-job-ic svg { width: 19px; height: 19px; }
.em-job-title { display: grid; gap: 2px; }
.em-job-title b { font-family: var(--em-display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: #FFFFFF; }
.em-job-title small { font-size: 13.5px; color: var(--em-muted); }
.em-job-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 0; padding-top: 16px; border-top: 1px solid var(--em-line); }
.em-job-info dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #71717A; }
.em-job-info dd { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: #D4D4D8; }
.em-job-btn { justify-self: start; }
.em-jobs-soon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.em-job.is-soon { padding: 18px 20px; opacity: 0.5; }
.em-job.is-soon .em-tag { margin-left: auto; }
.em-jobs-note { font-size: 13.5px; color: var(--em-muted); }
/* Etsy Print, à la fin de la to-do : la suite avec le Club Privé */
.em-upsell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 24px; }
.em-upsell-txt { flex: 1 1 280px; display: grid; gap: 4px; }
.em-upsell-txt b { font-family: var(--em-display); font-size: 19px; font-weight: 500; color: #FFFFFF; }
.em-upsell-txt p { font-size: 14px; line-height: 1.55; color: #A1A1AA; }
.em-upsell-list { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.em-upsell-list li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #E4E4E7; }
.em-upsell-list svg { flex: none; width: 14px; height: 14px; color: var(--em-orange); }
.em-upsell-deal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: #FFFFFF; background: linear-gradient(135deg, rgba(255, 116, 21, 0.26), rgba(255, 116, 21, 0.1)); border: 1px solid #FF7415; box-shadow: 0 0 24px rgba(255, 116, 21, 0.2); }
.em-upsell-price { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.em-upsell-price s { font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.em-upsell-price b { font-family: var(--em-display); font-size: 21px; font-weight: 500; color: #FFFFFF; }
span.em-btn-cta { cursor: default; }
.em-adm-upsell { display: grid; gap: 14px; margin-top: 28px; }
.em-adm-upsell > .em-adm-call-edit { justify-self: start; }
/* Les postes réglés par l'admin : aucun poste ouvert, et pour l'admin « Modifier » et « Ajouter un poste » */
.em-jobs-none { padding: 18px 20px; border-radius: 18px; font-size: 14px; color: var(--em-muted); background: var(--em-card); border: 1px solid var(--em-line); }
.em-job .em-job-edit { justify-self: start; }
.em-job.is-soon .em-job-edit { margin-top: -6px; }
.em-job-add { justify-self: start; }

/* Démo : ce qui est réservé aux membres est caché (nom du fournisseur, offres, prochaines actions de la to-do) */
.em-demo-only, .em-mini-lock { display: none; }
.em-app.is-demo .em-member-only, .em-app.is-demo .em-demo-hide { display: none !important; }
.em-app.is-demo span.em-demo-only { display: inline; }
/* Démo : à la place des fournisseurs, l’onglet « Nos fournisseurs » (page floutée, réservée aux membres) */
.em-nav a.em-demo-only { display: none; }
.em-app.is-demo .em-nav a.em-demo-only { display: flex; }
.em-app.is-demo .em-tool-logo svg.em-demo-only { display: block; width: 16px; height: 16px; color: var(--em-muted); }
.em-nav a:not([href]) { cursor: pointer; }
.em-app.is-demo .em-mini-lock { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; color: var(--em-muted); }
.em-mini-lock svg { width: 14px; height: 14px; }

/* Démo : la to-do list et la boîte à outils restent floutées derrière la carte « Réservé aux membres » */
.em-nav-lock { display: none; }
/* Etsy Print : les pages du Club Privé gardent un cadenas dans le menu */
.em-nav a.is-offer-locked .em-nav-lock { display: block; width: 13px; height: 13px; margin-left: auto; color: var(--em-dim); }
.em-app.is-demo .em-nav a .em-nav-lock { display: block; width: 13px; height: 13px; margin-left: auto; color: var(--em-dim); }
/* Page verrouillée en démo : hauteur minimale pour que la carte « Réservé aux membres » ne soit jamais coupée, même sur une page courte */
.em-view.is-locked { position: relative; min-height: 640px; max-height: 700px; overflow: hidden; }
.em-view.is-locked > :not(.em-head):not(.em-lock) { filter: blur(14px); opacity: 0.22; user-select: none; pointer-events: none; }
.em-lock { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 120px 0 40px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, #000000 96%); }
.em-lock-card { width: 100%; max-width: 420px; display: grid; justify-items: center; gap: 12px; padding: 30px 26px 24px; text-align: center; border-radius: 22px; background: linear-gradient(180deg, rgba(22, 22, 25, 0.86), rgba(10, 10, 12, 0.94)); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.em-lock-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #FFFFFF; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }
.em-lock-ic svg { width: 19px; height: 19px; }
.em-lock-card h2 { font-family: var(--em-display); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: #FFFFFF; }
.em-lock-card h2 span { display: block; color: #8A8A93; }
.em-lock-card p { max-width: 340px; font-size: 14px; color: #A1A1AA; }
.em-lock-card .em-btn { margin-top: 6px; }
.em-lock-back { font-size: 13px; color: var(--em-muted); transition: color 0.2s; }
.em-lock-back:hover { color: #FFFFFF; }

/* Message d'information des boutons de démo */
/* Recherche rapide : bouton dans la barre du haut et fenêtre au centre (⌘K) */
.em-search { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-radius: 10px; border: 1px solid #1F1F23; background: var(--em-card); font: inherit; font-size: 13px; color: var(--em-muted); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.em-search:hover { color: #FFFFFF; border-color: var(--em-line-2); }
.em-search svg { width: 15px; height: 15px; }
.em-search kbd, .em-cmd kbd { padding: 2px 6px; border-radius: 6px; font: inherit; font-size: 11px; font-weight: 600; color: #A1A1AA; background: #1A1A1D; border: 1px solid var(--em-line-2); }
.em-top .em-pill { margin-left: 0; }
.em-cmd { position: fixed; inset: 0; z-index: 70; display: grid; justify-items: center; align-items: start; padding: 14vh 16px 16px; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.em-cmd-box { width: 100%; max-width: 560px; overflow: hidden; border-radius: 18px; background: #111113; border: 1px solid var(--em-line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); animation: em-in 0.18s ease-out; }
.em-cmd-field { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--em-line); }
.em-cmd-field svg { width: 18px; height: 18px; color: var(--em-muted); }
.em-cmd-field input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15.5px; color: #FFFFFF; outline: none; }
.em-cmd-field input::placeholder { color: #52525B; }
.em-cmd-field input:focus-visible { outline: none; }   /* le seul champ de la fenêtre, déjà en haut : pas de rectangle orange */
.em-cmd-list { max-height: 340px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
.em-cmd-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; color: #E4E4E7; cursor: pointer; }
.em-cmd-list li small { flex: none; font-size: 12px; color: #71717A; }
.em-cmd-list li.is-active { color: #FFFFFF; background: rgba(255, 255, 255, 0.07); }
.em-cmd-list li.is-active small { color: #A1A1AA; }

/* Photo de profil : la fenêtre pour zoomer et placer la photo avant de l'enregistrer (espace-membre.js) */
.em-crop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.em-crop-box { width: 100%; max-width: 380px; padding: 24px; border-radius: 20px; text-align: center; background: #111113; border: 1px solid var(--em-line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); animation: em-in 0.18s ease-out; }
.em-crop-box h2 { margin: 0; font-family: var(--em-display); font-size: 19px; font-weight: 600; color: var(--em-ink); }
.em-crop-box p { margin: 6px 0 20px; font-size: 13.5px; color: var(--em-muted); }
.em-crop-stage { position: relative; width: min(260px, 100%); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 50%; background: #000000; box-shadow: 0 0 0 1px var(--em-line-2); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.em-crop-stage:active { cursor: grabbing; }
.em-crop-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.em-crop-zoom { display: flex; align-items: center; gap: 10px; margin: 20px 4px 0; color: var(--em-muted); }
.em-crop-zoom svg { width: 18px; height: 18px; flex: none; }
.em-crop-zoom input { flex: 1; min-width: 0; accent-color: var(--em-orange); cursor: pointer; }
.em-crop-actions { display: flex; gap: 10px; margin-top: 22px; }
.em-crop-actions .em-btn { flex: 1; }
.em-cmd-empty { padding: 18px; font-size: 14px; color: var(--em-muted); }
.em-cmd-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--em-line); font-size: 12px; color: #71717A; }
.em-cmd-foot span { display: inline-flex; align-items: center; gap: 5px; }

/* Notifications : la liste s'ouvre sous la cloche */
.em-notif { position: relative; }
.em-notif-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 330px; max-width: calc(100vw - 32px); padding: 6px; border-radius: 14px; background: #141416; border: 1px solid var(--em-line-2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }
.em-notif-k { padding: 8px 10px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #71717A; }
.em-notif-panel a { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 10px; transition: background 0.15s; }
.em-notif-panel a:hover { background: #1C1C20; }
.em-notif-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #E4E4E7; background: #1A1A1D; border: 1px solid var(--em-line-2); }
.em-notif-ic svg { width: 15px; height: 15px; }
.em-notif-panel b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: #FFFFFF; }
.em-notif-panel small { font-size: 12px; color: var(--em-muted); }
.em-notif-vide { padding: 4px 10px 10px; font-size: 13.5px; color: var(--em-muted); }

.em-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px; font-size: 14px; color: #FFFFFF; background: #18181B; border: 1px solid rgba(241, 100, 30, 0.45); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); transform: translateX(-50%); animation: em-toast 0.3s ease-out; }
@keyframes em-toast { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- Partie Admin : la liste des membres et la fiche de chacun ---------- */
.em-head-row > .em-btn { justify-self: start; }
.em-adm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.em-adm-search { flex: 1 1 260px; max-width: 360px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; color: var(--em-muted); background: var(--em-card); border: 1px solid #1F1F23; transition: border-color 0.2s; }
.em-adm-search:focus-within { border-color: #3A3A40; }
.em-adm-search input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font: inherit; font-size: 14px; color: #FFFFFF; outline: none; }
.em-adm-search input::placeholder { color: #71717A; }
/* Au clavier ou au clic : le contour orange suit le champ arrondi, pas le rectangle du texte à l'intérieur */
.em-adm-search input:focus-visible { outline: none; }
.em-adm-search:has(input:focus-visible) { outline: 2px solid var(--em-orange); outline-offset: 2px; }
.em-adm-filter { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--em-card); border: 1px solid #1F1F23; }
.em-adm-filter button { padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 500; color: var(--em-muted); cursor: pointer; transition: color 0.15s, background 0.15s; }
.em-adm-filter button:hover { color: #FFFFFF; }
.em-adm-filter button[aria-pressed="true"] { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
.em-adm-count { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: #71717A; }

/* La liste : une ligne par membre, en colonnes ; en cartes quand la liste a moins de 640 px (mobile, petite fenêtre) */
.em-adm-list { container-type: inline-size; display: grid; border-radius: 18px; background: var(--em-card); border: 1px solid var(--em-line); overflow: hidden; }
.em-adm-thead, .em-adm-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(88px, 0.8fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 0.9fr) 14px; align-items: center; gap: 14px; padding: 12px 18px; }
.em-adm-thead { padding-top: 11px; padding-bottom: 11px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #71717A; border-bottom: 1px solid var(--em-line); }
.em-adm-row { border-top: 1px solid #17171A; transition: background 0.15s; }
.em-adm-thead + .em-adm-row { border-top: 0; }
.em-adm-row:hover { background: #121214; }
.em-adm-row.is-off { opacity: 0.6; }
.em-adm-who { min-width: 0; display: flex; align-items: center; gap: 12px; }
.em-adm-who > span { min-width: 0; }
.em-adm-who b, .em-adm-who small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-adm-who b { font-size: 14.5px; font-weight: 500; color: #FFFFFF; }
.em-adm-who small { font-size: 12.5px; color: #71717A; }
.em-adm-av { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.em-adm-cell { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13.5px; color: #D4D4D8; }
.em-adm-cell b { width: 100%; font-weight: 500; color: #E4E4E7; }
.em-adm-cell small { width: 100%; font-size: 12.5px; color: #71717A; }
.em-adm-cell small.is-ok { color: var(--em-green); }
.em-adm-prog { flex-wrap: nowrap; gap: 10px; }
.em-adm-prog .em-bar { flex: 1; }
.em-adm-prog small { width: auto; flex: none; font-variant-numeric: tabular-nums; }
.em-adm-chev { width: 14px; height: 14px; color: var(--em-dim); }
.em-tag-on { color: var(--em-green); background: rgba(74, 222, 128, 0.06); border-color: rgba(74, 222, 128, 0.3); }
.em-tag-off { color: #FCA5A5; background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.3); }
.em-tag-wait { color: var(--em-orange-soft); background: rgba(241, 100, 30, 0.08); border-color: rgba(241, 100, 30, 0.3); }
/* Où en est son compte, sous l'email du membre : sa dernière venue, ou l'invitation en attente (en orange) */
.em-adm-who small.em-adm-seen { font-size: 12px; color: #71717A; }
.em-adm-who small.em-adm-seen.is-wait { color: var(--em-orange-soft); }

/* Chargement, liste vide, erreur */
.em-adm-wait, .em-adm-none { padding: 28px 20px; font-size: 14px; text-align: center; color: var(--em-muted); }
.em-adm-empty { display: grid; justify-items: center; gap: 8px; padding: 44px 24px; text-align: center; }
.em-adm-empty-ic { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 14px; color: #A1A1AA; background: var(--em-raised); border: 1px solid #222226; }
.em-adm-empty-ic svg { width: 20px; height: 20px; }
.em-adm-empty b { font-size: 16px; font-weight: 500; color: #FFFFFF; }
.em-adm-empty p { max-width: 420px; font-size: 14px; color: var(--em-muted); }
.em-adm-empty .em-btn { margin-top: 8px; }

/* La fiche d'un membre : identité, infos clés, appels, to-do list */
.em-adm-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--em-muted); transition: color 0.15s; }
.em-adm-back:hover { color: #FFFFFF; }
.em-adm-back svg { width: 15px; height: 15px; }
.em-adm-fiche { display: grid; gap: 14px; }
.em-adm-id { display: flex; align-items: center; gap: 18px; }
.em-adm-av-lg { width: 64px; height: 64px; }
.em-adm-id-txt { min-width: 0; display: grid; gap: 6px; }
.em-adm-id h1 { font-family: var(--em-display); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: #FFFFFF; }
.em-adm-contact { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.em-adm-contact a, .em-adm-contact span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #A1A1AA; word-break: break-all; transition: color 0.15s; }
.em-adm-contact a:hover { color: #FFFFFF; }
.em-adm-contact svg { width: 15px; height: 15px; }
.em-adm-id-acts { margin-left: auto; align-self: flex-start; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.em-adm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.em-adm-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.em-adm-facts div { flex: 1 1 150px; padding: 14px 16px; border-radius: 14px; background: var(--em-card); border: 1px solid var(--em-line); }
.em-adm-facts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #71717A; }
.em-adm-facts dd { margin: 6px 0 0; font-size: 14.5px; font-weight: 500; color: #FFFFFF; }
.em-adm-sec { display: grid; gap: 12px; padding: 20px; border-radius: 18px; background: var(--em-card); border: 1px solid var(--em-line); }
.em-adm-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--em-display); font-size: 19px; font-weight: 500; color: #FFFFFF; }
.em-adm-h span { font-family: var(--em-font); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: #71717A; }
.em-adm-calls { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.em-adm-call { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 14px; background: var(--em-raised); border: 1px solid #1F1F23; }
.em-adm-call .em-call-week { width: 46px; height: 46px; border-radius: 13px; font-size: 15px; }
.em-adm-call.is-next .em-call-week { color: #FFFFFF; background: var(--em-orange); border-color: var(--em-orange); }
.em-adm-call.is-done .em-call-week { color: var(--em-dim); }
.em-adm-call-body { flex: 1; min-width: 0; display: grid; gap: 8px; }
.em-adm-call h3 { margin: 0; font-size: 15.5px; font-weight: 500; color: #FFFFFF; }
.em-adm-links { display: flex; flex-wrap: wrap; gap: 6px; }
.em-adm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 13px; color: #E4E4E7; background: #151518; border: 1px solid #26262B; transition: border-color 0.15s; }
a.em-adm-chip:hover { border-color: rgba(241, 100, 30, 0.5); }
.em-adm-chip svg { width: 14px; height: 14px; color: #A1A1AA; }
.em-adm-chip.is-replay svg { color: var(--em-orange-soft); }
.em-adm-chip.is-missing { color: #A1A1AA; border-style: dashed; }
/* Modifier un appel : le bouton à droite de l'appel, le formulaire en dessous, sur toute la largeur */
.em-adm-call-edit { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; font-size: 13px; color: #E4E4E7; background: #151518; border: 1px solid #26262B; cursor: pointer; transition: border-color 0.15s; }
.em-adm-call-edit:hover { border-color: rgba(241, 100, 30, 0.5); }
.em-adm-call-edit svg { width: 14px; height: 14px; color: #A1A1AA; }
.em-adm-todo { display: grid; gap: 10px; margin-top: 4px; }
.em-adm-period { padding: 14px; border-radius: 14px; background: var(--em-raised); border: 1px solid #1F1F23; }
.em-adm-period.is-now { border-color: rgba(255, 255, 255, 0.16); }
.em-adm-period summary { list-style: none; cursor: pointer; }
.em-adm-period summary::-webkit-details-marker { display: none; }
.em-adm-period[open] summary { margin-bottom: 10px; }
.em-adm-period-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.em-adm-period-chev { width: 14px; height: 14px; color: #71717A; transition: transform 0.2s; }
.em-adm-period[open] .em-adm-period-chev { transform: rotate(90deg); }
.em-adm-period-h b { font-size: 14.5px; font-weight: 500; color: #FFFFFF; }
.em-adm-period-h small { font-size: 13px; color: #71717A; }
.em-adm-period-h > span { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: #71717A; }
.em-adm-period ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.em-adm-period li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #E4E4E7; }
.em-adm-period li .em-chk { width: 18px; height: 18px; margin-top: 1px; }
.em-adm-period li.is-done { color: #71717A; text-decoration: line-through; text-decoration-color: var(--em-dim); }
.em-adm-period li.is-done .em-chk { color: #0A0A0B; border-color: #FFFFFF; background: #FFFFFF; }
/* « Ajoutée par… » : sur sa ligne, jamais barrée (un bloc en ligne ne reçoit pas le trait de l'action faite) */
.em-adm-by { display: inline-block; width: 100%; font-style: normal; font-size: 12px; color: var(--em-orange-soft); }
/* Une action donnée se retire avec la corbeille ; « Ajouter » en donne une nouvelle, en bas de la période */
.em-adm-act-del { flex: none; margin: -5px -4px -5px auto; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 9px; border: 1px solid transparent; background: transparent; color: #71717A; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.em-adm-act-del:hover { color: #FCA5A5; border-color: rgba(248, 113, 113, 0.3); }
.em-adm-act-del svg { width: 15px; height: 15px; }
.em-adm-act-add { display: flex; gap: 8px; margin-top: 12px; }
.em-adm-act-add input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--em-line-2); background: var(--em-card); font: inherit; font-size: 14px; color: #FFFFFF; outline: none; transition: border-color 0.15s; }
.em-adm-act-add input::placeholder { color: #52525B; }
.em-adm-act-add input:focus { border-color: #52525B; }
.em-adm-act-add .em-btn { flex: none; height: 40px; padding: 0 14px; font-size: 13.5px; }
.em-adm-act-add .em-btn svg { width: 15px; height: 15px; }
/* La to-do d'un coach (Ma to-do list, fiche du coach) : des cases à cocher, comme la to-do des membres */
.em-coach-todo { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.em-coach-todo li { display: flex; gap: 8px; }
.em-coach-todo .em-task-txt { overflow-wrap: anywhere; }

/* Boutons du haut de la liste ; argent et cases sans to-do dans la liste */
.em-adm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.em-adm-cell small.is-due { color: var(--em-orange-soft); }
.em-adm-prog.is-none small { width: 100%; }

/* À relancer : en haut de la liste, et en bandeau sur la fiche */
.em-adm-relances { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; background: rgba(241, 100, 30, 0.06); border: 1px solid rgba(241, 100, 30, 0.3); }
.em-adm-relances-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #FFFFFF; }
.em-adm-relances-h svg { color: var(--em-orange-soft); }
.em-adm-relances-h span { padding: 1px 8px; border-radius: 999px; font-size: 12px; color: #131316; background: var(--em-orange-soft); }
.em-adm-relances ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.em-adm-relances li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--em-card); border: 1px solid var(--em-line); }
.em-adm-relance-txt { flex: 1; min-width: 0; display: grid; }
.em-adm-relance-txt b { font-size: 14.5px; font-weight: 500; color: #FFFFFF; }
.em-adm-relance-txt small { font-size: 13px; color: #A1A1AA; }
.em-adm-relance-txt:hover b { text-decoration: underline; text-underline-offset: 3px; }
.em-adm-relance-on { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(241, 100, 30, 0.06); border: 1px solid rgba(241, 100, 30, 0.3); }
.em-adm-relance-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--em-orange-soft); background: rgba(241, 100, 30, 0.12); }
.em-adm-relance-on > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.em-adm-relance-on b { font-size: 14.5px; font-weight: 600; color: #FFFFFF; }
.em-adm-relance-on small { font-size: 13.5px; color: #D4D4D8; }

/* Vue d'ensemble de l'admin : quatre chiffres alignés d'une carte à l'autre, puis des listes (un membre par ligne, ses boutons à droite) */
.em-adm-day { container-type: inline-size; display: grid; gap: 14px; }
.em-adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.em-adm-kpi { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; padding: 16px; border-radius: 16px; background: var(--em-card); border: 1px solid var(--em-line); }
a.em-adm-kpi { transition: border-color 0.15s; }
a.em-adm-kpi:hover { border-color: var(--em-line-2); }
.em-adm-kpi small { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #71717A; }
.em-adm-kpi b { font-family: var(--em-display); font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.em-adm-kpi span { font-size: 13px; color: var(--em-muted); }
.em-adm-items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.em-adm-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 10px 12px; border-radius: 14px; background: var(--em-raised); border: 1px solid #1F1F23; }
.em-adm-item-txt { min-width: 0; display: grid; }
.em-adm-item-txt b { font-size: 14.5px; font-weight: 500; color: #FFFFFF; }
.em-adm-item-txt small { font-size: 13px; color: #A1A1AA; }
.em-adm-item-txt small.is-due { color: var(--em-orange-soft); }
.em-adm-item-txt:hover b { text-decoration: underline; text-underline-offset: 3px; }
.em-adm-item-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; }
.em-adm-cell b.is-late { color: var(--em-orange-soft); }
@container (min-width: 641px) {
  .em-adm-list.is-prog .em-adm-thead, .em-adm-list.is-prog .em-adm-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(0, 0.75fr) minmax(0, 1.25fr) 14px; }
  .em-adm-list.is-coachs .em-adm-thead, .em-adm-list.is-coachs .em-adm-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) 14px; }
}
@container (max-width: 560px) {
  .em-adm-kpi { padding: 12px 14px; }
  .em-adm-kpi b { font-size: 22px; }
  .em-adm-item { grid-template-columns: auto minmax(0, 1fr); }
  .em-adm-item-end { grid-column: 2; justify-content: flex-start; }
}

/* Infos de la fiche : une précision sous la valeur, un lien */
.em-adm-facts dd small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: #71717A; }
.em-adm-facts dd a { color: #FFFFFF; text-decoration: underline; text-decoration-color: #52525B; text-underline-offset: 3px; word-break: break-all; }

/* Paiements : une ligne par échéance, un clic la marque reçue */
.em-adm-line { font-size: 14px; color: var(--em-muted); }
.em-adm-due { font-size: 14px; color: #D4D4D8; }
.em-adm-due b { color: var(--em-orange-soft); }
.em-adm-pay { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.em-adm-pay li { display: flex; align-items: center; gap: 8px; }
.em-adm-pay-del { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid transparent; background: transparent; color: #71717A; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
button.em-adm-pay-del:hover { color: #FCA5A5; border-color: rgba(248, 113, 113, 0.3); }
.em-adm-sec-btn { justify-self: start; }
.em-adm-payadd { display: grid; gap: 14px; padding: 16px; border-radius: 14px; background: var(--em-raised); border: 1px solid var(--em-line-2); }
.em-adm-payadd .em-adm-f input, .em-adm-payadd .em-adm-f select { background: var(--em-card); }
.em-adm-callform { flex: 1 1 100%; background: var(--em-card); }
.em-adm-callform .em-adm-f input, .em-adm-callform .em-adm-f select { background: var(--em-raised); }
.em-adm-pay-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; text-align: left; color: #E4E4E7; background: var(--em-raised); border: 1px solid #1F1F23; cursor: pointer; transition: border-color 0.15s; }
.em-adm-pay-row:hover { border-color: var(--em-line-2); }
.em-adm-pay-row > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.em-adm-pay-row b { font-size: 15px; font-weight: 500; color: #FFFFFF; }
.em-adm-pay-row small { font-size: 13px; color: #71717A; }
.em-adm-pay-row.is-ok .em-chk { color: #0A0A0B; border-color: #FFFFFF; background: #FFFFFF; }
.em-adm-note { font-size: 14.5px; line-height: 1.6; color: #D4D4D8; white-space: pre-wrap; }
.em-adm-hint { font-size: 13px; color: #71717A; }

/* Ajouter un membre : le formulaire, par blocs */
.em-adm-form { display: grid; gap: 14px; }
.em-adm-box { display: grid; gap: 14px; margin: 0; padding: 20px; border-radius: 18px; background: var(--em-card); border: 1px solid var(--em-line); min-width: 0; }
.em-adm-box legend { float: left; width: 100%; padding: 0; font-family: var(--em-display); font-size: 18px; font-weight: 500; color: #FFFFFF; }
.em-adm-box legend small { margin-left: 8px; font-family: var(--em-font); font-size: 12.5px; font-weight: 500; color: #71717A; }
.em-adm-box legend + * { clear: both; }
.em-adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.em-adm-wide { grid-column: 1 / -1; }
.em-adm-f { display: grid; gap: 6px; min-width: 0; }
.em-adm-f > span { font-size: 13px; font-weight: 500; color: #A1A1AA; }
.em-adm-f > span small, .em-adm-check small { font-weight: 400; color: #71717A; }
.em-adm-f input[readonly] { color: #A1A1AA; background: transparent; }
.em-adm-f i { font-style: normal; color: var(--em-orange-soft); }
.em-adm-f input, .em-adm-f select, .em-adm-f textarea { width: 100%; min-width: 0; padding: 0 12px; height: 42px; border-radius: 12px; border: 1px solid var(--em-line-2); background: var(--em-raised); font: inherit; font-size: 14.5px; color: #FFFFFF; outline: none; transition: border-color 0.15s; }
.em-adm-f textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.em-adm-f input::placeholder, .em-adm-f textarea::placeholder { color: #52525B; }
.em-adm-f input:focus, .em-adm-f select:focus, .em-adm-f textarea:focus { border-color: #52525B; }
.em-adm-f input[type="date"], .em-adm-f input[type="time"] { color-scheme: dark; }
/* Le téléphone WhatsApp : l'indicatif du pays, puis le numéro */
.em-adm-tel { display: flex; gap: 8px; min-width: 0; }
.em-adm-f .em-adm-tel select { flex: none; width: 96px; padding: 0 8px; }
.em-adm-f .em-adm-tel input { flex: 1; }
/* Boutiques Etsy : une ligne par adresse, avec sa croix, et « Ajouter une boutique » dessous */
.em-adm-shops { display: grid; gap: 8px; }
.em-adm-shop { display: flex; gap: 8px; }
.em-adm-shop input { flex: 1; }
.em-adm-shop button { flex: none; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 12px; border: 1px solid var(--em-line-2); background: transparent; color: #71717A; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.em-adm-shop button:hover { color: #FFFFFF; border-color: #3A3A40; }
.em-adm-add-line { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: transparent; font-size: 13.5px; font-weight: 500; color: var(--em-orange-soft); cursor: pointer; }
.em-adm-add-line:hover { color: #FFFFFF; }
.em-adm-add-line svg { width: 14px; height: 14px; }
.em-adm-offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.em-adm-offre { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--em-raised); border: 1px solid var(--em-line-2); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
/* Le rond de l'offre, dessiné ici (celui du navigateur décentrait son point) : un anneau gris, puis orange avec un point blanc au centre */
.em-adm-offre input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-content: center; width: 18px; height: 18px; margin: 0; border-radius: 50%; border: 1.5px solid #52525B; background: transparent; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.em-adm-offre input::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; transform: scale(0); transition: transform 0.15s; }
.em-adm-offre input:checked { border-color: var(--em-orange); background: var(--em-orange); }
.em-adm-offre input:checked::before { transform: scale(1); }
.em-adm-offre input:focus-visible { outline: 2px solid rgba(241, 100, 30, 0.6); outline-offset: 2px; }
.em-adm-offre span { display: grid; }
.em-adm-offre b { font-size: 15px; font-weight: 500; color: #FFFFFF; }
.em-adm-offre small { font-size: 12.5px; color: #71717A; }
.em-adm-offre:has(input:checked) { border-color: rgba(241, 100, 30, 0.6); background: rgba(241, 100, 30, 0.06); }
.em-adm-check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #D4D4D8; cursor: pointer; }
.em-adm-check input { accent-color: var(--em-orange); width: 16px; height: 16px; margin: 0; }
/* Un lien de l'appel (Meet, replay) et sa case « Non disponible », sur la ligne de son titre ; cochée, le champ se grise */
.em-adm-link-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.em-adm-link-h small { font-weight: 400; color: #71717A; }
.em-adm-f .em-adm-na { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: #A1A1AA; cursor: pointer; }
.em-adm-f .em-adm-na input { width: 15px; height: 15px; margin: 0; padding: 0; border: 0; background: none; accent-color: var(--em-orange); cursor: pointer; }
.em-adm-f input:disabled { opacity: 0.4; cursor: not-allowed; }
.em-adm-err { padding: 12px 14px; border-radius: 12px; font-size: 14px; color: #FCA5A5; background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.3); }
.em-adm-err a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.em-adm-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.em-adm-submit .em-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.em-adm-cancel { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--em-muted); cursor: pointer; }
.em-adm-cancel:hover { color: #FFFFFF; }

/* Mon chiffre d'affaires : chiffres clés, encaissé par mois, part de chaque offre, échéances à encaisser.
   Les deux offres, aux couleurs données par Thomas pour ses graphiques seulement (le reste de l'espace membre garde son orange) :
   le Club Privé en or (celui du lien Club Privé du site), Etsy Print en orange. Passées au script du guide dataviz sur le fond
   des cartes (#0E0E10) : elles se distinguent, daltoniens compris, mais sont plus lumineuses que la plage conseillée sur fond
   sombre (l'or ressort plus que l'orange). Version plus sombre qui passe tout : #B08D3A et #C2490E.
   Le retard, en rouge, va toujours avec son icône et son texte. */
.em-fin { --fin-club: #E8C84A; --fin-print: #FF7415; --fin-late: #d03b3b; }
.em-fin .is-club { --c: var(--fin-club); }
.em-fin .is-print { --c: var(--fin-print); }
.em-fin-body { display: grid; gap: 14px; }
.em-fin-kpis { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 10px; }
.em-fin-hero, .em-fin-tile { display: grid; align-content: start; gap: 6px; padding: 18px; border-radius: 18px; background: var(--em-card); border: 1px solid var(--em-line); }
.em-fin-hero small, .em-fin-tile small { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #71717A; }
.em-fin-hero b { font-family: var(--em-display); font-size: 48px; font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: #FFFFFF; }
.em-fin-tile b { font-family: var(--em-display); font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: #FFFFFF; }
.em-fin-hero span, .em-fin-tile span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #A1A1AA; }
.em-fin-tile.is-late { border-color: rgba(208, 59, 59, 0.45); }
.em-fin-tile svg, .em-fin-state svg { width: 15px; height: 15px; color: var(--fin-late); }
.em-fin-chart-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.em-fin-tools { display: flex; align-items: center; gap: 14px; }
.em-fin-style button { padding: 5px 11px; font-size: 12.5px; }
.em-fin-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #D4D4D8; }
.em-fin-legend span { display: inline-flex; align-items: center; gap: 8px; }
.em-fin-legend i, .em-fin-offers i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.em-fin-plot { position: relative; }
.em-fin-svg { display: block; overflow: visible; fill: none; stroke: none; }
.em-fin-grid { stroke: #1C1C20; stroke-width: 1; }
.em-fin-base { stroke: #2C2C31; stroke-width: 1; }
.em-fin-tick { font-family: var(--em-font); font-size: 11.5px; fill: #71717A; font-variant-numeric: tabular-nums; }
.em-fin-cap { font-family: var(--em-font); font-size: 12px; font-weight: 600; fill: #D4D4D8; }
.em-fin-bar { fill: var(--c); transition: filter 0.15s; }
.em-fin-col.is-on .em-fin-bar { filter: brightness(1.2); }
/* Courbes : trait de 2 px arrondi, dégradé léger dessous, points cerclés de la couleur du fond */
.em-fin-area { stroke: none; }
.em-fin-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.em-fin-dot { fill: var(--c); stroke: var(--em-card); stroke-width: 2; }
.em-fin-x { opacity: 0; transition: opacity 0.12s; }
.em-fin-x.is-on { opacity: 1; }
.em-fin-cross { stroke: #3A3A40; stroke-width: 1; }
/* Camembert en anneau : 2 px d'écart entre les parts, le total au centre */
.em-fin-offer { display: flex; align-items: center; gap: 22px; }
.em-fin-offer .em-fin-offers { flex: 1; min-width: 0; }
.em-fin-donut { flex: none; display: block; overflow: visible; }
.em-fin-ring { fill: none; stroke: #1C1C20; stroke-width: 16; }
.em-fin-seg { fill: none; stroke: var(--c); stroke-width: 16; }
.em-fin-donut-v { font-family: var(--em-display); font-size: 20px; font-weight: 500; fill: #FFFFFF; stroke: none; }
.em-fin-donut-k { font-family: var(--em-font); font-size: 11.5px; fill: #71717A; stroke: none; }
.em-fin-hit { position: absolute; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: default; }
.em-fin-hit:focus-visible { outline: 2px solid var(--em-orange); outline-offset: -2px; }
.em-fin-tip { position: absolute; z-index: 2; min-width: 170px; padding: 10px 12px; border-radius: 12px; background: #141416; border: 1px solid var(--em-line-2); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); pointer-events: none; }
.em-fin-tip p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: #A1A1AA; }
.em-fin-tip p + p { margin-top: 4px; }
.em-fin-tip .em-fin-tip-h { margin-bottom: 6px; font-weight: 600; color: #FFFFFF; }
.em-fin-tip .em-fin-tip-h::first-letter { text-transform: uppercase; }
.em-fin-tip i { flex: none; width: 12px; height: 2px; border-radius: 1px; background: var(--c); }
.em-fin-tip b { font-weight: 600; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.em-fin-tip .em-fin-tip-t { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--em-line); color: #D4D4D8; }
.em-fin-table { overflow-x: auto; }
.em-fin-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.em-fin-table th, .em-fin-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--em-line); font-variant-numeric: tabular-nums; color: #D4D4D8; white-space: nowrap; }
.em-fin-table tbody th { text-align: left; font-weight: 500; color: #FFFFFF; }
.em-fin-table thead th { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #71717A; }
.em-fin-table thead th:first-child { text-align: left; }
.em-fin-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.em-fin-offers { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.em-fin-offers li { display: flex; align-items: center; gap: 10px; }
.em-fin-offers span { flex: 1; min-width: 0; display: grid; }
.em-fin-offers b { font-size: 14.5px; font-weight: 500; color: #FFFFFF; }
.em-fin-offers small { font-size: 12.5px; color: #71717A; }
.em-fin-offers strong { font-size: 15px; font-weight: 600; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.em-fin-offers em { width: 46px; text-align: right; font-style: normal; font-size: 13px; color: #A1A1AA; font-variant-numeric: tabular-nums; }
.em-fin-due { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.em-fin-due li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--em-raised); border: 1px solid #1F1F23; }
.em-fin-due li.is-late { border-color: rgba(208, 59, 59, 0.4); }
.em-fin-who { flex: 1; min-width: 0; display: grid; }
.em-fin-who b { font-size: 14px; font-weight: 500; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.em-fin-who:hover b { text-decoration: underline; text-underline-offset: 3px; }
.em-fin-who small { font-size: 12.5px; color: #71717A; }
.em-fin-due-v { font-weight: 600; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.em-fin-state { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; font-weight: 600; color: #FCA5A5; }
.em-fin-due .em-btn { padding: 7px 12px; font-size: 13px; }
@media (max-width: 1100px) {
  .em-fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-fin-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .em-fin-kpis { grid-template-columns: minmax(0, 1fr); }
  .em-fin-hero b { font-size: 44px; }
  .em-fin-due li { flex-wrap: wrap; }
  .em-fin-who { flex-basis: 100%; }
  .em-fin-due-v { margin-right: auto; }
  .em-fin-offer { flex-direction: column; align-items: stretch; }
  .em-fin-donut { align-self: center; }
}

@container (max-width: 640px) {
  .em-adm-thead { display: none; }
  .em-adm-row { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px 16px; padding: 16px; }
  .em-adm-who { grid-column: 1 / -1; padding-right: 24px; }
  .em-adm-cell { align-content: start; }
  .em-adm-prog { flex-wrap: wrap; }
  .em-adm-cell::before { content: attr(data-k); width: 100%; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--em-dim); }
  .em-adm-chev { position: absolute; top: 28px; right: 16px; }
}
@media (max-width: 720px) {
  .em-adm-grid, .em-adm-offres { grid-template-columns: minmax(0, 1fr); }
  .em-adm-box { padding: 16px; }
  .em-adm-actions .em-btn-white { flex: 1; }
  .em-adm-actions [data-adm-reload] span { display: none; }
  .em-adm-relances li { flex-wrap: wrap; }
  .em-adm-relances li .em-btn, .em-adm-relance-on .em-btn { width: 100%; }
  .em-adm-relance-on { flex-wrap: wrap; }
  .em-adm-id { flex-wrap: wrap; }
  .em-adm-id-acts { width: 100%; margin-left: 0; justify-content: stretch; }
  .em-adm-id-acts .em-btn { flex: 1; }
  .em-adm-search { max-width: none; }
  .em-adm-count { width: 100%; margin-left: 0; }
  .em-adm-id { align-items: flex-start; gap: 14px; }
  .em-adm-av-lg { width: 52px; height: 52px; }
  .em-adm-id h1 { font-size: 22px; }
  .em-adm-sec { padding: 16px; }
  .em-adm-call { padding: 12px; gap: 12px; }
  .em-adm-call .em-call-week { width: 40px; height: 40px; font-size: 13.5px; }
}

/* Tablette et mobile : le menu de gauche devient un tiroir */
@media (max-width: 1100px) {
  .em-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-grid3 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .em-app { grid-template-columns: minmax(0, 1fr); }
  .em-side { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: min(300px, 86vw); height: auto; transform: translateX(-100%); transition: transform 0.3s ease; }
  .em-app.menu-open .em-side { transform: none; box-shadow: 20px 0 60px rgba(0, 0, 0, 0.6); }
  .em-side-close { display: grid; }
  .em-overlay { position: fixed; inset: 0; z-index: 40; display: block; background: rgba(0, 0, 0, 0.6); }
  .em-menu-btn { display: grid; }
  .em-top { padding: 12px 16px; }
  .em-content { padding: 18px 16px 56px; }
}
@media (max-width: 720px) {
  .em-pill { padding: 7px 10px; }
  .em-search { padding: 0; width: 36px; height: 36px; justify-content: center; }
  .em-search span, .em-search kbd { display: none; }
  .em-cmd { padding-top: 10vh; }
  .em-refer-txt { display: none; }
  .em-refer-court { display: inline; }
  .em-crumb-root { display: none; }
  .em-hero { flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 340px; padding: 22px; }
  .em-hero-txt h1 { font-size: 30px; }
  .em-hero-grid { top: -40px; height: 230px; transform: translateX(-50%); }
  .em-hero::after { background: linear-gradient(0deg, rgba(5, 5, 6, 0.97) 0%, rgba(5, 5, 6, 0.9) 55%, rgba(5, 5, 6, 0) 78%); }
  .em-hero .em-btn { width: 100%; }
  .em-callbar, .em-call { flex-wrap: wrap; }
  .em-callbar > .em-logo-round { display: none; }
  .em-callbar .em-btn, .em-call .em-btn { width: 100%; }
  .em-call-week { width: 48px; height: 48px; font-size: 16px; }
  .em-call-body { flex-basis: calc(100% - 66px); }
  .em-grid3, .em-job-info, .em-jobs-soon, .em-event { grid-template-columns: minmax(0, 1fr); }
  .em-event-visual { min-height: 0; padding: 30px 16px 24px; border-right: 0; border-bottom: 1px solid var(--em-line); }
  .em-pass-info > b { font-size: 28px; }
  .em-qr { width: 70px; height: 70px; padding: 4px; }
  .em-event-body { padding: 22px 20px; }
  .em-event-cta .em-btn { width: 100%; }
  .em-job-btn { justify-self: stretch; }
  .em-weekblock { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .em-weekblock::before { left: 20px; top: 46px; }
  .em-week-mark { width: 40px; height: 40px; margin-top: 8px; border-radius: 12px; font-size: 12.5px; }
  .em-week-head { gap: 10px; padding: 14px; }
  .em-week-body { padding: 0 14px 14px; }
  .em-week-state { display: none; }
  .em-toolcat { padding: 4px 16px; }
  .em-tool { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px 14px; align-items: start; }
  .em-tool-logo { width: 72px; height: 44px; }
  .em-tool-logo img { max-width: 54px; height: calc(var(--h) * 0.85); }
  .em-tool-word { font-size: 10.5px; }
  .em-tool-go { grid-column: 3; grid-row: 1; width: 36px; height: 36px; justify-content: center; padding: 0; }
  .em-tool-go span { display: none; }
  .em-code, .em-aff, .em-tool-soon { grid-column: 2 / -1; justify-self: start; }
  .em-lock-card { padding: 26px 18px 20px; }
  .em-claude { flex-direction: column; align-items: flex-start; padding: 20px; }
  .em-faq-a { padding: 18px; font-size: 14.5px; }
  .em-faq-nav a { padding: 10px 13px; font-size: 13.5px; }
  .em-ba { aspect-ratio: 4 / 3; }
  .em-claude .em-btn, .em-claude-acts { width: 100%; }
  .em-prompt { align-items: flex-start; gap: 12px; }
  .em-prompt .em-code { padding: 8px; }
  .em-prompt .em-code span { display: none; }
  .em-grid3 > :last-child { grid-column: auto; }
  .em-head h1 { font-size: 26px; }
  .em-head-row { grid-template-columns: minmax(0, 1fr); }
  .em-demo { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .em-view, .em-toast { animation: none; }
  .em-side, .em-btn { transition: none; }
}

/* Annonces (partie 18) : en haut de l'Accueil des membres, les 3 plus récentes ; la même carte dans la page Annonces de l'admin */
.em-annonces { display: grid; gap: 12px; }
.em-annonce { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-color: rgba(241, 100, 30, 0.32); background: linear-gradient(180deg, rgba(241, 100, 30, 0.07), rgba(241, 100, 30, 0) 75%), var(--em-card); }
.em-annonce-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: var(--em-orange-soft); background: rgba(241, 100, 30, 0.1); border: 1px solid rgba(241, 100, 30, 0.3); }
.em-annonce-ic svg { width: 20px; height: 20px; }
.em-annonce-txt { flex: 1; min-width: 0; display: grid; gap: 6px; }
.em-annonce-k { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--em-orange-soft); }
.em-annonce-k span { font-weight: 500; letter-spacing: 0; text-transform: none; color: #71717A; }
.em-annonce-k span::before { content: "·"; margin-right: 8px; }
.em-annonce h2 { font-size: 17px; font-weight: 500; color: #FFFFFF; }
.em-annonce-p { font-size: 14px; color: var(--em-muted); white-space: pre-line; overflow-wrap: anywhere; }
.em-annonce > .em-btn { flex: none; }
.em-adm-annonces, .em-adm-annonces-part, .em-adm-annonce-list { display: grid; gap: 14px; }
.em-adm-annonces { gap: 34px; }
.em-adm-annonces-part > .em-btn { justify-self: start; }
.em-adm-annonces-part .em-head h2 { font-family: var(--em-display); font-size: 30px; font-weight: 500; letter-spacing: -0.03em; color: #FFFFFF; }
.em-adm-annonce { display: grid; gap: 8px; }
.em-adm-annonce-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.em-adm-annonce-meta .em-adm-tags { margin-top: 0; }
.em-adm-annonce.is-off .em-annonce { opacity: 0.5; }
@media (max-width: 720px) {
  .em-annonce { flex-wrap: wrap; gap: 14px; padding: 18px; }
  .em-annonce > .em-btn { width: 100%; }
}

/* Mes objectifs (Club Privé, partie 21) : la progression, les 6 paliers, les raisons de se lancer. Un palier franchi prend sa couleur
   (--obj-rgb) : l'orange de l'espace, sauf le badge Star Seller, en violet, sa couleur sur Etsy. Les mêmes paliers sur la fiche du
   membre, dans la partie Admin. */
.em-obj { display: grid; gap: 16px; }
.em-obj-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #71717A; }
.em-obj-sum { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 24px 26px; border-color: rgba(241, 100, 30, 0.28);
  background: radial-gradient(120% 160% at 0% 0%, rgba(241, 100, 30, 0.1), rgba(241, 100, 30, 0) 55%), var(--em-card); }
.em-obj-sum-txt { display: grid; gap: 6px; min-width: 0; }
.em-obj-sum-txt h2 { font-family: var(--em-display); font-size: 26px; font-weight: 500; letter-spacing: -0.03em; color: #FFFFFF; }
.em-obj-sum-txt p:not(.em-obj-k) { font-size: 14.5px; color: #A1A1AA; }
.em-obj-sum-txt b { font-weight: 600; color: #FFFFFF; }
.em-obj-dots { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.em-obj-dots li { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #71717A; background: #131316; border: 1.5px solid #26262B; }
.em-obj-dots li + li { margin-left: 14px; }
.em-obj-dots li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 14px; height: 1.5px; background: #26262B; }
.em-obj-dots li.is-done + li::before { background: #3F3F46; }
.em-obj-dots li.is-done { color: rgb(var(--obj-rgb)); background: rgba(var(--obj-rgb), 0.12); border-color: rgba(var(--obj-rgb), 0.55); }
.em-obj-dots li.is-next { color: rgb(var(--obj-rgb)); border-color: rgba(var(--obj-rgb), 0.8); box-shadow: 0 0 0 4px rgba(var(--obj-rgb), 0.14); }
.em-obj-dots svg { width: 16px; height: 16px; }
.em-obj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.em-obj-mile { align-content: start; gap: 8px; padding: 20px; }
.em-obj-mile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.em-obj-mile-top em { font-style: normal; font-size: 12px; font-weight: 600; color: #52525B; font-variant-numeric: tabular-nums; }
.em-obj-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #A1A1AA; background: #151518; border: 1px solid #26262B; transition: color 0.2s, background 0.2s, border-color 0.2s; }
.em-obj-ic svg { width: 18px; height: 18px; }
.em-obj-mile b { font-size: 15.5px; font-weight: 500; color: #FFFFFF; }
.em-obj-mile p { font-size: 13.5px; line-height: 1.5; color: #A1A1AA; }
.em-obj-btn { justify-self: start; margin-top: 6px; }
.em-obj-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 500; color: rgb(var(--obj-rgb)); }
.em-obj-when button { margin-left: auto; padding: 0; border: 0; background: none; font-size: 12px; color: #52525B; cursor: pointer; transition: color 0.2s; }
.em-obj-when button:hover { color: #A1A1AA; }
.em-obj-mile.is-done { border-color: rgba(var(--obj-rgb), 0.32); background: linear-gradient(180deg, rgba(var(--obj-rgb), 0.07), rgba(var(--obj-rgb), 0) 70%), var(--em-card); }
.em-obj-mile.is-done .em-obj-ic, .em-adm-palier.is-done .em-obj-ic { color: rgb(var(--obj-rgb)); background: rgba(var(--obj-rgb), 0.12); border-color: rgba(var(--obj-rgb), 0.5); box-shadow: 0 0 0 4px rgba(var(--obj-rgb), 0.07); }
.em-obj-mile.is-fresh { animation: em-obj-bravo 1.1s ease-out; }
/* Le badge Star Seller franchi : plein, comme sur Etsy (sceau violet, étoile crème) ; les autres icônes ignorent ces réglages */
.em-obj-dots li.is-done, .em-obj-mile.is-done .em-obj-ic, .em-adm-palier.is-done .em-obj-ic, .em-obj-party-ic { --seal-fill: currentColor; --star-fill: #F7E9D7; --star-stroke: #F7E9D7; }
.em-obj-dots li.is-done:has(use[href="#i-starseller"]), .em-obj-mile.is-done .em-obj-ic:has(use[href="#i-starseller"]),
.em-adm-palier.is-done .em-obj-ic:has(use[href="#i-starseller"]) { background: none; border-color: transparent; box-shadow: none; }
.em-obj-dots li.is-done:has(use[href="#i-starseller"]) svg { width: 30px; height: 30px; stroke-width: 1.2; }
.em-obj-mile.is-done .em-obj-ic:has(use[href="#i-starseller"]) svg { width: 38px; height: 38px; stroke-width: 1.2; }
.em-adm-palier.is-done .em-obj-ic:has(use[href="#i-starseller"]) svg { width: 32px; height: 32px; stroke-width: 1.2; }
@keyframes em-obj-bravo {
  0% { transform: scale(0.97); box-shadow: 0 0 0 0 rgba(var(--obj-rgb), 0.55); }
  45% { transform: scale(1.01); box-shadow: 0 0 0 14px rgba(var(--obj-rgb), 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--obj-rgb), 0); }
}
.em-obj-why { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 18px; padding: 22px 24px; }
.em-obj-why-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: var(--em-orange-soft); background: rgba(241, 100, 30, 0.1); border: 1px solid rgba(241, 100, 30, 0.3); }
.em-obj-why-ic svg { width: 20px; height: 20px; }
.em-obj-why-txt { display: grid; gap: 10px; min-width: 0; }
.em-obj-reasons { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: em-obj; }
.em-obj-reasons li { counter-increment: em-obj; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; font-family: var(--em-display); font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: #FFFFFF; }
.em-obj-reasons li::before { content: counter(em-obj); font-family: var(--em-font); font-size: 13px; font-weight: 600; color: var(--em-orange-soft); }
.em-obj-why-none { font-size: 15px; color: #D4D4D8; }
.em-obj-why-sub { font-size: 13px; color: var(--em-muted); }
.em-obj-why-form { display: grid; gap: 10px; }
.em-obj-why-line { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; }
.em-obj-why-line span { font-size: 13px; font-weight: 600; color: var(--em-orange-soft); }
.em-obj-why-line input { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 15px; color: #FFFFFF; background: #111113; border: 1px solid #26262B; }
.em-obj-why-line input::placeholder { color: #52525B; }
.em-obj-why-form .em-adm-submit { margin-top: 4px; }
/* Des idées de raisons : un clic remplit une case (qui s'éclaire un instant), le « + » tourne en « × » pour la retirer */
.em-obj-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.em-obj-ideas-k { flex-basis: 100%; font-size: 13px; color: var(--em-muted); }
.em-obj-idea { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; font: inherit; font-size: 13.5px; line-height: 1.3; text-align: left; color: #E4E4E7; background: #151518; border: 1px solid #26262B; cursor: pointer; transition: border-color 0.15s, background 0.15s, opacity 0.15s; }
.em-obj-idea svg { width: 13px; height: 13px; flex: none; color: #A1A1AA; transition: transform 0.2s, color 0.15s; }
.em-obj-idea:hover { border-color: #3F3F46; }
.em-obj-idea[aria-pressed="true"] { color: #FFFFFF; background: rgba(241, 100, 30, 0.1); border-color: rgba(241, 100, 30, 0.45); }
.em-obj-idea[aria-pressed="true"] svg { color: var(--em-orange-soft); transform: rotate(45deg); }
.em-obj-idea:disabled { opacity: 0.4; cursor: default; }
.em-obj-idea:disabled:hover { border-color: #26262B; }
.em-obj-why-line input.is-fresh { animation: em-obj-fill 0.9s ease-out; }
@keyframes em-obj-fill { from { background: rgba(241, 100, 30, 0.12); border-color: rgba(241, 100, 30, 0.7); } }
/* Sur la fiche du membre (Admin) : ses paliers, un clic les coche ou les décoche, puis ses raisons */
.em-adm-paliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.em-adm-palier { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 12px; text-align: left; font: inherit; color: inherit; background: #111113; border: 1px solid var(--em-line-2); cursor: pointer; transition: border-color 0.2s; }
.em-adm-palier:hover { border-color: #3F3F46; }
.em-adm-palier .em-obj-ic { width: 34px; height: 34px; border-radius: 10px; }
.em-adm-palier .em-obj-ic svg { width: 16px; height: 16px; }
.em-adm-palier > span:last-child { display: grid; min-width: 0; }
.em-adm-palier b { font-size: 13.5px; font-weight: 500; color: #FFFFFF; }
.em-adm-palier small { font-size: 12px; color: var(--em-muted); }
.em-adm-palier.is-done { border-color: rgba(var(--obj-rgb), 0.35); }
.em-adm-palier.is-done:hover { border-color: rgba(var(--obj-rgb), 0.6); }
.em-adm-palier.is-done small { color: rgb(var(--obj-rgb)); }
.em-adm-raisons { display: grid; gap: 6px; margin-top: 4px; padding: 14px 16px; border-radius: 12px; background: #111113; border: 1px solid var(--em-line-2); }
.em-adm-raisons b { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #71717A; }
.em-adm-raisons ol { display: grid; gap: 4px; margin: 0; padding-left: 20px; font-size: 14.5px; color: #FFFFFF; }
.em-adm-raisons p { font-size: 13.5px; color: var(--em-muted); }
@media (max-width: 1100px) {
  .em-obj-grid, .em-adm-paliers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .em-obj-sum { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .em-obj-dots li { width: 34px; height: 34px; }
  .em-obj-dots li + li { margin-left: 10px; }
  .em-obj-dots li + li::before { width: 10px; }
  .em-obj-grid, .em-adm-paliers { grid-template-columns: minmax(0, 1fr); }
  .em-obj-why { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 18px; }   /* l'icône au-dessus : toute la largeur pour écrire */
  .em-obj-why > .em-adm-call-edit { justify-self: start; }
  .em-obj-reasons li { font-size: 17px; }
}
/* Les 6 paliers franchis : confettis, puis la carte « Félicitations ! » */
.em-obj-party { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: em-obj-in 0.3s ease-out; transition: opacity 0.3s; }
.em-obj-party.is-out { opacity: 0; }
.em-obj-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.em-obj-confetti i { position: absolute; top: -24px; border-radius: 2px; opacity: 0; animation-name: em-obj-fall; animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); animation-fill-mode: forwards; }
@keyframes em-obj-fall {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), 105vh, 0) rotate(var(--rot)); }
}
.em-obj-party-card { position: relative; width: 100%; max-width: 400px; display: grid; justify-items: center; gap: 10px; padding: 32px 26px 26px; text-align: center; border-radius: 24px; background: #111113; border: 1px solid rgba(155, 114, 196, 0.5); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(155, 114, 196, 0.1); animation: em-obj-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
.em-obj-party-ic { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 4px; color: #9B72C4; }
.em-obj-party-ic svg { width: 60px; height: 60px; stroke-width: 1.2; }
.em-obj-party-card h2 { font-family: var(--em-display); font-size: 32px; font-weight: 500; letter-spacing: -0.03em; color: #FFFFFF; }
.em-obj-party-card p:not(.em-obj-k) { max-width: 320px; font-size: 15px; color: #A1A1AA; }
.em-obj-party-card .em-btn { margin-top: 10px; }
/* Parrainage : la fenêtre de son lien personnel (copier, envoyer sur WhatsApp) */
.em-ref { position: fixed; inset: 0; z-index: 200; display: grid; overflow-y: auto; padding: 16px; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: em-obj-in 0.3s ease-out; transition: opacity 0.3s; }
.em-ref.is-out { opacity: 0; }
.em-ref-card { position: relative; width: 100%; max-width: 440px; margin: auto; display: grid; gap: 12px; padding: 28px 26px 24px; border-radius: 24px; background: #111113; border: 1px solid var(--em-line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.em-ref-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: #71717A; cursor: pointer; }
.em-ref-x:hover { color: #FFFFFF; background: #151518; }
.em-ref-x svg { width: 16px; height: 16px; }
.em-ref-ic { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 13px; color: var(--em-orange-soft); background: rgba(241, 100, 30, 0.1); border: 1px solid rgba(241, 100, 30, 0.3); }
.em-ref-ic svg { width: 20px; height: 20px; }
.em-ref-card h2 { font-family: var(--em-display); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: #FFFFFF; }
.em-ref-card > p:not(.em-obj-k) { font-size: 15px; color: #A1A1AA; }
.em-ref-card > p b { font-weight: 600; color: #FFFFFF; }
/* La prime selon l'offre de l'ami : Club Privé en or, Etsy Print en orange (les couleurs de leur badge) */
.em-ref-gains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.em-ref-gain { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #0B0B0D; border: 1px solid #26262B; }
.em-ref-gain small { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.em-ref-gain b { font-family: var(--em-display); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: #FFFFFF; }
.em-ref-gain.is-club small { color: #E8C84A; }
.em-ref-gain.is-print small { color: #FF7415; }
.em-ref-steps { display: grid; gap: 8px; margin: 4px 0; padding: 0; list-style: none; counter-reset: em-ref; }
.em-ref-steps li { counter-increment: em-ref; display: grid; grid-template-columns: 24px minmax(0, 1fr); font-size: 14px; color: #E4E4E7; }
.em-ref-steps li::before { content: counter(em-ref); font-weight: 600; color: var(--em-orange-soft); }
.em-ref-link { display: flex; gap: 8px; margin-top: 4px; }
.em-ref-link input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 14px; color: #FFFFFF; background: #0B0B0D; border: 1px solid #26262B; }
.em-ref-link .em-btn svg { width: 15px; height: 15px; }
.em-ref-wa { margin-top: 4px; }
.em-ref-wa svg { width: 16px; height: 16px; }
/* Ses filleuls, sous le bouton WhatsApp : prénom, offre, prime à venir ou versée */
.em-ref-mine { display: grid; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--em-line); }
.em-ref-mine ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.em-ref-mine li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.em-ref-mine li span { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.em-ref-mine li b { font-weight: 500; color: #FFFFFF; }
.em-ref-mine li small { font-size: 12.5px; color: var(--em-muted); }
.em-ref-mine li em { font-style: normal; font-size: 13px; white-space: nowrap; color: #A1A1AA; }
.em-ref-mine li em.is-paid { color: var(--em-green); }
/* Gestion › Parrainages : les primes (à verser, en attente, versées), puis chaque filleul avec son parrain */
.em-ref-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.em-fin-tile.is-due { border-color: rgba(241, 100, 30, 0.45); }
.em-ref-adm { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.em-ref-adm li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--em-card); border: 1px solid var(--em-line); }
.em-ref-adm li.is-a_verser { border-color: rgba(241, 100, 30, 0.35); }
.em-ref-adm-who { display: grid; gap: 2px; min-width: 0; }
.em-ref-adm-who > a { font-weight: 500; color: #FFFFFF; }
.em-ref-adm-who small { font-size: 13px; color: var(--em-muted); }
.em-ref-adm-who small a { color: #D4D4D8; }
.em-ref-adm li > b { font-family: var(--em-display); font-size: 20px; font-weight: 500; color: #FFFFFF; }
@media (max-width: 720px) {
  .em-ref-kpis { grid-template-columns: minmax(0, 1fr); }
  .em-ref-adm li { grid-template-columns: minmax(0, 1fr) auto; }
}
@keyframes em-obj-pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes em-obj-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .em-obj-mile.is-fresh, .em-obj-party, .em-obj-party-card, .em-ref { animation: none; }
}