/* ══════════════════════════════════════════════════════════════
TEGUH · Design System v1 · tokens + composants canoniques
Extrait de design-system-kensho.html (Claude Design brief 19/04)
Importé par index.html et app.html.
Règles: R1 un seul primary par viewport · R2 accent <5% surface
R3 3 fonts · R4 4 états par écran · R5 a11y 44 hit / 4.5 contraste
R6 tutoiement · dark only
══════════════════════════════════════════════════════════════ */
:root {
/* Surfaces */
--ks-bg: #0C0A0E;
--ks-bg-2: #11131A;
--ks-bg-3: #181B24;
--ks-card: #11131A;
--ks-border: #1F2028;
--ks-hair: rgba(255,255,255,.06);
--ks-hair-2: rgba(255,255,255,.14);
--ks-hair-3: rgba(255,255,255,.22);
/* Texte */
--ks-ink: #F2F2F4;
--ks-ink-72: rgba(255,255,255,.72);
--ks-ink-56: rgba(255,255,255,.56);
--ks-ink-38: rgba(255,255,255,.38);
--ks-muted: #9C9CA8;
--ks-muted-2: #6E6E7A;
/* Marque · ambre doré, rare (<5% surface). L'orange #FF6A18 a été retiré
le 31/07 · il n'existe pas dans la palette BRAND_RULES et faisait accent
bolt-on. Le shu #AF1C1C reste réservé à l'intention, jamais décoratif. */
--ks-accent: #F4B860;
--ks-accent-2: #F4B860;
/* Sémantique stricte */
--ks-success: #34C77B;
--ks-warning: #E8A33C;
--ks-danger: #F56565;
--ks-info: #60A5E8;
/* Espacement base 4px */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
--s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
/* Radius · 4 stops + pill */
--r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
--r-pill: 999px;
/* Elevation */
--el-0: inset 0 1px 0 rgba(255,255,255,.04);
--el-1: 0 8px 24px -10px rgba(0,0,0,.55);
--el-2: 0 20px 60px -24px rgba(0,0,0,.7);
/* Motion */
--e-out: cubic-bezier(.16,1,.3,1);
--e-in: cubic-bezier(.7,0,.3,1);
/* Type · 1 grotesque variable + 1 mono · TEGUH 01/08
Archivo porte tout. Ses axes wdth 62..125 et wght 400..900 couvrent le
logotype, les héros, les titres et le body : une seule famille, réglée
par rôle. Fraunces est supprimée comme Playfair avant elle, avec
Shippori Mincho, Noto Serif JP et Yuji Mai. Plus aucune serif.
JetBrains Mono reste : un mono est un rôle, pas une incohérence, et on
perdrait l'alignement tabulaire des KCAL et du J-62. */
--f-display: 'Archivo', system-ui, sans-serif;
--f-sans: 'Archivo', system-ui, sans-serif;
--f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
/* ═══ v2 DESIGN TOKENS · Refonte éditoriale (PDF 21/04) ═══
Inspiration : dossier typographique magazine. Tout est typographique,
pas de cards. Accent rouge hanko en complément orange.
- noir encre plus profond
- ivory warm (papier) pour surfaces claires
- rouge hanko sémantique (sceau / stop / signal)
- serif display italic = voix hero
- mono uppercase = marginalia éditoriale
*/
--ks-v2-ink: #0A0A0C; /* noir encre profond */
--ks-v2-ink-2: #15151A; /* noir moins profond */
--ks-v2-paper: #F5F2EC; /* ivory chaud · papier · sections claires */
--ks-v2-paper-2: #EDE9E1; /* ivory tone plus foncé */
--ks-v2-rouge: #AF1C1C; /* hanko · sceau rouge chinois · signalétique */
--ks-v2-rouge-2: #8A1414; /* hanko tone plus foncé · hover */
--ks-v2-sumi: #1C1C20; /* noir sumi encre */
/* Marginalia (mono uppercase éditorial en marge) */
--ks-v2-meta: 11.5px;
--ks-v2-meta-track: .16em;
}
/* ═══ v2 UTILITIES éditoriales ══════════════════════════════
Classes atomiques réutilisables pour hiérarchie magazine.
Utiliser en complément des classes existantes, pas en remplacement. */
/* Meta marginalia · mono uppercase fine letter-spacing */
.ks-v2-meta {
font-family: var(--f-mono);
font-size: var(--ks-v2-meta);
font-weight: 500;
letter-spacing: var(--ks-v2-meta-track);
text-transform: uppercase;
color: var(--ks-ink-56);
line-height: 1.3;
}
.ks-v2-meta--rouge { color: var(--ks-v2-rouge); }
.ks-v2-meta--ink { color: var(--ks-v2-ink); }
.ks-v2-meta--paper { color: rgba(10,10,12,.56); }
/* Numéro romain en accent rouge · I. II. III. */
.ks-v2-num {
font-family: var(--f-display);
font-style: normal;
font-weight: 600;
color: var(--ks-v2-rouge);
line-height: 1;
font-feature-settings: "liga" 1;
}
/* Titre display italic héro · citation éditoriale */
.ks-v2-display {
font-family: var(--f-display);
font-style: normal;
font-weight: 600;
letter-spacing: -.025em;
line-height: .96;
color: var(--ks-ink);
}
/* Slug vertical · meta mono en marge gauche/droite (rotate) */
.ks-v2-slug {
position: absolute;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--f-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ks-ink-38);
top: 24px;
pointer-events: none;
user-select: none;
}
.ks-v2-slug--left { left: 20px; }
.ks-v2-slug--right { right: 20px; }
/* Page number · haut de page, coin éditorial (laisse de la place au lang switcher top-right) */
.ks-v2-folio {
position: absolute;
top: max(env(safe-area-inset-top, 24px), 28px);
font-family: var(--f-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .28em;
color: var(--ks-ink-38);
pointer-events: none;
user-select: none;
z-index: 3;
}
.ks-v2-folio--r { right: 104px; }
.ks-v2-folio--l { left: 22px; }
@media (max-width: 520px){
.ks-v2-folio--r { display: none; } /* mobile : lang switcher + folio = collision */
}
/* Signature hanko · petit sceau rouge carré avec ◯ ou kanji dedans */
.ks-v2-hanko {
display: inline-block;
padding: 2px 6px 3px;
background: var(--ks-v2-rouge);
color: var(--ks-v2-paper);
font-family: var(--f-display);
font-weight: 700;
font-size: 11px;
line-height: 1;
letter-spacing: 0;
border-radius: 2px;
vertical-align: baseline;
}
/* ─── Icône kanji sceau (R5) ───
52×52, border hairline beige + coins shu 7×7,
Shippori Mincho B1 700 28px color rgba(245,220,180,.78).
Remplace les outlines Lucide/Feather. */
.ks-kanji-seal{
position: relative;
display: inline-flex;
align-items: center; justify-content: center;
width: 52px; height: 52px;
border: 1px solid rgba(244,184,96,.42);
background: transparent;
font-family: var(--f-display);
font-weight: 700;
font-size: 28px;
line-height: 1;
color: rgba(245,220,180,.78);
text-align: center;
box-sizing: border-box;
user-select: none;
}
/* Coins shu 7×7 · 4 angles (border hairline rouge) */
.ks-kanji-seal::before,
.ks-kanji-seal::after{
content: '';
position: absolute;
width: 7px; height: 7px;
border-color: var(--ks-v2-rouge, #AF1C1C);
border-style: solid;
border-width: 0;
}
/* Coin top-left + bottom-right via ::before en double via box-shadow */
.ks-kanji-seal::before{
top: -1px; left: -1px;
border-top-width: 1px;
border-left-width: 1px;
}
.ks-kanji-seal::after{
bottom: -1px; right: -1px;
border-bottom-width: 1px;
border-right-width: 1px;
}
/* Coins top-right + bottom-left via wrapper span ou pseudos additionnels ·
note · si besoin des 4 coins, ajouter
*/
.ks-v2-bar {
position: relative;
height: 12px;
background: var(--ks-hair);
overflow: hidden;
}
.ks-v2-bar > span {
display: block;
height: 100%;
width: calc(var(--pct, .5) * 100%);
background: var(--ks-ink);
transition: width .8s var(--e-out);
}
.ks-v2-paper .ks-v2-bar { background: rgba(10,10,12,.08); }
.ks-v2-paper .ks-v2-bar > span { background: var(--ks-v2-ink); }
.ks-v2-bar--rouge > span { background: var(--ks-v2-rouge); }
/* Dot chapitre · petit rond plein entre éléments · ivory faded (R2 · shu intention only) */
.ks-v2-dot {
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--ks-ink-38);
margin: 0 6px;
vertical-align: middle;
}
/* Section head éditoriale · numéro romain + slug meta + hairlines aux deux côtés (centré 21/04) */
/* Section head éditoriale · refonte 22/04 feedback Vlad "le I. fait old-school
orange, les tirets horizontaux font powerpoint". Virée flex + lignes, on
ne garde qu'un label mono compact centré façon holding eyebrow, avec le
numéro romain inline discret en shu. */
.ks-v2-section-head{
display: block;
text-align: center;
margin: 0 auto 40px;
font-family: var(--f-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .32em;
text-transform: uppercase;
color: rgba(245,242,236,.55);
}
.ks-v2-section-head .ks-v2-num{
font-family: var(--f-mono);
font-size: 11px;
font-style: normal;
font-weight: 700;
color: var(--ks-v2-rouge);
letter-spacing: .32em;
line-height: inherit;
min-width: unset;
margin-right: 14px;
text-align: center;
}
.ks-v2-section-head .ks-v2-meta{
font-family: var(--f-mono);
color: rgba(245,242,236,.55);
letter-spacing: .32em;
}
.ks-v2-section-head .ks-v2-rule-h{
display: none;
}
/* Titre de section · refonte 22/04 feedback Vlad "pas fan de l'italique
partout, fait Claude Design". Retour en serif roman 900. L'italique
reste uniquement sur les vrais heroes (wordmark, CTA final). */
/* Titre de section V2 · refonte 22/04 nuit v3 · alignement style holding-prep-title
Feedback Vlad "fallait mettre tous les trucs comme holding où c'est trop stylé,
incroyablement cohérent". Match EXACT de .holding-prep-title pour uniformité
visuelle landing ↔ holding. Fix overflow simultané (max-width en pixels). */
.ks-v2-head{
font-family: var(--f-display);
font-style: normal;
font-weight: 600;
font-size: clamp(28px, 4.4vw, 44px);
letter-spacing: -.025em;
line-height: 1.18;
color: #F5F2EC;
margin: 0 auto 56px;
max-width: min(560px, calc(100% - 32px));
padding: 4px 8px 8px;
text-wrap: balance;
overflow-wrap: break-word;
overflow: visible;
hyphens: none;
word-break: normal;
white-space: normal;
}
.ks-v2-head em{
font-style: normal;
font-weight: 900;
color: var(--ks-v2-rouge);
}
.ks-v2-paper .ks-v2-head{ color: var(--ks-v2-ink); }
.ks-v2-paper .ks-v2-head em{ color: var(--ks-v2-rouge); }
/* ─── Focus ring signature (WCAG 2.4.7) ─── */
.ks :focus-visible,
[data-ks-view] :focus-visible {
outline: 2px solid var(--ks-accent);
outline-offset: 3px;
border-radius: inherit;
}
/* ─── Button · sceau pas pilule (R3) ───
paper fond, radius 4px, trait bas 2px intention,
Shippori Mincho B1 700 roman 15-19px. */
.ks-btn{
display:inline-flex; align-items:center; gap:12px;
padding:14px 22px;
font-family: var(--f-display);
font-weight:700; font-size:15px;
border:1px solid var(--ks-hair-2);
border-bottom-width: 2px;
border-radius: 4px;
background:transparent; color:var(--ks-ink);
cursor:pointer;
transition: background .3s var(--e-out), color .3s var(--e-out), border-color .3s var(--e-out), transform .2s var(--e-in);
font-variant-numeric: tabular-nums;
-webkit-tap-highlight-color: transparent;
}
.ks-btn:hover{ border-color: rgba(245,242,236,.32); background: rgba(245,242,236,.04); }
.ks-btn:active{ transform: translateY(1px); }
/* Sceau primary · paper bg + trait bas 2px orange (intention default) + Shippori roman 17px */
.ks-btn--primary{
background: var(--ks-v2-paper, #F5F2EC); color:var(--ks-v2-ink, #0A0A0C);
border:1px solid var(--ks-v2-paper, #F5F2EC);
border-bottom: 2px solid var(--ks-accent);
border-radius: 4px;
font-family: var(--f-display);
font-weight:700; font-size:17px;
letter-spacing: -.005em; text-transform: none;
box-shadow: 0 8px 22px -10px rgba(245,242,236,.22), inset 0 1px 0 rgba(255,255,255,.4);
}
.ks-btn--primary:hover{ background: var(--ks-v2-paper, #F5F2EC); color: var(--ks-v2-ink, #0A0A0C); border-color: var(--ks-v2-paper, #F5F2EC); border-bottom-color: var(--ks-accent); }
/* Variante shu critical · trait bas 2px shu (intention critical · suppression, alerte) */
.ks-btn--primary.is-critical, .ks-btn--primary--shu{
border-bottom-color: var(--ks-v2-rouge, #AF1C1C);
}
.ks-btn--ghost{ background:transparent; border-color:transparent; color: var(--ks-ink-72); }
.ks-btn--ghost:hover{ color: var(--ks-ink); background: var(--ks-hair); }
.ks-btn--sm{ padding:8px 14px; font-size:13px; }
.ks-btn--lg{ padding:18px 28px; font-size:15.5px; }
.ks-btn[disabled], .ks-btn--disabled{ opacity:.38; cursor:not-allowed; pointer-events:none; }
.ks-btn-arrow{
font-family: var(--f-mono); font-size:13px;
transition: transform .25s var(--e-out);
display:inline-flex;
}
.ks-btn:hover .ks-btn-arrow{ transform: translateX(4px); }
/* Min tap target 44×44 pour accessibilité (R5) */
.ks-tap{ min-width:44px; min-height:44px; }
/* ─── Input underline-only ─── */
.ks-field{ display:flex; flex-direction:column; gap:6px; }
.ks-field label{
font-family: var(--f-mono); font-size:10.5px;
letter-spacing: .28em; text-transform:uppercase;
color: var(--ks-ink-56);
}
.ks-inp{
-webkit-appearance:none; appearance:none;
background:transparent;
border:0; border-bottom:1px solid var(--ks-hair-2);
padding:10px 2px 12px;
font-family: var(--f-mono); font-size:14.5px;
color: var(--ks-ink); outline:none; border-radius:0;
transition: border-color .3s var(--e-out);
width:100%;
}
.ks-inp::placeholder{ color: var(--ks-ink-38); }
.ks-inp:hover{ border-color: var(--ks-hair-3); }
.ks-inp:focus{ border-color: var(--ks-accent); }
.ks-inp--error{ border-bottom-color: var(--ks-danger); }
.ks-help{
font-family: var(--f-mono); font-size:10.5px; letter-spacing:.08em;
color: var(--ks-ink-56);
}
.ks-help--err{ color: var(--ks-danger); }
/* ─── Card ─── */
.ks-card{
padding:24px;
background: var(--ks-card);
border:1px solid var(--ks-hair-2);
border-radius: var(--r-md);
box-shadow: var(--el-0);
display:flex; flex-direction:column; gap:14px;
}
/* D-002 fix · eyebrow Mono ivory subtile · BRAND règle 5 (orange = trait
sceau seulement, pas color text). Cohérent eyebrows landing/app/holding/
beta refondus nuit 25-26. */
.ks-card-label{
font-family: var(--f-mono); font-size:10.5px;
letter-spacing: .28em; text-transform:uppercase;
color: rgba(245,242,236,.62);
}
.ks-card-t{
font-family: var(--f-display); font-weight:700; font-style:normal;
font-size:22px; line-height:1.2; letter-spacing:-.012em;
color: var(--ks-ink); margin:0;
}
.ks-card-d{
font-family: var(--f-sans); font-size:14px; line-height:1.55;
color: var(--ks-ink-72); margin:0;
}
.ks-card-foot{
display:flex; justify-content:space-between; align-items:center;
font-family: var(--f-mono); font-size:11px; color: var(--ks-ink-56);
padding-top:14px; border-top:1px dashed var(--ks-hair);
}
/* ─── Badge ─── */
.ks-badge{
display:inline-flex; align-items:center; gap:8px;
padding:4px 10px;
font-family: var(--f-mono); font-size:10.5px;
letter-spacing:.18em; text-transform:uppercase;
border:1px solid var(--ks-hair-2);
color: var(--ks-ink-72);
border-radius:2px;
}
.ks-badge--accent { color: var(--ks-accent); border-color: rgba(244,184,96,.4); }
.ks-badge--success { color: var(--ks-success); border-color: rgba(52,199,123,.4); }
.ks-badge--warn { color: var(--ks-warning); border-color: rgba(232,163,60,.4); }
.ks-badge--danger { color: var(--ks-danger); border-color: rgba(245,101,101,.4); }
.ks-badge--live::before{
content:""; width:6px; height:6px; border-radius:50%;
background: var(--ks-accent);
animation: ks-pulse 1.8s var(--e-out) infinite;
}
@keyframes ks-pulse{
0% { box-shadow: 0 0 0 0 rgba(244,184,96,.55); transform: scale(1); }
70% { box-shadow: 0 0 0 10px rgba(244,184,96,0); transform: scale(.85); }
100%{ box-shadow: 0 0 0 0 rgba(244,184,96,0); transform: scale(1); }
}
/* ─── Stat ─── */
.ks-stat{
display:flex; flex-direction:column; gap:4px;
padding:18px 22px;
background: var(--ks-card); border:1px solid var(--ks-hair-2);
font-variant-numeric: tabular-nums;
}
.ks-stat-k{
font-family: var(--f-mono); font-size:10.5px;
letter-spacing: .28em; text-transform:uppercase;
color: var(--ks-ink-56);
}
.ks-stat-v{
font-family: var(--f-display); font-weight:600; font-style:normal;
font-size:36px; color: var(--ks-ink); letter-spacing:-.03em; line-height:1;
}
.ks-stat-v .unit{
font-family: var(--f-mono); font-weight:400; font-style:normal;
font-size:11px; color: var(--ks-ink-38); letter-spacing:.2em; text-transform:uppercase;
margin-left:6px;
}
/* ─── Tabs ─── */
.ks-tabs{
display:flex; gap:2px;
border-bottom:1px solid var(--ks-hair-2);
}
.ks-tab{
padding:10px 18px; cursor:pointer; background:transparent;
border:0; border-bottom:2px solid transparent;
font-family: var(--f-mono); font-size:12px;
letter-spacing:.14em; text-transform:uppercase;
color: var(--ks-ink-56);
transition: color .3s var(--e-out), border-color .3s var(--e-out);
}
.ks-tab:hover{ color: var(--ks-ink); }
.ks-tab.is-active{ color: var(--ks-ink); border-bottom-color: var(--ks-accent); }
/* ─── Progress ─── */
.ks-prog{
width:100%; height:2px;
background: var(--ks-hair);
overflow:hidden; position:relative;
}
.ks-prog-fill{
position:absolute; inset:0 var(--p, 60%) 0 0;
background: var(--ks-accent);
transition: inset .6s var(--e-out);
}
/* ─── Alert (R4 états) ─── */
.ks-alert{
padding:16px 18px;
background: var(--ks-card);
border:1px solid var(--ks-hair-2);
border-left:2px solid var(--c, var(--ks-accent));
display:flex; flex-direction:column; gap:6px;
border-radius: var(--r-sm);
}
.ks-alert-h{ font-family: var(--f-sans); font-weight:600; font-size:13.5px; color: var(--ks-ink); margin:0; }
.ks-alert-d{ font-family: var(--f-sans); font-size:13px; color: var(--ks-ink-72); margin:0; }
.ks-alert--success{ --c: var(--ks-success); }
.ks-alert--warn { --c: var(--ks-warning); }
.ks-alert--danger { --c: var(--ks-danger); }
.ks-alert--info { --c: var(--ks-info); }
/* ─── Skeleton (loading > 200ms) ─── */
.ks-skel{
height:14px;
background: linear-gradient(90deg, var(--ks-hair), var(--ks-hair-2), var(--ks-hair));
background-size:200% 100%;
animation: ks-skel 1.4s linear infinite;
border-radius: var(--r-sm);
}
@keyframes ks-skel{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
/* ─── Empty state ─── */
.ks-empty{
padding:48px 32px; text-align:center;
border:1px dashed var(--ks-hair-2); background: var(--ks-card);
display:flex; flex-direction:column; gap:12px; align-items:center;
border-radius: var(--r-md);
}
/* D-XXX fix · kanji empty state · color orange violation règle 5. Désormais
beige peach subtle (kanji = ornement BRAND règle 11). */
.ks-empty-k{ font-family: var(--f-display); color: rgba(245,220,180,.42); font-size:44px; line-height:1; font-weight:700; }
.ks-empty-t{ font-family: var(--f-display); font-weight:700; font-style:normal; font-size:20px; color: var(--ks-ink); }
.ks-empty-s{ font-size:14px; color: var(--ks-ink-72); max-width:34ch; }
/* ─── Opt-row (L4 component) ─── */
.ks-opt-row{
display:grid; grid-template-columns:40px 1fr 24px; gap:16px;
padding:18px 20px;
border:1px solid var(--ks-hair-2); border-radius: var(--r-md);
background:transparent;
cursor:pointer;
transition: border-color .25s var(--e-out), background .25s var(--e-out);
align-items:center;
text-align:left;
color: var(--ks-ink);
-webkit-tap-highlight-color: transparent;
}
.ks-opt-row:hover{ border-color: var(--ks-hair-3); background: rgba(255,255,255,.02); }
.ks-opt-row.is-selected{ border-color: var(--ks-accent); background: rgba(244,184,96,.06); }
.ks-opt-row[disabled], .ks-opt-row.is-disabled{ opacity:.38; pointer-events:none; }
.ks-opt-ic{
width:32px; height:32px; border-radius:50%;
border:1px solid var(--ks-ink-38);
display:flex; align-items:center; justify-content:center;
color: var(--ks-ink-72);
}
.ks-opt-row.is-selected .ks-opt-ic{ border-color: var(--ks-accent); color: var(--ks-accent); }
.ks-opt-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ks-opt-t{ font-family: var(--f-sans); font-weight:600; font-size:15px; color: var(--ks-ink); letter-spacing:-.005em; }
.ks-opt-d{ font-family: var(--f-sans); font-size:13px; color: var(--ks-ink-72); line-height:1.45; }
.ks-opt-dot{
width:18px; height:18px; border-radius:50%;
border:1px solid var(--ks-ink-38);
justify-self:end;
}
.ks-opt-row.is-selected .ks-opt-dot{
border-color: var(--ks-accent);
background: var(--ks-accent);
box-shadow: inset 0 0 0 3px #0C0A0E;
}
/* ─── Eyebrow · mono letter-spaced ───
D-002 fix · color orange violation règle 5. Désormais ivory subtile + dash
shu pour intention. Cohérent eyebrows landing/app/holding/beta refondus. */
.ks-eyebrow{
font-family: var(--f-mono);
font-size:11px; font-weight:700;
letter-spacing: .28em; text-transform:uppercase;
color: rgba(245,242,236,.62);
display:inline-flex; align-items:center; gap:12px;
}
.ks-eyebrow::before{
content:""; width:24px; height:1px;
background: var(--ks-v2-rouge, #AF1C1C);
}
.ks-eyebrow--muted{ color: var(--ks-ink-56); }
.ks-eyebrow--muted::before{ background: var(--ks-ink-56); }
/* ─── Section header ─── */
.ks-sec-h{
font-family: var(--f-display); font-weight:700;
font-size: clamp(28px, 4vw, 44px);
line-height:1.08; letter-spacing:-.02em;
color: var(--ks-ink); margin:0;
}
.ks-sec-h em{ font-style:normal; color: var(--ks-ink-72); }
/* `.shu` className implies shu rouge intention (BRAND règle 6) · pas orange.
Cohérent avec section headers landing qui utilisent shu pour accents. */
.ks-sec-h .shu{ font-style:normal; color: var(--ks-v2-rouge, #AF1C1C); }
/* Lede · refonte 22/04 · serif roman, pas italique.
Plus de texte italique partout (feedback Vlad). text-wrap: balance
pour éviter les retours à la ligne moches avec un mot orphelin. */
.ks-lede{
font-family: var(--f-display); font-style: normal;
font-size: clamp(16px, 1.6vw, 20px);
line-height: 1.55; color: var(--ks-ink-72);
max-width: 56ch; margin: 0 auto;
text-wrap: balance;
-webkit-hyphens: none; hyphens: none;
}
/* ═══════════════════════════════════════════════════════════
LANDING · L1 Hero + L2 Intro/Méthode (brief 19/04)
═══════════════════════════════════════════════════════════ */
/* Watermark kanji · un seul 見 contenu dans le viewport pour éviter débord latéral.
Fix 2026-04-21 : font-size réduit + overflow-hidden parent + un seul kanji. */
/* Watermark kanji SUPPRIMÉ de la landing (21/04) ·
Remplacé par ::before sur .ks-hero qui contient le kanji DANS l'image
(pas en position:fixed qui débordait du viewport et créait les bandes
latérales visibles sur Mac). */
.ks-watermark{
display: none !important;
}
/* Language switcher · drawer collapsible (refonte A-001 nuit 25-26/04)
──────────────────────────────────────────────────────────────────
Vlad audio · "le FR en permanence c'est chiant. Faudrait que je puisse
le faire glisser pour qu'il se mette dans un petit tiroir et un truc
obvious pour pouvoir changer la langue".
Pattern · tab affleurante minuscule top-right qui montre la langue
active (FR ou EN). Tap → reveal le drawer avec les 2 boutons.
État replié par défaut · presque invisible. Tap backdrop = fermer. */
.ks-lang{
position:fixed; top:max(env(safe-area-inset-top,16px), 18px); right:18px;
z-index:80;
/* État replié par défaut · drawer fermé, juste la tab visible */
}
.ks-lang-toggle{
display:inline-flex; align-items:center; justify-content:center;
gap:4px;
background: rgba(20,22,30,.55);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
border:1px solid rgba(245,242,236,.10);
border-radius: var(--r-pill);
padding:5px 10px 5px 12px;
cursor:pointer;
transition: all .28s cubic-bezier(.16,1,.3,1);
font-family: var(--f-mono); font-size:10px; font-weight:700;
letter-spacing:.28em; text-transform: uppercase;
color: rgba(245,242,236,.55);
min-height: 28px;
}
.ks-lang-toggle:hover{
color: var(--ks-ink, #F5F2EC);
border-color: rgba(245,242,236,.22);
}
.ks-lang-toggle::after{
content:'';
width:0; height:0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid currentColor;
margin-left: 2px;
opacity: .6;
transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.ks-lang.is-open .ks-lang-toggle::after{ transform: rotate(180deg); }
.ks-lang-drawer{
position:absolute; top: calc(100% + 6px); right:0;
display:flex; flex-direction:column; gap:2px;
background: rgba(20,22,30,.82);
-webkit-backdrop-filter: blur(22px) saturate(150%);
backdrop-filter: blur(22px) saturate(150%);
border:1px solid rgba(245,242,236,.14);
border-radius: 12px;
padding:4px;
min-width: 92px;
/* Animation drawer · cubic-bezier sortant doux, état fermé masqué */
opacity: 0;
transform: translateY(-6px) scale(.96);
transform-origin: top right;
pointer-events: none;
transition: opacity .28s cubic-bezier(.16,1,.3,1),
transform .28s cubic-bezier(.16,1,.3,1);
box-shadow: 0 14px 36px -16px rgba(0,0,0,.7);
}
.ks-lang.is-open .ks-lang-drawer{
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.ks-lang-btn{
background:none; border:none;
color: var(--ks-ink-56);
font-family: var(--f-mono); font-size:10.5px; font-weight:700;
letter-spacing:.22em; text-transform: uppercase;
padding:8px 14px; min-width:80px; min-height:32px;
border-radius: 8px;
cursor:pointer;
text-align: center;
transition: color .22s var(--e-out), background .22s var(--e-out), transform .22s var(--e-out), box-shadow .22s var(--e-out);
}
.ks-lang-btn:hover{ color: var(--ks-ink); background: rgba(245,242,236,.06); }
.ks-lang-btn.is-active{
/* Brand règle 5 · orange UNIQUEMENT trait sceau, jamais fill. */
background: rgba(245,242,236,.10);
color: var(--ks-ink, #F5F2EC);
box-shadow: none;
}
.ks-lang-btn:active{ transform: scale(.96); }
/* L1 · HERO ────────────────────────────────────────────────── */
/* L1 · HERO ──────────────────────────────────────────────────
Full-bleed absolu : prend 100% de la largeur du parent, image muscu
en background cover (couvre tout l'écran sur n'importe quel appareil),
fade smooth vers bg page en bas.
Fix 2026-04-21 : width:100% + align-self:stretch pour combler le bug
"rectangle central" sur Mac desktop (le parent flex ne stretch pas
les enfants par défaut avec align-items:center historique). */
/* Hero landing · full-bleed absolu avec image muscu dojo cover 100vw.
Kanji V intégré DANS l'image via ::before (pas .ks-watermark fixed qui
débordait). Inspiration 2e screenshot Vlad 21/04 : le kanji vit dans
l'image comme un watermark éditorial, ivory semi-transparent. */
.ks-hero{
position: relative; z-index: 2;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
align-self: stretch;
box-sizing: border-box;
/* Hero inspiré holding · pas d'overlap sur la section Principe, transition
nette. Fix 22/04 nuit · feedback Vlad "finalement le truc qui descend
sur la 2e page c'est pas si bonne idée, fais comme la holding".
100svh strict · hero = viewport pile, Principe commence en dessous
avec son propre fond. Fondu bottom vers ks-bg pour blend smooth. */
min-height: 100vh; min-height: 100svh;
margin-top: 0 !important;
margin-bottom: 0;
padding: 0 24px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
isolation: isolate;
background-color: var(--ks-bg);
background-image:
linear-gradient(180deg, rgba(12,10,14,.18) 0%, rgba(12,10,14,.08) 40%, rgba(12,10,14,.4) 72%, rgba(12,10,14,.88) 92%, var(--ks-bg) 100%),
url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=2400&q=80&auto=format&fit=crop');
background-size: cover, cover;
background-position: center, center 40%;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-attachment: scroll, scroll;
}
/* Kanji V (TEGUH · voir sa nature) · watermark intégré DANS l'image du hero.
Refonte 21/04 · mieux visible (feedback Vlad "on le devine mais très difficilement").
- Couleur ivory warm #F5DCB4 plus lumineuse (au lieu d'ivory pur quasi invisible)
- Opacité .22 (au lieu de .10)
- mix-blend-mode: screen (éclaircit le fond sombre au lieu de overlay qui bloquait)
- Drop-shadow sumi-e pour donner du relief calligraphique (effet encre)
- Taille augmentée pour plus de présence
NE PAS CHANGER les tailles/marges du .ks-hero lui-même (bug marges résolu). */
/* Supprimé 31/07 · .ks-hero::before portait le monogramme V Vladflow en
62vw dans le hero. TEGUH n'a pas de monogramme, et BRAND_RULES proscrit
tout watermark ornemental (direction ENCRE). */
.ks-hero-inner{ position: relative; z-index: 1; }
.ks-hero-inner{
max-width: 560px; width:100%; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:20px;
font-family: var(--f-sans);
padding: 0 24px;
box-sizing: border-box;
}
/* ═══ WORDMARK TEGUH · signature marque v3 (refonte éditoriale 21/04) ═══
Inspiration PDF Claude Design v2 :
- Archivo (TEGUH 01/08) · voix éditoriale calme, zéro italique, zéro serif
- Ivory warm #F5F2EC · pas blanc pur (chaleur papier)
- N+S ligature serrée · signature du mot composé (puissance)
- Ō macron accent ivory (native glyph) · discret, pas de ::after custom
- Version avec "en net." hanko rouge en tagline séparée (.ks-hero-claim) */
.ks-hero-wordmark{
font-family: var(--f-display);
font-style: normal;
font-weight: 600;
font-size: clamp(46px, 9.5vw, 100px);
letter-spacing: -.01em;
line-height: 1;
color: var(--ks-v2-paper);
margin: 0; padding: 8px 4px;
white-space: nowrap;
overflow: visible;
opacity: 0; animation: ks-fade-up 1s var(--e-out) .2s forwards;
filter: drop-shadow(0 10px 44px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(244,184,96,.10));
text-shadow: none;
font-feature-settings: "liga" 1, "dlig" 1, "kern" 1;
}
/* N+S ligature · refonte 22/04 soir · Vlad "N pété + port anims /h".
Aligné 1:1 sur holding-wordmark · -.11em tight kerning, display:inline-block.
Le N ne se coupe plus car on a retiré les spans .ks-wm-c par-lettre qui
cassaient le layout. */
.ks-hero-wordmark .ks-wm-ns{
letter-spacing: -.02em;
display: inline-block;
}
/* Ō accent beige chaud · aligné holding-wordmark .o */
.ks-hero-wordmark .ks-wm-o{
color: #F4C590;
padding-left: .02em;
}
/* Tagline "en net." · hanko rouge sous le wordmark, en italic aussi */
.ks-hero-claim{
font-family: var(--f-display);
font-style: normal;
font-weight: 600;
font-size: clamp(22px, 3.4vw, 38px);
letter-spacing: -.01em;
color: var(--ks-v2-rouge);
margin: 8px 0 0;
opacity: 0; animation: ks-fade-up .8s var(--e-out) .38s forwards;
}
.ks-hero-claim::after{
content: '.';
color: var(--ks-v2-rouge);
}
/* Manifeste hero · tagline éditoriale sous le wordmark (copy Claude Design v3 21/04).
Italic serif ivory warm, plus subtil que le lede mais plus fort que marginalia. */
.ks-hero-manifest{
font-family: var(--f-sans);
font-style: normal;
font-weight: 400;
font-size: clamp(20px, 3vw, 28px);
line-height: 1.3;
color: #F5F2EC;
margin: 18px 0 0;
letter-spacing: -.005em;
opacity: 0; animation: ks-fade-up .8s var(--e-out) .32s forwards;
text-shadow: 0 0 18px rgba(0,0,0,.55);
}
/* Eyebrow marginalia v2 · au-dessus du wordmark · dossier/slug contextuel */
.ks-hero-eyebrow-v2{
color: var(--ks-ink-56);
margin: 0 0 10px;
opacity: 0; animation: ks-fade-up .7s var(--e-out) .05s forwards;
}
.ks-hero-eyebrow-v2 .ks-v2-dot{ margin: 0 8px; }
/* Trait sumi court · séparateur éditorial entre claim et lede · hairline ivory (R2 · shu intention only) */
.ks-hero-rule{
border: 0;
width: 48px;
height: 1px;
background: rgba(245,242,236,.32);
margin: 18px 0 4px;
opacity: 0;
animation: ks-hero-rule-in .7s var(--e-out) .55s forwards;
}
@keyframes ks-hero-rule-in {
from { opacity: 0; transform: scaleX(.2); }
to { opacity: .55; transform: scaleX(1); }
}
.ks-hero-tagline{
font-family: var(--f-sans); font-style:normal;
font-size: clamp(16px, 2vw, 20px);
line-height:1.4;
color: var(--ks-ink-72);
margin:0; max-width:460px;
opacity:0; animation: ks-fade-up .6s var(--e-out) .45s forwards;
}
.ks-hero-tagline em{ color: var(--ks-ink-56); }
.ks-hero-lede{
font-family: var(--f-display); font-weight:550;
font-size: clamp(28px, 6vw, 44px);
letter-spacing:-.025em; line-height:1.1;
color: var(--ks-ink);
margin: 8px 0 4px;
display:flex; flex-direction:column; gap:2px;
opacity:0; animation: ks-fade-up .7s var(--e-out) .6s forwards;
}
.ks-hero-lede .shu{ font-style:normal; color: var(--ks-shu, #AF1C1C); font-weight:700; }
.ks-hero-cta{
margin-top:12px;
opacity:0; animation: ks-fade-up .7s var(--e-out) .8s forwards;
box-shadow: var(--el-1);
}
.ks-hero-cta:hover{
box-shadow: var(--el-2), 0 0 40px -8px rgba(244,184,96,.45);
transform: translateY(-1px);
}
.ks-hero-sub{
font-family: var(--f-mono); font-size: 11.5px;
letter-spacing:.14em; text-transform:uppercase;
color: var(--ks-ink-38);
opacity:0; animation: ks-fade-up .6s var(--e-out) .95s forwards;
}
@keyframes ks-fade-up{ to{ opacity:1; transform: translateY(0); } }
.ks-hero-eyebrow,
.ks-hero-wordmark,
.ks-hero-tagline,
.ks-hero-lede,
.ks-hero-cta,
.ks-hero-sub{ transform: translateY(14px); }
/* L2 · INTRO + MÉTHODE · padding réduit 22/04 PM v9.
Feedback Vlad 'c'est un slider chiant'. Causait chaque section à prendre
un viewport entier. Padding passe de 64-120px à 40-72px · plus compact. */
.ks-intro,
.ks-method{
position:relative; z-index:2;
width: 100%;
align-self: stretch;
box-sizing: border-box;
padding: clamp(40px, 7vw, 72px) 24px;
}
.ks-intro{
background:
radial-gradient(ellipse 120% 50% at 50% 0%, rgba(245,220,180,.04) 0%, transparent 55%),
radial-gradient(ellipse 80% 40% at 50% 100%, rgba(175,28,28,.025) 0%, transparent 60%);
}
.ks-method{
background:
radial-gradient(ellipse 120% 50% at 50% 0%, rgba(244,184,96,.03) 0%, transparent 55%),
radial-gradient(ellipse 80% 40% at 50% 100%, rgba(245,220,180,.025) 0%, transparent 60%);
}
/* Refonte 21/04 · tout centré pour cohérence landing · feedback Vlad */
.ks-intro-inner,
.ks-method-inner{
max-width: 720px; margin:0 auto;
display:flex; flex-direction:column; gap: 14px;
text-align: center;
align-items: center;
padding: 0 24px;
box-sizing: border-box;
width: 100%;
}
.ks-intro-inner > *,
.ks-method-inner > *{
max-width: 100%;
}
/* Fix aggressive 22/04 PM v4 · Vlad voit 'Trois étapes. Pas plus' coupé
en demi (descenders p/q clippés). Cause · line-height 1.06 base +
overflow/padding parent mangeaient la descente des glyphs Playfair.
Fix · line-height 1.15 minimum + padding-bottom safe + overflow visible. */
.ks-intro-inner > .ks-v2-head,
.ks-method-inner > .ks-v2-head{
max-width: min(560px, calc(100vw - 48px)) !important;
font-size: clamp(28px, 4.6vw, 44px) !important;
letter-spacing: -.025em !important;
line-height: 1.18 !important;
margin: 0 auto 24px !important;
padding: 4px 0 8px !important;
overflow-wrap: break-word !important;
overflow: visible !important;
word-break: keep-all;
hyphens: none;
}
/* ENCRE 07/2026 · kanji intro/method supprimés (ornement → structure). */
.ks-intro .ks-sec-h{ max-width: 20ch; }
.ks-method .ks-sec-h{ max-width: 14ch; }
/* Bullets intro · refonte 22/04 v3 feedback Vlad "encore gris tout moche,
pas harmonieux, pas stylé". Passage en Inter pur (un seul font-family
pour l'harmonie · plus de switch serif→sans au milieu du bullet),
taille agrandie, couleur ivory lumineuse .92 (au lieu de .72 gris). */
.ks-intro-bullets{
list-style: none; padding: 0; margin: 44px auto 0;
display: flex; flex-direction: column; gap: 0;
width: 100%; max-width: 620px;
}
.ks-intro-bullets li{
position: relative;
padding: 32px 12px 32px;
font-family: var(--f-sans);
font-size: 17px; line-height: 1.5;
font-weight: 400;
color: rgba(245,242,236,.82);
letter-spacing: -.005em;
text-align: center;
text-wrap: balance;
-webkit-hyphens: none; hyphens: none;
}
.ks-intro-bullets li + li{
border-top: 0;
}
/* Séparateur trait hairline ivory entre items · echo hero landing, zéro compteur (R2 · shu intention only) */
.ks-intro-bullets li + li::before{
content: '';
position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
width: 32px; height: 1px;
background: rgba(245,242,236,.32);
opacity: 1;
}
.ks-intro-bullets li strong{
color: #F5F2EC;
font-weight: 600;
font-family: var(--f-sans); font-style: normal;
font-size: clamp(19px, 2.6vw, 22px);
display: block;
margin-bottom: 10px;
letter-spacing: -.02em;
text-wrap: balance;
}
/* ks-flow · refonte 21/05 · feedback Vlad "page plus digeste, moins de scroll".
3 colonnes horizontales desktop, stack vertical mobile <760px. Méthode
tient en 1 viewport au lieu de 3 sliders verticaux. */
.ks-flow{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(28px, 4vw, 56px);
margin: 48px auto 0;
max-width: 1080px;
position: relative; z-index: 2;
align-items: start;
}
.ks-flow-row{
display:flex; flex-direction: column; align-items: center;
gap: 12px;
text-align: center;
position: relative;
opacity: 1 !important;
}
.ks-flow-row.reveal{ opacity: 1 !important; }
@media (max-width: 760px){
.ks-flow{ grid-template-columns: 1fr; gap: 36px; max-width: 620px; }
}
/* Connecteur shu vertical entre rows · refonte 22/04 v5 plus dramatique ·
passage orange → shu rouge + hauteur 28→40px + animation draw quand row
devient visible (scaleY 0→1 avec transform-origin top). */
/* Connecteur shu vertical killed 22/04 soir · Vlad "tjrs ce fuckin slider".
C'était CE trait rouge de 1px × 20px entre chaque kanji qui animait sa
scaleY 0→1 sur .9s · le "slider" que Vlad voyait en arrivant sur Ken/Kata/Dō.
Supprimé totalement · les kanjis se suffisent en espacement gap:40px. */
.ks-flow-row:not(:last-child)::after{ display: none !important; }
.ks-flow-mark{
position: relative;
display:inline-flex; align-items:center; justify-content:center;
padding: 0;
min-height: 0;
z-index: 1;
}
.ks-flow-mark::before{ display: none !important; }
/* Index mono par étape (ENCRE 07/2026 · remplace les kanji sumi-e Ken/Kata/Dō) */
.ks-flow-num{
display:inline-block;
font-family: var(--f-mono, 'JetBrains Mono', monospace);
font-weight: 700;
font-size: 13px; line-height: 1;
letter-spacing: .3em;
color: var(--ks-v2-rouge, #AF1C1C);
}
/* Hanko 惠 supprimé du flow (21/04 · feedback Vlad : "les 3 rouges me perturbent").
On garde juste le kanji sumi-e centré, un seul geste calligraphique par step.
Le hanko pourra revenir sur le hero ou une signature finale si besoin. */
.ks-flow-hanko{ display: none; }
.ks-flow-body{ max-width: 480px; }
/* Label éditorial stacked vertical · VOIR / Ken / けん
Refonte 22/04 nuit · feedback Vlad "inspire-toi holding, stack vertical" */
.ks-flow-label{
display: flex; flex-direction: column; align-items: center; gap: 2px;
margin: 14px 0 16px;
}
.ks-flow-label > span[data-qi]{
font-family: var(--f-mono, 'JetBrains Mono', monospace);
font-size: 10px; font-weight: 500;
letter-spacing: .28em; text-transform: uppercase;
color: rgba(245,242,236,.55);
order: 3;
}
.ks-flow-label .ks-flow-rule{ display: none; }
.ks-flow-label .ks-flow-name{
font-family: var(--f-display);
font-style: normal; font-weight: 600;
font-size: 16px;
color: var(--ks-v2-rouge);
letter-spacing: 0;
margin-top: 4px;
order: 2;
}
/* Pullquote philosophique · reprise style holding entre Méthode et FAQ.
"Pour savoir, il faut voir." · écho direct au TEGUH V. */
.ks-quote-philosophy{
max-width: 640px;
margin: 72px auto 32px;
padding: 0 24px;
font-family: var(--f-display);
font-style: normal; font-weight: 400;
font-size: clamp(22px, 3.4vw, 32px);
line-height: 1.35;
color: rgba(245,242,236,.82);
text-align: center;
letter-spacing: -.015em;
text-wrap: balance;
position: relative;
}
/* Rules rouges avant/après la blockquote killed 22/04 soir · deuxième source
de "slider rouge horizontal" perçu par Vlad. Blockquote reste sans rules. */
.ks-quote-philosophy::before,
.ks-quote-philosophy::after{ display: none !important; }
.ks-flow-t{
font-family: var(--f-display); font-weight: 700; font-style: normal;
font-size: clamp(20px, 3vw, 26px); line-height: 1.2; letter-spacing: -.02em;
color: var(--ks-ink); margin: 0 0 10px;
text-wrap: balance;
}
.ks-flow-d{
font-family: var(--f-display);
font-style: normal;
font-weight: 600;
font-size: clamp(18px, 2.6vw, 22px);
line-height: 1.45;
color: rgba(245,242,236,.86);
letter-spacing: -.005em;
margin: 0 auto; max-width: 480px;
text-wrap: balance;
-webkit-hyphens: none; hyphens: none;
}
@media (max-width: 480px){
.ks-flow-mark{ flex-basis: 48px; }
.ks-flow-mark::after{ top: 48px; }
}
/* Antialiasing global (fix rendu flou Mac reporté 19/04) */
html, body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ═══════════════════════════════════════════════════════════
APP · A0 Tab bar flottante 4 slots (brief 19/04)
Position fixed bottom · 280×64 pill · backdrop blur
Scope: nav.ks-tabbar pour battre la specificity de nav#nav legacy
═══════════════════════════════════════════════════════════ */
nav.ks-tabbar,
.ks-tabbar{
position:fixed;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
left:50%; transform:translateX(-50%);
top: auto !important;
right: auto !important;
z-index: 200;
display:inline-flex !important;
align-items:center;
padding: 6px !important;
background: rgba(20, 22, 30, .72) !important;
-webkit-backdrop-filter: blur(24px) saturate(140%);
backdrop-filter: blur(24px) saturate(140%);
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: var(--r-pill) !important;
box-shadow: var(--el-2) !important;
gap: 4px;
width: auto !important;
max-width: none !important;
}
nav.ks-tabbar a.ks-tabbar-a,
.ks-tabbar .ks-tabbar-a{
display:inline-flex !important;
flex-direction:column;
align-items:center;
justify-content:center;
gap: 3px;
min-width: 58px; min-height: 52px;
padding: 8px 14px !important;
border-radius: var(--r-pill) !important;
color: var(--ks-ink-56) !important;
text-decoration:none;
font-family: var(--f-mono) !important;
font-size: 9.5px !important;
font-weight:700 !important;
letter-spacing:.12em !important;
text-transform:uppercase !important;
background: transparent !important;
transition: color .25s var(--e-out), background .25s var(--e-out), min-width .3s var(--e-out);
-webkit-tap-highlight-color: transparent;
margin: 0 !important;
flex: 0 0 auto !important;
}
nav.ks-tabbar a.ks-tabbar-a:hover,
.ks-tabbar .ks-tabbar-a:hover{ color: var(--ks-ink) !important; }
nav.ks-tabbar a.ks-tabbar-a svg,
.ks-tabbar .ks-tabbar-a svg,
/* Tabbar icons SVG · refonte 22/04 nuit v4 · feedback Vlad 'seul kanji
Accueil reste, 3 autres en icônes éditoriales premium cohérentes'.
Dumbbell (Séances) · Bowl vapeurs (Nutrition) · Trajectory (Stats). */
nav.ks-tabbar a.ks-tabbar-a .ks-tabbar-icon,
.ks-tabbar .ks-tabbar-a .ks-tabbar-icon{
width: 22px; height: 22px;
display: block;
stroke: currentColor;
fill: none;
transition: stroke .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1);
}
nav.ks-tabbar a.ks-tabbar-a.is-active .ks-tabbar-icon,
.ks-tabbar .ks-tabbar-a.is-active .ks-tabbar-icon,
nav.ks-tabbar a.ks-tabbar-a.active .ks-tabbar-icon,
.ks-tabbar .ks-tabbar-a.active .ks-tabbar-icon{
/* Fix 03/05 · regression refonte 22/04 · stroke #0C0A0E rendait
l'icône invisible sur fond tab actif (qui reste sombre, le 'cream
ivory' théorique = rgba(245,242,236,.14) = quasi-noir effectif).
Restore cuivre #F4B860 cohérent avec app.html ligne 3161. */
stroke: #F4B860;
transform: scale(1.05);
filter: drop-shadow(0 0 10px rgba(244,184,96,.28));
}
nav.ks-tabbar a.ks-tabbar-a .ks-tabbar-kanji,
.ks-tabbar .ks-tabbar-a .ks-tabbar-kanji{
width: 22px; height: 22px;
display:flex; align-items:center; justify-content:center;
stroke: currentColor;
fill: none !important;
stroke-width: 1.6 !important;
stroke-linecap: round;
stroke-linejoin: round;
filter: none !important;
text-shadow: none !important;
transform: none !important;
}
.ks-tabbar .ks-tabbar-kanji{
/* Refonte 03/05 v3 · Yuji Mai brush sumi-e premium éditorial TEGUH
pour les 4 nav tabs (見 鍛 食 進). Weight 400 respect du brush
original (vs 900 trop bold). Size +6px pour densité visuelle. */
font-family: var(--f-display) !important;
font-size: 28px !important;
font-weight: 400 !important;
color: currentColor !important;
line-height:1 !important;
letter-spacing: -.02em !important;
stroke: none !important;
}
/* Active tab · ivory inversé éditorial (refonte 22/04 PM · feedback Vlad
"vieille soupe dégueulasse"). Plus d'orange fluo PowerPoint, on passe
en ivory clean façon Linear/Vercel. Ink dark sur fond cream. */
nav.ks-tabbar a.ks-tabbar-a.is-active,
nav.ks-tabbar a.ks-tabbar-a.active,
.ks-tabbar .ks-tabbar-a.is-active,
.ks-tabbar .ks-tabbar-a.active{
color: #0C0A0E !important;
background: #F5F2EC !important;
min-width: 80px;
box-shadow: 0 4px 14px -4px rgba(245,242,236,.18), inset 0 1px 0 rgba(255,255,255,.4) !important;
padding: 8px 16px !important;
}
nav.ks-tabbar a.ks-tabbar-a.is-active svg,
nav.ks-tabbar a.ks-tabbar-a.active svg,
.ks-tabbar .ks-tabbar-a.is-active svg,
.ks-tabbar .ks-tabbar-a.active svg,
nav.ks-tabbar a.ks-tabbar-a.is-active .ks-tabbar-kanji,
nav.ks-tabbar a.ks-tabbar-a.active .ks-tabbar-kanji,
.ks-tabbar .ks-tabbar-a.is-active .ks-tabbar-kanji,
.ks-tabbar .ks-tabbar-a.active .ks-tabbar-kanji{
/* Fix 03/05 · regression refonte 22/04 · stroke/color #0C0A0E ink
dark était valable si fond tab actif = cream (background:#F5F2EC).
Mais les overrides background sont ignorés en pratique (fond reste
transparent). Donc icône noire = invisible. Restore cuivre F4B860
cohérent avec l'intention 'tab actif jaune' rapportée Vlad. */
stroke: #F4B860 !important;
color: #F4B860 !important;
filter: drop-shadow(0 0 10px rgba(244,184,96,.28)) !important;
text-shadow: 0 0 12px rgba(244,184,96,.35) !important;
transform: scale(1.05) !important;
}
.ks-tabbar .ks-tabbar-a-lbl{ display: none !important; opacity: 1 !important; max-width: none !important; }
.ks-tabbar .ks-tabbar-a.is-active .ks-tabbar-a-lbl,
.ks-tabbar .ks-tabbar-a.active .ks-tabbar-a-lbl{ display: inline-block !important; color: #F4B860 !important; }
/* Mode focus séance · tab bar masquée */
body.live-open .ks-tabbar{ opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(80px); transition: all .3s var(--e-out); }
/* ═══════════════════════════════════════════════════════════
APP · A1 Home · hiérarchie countdown → séance du jour → semaine
═══════════════════════════════════════════════════════════ */
.ks-home{
padding: calc(44px + env(safe-area-inset-top, 0px)) 22px 120px;
max-width: 720px; margin: 0 auto;
position: relative;
display: flex; flex-direction: column; gap: 28px;
}
.ks-home-head{
display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.ks-home-brand{
display: inline-flex; align-items: baseline; gap: 10px;
font-family: var(--f-display); font-weight: 600;
font-size: 32px; letter-spacing: -.01em; line-height: 1;
color: var(--ks-ink);
}
.ks-home-actions{ display: inline-flex; gap: 8px; }
.ks-home-action{
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: transparent;
border: 1px solid var(--ks-hair-2);
color: var(--ks-ink-72);
cursor: pointer;
transition: border-color .2s var(--e-out), color .2s var(--e-out);
-webkit-tap-highlight-color: transparent;
}
.ks-home-action:hover{ border-color: var(--ks-accent); color: var(--ks-accent); }
.ks-home-action svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ks-home-intro{ display: flex; flex-direction: column; gap: 8px; }
.ks-home-date{
font-family: var(--f-mono); font-size: 11px;
letter-spacing: .28em; text-transform: uppercase;
color: var(--ks-accent);
}
.ks-home-h1{
font-family: var(--f-display); font-weight: 700;
font-size: clamp(34px, 6vw, 44px);
letter-spacing: -.025em; line-height: 1.05;
color: var(--ks-ink); margin: 0;
}
.ks-home-meta{
display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.ks-meta-pill{
display: inline-flex; align-items: baseline; gap: 4px;
padding: 5px 10px;
font-family: var(--f-mono);
font-size: 11px; font-weight: 700;
letter-spacing: .02em;
border-radius: 2px;
background: rgba(255,255,255,.03);
border: 1px solid var(--ks-hair-2);
color: var(--ks-ink-72);
}
.ks-meta-pill--accent{ color: var(--ks-accent-2); border-color: rgba(244,184,96,.28); background: rgba(244,184,96,.06); }
.ks-meta-pill--success{ color: var(--ks-success); border-color: rgba(52,199,123,.28); background: rgba(52,199,123,.06); }
.ks-meta-pill-sm{ font-size: 9px; opacity: .55; letter-spacing: .2em; text-transform: uppercase; margin-left: 2px; }
/* Countdown hero · grande valeur italique */
.ks-countdown{
display: grid; grid-template-columns: 1fr auto; gap: 24px;
align-items: flex-start;
padding: 28px 0;
border-top: 1px solid var(--ks-hair);
border-bottom: 1px solid var(--ks-hair);
}
.ks-countdown-v{
font-family: var(--f-display); font-weight: 500; font-style: normal;
font-size: clamp(88px, 18vw, 128px);
line-height: .9; letter-spacing: -.04em;
background: linear-gradient(180deg, var(--ks-ink) 0%, var(--ks-accent) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
font-variant-numeric: tabular-nums;
}
.ks-countdown-r{
text-align: right; display: flex; flex-direction: column; gap: 6px;
max-width: 200px;
}
.ks-countdown-k{
font-family: var(--f-mono); font-size: 10.5px;
letter-spacing: .28em; text-transform: uppercase;
color: var(--ks-ink-56);
}
.ks-countdown-t{
font-family: var(--f-display); font-weight: 700;
font-size: 18px; letter-spacing: -.015em;
color: var(--ks-ink);
}
.ks-countdown-d{
font-family: var(--f-mono); font-size: 11px;
color: var(--ks-accent);
letter-spacing: .05em;
}
/* Section Aujourd'hui · card accent solid */
.ks-today-sec{ display: flex; flex-direction: column; gap: 14px; }
.ks-sec-eyebrow{
font-family: var(--f-mono); font-size: 10.5px; font-weight: 700;
letter-spacing: .28em; text-transform: uppercase;
color: var(--ks-accent);
}
.ks-today-card{
display: grid; grid-template-columns: 48px 1fr auto;
gap: 16px; align-items: center;
padding: 20px 22px;
background: rgba(244,184,96,.04);
border: 1.5px solid var(--ks-accent);
border-radius: var(--r-md);
cursor: pointer;
transition: transform .2s var(--e-out), background .2s var(--e-out);
-webkit-tap-highlight-color: transparent;
}
.ks-today-card:hover{ transform: translateY(-1px); background: rgba(244,184,96,.07); }
.ks-today-card:active{ transform: scale(.99); }
.ks-today-icon{
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-sm);
background: rgba(244,184,96,.1);
border: 1px solid rgba(244,184,96,.28);
color: var(--ks-accent);
}
.ks-today-icon svg{ width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ks-today-body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ks-today-t{
font-family: var(--f-sans); font-weight: 600;
font-size: 15px; letter-spacing: -.005em;
color: var(--ks-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ks-today-m{
font-family: var(--f-mono); font-size: 11px;
color: var(--ks-ink-56);
letter-spacing: .04em;
}
.ks-today-go{
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ks-accent);
flex-shrink: 0;
}
.ks-today-go svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ks-today-actions{ display: inline-flex; gap: 10px; }
.ks-motivation{
padding: 16px 18px;
background: transparent;
border: 1px solid var(--ks-hair-2);
border-radius: var(--r-sm);
display: flex; align-items: flex-start; gap: 12px;
}
.ks-motivation-dot{
width: 6px; height: 6px; border-radius: 50%;
background: var(--ks-ink-38);
flex-shrink: 0; margin-top: 7px;
}
.ks-motivation-t{
font-family: var(--f-sans); font-size: 13.5px;
line-height: 1.5; color: var(--ks-ink-72);
}
/* ═══════════════════════════════════════════════════════════
APP · A1 Home · refonte via override classes existantes
(évite refactor HTML risqué, JS inchangé)
═══════════════════════════════════════════════════════════ */
/* Padding global home · plus aéré */
#home.page{ padding: 0 0 140px; }
/* Header home · sobriété + hiérarchie stricte */
#home .home-header{
padding: calc(44px + env(safe-area-inset-top, 0px)) 22px 12px;
background: none;
overflow: visible;
}
#home .home-header::after{ display: none; }
/* Wordmark refait avec tokens ks */
#home .home-brand{ margin-bottom: 22px; display: block; }
#home .kbrand-stack{
display: inline-flex; align-items: baseline; gap: 10px;
}
#home .kbrand-word{
font-family: var(--f-display);
font-weight: 600;
font-size: 34px;
letter-spacing: -.01em;
line-height: 1;
background: none !important;
-webkit-text-fill-color: var(--ks-ink) !important;
color: var(--ks-ink);
filter: none;
padding-bottom: 0;
}
#home .kbrand-kanji{
font-family: var(--f-display);
font-size: 16px; font-weight: 900;
color: var(--ks-accent);
letter-spacing: .06em;
transform: none;
text-shadow: none;
}
/* Eyebrow date (vw-tag) */
#home .vw-tag{
font-family: var(--f-mono);
font-size: 11px; font-weight: 700;
letter-spacing: .28em; text-transform: uppercase;
color: var(--ks-accent);
margin-bottom: 10px;
opacity: 1;
display: block;
}
#home .vw-tag::before{ display: none; }
/* H1 programme name */
#home .app-name{
font-family: var(--f-display) !important;
font-weight: 700;
font-size: clamp(36px, 7vw, 48px) !important;
letter-spacing: -.025em;
line-height: 1.05;
background: none !important;
-webkit-text-fill-color: var(--ks-ink) !important;
color: var(--ks-ink);
filter: none;
margin-bottom: 10px;
padding-bottom: 0;
}
/* Sub-ligne meta (app-sub) · pills déjà en place, juste resserrer */
#home .app-sub{
font-family: var(--f-mono) !important;
margin-top: 4px;
}
/* Countdown block · refonte 19/04 · sobre, data-style, taille réduite
Feedback Vlad: 'l'énorme chiffre 730 jours restants est horrible'.
Avant: Playfair 128px italic gradient → trop dramatique, cheap.
Après: chiffre serif display 72px pure ink + unité mono accent. */
#home .cdown-block{
padding: 24px 22px;
margin: 0 0 24px;
background: transparent;
border: 0;
border-top: 1px solid var(--ks-hair);
border-bottom: 1px solid var(--ks-hair);
border-radius: 0;
box-shadow: none;
}
#home .cdown-top{
display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
margin-bottom: 16px;
}
#home .cdown-num{
font-family: var(--f-display) !important;
font-weight: 700 !important;
font-style: normal !important;
font-size: clamp(56px, 10vw, 84px) !important;
line-height: 1 !important;
letter-spacing: -.035em !important;
color: var(--ks-ink) !important;
background: none !important;
-webkit-text-fill-color: var(--ks-ink) !important;
font-variant-numeric: tabular-nums;
padding: 0;
display: inline-block;
}
#home .cdown-right{
text-align: left;
display: flex; flex-direction: column; gap: 4px;
max-width: none;
margin-left: 0;
}
#home .cdown-label{
font-family: var(--f-mono) !important;
font-size: 10.5px !important;
font-weight: 700;
letter-spacing: .28em !important;
text-transform: uppercase;
color: var(--ks-ink-56) !important;
margin-bottom: 2px;
}
#home .cdown-dest{
font-family: var(--f-display) !important;
font-weight: 700;
font-size: 18px !important;
letter-spacing: -.015em !important;
color: var(--ks-ink);
margin-bottom: 2px;
}
#home .cdown-date{
font-family: var(--f-mono) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: .04em !important;
color: var(--ks-accent) !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
display: inline-block;
margin-top: 0;
}
/* Progress line (cdown-bar) · 2px fin */
#home .cdown-bar{
height: 2px !important;
background: var(--ks-hair) !important;
border-radius: 0 !important;
margin: 0;
}
#home .cdown-bar-fill{
background: var(--ks-accent) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#home .cdown-foot{
margin-top: 10px;
display: flex; justify-content: space-between;
font-family: var(--f-mono); font-size: 10.5px;
letter-spacing: .14em; text-transform: uppercase;
color: var(--ks-ink-56);
}
#home .cdown-foot strong{ color: var(--ks-ink); font-weight: 700; }
/* Section headers · eyebrow mono accent */
#home .section-header,
#home #todaySectionHeader{
font-family: var(--f-mono) !important;
font-size: 10.5px !important;
font-weight: 700;
letter-spacing: .28em !important;
text-transform: uppercase;
color: var(--ks-accent) !important;
padding: 8px 22px !important;
margin: 16px 0 12px !important;
background: none !important;
border: 0 !important;
}
#home .section-header::before,
#home .section-header::after{ display: none !important; }
/* Today card · accent solid, border 1.5px */
#home .today-block{ padding: 0 22px; margin: 0 0 20px; }
#home .today-card{
padding: 20px 22px !important;
background: rgba(244,184,96,.04) !important;
border: 1.5px solid var(--ks-accent) !important;
border-radius: var(--r-md) !important;
box-shadow: none !important;
display: grid !important;
grid-template-columns: 48px 1fr auto !important;
gap: 16px !important;
align-items: center !important;
transition: transform .2s var(--e-out), background .2s var(--e-out);
}
#home .today-card:hover{ transform: translateY(-1px); background: rgba(244,184,96,.07) !important; }
#home .today-icon{
width: 48px !important; height: 48px !important;
background: rgba(244,184,96,.1) !important;
border: 1px solid rgba(244,184,96,.28) !important;
border-radius: var(--r-sm) !important;
color: var(--ks-accent) !important;
}
#home .today-info h3{
font-family: var(--f-sans) !important;
font-weight: 600 !important;
font-size: 15px !important;
letter-spacing: -.005em !important;
color: var(--ks-ink) !important;
margin: 0 0 3px !important;
}
#home .today-info .today-desc,
#home .today-info p{
font-family: var(--f-mono) !important;
font-size: 11px !important;
color: var(--ks-ink-56) !important;
letter-spacing: .04em !important;
}
/* ═══════════════════════════════════════════════════════════
APP · A2 Session live · overrides typographie et boutons
(structure DOM conservée, alignement visuel DS)
═══════════════════════════════════════════════════════════ */
#liveOverlay .live-sname,
#liveOverlay .live-sport{
font-family: var(--f-mono) !important;
font-size: 11px !important;
letter-spacing: .28em !important;
text-transform: uppercase;
color: var(--ks-ink-56) !important;
font-weight: 700;
}
#liveOverlay .live-exname{
font-family: var(--f-display) !important;
font-weight: 700;
font-size: clamp(32px, 6vw, 48px) !important;
letter-spacing: -.025em;
line-height: 1.1;
color: var(--ks-ink) !important;
}
#liveOverlay .live-details,
#liveOverlay .live-exdetails{
font-family: var(--f-sans) !important;
font-size: 15px !important;
line-height: 1.55;
color: var(--ks-ink-72) !important;
}
#liveOverlay #liveTimer,
#liveOverlay .live-timer-val{
font-family: var(--f-mono) !important;
font-size: 72px !important;
font-weight: 500 !important;
letter-spacing: -.02em !important;
font-variant-numeric: tabular-nums;
color: var(--ks-accent) !important;
}
#liveOverlay .live-timer-lbl,
#liveOverlay .live-restlbl{
font-family: var(--f-mono) !important;
font-size: 11px !important;
letter-spacing: .28em !important;
text-transform: uppercase;
color: var(--ks-ink-56) !important;
}
#liveOverlay .live-btn,
#liveOverlay .live-cta{
font-family: var(--f-sans) !important;
font-weight: 600;
letter-spacing: -.005em;
min-height: 48px;
border-radius: var(--r-sm) !important;
}
#liveOverlay .live-btn-primary,
#liveOverlay .live-cta-primary{
background: var(--ks-accent) !important;
color: #0C0A0E !important;
border-color: var(--ks-accent) !important;
}
#liveOverlay .live-btn-ghost,
#liveOverlay .live-cta-secondary{
background: transparent !important;
color: var(--ks-ink-72) !important;
border: 1px solid var(--ks-hair-2) !important;
}
/* Close button sticky top */
#liveOverlay .live-close{
min-width: 44px; min-height: 44px;
}
/* ═══════════════════════════════════════════════════════════
APP · A3 Rest timer · ring SVG warning orange
═══════════════════════════════════════════════════════════ */
#liveOverlay .rest-ring,
.rest-timer-ring{
color: var(--ks-warning);
}
#liveOverlay .rest-value,
.rest-timer-val{
font-family: var(--f-mono) !important;
font-size: 64px !important;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
color: var(--ks-ink) !important;
}
#liveOverlay .rest-label,
.rest-timer-lbl{
font-family: var(--f-mono) !important;
font-size: 11px !important;
letter-spacing: .28em !important;
text-transform: uppercase;
color: var(--ks-ink-56) !important;
}
/* ═══════════════════════════════════════════════════════════
APP · A5/A6 Nutrition · alignement typo DS
═══════════════════════════════════════════════════════════ */
#diet .d-sec-title,
#diet .section-header{
font-family: var(--f-mono) !important;
font-size: 10.5px !important;
letter-spacing: .28em !important;
text-transform: uppercase;
color: var(--ks-accent) !important;
font-weight: 700;
}
#diet .d-meal-time{
font-family: var(--f-mono) !important;
font-size: 22px !important;
color: var(--ks-ink) !important;
}
#diet .d-meal.active .d-meal-time{ color: var(--ks-accent) !important; }
#diet .d-meal-name{
font-family: var(--f-sans) !important;
font-weight: 600;
font-size: 14px;
color: var(--ks-ink);
}
#diet .d-meal-num{
font-family: var(--f-mono) !important;
font-size: 10px !important;
color: var(--ks-ink-38) !important;
}
/* Recipe card title */
#diet .recipe-card h3,
#diet .rc-title{
font-family: var(--f-display) !important;
font-weight: 700;
letter-spacing: -.015em;
}
/* Macro pills */
#diet .jmacro-val,
#diet .macro-val{
font-family: var(--f-display) !important;
font-weight: 600;
font-style: normal;
font-variant-numeric: tabular-nums;
}
#diet .jmacro-lbl,
#diet .macro-lbl{
font-family: var(--f-mono) !important;
font-size: 10.5px !important;
letter-spacing: .28em !important;
text-transform: uppercase;
color: var(--ks-ink-56);
}
/* ═══════════════════════════════════════════════════════════
APP · A4 Swap exo · sheet bottom 72% viewport, handle, search
═══════════════════════════════════════════════════════════ */
.cal-picker-overlay{
background: rgba(0,0,0,.5) !important;
-webkit-backdrop-filter: blur(6px) !important;
backdrop-filter: blur(6px) !important;
}
.cal-picker{
background: var(--ks-bg-2) !important;
border: 1px solid var(--ks-hair-2) !important;
border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
max-height: 72vh !important;
padding-top: 14px !important;
}
/* Handle au top · feedback visuel sheet */
.cal-picker::before{
content: '';
position: absolute; top: 8px; left: 50%;
transform: translateX(-50%);
width: 42px; height: 4px;
border-radius: var(--r-pill);
background: var(--ks-hair-3);
}
/* Desktop · centrée avec handle discret */
@media (min-width: 900px){
.cal-picker{
border-radius: var(--r-xl) !important;
}
}
.cal-picker input[type="text"],
.cal-picker input[type="search"]{
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid var(--ks-hair-2) !important;
border-radius: 0 !important;
padding: 10px 2px 12px !important;
font-family: var(--f-mono) !important;
font-size: 14.5px !important;
color: var(--ks-ink) !important;
transition: border-color .25s var(--e-out);
}
.cal-picker input[type="text"]:focus,
.cal-picker input[type="search"]:focus{
border-bottom-color: var(--ks-accent) !important;
outline: none !important;
}
.cal-picker input::placeholder{ color: var(--ks-ink-38) !important; }
/* Options grid tiles */
.cal-picker .cal-sport-opt,
.cal-picker .sport-tile{
background: transparent !important;
border: 1px solid var(--ks-hair-2) !important;
border-radius: var(--r-md) !important;
padding: 14px !important;
transition: border-color .2s var(--e-out), background .2s var(--e-out);
cursor: pointer;
}
.cal-picker .cal-sport-opt:hover,
.cal-picker .sport-tile:hover{
border-color: var(--ks-hair-3) !important;
background: rgba(255,255,255,.02) !important;
}
.cal-picker .cal-sport-opt.selected,
.cal-picker .sport-tile.selected,
.cal-picker .cal-sport-opt.active{
border-color: var(--ks-accent) !important;
background: rgba(244,184,96,.06) !important;
color: var(--ks-ink) !important;
}
/* ═══════════════════════════════════════════════════════════
APP · A6 Nutrition tracker · input conversationnel = feature hero
═══════════════════════════════════════════════════════════ */
#diet .journal-card{
background: var(--ks-card) !important;
border: 1px solid var(--ks-hair-2) !important;
border-radius: var(--r-md) !important;
padding: 20px !important;
}
#diet #foodInput{
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid var(--ks-hair-2) !important;
border-radius: 0 !important;
padding: 14px 42px 14px 2px !important;
font-family: var(--f-sans) !important;
font-size: 15.5px !important;
color: var(--ks-ink) !important;
font-weight: 500;
transition: border-color .25s var(--e-out);
}
#diet #foodInput:focus{
border-bottom-color: var(--ks-accent) !important;
outline: none !important;
}
#diet #foodInput::placeholder{
color: var(--ks-ink-38) !important;
font-style: normal;
}
#diet .journal-input-help,
#diet .food-help{
font-family: var(--f-mono) !important;
font-size: 10.5px !important;
letter-spacing: .08em !important;
color: var(--ks-ink-56) !important;
margin-top: 10px;
}
/* Macro value italique serif, feature hero */
#diet .jmacro-val{
font-family: var(--f-display) !important;
font-style: normal;
font-weight: 600;
font-size: 28px !important;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* Journal entries */
#diet .journal-entry,
#diet .je-item{
padding: 14px 0 !important;
border-top: 1px solid var(--ks-hair) !important;
font-family: var(--f-sans);
}
#diet .je-name,
#diet .journal-entry-name{
font-family: var(--f-sans) !important;
font-weight: 500;
color: var(--ks-ink) !important;
}
#diet .je-kcal,
#diet .journal-entry-kcal{
font-family: var(--f-mono) !important;
font-variant-numeric: tabular-nums;
color: var(--ks-accent) !important;
font-weight: 700;
}
/* ═══════════════════════════════════════════════════════════
APP · A9 Onboarding · pattern uniforme 4 steps
═══════════════════════════════════════════════════════════ */
#onboarding{
background: var(--ks-bg) !important;
}
#onboarding .ob-wrap{
max-width: 480px !important;
padding: calc(60px + env(safe-area-inset-top, 0px)) 24px 60px !important;
}
#onboarding .ob-logo{
margin-bottom: 40px;
text-align: center;
}
#onboarding .ob-app-name{
font-family: var(--f-display) !important;
font-weight: 600 !important;
font-size: clamp(52px, 10vw, 72px) !important;
letter-spacing: -.01em !important;
line-height: 1 !important;
color: var(--ks-ink) !important;
background: none !important;
-webkit-text-fill-color: var(--ks-ink) !important;
}
#onboarding .ob-app-sub{
font-family: var(--f-display) !important;
font-style: normal !important;
font-size: 16px !important;
color: var(--ks-ink-72) !important;
margin-top: 8px !important;
font-weight: 700 !important;
}
#onboarding .ob-progress{
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 32px;
}
#onboarding .ob-dot{
width: 8px; height: 8px; border-radius: 50%;
background: var(--ks-hair-2) !important;
transition: background .3s var(--e-out), transform .3s var(--e-out);
}
#onboarding .ob-dot.active{
background: var(--ks-accent) !important;
transform: scale(1.2);
}
#onboarding .ob-dot.done{
background: var(--ks-ink-38) !important;
}
#onboarding .ob-step{
gap: 18px !important;
}
#onboarding .ob-label,
#onboarding .ob-step-label{
font-family: var(--f-mono) !important;
font-size: 10.5px !important;
letter-spacing: .28em !important;
text-transform: uppercase;
color: var(--ks-accent) !important;
font-weight: 700;
margin-bottom: 4px;
}
#onboarding .ob-step h1,
#onboarding .ob-step h2{
font-family: var(--f-display) !important;
font-weight: 700 !important;
font-size: clamp(28px, 5vw, 36px) !important;
letter-spacing: -.02em !important;
line-height: 1.1 !important;
color: var(--ks-ink) !important;
margin: 0 !important;
}
#onboarding .ob-step p,
#onboarding .ob-step .ob-sub{
font-family: var(--f-sans) !important;
font-size: 15px !important;
line-height: 1.6 !important;
color: var(--ks-ink-72) !important;
}
#onboarding .ob-step button,
#onboarding .ob-cta{
font-family: var(--f-sans) !important;
font-weight: 600;
font-size: 14.5px;
padding: 14px 22px;
min-height: 48px;
border-radius: var(--r-sm) !important;
transition: background .25s var(--e-out), transform .2s var(--e-out);
}
#onboarding .ob-cta-primary,
#onboarding .ob-step button.primary{
background: var(--ks-accent) !important;
color: #0C0A0E !important;
border: 1px solid var(--ks-accent) !important;
}
#onboarding .ob-cta-ghost,
#onboarding .ob-step button.ghost,
#onboarding .ob-step button.secondary{
background: transparent !important;
color: var(--ks-ink-72) !important;
border: 1px solid var(--ks-hair-2) !important;
}
/* ═══════════════════════════════════════════════════════════
APP · A7 Coach · blocs scroll horizontal + vidéos + tips
═══════════════════════════════════════════════════════════ */
/* Section headers dans home + progress */
#home .section-header span:first-child,
#home .section-header > span,
#progress .section-header,
#progress .supp-header h2,
#progress h2{
font-family: var(--f-mono);
font-size: 11px; font-weight: 700;
letter-spacing: .28em; text-transform: uppercase;
color: var(--ks-accent);
}
#progress .supp-header h2{
font-family: var(--f-display) !important;
font-size: clamp(32px, 6vw, 44px) !important;
font-weight: 700 !important;
letter-spacing: -.025em !important;
line-height: 1.05 !important;
color: var(--ks-ink) !important;
text-transform: none !important;
}
#progress .supp-header p{
font-family: var(--f-display) !important;
font-style: normal !important;
font-weight: 700 !important;
font-size: 16px !important;
color: var(--ks-ink-72) !important;
}
/* Program blocks slider (cartes blocs horizontaux) */
#home #progBlocksSlider{
padding: 4px 22px 14px !important;
margin: 0 -22px 18px !important;
gap: 14px !important;
}
#home #progBlocksSlider > div{
border: 1px solid var(--ks-hair-2) !important;
border-radius: var(--r-md) !important;
padding: 20px !important;
min-width: 220px !important;
background: transparent !important;
}
#home #progBlocksSlider > div[style*="linear-gradient"],
#home #progBlocksSlider > div[data-active="1"]{
border-color: var(--ks-accent) !important;
background: rgba(244,184,96,.04) !important;
}
/* Key moves (vidéos technique) · cards 180px */
#home #keyMovesWrap,
#home .km-scroll{
padding: 4px 22px 14px !important;
margin: 0 -22px !important;
gap: 14px !important;
}
#home .km-card{
flex: 0 0 180px !important;
border: 1px solid var(--ks-hair-2) !important;
border-radius: var(--r-md) !important;
background: var(--ks-card) !important;
box-shadow: none !important;
}
#home .km-card .km-title,
#home .km-card h4{
font-family: var(--f-display) !important;
font-style: normal;
font-weight: 700;
font-size: 15px !important;
letter-spacing: -.01em;
color: var(--ks-ink);
}
#home .km-card .km-muscle,
#home .km-card .km-meta{
font-family: var(--f-mono) !important;
font-size: 10px !important;
letter-spacing: .18em !important;
text-transform: uppercase;
color: var(--ks-accent) !important;
}
/* Tips carousel */
#home #nfcTipsWrap > div,
#home .tip-card{
border: 1px solid var(--ks-hair-2) !important;
border-left: 2px solid var(--ks-accent) !important;
border-radius: var(--r-sm) !important;
background: var(--ks-card) !important;
padding: 18px !important;
}
#home #nfcTipsWrap .tip-cat,
#home .tip-card .cat{
font-family: var(--f-mono) !important;
font-size: 10.5px !important;
letter-spacing: .28em !important;
text-transform: uppercase;
color: var(--ks-accent) !important;
font-weight: 700;
}
#home #nfcTipsWrap .tip-title,
#home .tip-card h4{
font-family: var(--f-display) !important;
font-style: normal;
font-weight: 700;
font-size: 16px !important;
color: var(--ks-ink);
letter-spacing: -.01em;
}
#home #nfcTipsWrap .tip-body,
#home .tip-card p{
font-family: var(--f-sans) !important;
font-size: 13.5px !important;
color: var(--ks-ink-72) !important;
line-height: 1.55;
}
/* ═══════════════════════════════════════════════════════════
APP · A8 Stats · évolution, PR, consistance
═══════════════════════════════════════════════════════════ */
/* Hero stat chiffre italique géant */
#progress{
padding: 0 0 140px !important;
}
#progress #pgWeightCur,
#progress #pgSessCount,
#progress #pgKneeAvg{
font-family: var(--f-display) !important;
font-weight: 600 !important;
font-style: normal !important;
font-size: clamp(48px, 10vw, 72px) !important;
letter-spacing: -.04em !important;
line-height: 1 !important;
color: var(--ks-ink) !important;
font-variant-numeric: tabular-nums;
background: none !important;
-webkit-text-fill-color: var(--ks-ink) !important;
}
/* Labels mono uppercase accent */
#progress [data-i18n^="evo_"]{
font-family: var(--f-mono) !important;
font-size: 10.5px !important;
letter-spacing: .28em !important;
text-transform: uppercase;
color: var(--ks-ink-56) !important;
font-weight: 700 !important;
}
#progress #pgWeightDelta,
#progress #pgRpeLabel,
#progress #pgStreak{
font-family: var(--f-mono) !important;
font-size: 11px !important;
color: var(--ks-accent) !important;
letter-spacing: .04em !important;
}
/* Cards progress · token-aligned */
#progress > div > div[style*="background:var(--bg2)"],
#progress > div > div[style*="background: var(--bg2)"]{
background: var(--ks-card) !important;
border: 1px solid var(--ks-hair-2) !important;
border-radius: var(--r-md) !important;
padding: 22px !important;
}
/* Coach card · accent border gauche semantic */
#progress div[style*="linear-gradient(135deg,rgba(244,184,96"]{
background: transparent !important;
border: 1px solid var(--ks-hair-2) !important;
border-left: 2px solid var(--ks-accent) !important;
border-radius: var(--r-sm) !important;
}
/* Top progressions list · mono alignment */
#progress #pgTopList{
font-family: var(--f-mono) !important;
font-size: 12px !important;
line-height: 1.8;
color: var(--ks-ink-72);
}
/* ═══════════════════════════════════════════════════════════
AUTH · modal magic link email + Google OAuth
═══════════════════════════════════════════════════════════ */
.ks-auth-backdrop{
position: fixed; inset: 0;
background: rgba(0,0,0,.65);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
z-index: 9000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity .3s var(--e-out);
}
.ks-auth-backdrop.is-open{ display: flex; opacity: 1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ks-auth-modal{
width: 100%;
max-width: 440px;
background: var(--ks-bg-2);
border: 1px solid var(--ks-hair-2);
border-radius: var(--r-lg);
padding: 40px 34px 32px;
position: relative;
box-shadow: var(--el-2), 0 40px 90px -20px rgba(0,0,0,.55);
transform: translateY(16px);
transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s var(--e-out);
font-family: var(--f-sans);
overflow: hidden;
}
.ks-auth-modal > *{ position: relative; z-index: 1; }
.ks-auth-backdrop.is-open .ks-auth-modal{ transform: translateY(0); }
.ks-auth-close{
position: absolute; top: 14px; right: 14px;
width: 34px; height: 34px;
background: transparent;
border: 1px solid var(--ks-hair-2);
border-radius: 50%;
color: var(--ks-ink-56);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color .25s var(--e-out), color .25s var(--e-out), transform .25s var(--e-out), background .25s var(--e-out);
z-index: 2;
}
.ks-auth-close:hover{ border-color: rgba(245,242,236,.5); color: var(--ks-ink, #F5F2EC); background: rgba(245,242,236,.06); transform: rotate(90deg); }
.ks-auth-eyebrow{
font-family: var(--f-mono);
font-size: 10.5px; font-weight: 700;
letter-spacing: .28em; text-transform: uppercase;
color: var(--ks-ink-55, rgba(245,242,236,.55));
margin-bottom: 12px;
animation: ksAuthFadeIn .5s var(--e-out) .05s both;
}
@keyframes ksAuthFadeIn{
from{ opacity: 0; transform: translateY(6px); }
to{ opacity: 1; transform: translateY(0); }
}
/* Tabs Inscription / Connexion · SUPPRIMÉS 07/07 · mode unique "Continuer"
(signup et login = même appel Supabase avec OAuth + magic link, les tabs
mentaient · cf refonte ks.auth-ui.js). CSS des tabs purgé. */
.ks-auth-h{
font-family: var(--f-display);
font-style: normal;
font-weight: 600;
font-size: 30px;
letter-spacing: -.025em;
line-height: 1.1;
color: var(--ks-ink);
margin: 0 0 10px;
animation: ksAuthFadeIn .55s var(--e-out) .18s both;
position: relative;
}
.ks-auth-h::after{
content: '';
display: block;
width: 32px; height: 1px;
background: var(--ks-v2-rouge, #AF1C1C);
opacity: .7;
margin-top: 14px;
animation: ksAuthRule 1.2s cubic-bezier(.16,1,.3,1) .55s both;
}
@keyframes ksAuthRule{
from{ width: 0; opacity: 0; }
to{ width: 32px; opacity: .7; }
}
.ks-auth-sub{
font-family: var(--f-sans);
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 1.55;
color: var(--ks-ink-72);
margin: 14px 0 26px;
letter-spacing: -.005em;
animation: ksAuthFadeIn .5s var(--e-out) .28s both;
}
.ks-auth-google{
display: inline-flex; align-items: center; justify-content: center;
gap: 12px;
width: 100%;
padding: 14px 20px;
min-height: 48px;
background: rgba(245,242,236,.04);
border: 1px solid var(--ks-hair-2);
border-radius: 4px;
color: var(--ks-ink);
font-family: var(--f-display);
font-size: 14.5px; font-weight: 700;
letter-spacing: -.005em;
cursor: pointer;
transition: border-color .25s var(--e-out), background .25s var(--e-out), transform .18s var(--e-out);
animation: ksAuthFadeIn .5s var(--e-out) .38s both;
}
.ks-auth-google:hover{ border-color: rgba(245,242,236,.4); background: rgba(245,242,236,.08); transform: translateY(-1px); }
.ks-auth-google:active{ transform: translateY(0); }
.ks-auth-google-ic{
width: 18px; height: 18px;
background: #fff; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--f-display); font-weight: 700; color: #444; font-size: 11px;
}
.ks-auth-sep{
display: flex; align-items: center; gap: 12px;
margin: 22px 0 18px;
font-family: var(--f-mono);
font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
color: var(--ks-ink-38);
}
.ks-auth-sep::before,
.ks-auth-sep::after{
content: ''; flex: 1; height: 1px;
background: var(--ks-hair);
}
.ks-auth-email-label{
display: block;
font-family: var(--f-mono);
font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
color: var(--ks-ink-56); font-weight: 700;
margin-bottom: 8px;
}
.ks-auth-email-inp{
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid var(--ks-hair-2);
padding: 12px 2px 14px;
color: var(--ks-ink);
font-family: var(--f-mono);
font-size: 15px;
outline: none;
transition: border-color .2s var(--e-out);
border-radius: 0;
}
.ks-auth-email-inp:focus{ border-bottom-color: var(--ks-v2-rouge, #AF1C1C); }
.ks-auth-email-inp::placeholder{ color: var(--ks-ink-38); }
/* Submit CTA · refonte éditoriale 27/04 pass 13 · sceau canonique avec trait bas shu/orange
Cohérent avec btn-unlock landing + auth-btn · radius 4px + box-shadow sceau. */
.ks-auth-submit{
margin-top: 22px;
width: 100%;
min-height: 50px;
padding: 14px 20px;
background: #F5F2EC;
border: 0;
border-radius: 4px;
color: #0C0A0E;
font-family: var(--f-display);
font-style: normal;
font-size: 15px; font-weight: 700;
letter-spacing: -.005em;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
box-shadow: 0 12px 30px -14px rgba(0,0,0,.7);
transition: background .25s var(--e-out), transform .2s var(--e-out), box-shadow .25s var(--e-out);
position: relative;
overflow: hidden;
animation: ksAuthFadeIn .5s var(--e-out) .48s both;
}
.ks-auth-submit::before{
content: '';
position: absolute;
top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
transition: left .7s cubic-bezier(.16,1,.3,1);
pointer-events: none;
}
.ks-auth-submit:hover{
background: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 18px 40px -14px rgba(0,0,0,.85);
}
.ks-auth-submit:hover::before{ left: 100%; }
.ks-auth-submit:active{ transform: translateY(0) scale(.985); }
.ks-auth-submit[disabled]{ opacity: .5; pointer-events: none; }
.ks-auth-legal{
margin-top: 18px;
font-family: var(--f-mono);
font-size: 10.5px;
line-height: 1.55;
color: var(--ks-ink-38);
letter-spacing: .04em;
}
.ks-auth-legal a{
color: var(--ks-ink-56);
text-decoration: underline;
text-decoration-color: rgba(255,255,255,.15);
text-underline-offset: 2px;
}
.ks-auth-legal a:hover{ color: var(--ks-accent); text-decoration-color: var(--ks-accent); }
.ks-auth-msg{
margin-top: 16px;
padding: 14px 16px;
border-radius: var(--r-sm);
font-family: var(--f-sans);
font-size: 13.5px;
line-height: 1.5;
display: none;
}
.ks-auth-msg.is-show{ display: block; }
.ks-auth-msg--success{
background: rgba(52,199,123,.08);
border: 1px solid rgba(52,199,123,.28);
color: var(--ks-success);
}
.ks-auth-msg--error{
background: rgba(245,101,101,.08);
border: 1px solid rgba(245,101,101,.28);
color: var(--ks-danger);
}
.ks-auth-msg--info{
background: rgba(96,165,232,.08);
border: 1px solid rgba(96,165,232,.28);
color: var(--ks-info);
}
/* ═══════════════════════════════════════════════════════════
P1-d · Refonte cards résultat + unlock-features (feedback 19/04)
Objectif: retirer le cheap (icônes colorées rondes, coches vertes
accumulées) et aligner sur le DS (serif + mono sobres).
═══════════════════════════════════════════════════════════ */
#screenResult .result-cards{
display: grid; gap: 12px !important;
grid-template-columns: 1fr;
}
@media (min-width: 720px){
#screenResult .result-cards{ grid-template-columns: 1fr 1fr; }
}
#screenResult .rcard{
background: var(--ks-card) !important;
border: 1px solid var(--ks-hair-2) !important;
border-radius: var(--r-md) !important;
padding: 22px 24px !important;
box-shadow: none !important;
}
#screenResult .rcard-header{
display: flex; align-items: center; gap: 12px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--ks-hair);
}
/* Icônes sobres · cercles fins hairline au lieu des backgrounds saturés */
#screenResult .rcard-icon{
width: 32px !important; height: 32px !important;
min-width: 32px !important;
background: transparent !important;
border: 1px solid var(--ks-hair-2) !important;
border-radius: 50% !important;
color: var(--ks-accent) !important;
padding: 0 !important;
display: inline-flex; align-items: center; justify-content: center;
}
#screenResult .rcard-icon.purple,
#screenResult .rcard-icon.green,
#screenResult .rcard-icon.orange{
background: transparent !important;
border-color: var(--ks-hair-2) !important;
color: var(--ks-accent) !important;
}
#screenResult .rcard-icon svg{
width: 14px !important; height: 14px !important;
stroke: currentColor !important;
fill: none !important;
stroke-width: 1.6 !important;
}
#screenResult .rcard-title{
font-family: var(--f-display) !important;
font-weight: 700 !important;
font-size: 17px !important;
letter-spacing: -.015em !important;
color: var(--ks-ink) !important;
}
#screenResult .rcard-body{
font-family: var(--f-sans);
color: var(--ks-ink-72);
font-size: 13.5px;
line-height: 1.6;
}
/* Unlock card premium · refonte sobre, fini les coches vertes cheap */
#screenResult #unlockCard,
#screenResult .unlock-card{
background: var(--ks-card) !important;
border: 1px solid var(--ks-hair-2) !important;
border-radius: var(--r-lg) !important;
padding: 32px 28px !important;
box-shadow: var(--el-1) !important;
margin-top: 28px !important;
}
#screenResult .unlock-badge{
font-family: var(--f-mono) !important;
font-size: 10.5px !important;
letter-spacing: .28em !important;
text-transform: uppercase !important;
color: var(--ks-accent) !important;
font-weight: 700 !important;
background: none !important;
padding: 0 !important;
border: 0 !important;
margin-bottom: 12px !important;
}
#screenResult .unlock-title{
font-family: var(--f-display) !important;
font-weight: 700 !important;
font-size: clamp(26px, 4.5vw, 36px) !important;
letter-spacing: -.02em !important;
line-height: 1.1 !important;
color: var(--ks-ink) !important;
margin-bottom: 8px !important;
}
#screenResult .unlock-title span{
font-style: normal !important;
color: var(--ks-accent) !important;
background: none !important;
-webkit-text-fill-color: var(--ks-accent) !important;
}
#screenResult .unlock-sub{
font-family: var(--f-display) !important;
font-style: normal !important;
font-weight: 700 !important;
font-size: 15px !important;
color: var(--ks-ink-72) !important;
margin-bottom: 24px !important;
max-width: 42ch;
}
/* Features list · retire les coches vertes cheap, remplace par bullet fin + mono hairline */
#screenResult .unlock-features{
display: grid !important; gap: 0 !important;
margin: 24px 0 28px !important;
border-top: 1px solid var(--ks-hair);
}
#screenResult .uf-row{
display: grid !important;
grid-template-columns: auto 1fr !important;
gap: 14px !important;
align-items: start !important;
padding: 14px 0 !important;
border-bottom: 1px solid var(--ks-hair) !important;
font-family: var(--f-sans) !important;
font-size: 14px !important;
line-height: 1.55 !important;
color: var(--ks-ink-72) !important;
}
#screenResult .uf-row .uf-check{
width: 16px !important; height: 16px !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin-top: 3px !important;
border-radius: 0 !important;
position: relative !important;
display: inline-block !important;
}
#screenResult .uf-row .uf-check::before{
content: '';
position: absolute;
top: 50%; left: 2px;
width: 10px; height: 1px;
background: var(--ks-accent);
}
#screenResult .uf-row .uf-check svg{ display: none !important; }
#screenResult .uf-row strong{
color: var(--ks-ink) !important;
font-weight: 600 !important;
}
/* ════════════════════════════════════════════════════════════════════
── Scene 03 · APERÇU · app reveal phone mockup + floating callouts ──
Section landing III (insérée 22/04 nuit). Phone CSS pur, zéro image,
reveal scroll via IntersectionObserver existant (.reveal / .reveal-dX).
Desktop ≥ 920px · phone centré avec callouts absolute autour.
Mobile < 920px · stack vertical (phone puis callouts grid).
════════════════════════════════════════════════════════════════════ */
.ks-reveal{
position: relative;
padding: 120px 24px 140px;
overflow: hidden;
}
.ks-reveal-inner{
max-width: 1120px; margin: 0 auto;
display: flex; flex-direction: column; align-items: center;
text-align: center;
}
.ks-reveal .ks-v2-head{ max-width: 18ch; }
.ks-reveal .ks-lede{ max-width: 54ch; margin-bottom: 72px; }
/* Stage · contient le phone central + 4 callouts positionnés autour */
.ks-reveal-stage{
position: relative;
width: 100%;
display: flex; align-items: center; justify-content: center;
min-height: 640px;
margin: 0 auto;
}
/* ─── Phone mockup ─── */
.ks-reveal-phone{
position: relative;
width: 288px;
aspect-ratio: 288 / 588;
z-index: 2;
transform: translateY(28px) scale(.96);
opacity: 0;
transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
transition-delay: .15s;
}
.reveal.in .ks-reveal-phone,
.ks-reveal-stage.in .ks-reveal-phone{
opacity: 1; transform: translateY(0) scale(1);
}
.ks-reveal-stage.reveal.in .ks-reveal-phone{ opacity: 1; transform: translateY(0) scale(1); }
.ks-reveal-phone-frame{
position: relative;
width: 100%; height: 100%;
background: linear-gradient(180deg, #121318 0%, #0C0A0E 100%);
border: 1px solid rgba(245,242,236,.14);
border-radius: 46px;
padding: 10px;
box-shadow:
0 0 0 1px rgba(0,0,0,.6) inset,
0 1px 0 rgba(245,242,236,.08) inset,
0 40px 120px -20px rgba(0,0,0,.85),
0 18px 40px -12px rgba(0,0,0,.6);
}
/* Dynamic island iOS 26 · pill noir flottant · inspiration Claude Design ios-frame */
.ks-reveal-phone-notch{
position: absolute; top: 20px; left: 50%;
transform: translateX(-50%);
width: 94px; height: 27px;
background: #000;
border-radius: 18px;
z-index: 3;
box-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.ks-reveal-phone-screen{
position: relative;
width: 100%; height: 100%;
background: #0C0A0E;
border-radius: 36px;
padding: 58px 18px 28px;
overflow: hidden;
display: flex; flex-direction: column;
gap: 12px;
text-align: left;
}
/* Home indicator iOS · barre pill bas du screen */
.ks-reveal-phone-screen::after{
content: '';
position: absolute;
bottom: 8px; left: 50%;
transform: translateX(-50%);
width: 104px; height: 4px;
border-radius: 100px;
background: rgba(245,242,236,.55);
z-index: 2;
}
/* Watermark V supprimé 31/07 · même reliquat Vladflow que .ks-hero::before. */
.ks-reveal-phone-screen > *{ position: relative; z-index: 1; }
.ks-reveal-phone-shadow{
position: absolute;
left: 50%; bottom: -40px;
width: 78%; height: 40px;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 70%);
filter: blur(6px);
z-index: 1;
}
/* ─── Contenu mini-app ─── */
.ks-reveal-m-status{
display: flex; justify-content: space-between; align-items: center;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px; letter-spacing: .12em;
color: rgba(245,242,236,.58);
margin-bottom: 6px;
}
.ks-reveal-m-status-r{ font-size: 8px; letter-spacing: .3em; }
/* Eyebrow phone mockup · R4 fix · shu → orange (eyebrow par défaut orange #F4B860) */
.ks-reveal-m-eyebrow{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
color: var(--ks-accent);
font-weight: 700;
}
.ks-reveal-m-date{
font-family: var(--f-sans);
font-size: 11px; color: rgba(245,242,236,.62);
letter-spacing: -.005em;
margin-top: 2px;
}
.ks-reveal-m-countdown{
display: flex; align-items: baseline; gap: 4px;
font-family: var(--f-display);
font-style: normal; font-weight: 600;
color: #F5F2EC;
letter-spacing: -.03em;
line-height: 1;
margin-top: 4px;
}
.ks-reveal-m-j{ font-size: 38px; opacity: .88; }
.ks-reveal-m-n{ font-size: 64px; }
.ks-reveal-m-sub{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase;
color: rgba(245,242,236,.5);
margin-top: 2px;
}
.ks-reveal-m-today{
position: relative;
margin-top: 10px;
padding: 14px 14px 16px;
border: 1px solid rgba(245,242,236,.1);
border-radius: 14px;
background: linear-gradient(180deg, rgba(245,242,236,.03) 0%, rgba(245,242,236,0) 100%);
overflow: hidden;
}
.ks-reveal-m-today-eye{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase;
color: rgba(245,242,236,.52);
margin-bottom: 4px;
}
.ks-reveal-m-today-title{
font-family: var(--f-display);
font-weight: 600; font-size: 20px;
color: #F5F2EC;
letter-spacing: -.02em;
line-height: 1.1;
}
.ks-reveal-m-today-meta{
font-family: var(--f-sans);
font-size: 10.5px; color: rgba(245,242,236,.58);
margin-top: 4px;
}
.ks-reveal-m-today-btn{
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
padding: 7px 12px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9.5px; font-weight: 600;
letter-spacing: .2em; text-transform: uppercase;
color: #F5F2EC;
border: 1px solid rgba(245,242,236,.22);
border-radius: 100px;
background: rgba(175,28,28,.12);
}
.ks-reveal-m-arrow{ font-size: 11px; }
.ks-reveal-m-phases{
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
margin-top: 4px;
}
.ks-reveal-m-phase{
padding: 10px 4px 8px;
border: 1px solid rgba(245,242,236,.08);
border-radius: 10px;
display: flex; flex-direction: column; align-items: center;
gap: 3px;
background: rgba(245,242,236,.015);
}
.ks-reveal-m-phase.is-active{
border-color: rgba(175,28,28,.55);
background: rgba(175,28,28,.08);
}
.ks-reveal-m-phase-k{
font-family: var(--f-display);
font-size: 22px; line-height: 1;
color: rgba(245,220,180,.7);
}
.ks-reveal-m-phase.is-active .ks-reveal-m-phase-k{ color: rgba(245,220,180,.95); }
.ks-reveal-m-phase-l{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 7.5px; letter-spacing: .2em; text-transform: uppercase;
color: rgba(245,242,236,.55);
}
.ks-reveal-m-phase.is-active .ks-reveal-m-phase-l{ color: rgba(245,242,236,.88); }
.ks-reveal-m-weight{
margin-top: auto;
padding-top: 10px;
border-top: 1px solid rgba(245,242,236,.06);
display: flex; align-items: baseline; gap: 6px;
flex-wrap: wrap;
}
.ks-reveal-m-weight-k{
font-family: var(--f-display);
font-weight: 600; font-size: 28px;
color: #F5F2EC;
letter-spacing: -.02em;
}
.ks-reveal-m-weight-u{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px; color: rgba(245,242,236,.6);
letter-spacing: .12em;
}
.ks-reveal-m-weight-d{
margin-left: auto;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
color: #34C77B;
}
/* ─── Phone mockup v2 · match vrai home app (22/04 soir) ─── */
.ks-reveal-m-brand{
display: flex; align-items: baseline; gap: 6px;
margin-top: 2px;
}
.ks-reveal-m-brand-word{
font-family: var(--f-display);
font-style: normal; font-weight: 600;
font-size: 22px;
color: rgba(245,242,236,.95);
letter-spacing: -.025em;
line-height: 1;
}
.ks-reveal-m-tag{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase;
color: rgba(245,242,236,.55);
margin-top: 4px;
}
.ks-reveal-m-cd{
position: relative;
margin-top: 10px;
padding: 16px 14px 14px;
text-align: center;
border: 1px solid rgba(245,242,236,.08);
border-radius: 14px;
overflow: hidden;
background: linear-gradient(180deg, rgba(245,242,236,.02) 0%, transparent 100%);
}
.ks-reveal-m-cd-label,
.ks-reveal-m-cd-num,
.ks-reveal-m-cd-rule,
.ks-reveal-m-cd-dest,
.ks-reveal-m-cd-date,
.ks-reveal-m-cd-bar{ position: relative; z-index: 1; }
.ks-reveal-m-cd-label{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 8px; font-weight: 600;
letter-spacing: .28em; text-transform: uppercase;
color: rgba(255,255,255,.46);
}
.ks-reveal-m-cd-num{
font-family: var(--f-display);
font-style: normal; font-weight: 600;
font-size: 56px; line-height: 1;
color: #F5F2EC;
letter-spacing: -.035em;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.ks-reveal-m-cd-rule{
border: 0;
width: 28px; height: 1px;
background: rgba(245,242,236,.32);
margin: 8px auto 6px;
}
.ks-reveal-m-cd-dest{
/* Refonte mockup phone v3 26/04 · ligne unifiée arrow + dest + date
éditorial cohérent app.hh-dest-row. Wrapper neutre Inter sub-Hex,
em interne Playfair italique blanc, date inline Mono uppercase. */
font-family: var(--f-sans);
font-size: 11px; font-weight: 500;
color: rgba(245,242,236,.62);
letter-spacing: -.005em;
line-height: 1.3;
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
gap: 6px;
}
.ks-reveal-m-cd-dest em{
font-family: var(--f-display);
font-style: normal; font-weight: 600;
font-size: 13px;
color: rgba(245,242,236,.92);
}
/* legacy class · plus utilisée mais gardée au cas où */
.ks-reveal-m-cd-date{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 8.5px; letter-spacing: .28em; text-transform: uppercase;
color: rgba(245,242,236,.52);
margin-top: 2px;
}
.ks-reveal-m-cd-bar{
margin-top: 10px;
height: 2px;
background: rgba(245,242,236,.08);
border-radius: 100px;
overflow: hidden;
}
.ks-reveal-m-cd-fill{
height: 100%; width: 42%;
background: rgba(175,28,28,.7);
border-radius: 100px;
}
/* Refonte 22/04 soir · feedback Vlad "ça ressemble pas exactement au home app"
· on ajoute app-name italic + ctx msg bloc + foot jour/séances pour match exact. */
.ks-reveal-m-appname{
font-family: var(--f-display);
font-style: normal; font-weight: 600;
font-size: 16px; line-height: 1;
color: #F5F2EC;
letter-spacing: -.02em;
margin-top: 4px;
}
.ks-reveal-m-cd-ctx{
position: relative; z-index: 1;
margin-top: 12px; padding-top: 10px;
border-top: 1px solid rgba(245,242,236,.06);
font-family: var(--f-sans);
font-size: 9.5px; line-height: 1.45;
color: rgba(245,242,236,.72);
text-align: left;
}
.ks-reveal-m-cd-ctx strong{
color: rgba(245,242,236,.95);
font-weight: 700;
}
.ks-reveal-m-cd-foot{
position: relative; z-index: 1;
display: flex; justify-content: space-between;
margin-top: 6px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 8px; letter-spacing: .14em;
color: rgba(245,242,236,.5);
text-transform: uppercase;
}
.ks-reveal-m-cd-foot strong{
color: rgba(245,242,236,.85);
font-weight: 700;
}
.ks-reveal-m-sech{
margin-top: 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px; font-weight: 700;
letter-spacing: .24em; text-transform: uppercase;
color: rgba(245,242,236,.58);
}
.ks-reveal-m-tcard{
display: flex; align-items: center; gap: 12px;
padding: 12px 12px;
border: 1px solid rgba(245,242,236,.1);
border-radius: 14px;
background: rgba(245,242,236,.025);
}
.ks-reveal-m-ticon{
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(245,242,236,.04);
border: 1px solid rgba(245,242,236,.1);
display: flex; align-items: center; justify-content: center;
color: rgba(245,242,236,.78);
flex-shrink: 0;
}
.ks-reveal-m-ticon svg{ width: 18px; height: 18px; }
.ks-reveal-m-tinfo{
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.ks-reveal-m-tname{
font-family: var(--f-sans);
font-weight: 700; font-size: 13px;
color: #F5F2EC;
letter-spacing: -.01em;
line-height: 1.15;
}
.ks-reveal-m-tdesc{
font-family: var(--f-sans);
font-size: 9.5px;
color: rgba(245,242,236,.55);
letter-spacing: -.002em;
/* Fix 22/04 soir · feedback Vlad "sur iPhone c'était coupé musculation".
Allow wrap sur 2 lignes si mobile étroit, word-break doux pour que
'Musculation · 6 exos · 52 min' passe toujours lisible. */
white-space: normal;
word-break: keep-all;
overflow-wrap: anywhere;
line-height: 1.4;
}
.ks-reveal-m-tarrow{
color: rgba(245,242,236,.55);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 16px;
flex-shrink: 0;
}
/* ─── Callouts floating ─── */
.ks-reveal-cal{
position: absolute;
display: flex; align-items: flex-start; gap: 12px;
width: 240px;
padding: 14px 16px;
background: rgba(12,10,14,.78);
border: 1px solid rgba(245,242,236,.1);
border-radius: 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
text-align: left;
z-index: 3;
box-shadow: 0 18px 40px -20px rgba(0,0,0,.85);
}
.ks-reveal-cal-n{
flex: 0 0 auto;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px; font-weight: 700;
letter-spacing: .2em;
color: #AF1C1C;
padding-top: 2px;
}
.ks-reveal-cal-body{ display: flex; flex-direction: column; gap: 4px; }
.ks-reveal-cal-t{
font-family: var(--f-display);
font-weight: 600; font-size: 17px;
color: #F5F2EC;
letter-spacing: -.015em;
line-height: 1.1;
}
.ks-reveal-cal-d{
font-family: var(--f-sans);
font-size: 12.5px; line-height: 1.45;
color: rgba(245,242,236,.68);
text-wrap: balance;
}
/* Positions desktop · 4 coins autour du phone central */
.ks-reveal-cal-1{ top: 20px; left: calc(50% - 380px); }
.ks-reveal-cal-2{ top: 20px; right: calc(50% - 380px); }
.ks-reveal-cal-3{ bottom: 70px; left: calc(50% - 380px); }
.ks-reveal-cal-4{ bottom: 70px; right: calc(50% - 380px); }
.ks-reveal-cal-1.reveal{ transition-delay: .35s; }
.ks-reveal-cal-2.reveal{ transition-delay: .45s; }
.ks-reveal-cal-3.reveal{ transition-delay: .55s; }
.ks-reveal-cal-4.reveal{ transition-delay: .65s; }
/* ── Responsive · stack vertical dès 1240px (anti overlap callout/phone)
Bug Vlad screen 26/04 · à 1066px (et tout < 1240px), les callouts en
absolute chevauchaient le mockup phone (calc(50% - 320px) + width 220
avec mockup ~360px wide centré = recouvrement net). Désormais ·
stack vertical propre dès 1240px, plus aucun chevauchement possible. */
@media (max-width: 1240px){
.ks-reveal{ padding: 80px 20px 100px; }
.ks-reveal .ks-lede{ margin-bottom: 48px; }
.ks-reveal-stage{
flex-direction: column;
gap: 32px;
min-height: 0;
}
.ks-reveal-phone{ width: 260px; margin: 0 auto; }
.ks-reveal-cal{
position: static;
width: 100%; max-width: 420px;
margin: 0 auto;
}
.ks-reveal-cal-1, .ks-reveal-cal-2,
.ks-reveal-cal-3, .ks-reveal-cal-4{ top:auto; right:auto; bottom:auto; left:auto; }
}
/* ════════════════════════════════════════════════════════════════════
── Auth modal · OTP 6 chiffres step (22/04 nuit) ───────────────────
Style éditorial aligné sur Claude Design canvas · grosses cases
Playfair italic, cursor shu rouge sous case active, transitions
douces. Multi-step géré via display toggle en JS.
════════════════════════════════════════════════════════════════════ */
.ks-auth-step{
animation: ksAuthStepFade .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ksAuthStepFade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Header OTP step · tu arrives ici après avoir envoyé l'email */
.ks-auth-otp-h{
font-family: var(--f-display);
font-style: normal;
font-weight: 600;
font-size: clamp(24px, 4.2vw, 30px);
letter-spacing: -.025em;
line-height: 1.1;
color: var(--ks-ink);
margin: 0 0 8px;
text-wrap: balance;
}
.ks-auth-otp-sub{
font-family: var(--f-sans);
font-size: 13.5px;
line-height: 1.5;
color: var(--ks-ink-72);
margin: 0 0 24px;
}
.ks-auth-otp-email{
color: var(--ks-ink);
font-weight: 600;
border-bottom: 1px solid var(--ks-hair);
padding-bottom: 1px;
}
/* Grid 6 cases · inspiration Claude Design screens.jsx OTP + cursor shu */
.ks-auth-otp-grid{
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
margin: 0 0 18px;
}
.ks-auth-otp-cell{
aspect-ratio: 1 / 1.25;
min-height: 56px;
width: 100%;
padding: 0;
text-align: center;
font-family: var(--f-display);
font-style: normal;
font-weight: 600;
font-size: clamp(26px, 5vw, 34px);
color: var(--ks-ink);
background: rgba(255,255,255,.025);
border: 1px solid var(--ks-hair);
border-radius: 8px;
outline: none;
transition: border-color .2s var(--e-out), background .2s var(--e-out);
caret-color: transparent;
font-variant-numeric: tabular-nums;
}
.ks-auth-otp-cell:focus{
border-color: var(--ks-ink);
background: rgba(255,255,255,.04);
}
/* Indicateur shu sous la case focus · détail éditorial (Claude Design) */
.ks-auth-otp-cell:focus::after{
content: '';
position: absolute;
bottom: 8px; left: 50%;
transform: translateX(-50%);
width: 14px; height: 2px;
background: var(--ks-v2-rouge, #AF1C1C);
}
.ks-auth-otp-meta{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: .28em;
text-transform: uppercase;
}
.ks-auth-otp-expire{
color: var(--ks-ink-56);
}
.ks-auth-otp-resend{
background: transparent;
border: 0;
padding: 2px 0;
font-family: var(--f-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--ks-ink);
cursor: pointer;
border-bottom: 1px solid var(--ks-ink-38);
transition: border-color .2s var(--e-out);
}
.ks-auth-otp-resend:hover{ border-bottom-color: var(--ks-ink); }
.ks-auth-otp-resend[disabled]{ opacity: .5; pointer-events: none; }
.ks-auth-otp-back{
display: block;
margin: 14px auto 0;
background: transparent;
border: 0;
font-family: var(--f-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ks-ink-56);
cursor: pointer;
transition: color .2s var(--e-out);
}
.ks-auth-otp-back:hover{ color: var(--ks-ink); }
.ks-auth-otp-hint{
margin: 18px 0 0;
font-family: var(--f-display);
font-style: normal;
font-weight: 700;
font-size: 12.5px;
line-height: 1.5;
color: var(--ks-ink-56);
text-align: center;
text-wrap: balance;
}
/* ════════════════════════════════════════════════════════════════════
── Landing animations signature premium · 22/04 nuit ───────────────
Feedback Vlad "en terme d'animation on est léger".
Ajouts subtils mais cinéma magazine :
- Cursor follower desktop (cercle ivory qui suit, grossit hover CTA)
- Ticker éditorial infinite horizontal entre sections
- Phone mockup float Scene 03
- Hero lede mots stagger (Ton corps. Ta date. Ton plan.)
- Kanji intro rotation scroll-linked
════════════════════════════════════════════════════════════════════ */
/* Cursor follower retiré · feedback Vlad 22/04 nuit 'rond sur pointeur
moche et pas premium'. Gardons le cursor natif. */
.ks-cursor { display: none !important; }
/* Ticker killed 22/04 soir · Vlad feedback persistent "le slider section II".
C'était ce ticker horizontal qui scrollait en continu entre hero et section I,
perçu comme un slider/carousel agressif. Garde TEGUH dans le wordmark + V
dans le hanko · pas besoin de répéter. */
.ks-ticker { display: none !important; }
.ks-ticker-legacy-unused {
overflow: hidden;
background: linear-gradient(180deg, transparent 0%, rgba(245,242,236,.01) 50%, transparent 100%);
padding: 28px 0;
border-top: 1px solid rgba(245,242,236,.06);
border-bottom: 1px solid rgba(245,242,236,.06);
position: relative;
isolation: isolate;
display: flex;
align-items: center;
min-height: 80px;
}
.ks-ticker::before, .ks-ticker::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 120px;
pointer-events: none;
z-index: 2;
}
.ks-ticker::before { left: 0; background: linear-gradient(90deg, var(--ks-bg, #0C0A0E) 0%, transparent 100%); }
.ks-ticker::after { right: 0; background: linear-gradient(270deg, var(--ks-bg, #0C0A0E) 0%, transparent 100%); }
.ks-ticker-track {
display: inline-flex;
align-items: center;
gap: 56px;
white-space: nowrap;
/* Animation killed · Vlad feedback "le slider section II" · le ticker qui
scrollait horizontalement à 56s était perçu comme un slider agressif.
Ticker rendu statique · gardé pour ambiance typographique magazine. */
animation: none;
will-change: auto;
}
.ks-ticker-item {
display: inline-flex;
align-items: center;
gap: 56px;
font-family: var(--f-display);
font-style: normal;
font-weight: 500;
font-size: clamp(17px, 2.1vw, 22px);
line-height: 1;
color: rgba(245,242,236,.62);
letter-spacing: -.015em;
}
.ks-ticker-item > span {
display: inline-flex;
align-items: center;
line-height: 1;
}
.ks-ticker-item em {
font-family: var(--f-display);
font-style: normal;
font-weight: 400;
color: #AF1C1C;
letter-spacing: 0;
}
/* .ks-ticker-item em · redéfini ci-dessus en italique serif japonais */
.ks-ticker-item .ks-ticker-mark {
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: #AF1C1C;
margin: 0 8px;
vertical-align: middle;
opacity: .65;
}
@keyframes ksTickerSlide {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.ks-ticker-track { animation: none; }
}
/* 3 · Phone mockup float · Scene 03 · respire légèrement */
.ks-reveal-phone {
animation: ksPhoneFloat 7s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes ksPhoneFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-6px) rotate(.3deg); }
}
@media (prefers-reduced-motion: reduce) {
.ks-reveal-phone { animation: none !important; }
}
/* 4 · Hero lede · mots apparaissent un par un · stagger premium */
.ks-hero-lede > span {
display: inline-block;
opacity: 0;
transform: translateY(12px);
filter: blur(4px);
animation: ksWordReveal .9s cubic-bezier(.16,1,.3,1) forwards;
}
.ks-hero-lede > span:nth-child(1) { animation-delay: .55s; }
.ks-hero-lede > span:nth-child(2) { animation-delay: .75s; }
.ks-hero-lede > span:nth-child(3) { animation-delay: .95s; }
@keyframes ksWordReveal {
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
.ks-hero-lede > span { opacity: 1; transform: none; filter: none; animation: none; }
}
/* ─── Motion : respect prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.ks-reveal-phone{ opacity: 1; transform: none; }
}
/* ══════════════════════════════════════════════════════════════
RÔLES ARCHIVO · la table de réglage (TEGUH 01/08)
──────────────────────────────────────────────────────────────
Une seule famille, réglée par rôle sur ses deux axes. font-stretch
pilote wdth et se compose avec font-weight · ne jamais passer par
font-variation-settings, qui écrase le poids.
Logotype wdth 118 wght 800 tracking -.005em
Hero, chiffres wdth 112 wght 800
Titres de section wdth 100 wght 700 uppercase tracking .08em
Body wdth 100 wght 400
Boutons wdth 100 wght 600
Labels data JetBrains Mono 500, 11px, uppercase
wdth 100 étant la valeur par défaut, seuls le logotype et les héros
déclarent un font-stretch. Les classes ci-dessous sont là pour les
nouveaux écrans · l'existant porte déjà ses poids.
══════════════════════════════════════════════════════════════ */
.tg-r-hero{ font-family: var(--f-display); font-weight: 800; font-stretch: 112%; }
.tg-r-sect{ font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.tg-r-body{ font-family: var(--f-sans); font-weight: 400; }
.tg-r-btn { font-family: var(--f-sans); font-weight: 600; }
.tg-r-data{ font-family: var(--f-mono); font-weight: 500; font-size: 11px; text-transform: uppercase; }
/* ══════════════════════════════════════════════════════════════
LOCKUP TEGUH · la barre + le mot (identité 01/08)
──────────────────────────────────────────────────────────────
Une barre olympique chargée à bloc. Elle plie, elle ne rompt pas.
Le détail qui fait le logo · les manchons s'inclinent en suivant la
flexion, comme sur une vraie barre sous charge. Réglage retenu A3 ·
flexion 12, manchons à 10°.
Non négociable ·
- le fût est coupé net en bas, jamais arrondi. C'est l'assise.
- les manchons ne sont jamais verticaux.
- tient jusqu'à 14px. En dessous, .tg-lock--micro retire le fût et
ne laisse que la barre.
Le lockup se dimensionne sur son propre font-size, la marque suit le
mot. Remplace .tg-lock, dessiné pour la césure de TEGUH et qui n'a
aucun sens sur un mot de cinq lettres.
Markup attendu ·
TEGUH