/* assets/styles/tikom-app.css — Design system Tikom (espace connecté + auth).
*
* Appliqué via dans base.html.twig.
* N'est PAS chargé sur la landing (qui extend base_clean.html.twig).
*
* IMPORTANT — Cascade volontaire : plusieurs des variables CSS définies ici
* (--tk-bg, --tk-surface, --tk-ink, --tk-line, --tk-hover) portent le même
* nom que des variables déjà définies par assets/styles/bootstrap-custom.css
* (qui pose la palette dark/light historique sur :root et :root[data-theme=light]).
*
* Comme .tk-app vit sur , plus profond dans l'arbre que :root, ses
* valeurs gagnent la cascade pour tous les descendants. C'est intentionnel :
* la V2 (cf. spec 2026-06-02-espace-animateur-v2-design.md) rebrand TOUT
* le site connecté avec cette palette claire, à l'exception de la landing.
*
* Conséquence : le thème sombre historique de bootstrap-custom.css ne
* s'applique plus aux pages authentifiées. Si on veut conserver un dark
* mode V2, il faudra ajouter un sélecteur dédié (ex. .tk-app[data-theme=dark]).
*/
@font-face {
font-family: 'Plus Jakarta Sans';
src: url("../fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght-DMZAve_.ttf") format('truetype');
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
.tk-app {
/* Force le rendu clair des contrôles natifs même si data-theme n'est pas posé (défensif, futur dark mode). */
color-scheme: light;
--tk-bg: #f3f4f6;
--tk-surface: #ffffff;
--tk-ink: #1b1d22;
--tk-muted: #6a6f78;
--tk-faint: #9aa0a8;
--tk-line: #e6e8ec;
--tk-line-strong: #d6d9df;
--tk-hover: #f2f4f7;
/* Accent de l'espace connecté : dérive de --tk-brand (défini sur :root par
bootstrap-custom.css, hérité ici). Source unique partagée avec --tk-amber*. */
--tk-accent: var(--tk-brand);
--tk-accent-ink: #ffffff;
--tk-accent-2: color-mix(in srgb, var(--tk-brand), #fff 16%);
--tk-accent-soft: color-mix(in srgb, var(--tk-brand), #fff 90%);
/* Orange fonctionnel — indépendant de l'accent (resté noir). Réservé au
palier orange de la barre de score. */
--tk-orange: #df8a0c;
--tk-orange-2: #eaa53a;
/* Bleu plein — état « disponible » des grilles de disponibilités (fiche + espace). */
--tk-blue: #0071e3;
--tk-ok: #1f9d63;
--tk-ok-soft: #e7f5ee;
--tk-alert: #e23a6b;
--tk-alert-soft: #fdeaf0;
/* Rouge agressif — alerte « profil non visible » (sidebar espace animateur). */
--tk-danger: #dc2626;
--tk-danger-rgb: 220, 38, 38;
/* Info — encarts d'aide / d'information (ex. modale « Partager par mail »). */
--tk-info: #2563eb;
--tk-info-soft: #e8effd;
--tk-ring: rgba(var(--tk-brand-rgb), .16);
--tk-chip-bg: color-mix(in srgb, var(--tk-brand), #fff 88%);
--tk-chip-ink: color-mix(in srgb, var(--tk-brand), #000 28%);
--tk-chip-line: color-mix(in srgb, var(--tk-brand), #fff 74%);
--tk-cell-off: #eef0f3;
--tk-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
/* Anciennement une pile monospace système. Aucune police mono n'étant
chargée, le rendu retombait sur la mono de l'OS (Liberation Mono sous
Linux), incohérent avec le reste du site. On aligne ces libellés sur
Plus Jakarta Sans : le cachet « étiquette » vient du letter-spacing /
uppercase, plus de la chasse fixe. */
--tk-mono: var(--tk-display);
--tk-shadow-pop: 0 14px 40px rgba(20, 24, 32, .16);
/* Ombre douce des cards de contenu (panneaux espace marque / animateur). */
--tk-shadow-card: 0 1px 2px rgba(20, 15, 10, .04), 0 20px 44px -28px rgba(20, 15, 10, .30);
background: var(--tk-bg);
color: var(--tk-ink);
font-family: var(--tk-display);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.tk-app * { box-sizing: border-box; }
.tk-app a { color: var(--tk-accent); text-decoration: none; }
.tk-app a:hover { text-decoration: underline; }
/* Les boutons-liens () doivent garder la couleur Bootstrap du bouton, pas l'orange des liens. */
.tk-app a.btn { color: var(--bs-btn-color); }
/* Boutons-liens () : ne pas hériter de la couleur/soulignement des liens. */
.tk-app a.tk-btn { text-decoration: none; }
.tk-app a.tk-btn:hover { text-decoration: none; }
.tk-app a.tk-btn-primary { color: var(--tk-btn-gradient-ink); }
.tk-app a.tk-btn-success { color: #fff; }
.tk-app a.tk-btn-danger { color: #fff; }
.tk-app a.tk-btn-ghost { color: var(--tk-muted); }
.tk-app h1, .tk-app h2, .tk-app h3 { margin: 0; letter-spacing: -0.01em; }
.tk-app input, .tk-app textarea, .tk-app select, .tk-app button { font-family: inherit; }
/* Cards génériques */
.tk-card {
background: var(--tk-surface);
border: 1px solid var(--tk-line);
border-radius: 14px;
padding: 26px;
}
/* Boutons */
.tk-btn {
font-family: var(--tk-mono);
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
border: none;
border-radius: 8px;
padding: 8px 14px;
cursor: pointer;
font-weight: 600;
transition: filter .15s, background .15s;
}
.tk-btn-primary {
background: var(--tk-btn-gradient);
color: var(--tk-btn-gradient-ink);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
var(--tk-btn-gradient-shadow);
}
.tk-btn-primary:hover { filter: brightness(1.04); }
.tk-btn-primary:disabled {
background: var(--tk-hover);
color: var(--tk-faint);
box-shadow: none;
cursor: not-allowed;
filter: none;
}
.tk-btn-ghost { background: transparent; color: var(--tk-muted); }
.tk-btn-ghost:hover { background: var(--tk-hover); }
/* Inputs */
.tk-input {
width: 100%;
background: var(--tk-surface);
border: 1.5px solid var(--tk-line);
border-radius: 10px;
padding: 11px 13px;
font-size: 15px;
color: var(--tk-ink);
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.tk-input:focus { border-color: var(--tk-accent); box-shadow: 0 0 0 4px var(--tk-ring); }
.tk-input::placeholder { color: var(--tk-faint); }
/* Champs dans les cartes du profil animateur : police réduite + textarea scrollable */
.tk-card .tk-input { font-size: 13px; }
.tk-card textarea.tk-input { max-height: 110px; overflow-y: auto; resize: none; }
/* Labels mono uppercase */
.tk-label {
font-family: var(--tk-mono);
font-size: 10.5px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--tk-faint);
display: block;
margin-bottom: 7px;
}
/* Chips */
.tk-chip {
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 999px;
padding: 7px 13px;
font-size: 13.5px;
font-weight: 500;
background: var(--tk-chip-bg);
color: var(--tk-chip-ink);
border: 1px solid var(--tk-chip-line);
}
/* Focus accessibility */
.tk-app *:focus-visible {
outline: 2px solid var(--tk-accent);
outline-offset: 2px;
}
/* ─── V2 Dashboard layout & cards ─────────────────────────────
* Styles spécifiques au nouveau dashboard animateur V2 :
* grille main + sidebar, cartes, identité, toggles, chips,
* disponibilité, ville, TikTok et sidebar (visibilité/RDV/score).
*/
/* ─── Layout dashboard ───────────────────────────────────────── */
.tk-page { min-height: 100vh; background: var(--tk-bg); }
.tk-shell { max-width: none; margin: 0; padding: 0 40px; }
/* Modificateur : remet le contenu en container centré (page /espace/animateur) */
.tk-shell--contained { max-width: 1280px; margin-inline: auto; }
@media (max-width: 576px) {
.tk-shell { padding: 0 15px; }
.tk-topbar-inner { padding: 0 15px; }
}
/* Aperçu TikTok rendu sous le champ « Compte TikTok » du dashboard. */
.tk-tiktok-preview:not(:empty) { margin-top: 14px; }
.tk-tiktok-preview .tk-tiktok-embed { margin: 0; max-width: 100%; min-width: 0; }
/* ─── Stat chiffre (header espace marque) ───────────────────── */
.tk-stat {
font-size: 36px; font-weight: 800; line-height: 1;
letter-spacing: -0.03em; color: var(--tk-ink);
}
.tk-topbar {
background: var(--tk-surface); border-bottom: 1px solid var(--tk-line);
position: sticky; top: 0; z-index: 20;
}
.tk-topbar-inner {
max-width: none; margin: 0; padding: 0 40px;
height: 64px; display: flex; align-items: center; justify-content: space-between;
}
.tk-nav-logout { display: inline; margin: 0; }
.tk-nav form { display: inline; margin: 0; }
.tk-logo { font-weight: 800; font-size: 21px; letter-spacing: -0.02em; color: var(--tk-ink); }
.tk-logo span { color: var(--tk-accent); font-size: 14px; margin-left: 1px; }
.tk-nav { display: flex; align-items: center; gap: 20px; font-size: 14px; color: var(--tk-muted); }
.tk-nav a { color: inherit; text-decoration: none; }
.tk-nav a:hover { color: var(--tk-ink); }
.tk-nav-active { color: var(--tk-accent) !important; font-family: var(--tk-mono); font-size: 12px; letter-spacing: .04em; }
.tk-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 22px; padding: 26px 0 70px;
align-items: start;
}
.tk-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tk-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
@media (max-width: 880px) {
.tk-grid { grid-template-columns: 1fr; }
.tk-aside { position: static; order: -1; }
}
/* ─── Bandeau de pré-ouverture (pleine largeur, haut de page) ─── */
.tk-preopening {
display: flex; align-items: center; gap: 16px;
margin-top: 26px; padding: 16px 20px; border-radius: 14px;
border: 1px solid var(--tk-accent-2);
background: linear-gradient(135deg, var(--tk-accent-soft), var(--tk-surface));
}
.tk-preopening-emoji { font-size: 30px; line-height: 1; flex-shrink: 0; }
.tk-preopening-title { margin: 0 0 4px; font-weight: 800; font-size: 15px; }
.tk-preopening-text { margin: 0; font-size: 13.5px; color: var(--tk-muted); line-height: 1.5; }
/* ─── Cards ─────────────────────────────────────────────────── */
.tk-card-muted { background: var(--tk-hover); }
.tk-group { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--tk-line); }
.tk-group:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.tk-group-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.tk-group-hint { font-size: 13px; color: var(--tk-muted); margin: 0 0 14px; max-width: 560px; }
/* ─── Identité ──────────────────────────────────────────────── */
.tk-identity-row { display: flex; align-items: center; gap: 18px; }
.tk-avatar-wrap { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
/* Avatar cliquable (bouton) : un clic déclenche l'upload de photo. */
.tk-avatar {
position: relative;
width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(140deg, #3a3d44, #1b1d22);
color: #fff; font-weight: 700; font-size: 30px;
border: 2px solid var(--tk-surface); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
padding: 0; cursor: pointer; font-family: inherit;
transition: border-color .15s, box-shadow .15s;
}
.tk-avatar:hover { border-color: var(--tk-accent); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16); }
.tk-avatar:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 2px; }
.tk-avatar img, .tk-avatar-img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder « + » quand aucune photo. */
.tk-avatar-add { font-size: 42px; font-weight: 300; line-height: 1; color: rgba(255, 255, 255, 0.9); }
/* Voile + icône au survol/focus d'une photo existante : signale que c'est cliquable. */
.tk-avatar-overlay {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, 0.42); font-size: 22px; opacity: 0; transition: opacity .15s;
}
.tk-avatar:hover .tk-avatar-overlay,
.tk-avatar:focus-visible .tk-avatar-overlay { opacity: 1; }
.tk-identity-name { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.tk-identity-sub { display: flex; gap: 14px; margin-top: 6px; color: var(--tk-muted); font-size: 13.5px; flex-wrap: wrap; }
.tk-dot { width: 3px; height: 3px; border-radius: 3px; background: var(--tk-faint); align-self: center; }
/* ─── Inline edit ───────────────────────────────────────────── */
/* Affordance : le champ ressemble à un input bordé avec un libellé « Modifier ✎ »
(rendu en CSS) pour montrer qu'il est éditable. Le clic ouvre le vrai champ. */
.tk-editable {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border: 1.5px solid var(--tk-line);
border-radius: 10px;
background: var(--tk-surface);
transition: border-color .15s, background .15s;
/* Anti-débordement : autorise le rétrécissement dans la grille et casse les
valeurs longues insécables (e-mails) au lieu de pousser la largeur. */
min-width: 0;
overflow-wrap: anywhere;
}
.tk-editable:hover { background: var(--tk-hover); border-color: var(--tk-accent); }
.tk-editable [data-placeholder] { color: var(--tk-faint); font-style: italic; }
.tk-editable::after {
content: "Modifier ✎";
flex-shrink: 0;
font-family: var(--tk-mono);
font-size: 10.5px;
letter-spacing: .04em;
color: var(--tk-faint);
background: var(--tk-hover);
border-radius: 6px;
padding: 3px 7px;
}
.tk-editable:hover::after { color: var(--tk-accent); }
/* Bio (multi-ligne) : le hint passe en haut à droite. En affichage (non focus),
on borne la hauteur et on scrolle comme un textarea pour éviter un bloc géant. */
.tk-editable-block {
display: block; white-space: pre-wrap; position: relative; padding-right: 88px;
max-height: 110px; overflow-y: auto;
}
.tk-editable-block::after { position: absolute; top: 8px; right: 8px; }
/* En édition : le vrai champ occupe toute la largeur, on retire la bordure
factice et le libellé « Modifier ». */
.tk-editable:has(input.tk-input),
.tk-editable:has(textarea.tk-input) { display: block; padding: 0; border: none; background: transparent; }
.tk-editable:has(input.tk-input)::after,
.tk-editable:has(textarea.tk-input)::after { content: none; }
.tk-input-error { border-color: var(--tk-alert); }
.tk-field-error { margin: 6px 0 0; font-family: var(--tk-mono); font-size: 11px; color: var(--tk-alert); }
.tk-siret-status { margin: 6px 0 0; }
.tk-siret-ok { font-family: var(--tk-mono); font-size: 12.5px; color: var(--tk-ok); font-weight: 600; }
/* ─── Toggle card grid ──────────────────────────────────────── */
.tk-toggle-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tk-toggle-card {
padding: 18px 12px; border-radius: 12px; border: 1.5px solid var(--tk-line);
background: var(--tk-surface); cursor: pointer; display: flex; flex-direction: column;
align-items: center; gap: 8px; transition: all .14s;
}
.tk-toggle-card:hover { border-color: var(--tk-accent-2); }
.tk-toggle-card.tk-card-on { border-color: var(--tk-accent); background: var(--tk-accent-soft); }
.tk-toggle-emoji { font-size: 28px; line-height: 1; }
.tk-toggle-label { font-size: 13.5px; font-weight: 500; }
/* ─── Rayon de déplacement (conditionnel : Sur site / Les deux) ── */
.tk-travel { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--tk-line); display: flex; flex-direction: column; gap: 12px; }
.tk-travel[hidden] { display: none; }
.tk-travel-check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; }
.tk-travel-check input { width: 17px; height: 17px; accent-color: var(--tk-accent); cursor: pointer; }
.tk-travel-radius[hidden] { display: none; }
.tk-input-affix { position: relative; max-width: 220px; }
.tk-input-affix .tk-input { padding-right: 44px; }
.tk-input-suffix {
position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
color: var(--tk-faint); font-family: var(--tk-mono); font-size: 13px; pointer-events: none;
}
/* ─── Chips ─────────────────────────────────────────────────── */
.tk-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tk-chip-x { border: none; background: transparent; cursor: pointer; opacity: .55; font-size: 14px; }
.tk-chip-x:hover { opacity: 1; }
.tk-chip-add { background: transparent; border: 1px dashed var(--tk-line); color: var(--tk-muted);
border-radius: 999px; padding: 7px 13px; cursor: pointer; font-size: 13px; }
.tk-chip-add:hover { border-color: var(--tk-accent); color: var(--tk-accent); }
.tk-pop {
background: var(--tk-surface); border: 1px solid var(--tk-line); border-radius: 14px;
box-shadow: var(--tk-shadow-pop); padding: 6px; max-height: 280px; overflow: auto; margin-top: 6px;
}
.tk-pop-opt { display: block; width: 100%; padding: 10px 12px; border-radius: 10px;
background: transparent; border: none; cursor: pointer; font-size: 14px; text-align: left; }
.tk-pop-opt:hover { background: var(--tk-hover); }
.tk-pop-empty { padding: 10px 12px; color: var(--tk-faint); font-size: 13px; }
/* ─── Availability ──────────────────────────────────────────── */
.tk-availability-grid {
display: grid; grid-template-columns: 80px repeat(7, 1fr); gap: 6px; align-items: center;
}
.tk-availability-day, .tk-availability-slot {
text-align: center; font-family: var(--tk-mono); font-size: 10.5px;
color: var(--tk-muted); text-transform: uppercase;
}
.tk-cell {
height: 34px; border-radius: 9px; cursor: pointer; user-select: none;
border: 1px solid var(--tk-line); background: var(--tk-cell-off);
transition: background .14s, transform .1s;
}
.tk-cell:active { transform: scale(.94); }
.tk-cell.tk-cell-on { background: var(--tk-blue); border-color: var(--tk-blue); }
.tk-availability-counter { margin-top: 12px; font-family: var(--tk-mono); font-size: 11px; color: var(--tk-muted); }
/* Variante lecture seule (fiche admin) : grille non interactive. */
.tk-availability-ro .tk-cell { cursor: default; pointer-events: none; }
/* Scroll horizontal si la grille déborde (petit écran < ~480px). */
.tk-availability-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tk-availability-grid { min-width: 340px; }
/* ─── Personal (privé) ──────────────────────────────────────── */
.tk-personal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tk-badge-private {
font-family: var(--tk-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
color: var(--tk-muted); background: var(--tk-surface); border: 1px solid var(--tk-line);
border-radius: 999px; padding: 5px 11px;
}
.tk-personal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 560px) { .tk-personal-grid { grid-template-columns: minmax(0, 1fr); } }
/* ─── City picker ───────────────────────────────────────────── */
.tk-city-search {
display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--tk-line);
border-radius: 10px; padding: 11px 13px; background: var(--tk-surface); margin-bottom: 12px;
}
.tk-city-search:focus-within { border-color: var(--tk-accent); box-shadow: 0 0 0 4px var(--tk-ring); }
.tk-input-naked { border: none; padding: 0; background: transparent; flex: 1; }
.tk-input-naked:focus { box-shadow: none; }
/* Un peu d'air entre l'icône 📍 et le texte saisi (sinon collé à gauche). */
.tk-city-search .tk-input-naked { padding-left: 4px; }
.tk-suggest {
list-style: none; padding: 6px; margin: 0; background: var(--tk-surface);
border: 1px solid var(--tk-line); border-radius: 14px; box-shadow: var(--tk-shadow-pop);
max-height: 280px; overflow: auto;
}
.tk-suggest li { padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.tk-suggest li:hover { background: var(--tk-hover); }
.tk-map { height: 220px; border-radius: 12px; overflow: hidden; border: 1px solid var(--tk-line); }
.tk-attr { font-family: var(--tk-mono); font-size: 9.5px; color: var(--tk-faint); margin-top: 6px; }
.tk-faint { color: var(--tk-faint); }
.tk-hint { font-family: var(--tk-mono); font-size: 10.5px; color: var(--tk-faint); text-transform: uppercase; }
/* ─── TikTok videos ─────────────────────────────────────────── */
/* Barre bordée (icône 🔗 + champ + bouton) pour que l'input se lise comme un champ. */
.tk-tiktok-input {
display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
border: 1.5px solid var(--tk-line); border-radius: 10px;
padding: 6px 6px 6px 13px; background: var(--tk-surface);
}
.tk-tiktok-input:focus-within { border-color: var(--tk-accent); box-shadow: 0 0 0 4px var(--tk-ring); }
.tk-tiktok-input > span { color: var(--tk-faint); }
.tk-tiktok-input .tk-btn { flex-shrink: 0; }
.tk-tiktok-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tk-tiktok-card { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--tk-line); background: #000; aspect-ratio: 9 / 16; }
.tk-tiktok-card iframe { width: 100%; height: 100%; border: none; }
.tk-tiktok-remove {
position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px;
border: none; cursor: pointer; background: rgba(20, 20, 24, .62); color: #fff;
}
/* ─── Video preview / empty ─────────────────────────────────── */
.tk-video-preview { border-radius: 12px; overflow: hidden; }
.tk-video-preview video { width: 100%; display: block; }
.tk-video-empty {
border: 1.5px dashed var(--tk-line); border-radius: 12px; padding: 26px;
text-align: center; color: var(--tk-muted); font-size: 13.5px;
}
/* ─── Carte identité : lien « Voir mon profil » (aperçu public) ──── */
/* Lien discret en haut à droite de la carte. Sélecteur à deux classes pour
battre `.tk-app a` (sinon la couleur d'accent l'emporterait). */
.tk-identity-preview {
margin-left: auto; align-self: flex-start;
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; font-weight: 600; white-space: nowrap;
}
.tk-app a.tk-identity-preview { color: var(--tk-muted); }
.tk-app a.tk-identity-preview:hover { color: var(--tk-ink); }
.tk-identity-preview i { font-size: 15px; }
/* ─── Identité : layout mobile ──────────────────────────────── */
@media (max-width: 640px) {
.tk-identity-row {
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
}
.tk-identity-preview {
order: -1;
margin-left: 0;
align-self: center;
}
.tk-identity-meta { text-align: center; }
.tk-identity-sub { justify-content: center; }
}
/* ─── Sidebar : visibilité ──────────────────────────────────── */
/* État « non visible » : rouge agressif (bordure épaisse + halo pulsé) pour
pousser à compléter le profil. La variante .is-on (vert) reste prête pour un
éventuel signal positif « profil visible ». */
.tk-visibility { border-radius: 14px; overflow: hidden; border: 2px solid var(--tk-danger); box-shadow: 0 0 0 4px rgba(var(--tk-danger-rgb), .12); }
.tk-visibility.is-on { border-color: var(--tk-ok); box-shadow: none; }
.tk-visibility-head { display: flex; align-items: center; gap: 8px; background: var(--tk-danger); color: #fff; padding: 14px 18px; font-weight: 800; font-size: 14px; letter-spacing: .01em; }
.tk-visibility.is-on .tk-visibility-head { background: var(--tk-ok); font-weight: 700; }
.tk-visibility-body { background: var(--tk-surface); padding: 13px 18px; font-size: 13px; color: var(--tk-muted); }
@media (prefers-reduced-motion: no-preference) {
.tk-visibility:not(.is-on) { animation: tk-visibility-pulse 1.8s ease-in-out infinite; }
@keyframes tk-visibility-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--tk-danger-rgb), .30); }
50% { box-shadow: 0 0 0 7px rgba(var(--tk-danger-rgb), 0); }
}
}
/* ─── Sidebar : RDV ─────────────────────────────────────────── */
.tk-rdv.is-unlocked { border-color: var(--tk-ok); background: var(--tk-ok-soft); }
.tk-rdv header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 700; font-size: 14.5px; }
.tk-rdv-hint { font-size: 13.5px; color: var(--tk-muted); margin: 0 0 14px; }
.tk-rdv .tk-btn { width: 100%; padding: 13px; border-radius: 10px; font-size: 14px; }
/* Mobile : barre inline compacte — icône + titre | bouton sur une ligne. */
@media (max-width: 880px) {
.tk-rdv {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
margin: 0; border-radius: 14px 14px 0 0;
box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
display: flex; align-items: center; gap: 12px; padding: 12px 16px;
}
.tk-rdv header { display: none; }
.tk-rdv-hint { display: none; }
.tk-rdv .tk-btn { width: 100%; padding: 10px 14px; font-size: 13px; }
.tk-page { padding-bottom: 72px; }
}
/* ─── Sidebar : score ───────────────────────────────────────── */
.tk-score-head { display: flex; justify-content: space-between; margin-bottom: 12px; font-weight: 700; }
.tk-score-pct { font-family: var(--tk-mono); }
.tk-score-bar { height: 8px; border-radius: 5px; background: var(--tk-line); overflow: hidden; margin-bottom: 16px; }
.tk-score-bar > div { height: 100%; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.tk-score-list { list-style: none; padding: 0; margin: 0; }
.tk-score-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--tk-line); font-size: 14px; }
.tk-score-list li:first-child { border-top: none; }
.tk-score-list li.is-done .tk-score-label { color: var(--tk-faint); text-decoration: line-through; }
.tk-score-tick { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--tk-line); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.tk-score-list li.is-done .tk-score-tick { background: var(--tk-ok); color: #fff; border-color: var(--tk-ok); }
.tk-score-summary {
list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 600;
color: var(--tk-accent); padding: 6px 0;
}
.tk-score-summary::-webkit-details-marker { display: none; }
.tk-score-summary::after { content: " ▾"; }
.tk-score-details[open] .tk-score-summary::after { content: " ▴"; }
@media (min-width: 881px) {
.tk-score-summary { display: none; }
}
/* ─── Footer V2 ─────────────────────────────────────────────── */
.tk-footer-v2 { border-top: 1px solid var(--tk-line); background: var(--tk-surface); margin-top: 40px; }
.tk-footer-v2 .tk-footer-brand { font-family: var(--tk-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tk-muted); }
/* ─── Logo topbar (image) ───────────────────────────────────── */
.tk-logo-img { height: 40px; width: auto; display: block; }
@media (max-width: 640px) { .tk-logo-img { height: 30px; } }
/* ─── Bouton succès (vert) ──────────────────────────────────── */
.tk-btn-success { background: var(--tk-ok); color: #fff; }
.tk-btn-success:hover { filter: brightness(1.06); }
/* ─── Bouton danger (rouge) + variante petite (listes admin) ─── */
.tk-btn-danger { background: var(--tk-danger); color: #fff; }
.tk-btn-danger:hover { filter: brightness(1.06); }
.tk-btn-sm { padding: 6px 10px; font-size: 11px; }
/* ─── Badges de statut affiliation (campagnes) ──────────────────
* Correspondance : CampaignStatus::cssClass() → .tk-aff-status-{value}
* - live = vert (en cours)
* - upcoming = orange/ambre (à venir)
* - past = gris (passée)
*/
.tk-aff-status {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 3px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.tk-aff-status-live { background: var(--tk-ok-soft); color: var(--tk-success); }
.tk-aff-status-upcoming { background: #fff3e0; color: var(--tk-warning); }
.tk-aff-status-past { background: var(--tk-hover); color: var(--tk-muted); }
/* ─── Lignes de collection produits (formulaire campagne) ──────── */
.tk-aff-collrow { align-items: flex-end; flex-wrap: wrap; }
/* ─── Sidebar : visibilité masquée quand vide (profil à 100 %) ── */
#tk-visibility:empty { display: none; }
/* ─── Légende animateurs du planning (filtre cliquable) ─────── */
.tk-cal-legend {
display: flex;
flex-wrap: nowrap;
gap: 8px;
align-items: center;
margin-bottom: 12px;
min-height: 34px; /* espace reserve : le calendrier ne saute plus */
overflow-x: auto; /* beaucoup de marques -> scroll horizontal */
overflow-y: hidden;
scrollbar-width: thin;
}
.tk-cal-legend-empty { color: var(--tk-ink-mute); font-size: 0.85rem; align-self: center; }
.tk-cal-legend-chip {
flex: 0 0 auto; /* pas de compression : les chips defilent */
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px; border: 1.5px solid var(--tk-line); border-radius: 999px;
background: var(--tk-surface); color: var(--tk-ink);
font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
transition: opacity .12s ease, border-color .12s ease;
white-space: nowrap;
}
.tk-cal-legend-chip:hover { border-color: var(--tk-line-strong); }
.tk-cal-legend-chip.is-off { opacity: .4; }
.tk-cal-legend-chip.is-off .tk-cal-legend-dot { background: var(--tk-faint) !important; }
.tk-cal-legend-dot { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
/* ─── FullCalendar : boutons lisibles ────────────────────────── */
/* Sélecteur COMPOSÉ (sans espace) : .fc est sur #brand-calendar lui-même.
On surcharge les variables CSS FC à la source pour couvrir tous les états. */
#brand-calendar.fc {
--fc-button-bg-color: var(--tk-ink);
--fc-button-border-color: var(--tk-ink);
--fc-button-text-color: #fff;
--fc-button-hover-bg-color: #000;
--fc-button-hover-border-color:#000;
--fc-button-active-bg-color: #000;
--fc-button-active-border-color:#000;
--fc-button-active-text-color: #fff;
}
/* ─── Sélecteur produits dans la modale de création de live ─── */
.tk-prod-picker { display: flex; flex-direction: column; gap: 4px; }
.tk-prod-pick-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border: 1px solid var(--tk-line); border-radius: 9px;
cursor: pointer; font-size: 13.5px; user-select: none;
transition: background .1s ease, border-color .1s ease;
}
.tk-prod-pick-item:hover { background: var(--tk-hover); }
.tk-prod-pick-item:has(.tk-prod-pick-cb:checked) {
background: color-mix(in srgb, var(--tk-accent) 8%, transparent);
border-color: var(--tk-accent);
}
.tk-prod-pick-cb { flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; accent-color: var(--tk-accent); }
.tk-prod-pick-name { flex: 1; font-weight: 600; color: var(--tk-ink); }
.tk-prod-pick-price { font-size: 12.5px; color: var(--tk-muted); font-variant-numeric: tabular-nums; }
/* ─── Modal V2 (dialog) ─────────────────────────────────────── */
.tk-dlg {
border: none; border-radius: 16px; padding: 0; width: 100%;
max-width: min(92vw, 460px); background: var(--tk-surface); color: var(--tk-ink);
box-shadow: var(--tk-shadow-pop);
}
/* Garde indispensable : une