/* ══════════════════════════════════════════════════════════════
KENSHŌ · 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 · orange brûlé rare (<5% surface) */
--ks-accent: #FF6A18;
--ks-accent-2: #F4B860;
--ks-fire: #FF4D00;
/* 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 serif + 1 sans + 1 mono + 1 JP */
--f-serif: 'Playfair Display','Noto Serif JP', Georgia, serif;
--f-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--f-jp: 'Noto Serif JP', serif;
/* ═══ 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;
/* Hiérarchie éditoriale */
--f-display-italic: 'Playfair Display', 'GT Sectra', 'Fraunces', Georgia, serif;
}
/* ═══ 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-italic);
font-style: italic;
font-weight: 900;
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-italic);
font-style: italic;
font-weight: 900;
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-jp);
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: 'Shippori Mincho B1','Yuji Mai','Noto Serif JP', serif;
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
en HTML, cible CSS .ks-kanji-seal-c::before / ::after pour les 2 autres coins. */
.ks-kanji-seal-c{
position: absolute; inset: 0; pointer-events: none;
}
.ks-kanji-seal-c::before,
.ks-kanji-seal-c::after{
content: '';
position: absolute;
width: 7px; height: 7px;
border-color: var(--ks-v2-rouge, #AF1C1C);
border-style: solid;
border-width: 0;
}
.ks-kanji-seal-c::before{
top: -1px; right: -1px;
border-top-width: 1px;
border-right-width: 1px;
}
.ks-kanji-seal-c::after{
bottom: -1px; left: -1px;
border-bottom-width: 1px;
border-left-width: 1px;
}
/* Variantes taille */
.ks-kanji-seal--sm{ width: 40px; height: 40px; font-size: 22px; }
.ks-kanji-seal--lg{ width: 64px; height: 64px; font-size: 36px; }
/* Surface ivory (papier) · pour inverser noir → beige */
.ks-v2-paper {
background: var(--ks-v2-paper);
color: var(--ks-v2-ink);
}
.ks-v2-paper .ks-v2-meta { color: rgba(10,10,12,.56); }
.ks-v2-paper .ks-v2-display { color: var(--ks-v2-ink); }
/* Hairline bottom · trait sumi fin sous une section éditoriale */
.ks-v2-rule {
border: 0; height: 1px;
background: var(--ks-v2-ink);
opacity: .14;
margin: 0;
}
.ks-v2-paper .ks-v2-rule { background: var(--ks-v2-ink); opacity: .18; }
/* Numeral stat géant · chiffre héros pour data */
.ks-v2-stat {
font-family: var(--f-display-italic);
font-style: italic;
font-weight: 900;
font-size: clamp(64px, 14vw, 156px);
letter-spacing: -.04em;
line-height: .88;
color: var(--ks-ink);
}
.ks-v2-stat-unit {
font-family: var(--f-mono);
font-size: 13px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ks-v2-rouge);
vertical-align: middle;
margin-left: 6px;
}
/* Barre sumi · trait d'encre épaisseur = valeur.
Usage :
*/
.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: 'Playfair Display','GT Sectra',Georgia,serif;
font-style: normal;
font-weight: 900;
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: 'Shippori Mincho B1', var(--f-serif);
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: 'Shippori Mincho B1', var(--f-serif);
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-serif); 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(255,106,24,.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(255,106,24,.55); transform: scale(1); }
70% { box-shadow: 0 0 0 10px rgba(255,106,24,0); transform: scale(.85); }
100%{ box-shadow: 0 0 0 0 rgba(255,106,24,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-serif); font-weight:900; font-style:italic;
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-jp); color: rgba(245,220,180,.42); font-size:44px; line-height:1; font-weight:700; }
.ks-empty-t{ font-family: var(--f-serif); 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(255,106,24,.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-serif); 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-serif); 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: 0 2px 0 #FF6A18;
}
.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 見性 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 見性 (KENSHŌ · 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). */
.ks-hero::before{
content: '見性';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-family: 'Yuji Mai', 'Shippori Mincho B1', 'Noto Serif JP', serif;
font-size: clamp(260px, 62vw, 760px);
font-weight: 400;
color: rgba(245,220,180,.22);
letter-spacing: -.04em;
line-height: .9;
pointer-events: none; user-select: none;
z-index: 0;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
mix-blend-mode: screen;
filter: drop-shadow(0 6px 32px rgba(0,0,0,.35)) blur(.3px);
}
.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 KENSHŌ · signature marque v3 (refonte éditoriale 21/04) ═══
Inspiration PDF Claude Design v2 :
- Playfair Display italic · voix éditoriale magazine
- 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-italic);
font-style: italic;
font-weight: 900;
font-size: clamp(64px, 13vw, 140px);
letter-spacing: -.025em;
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(255,106,24,.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: -.11em;
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-italic);
font-style: italic;
font-weight: 900;
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-display-italic, 'Playfair Display', Georgia, serif);
font-style: italic;
font-weight: 500;
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-serif); font-style:italic;
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-serif); font-weight:700;
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:italic; color: var(--ks-accent); 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(255,106,24,.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(255,106,24,.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;
}
/* Kanji intro · refonte sumi-e 22/04 feedback Vlad "en orange il va pas,
faut plus stylisé style sumi-e peint comme ceux du hero". Passage en
ivory warm avec drop-shadow cinématique · fini l'orange cheap. */
.ks-intro-kanji{
font-family: 'Yuji Mai','Shippori Mincho B1','Noto Serif JP',serif;
font-weight: 400;
font-size: clamp(120px, 18vw, 240px);
line-height: 1;
color: rgba(245,220,180,.55);
text-shadow: none;
filter:
drop-shadow(0 1px 0 rgba(0,0,0,.35))
drop-shadow(0 0 32px rgba(245,220,180,.14))
drop-shadow(0 16px 48px rgba(0,0,0,.65));
letter-spacing: -.04em;
margin: 20px 0 28px;
align-self: center;
transform: rotate(-1.5deg);
}
/* ks-method-kanji retiré · feedback Vlad 'kanji 型 derrière mange tout le
contenu, section II complètement cassée visuellement'. */
.ks-method-kanji { display: none !important; }
.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;
}
/* Ghost kanji retiré 22/04 PM v5 · feedback Vlad "c'est un slider c'est
chiant". Le ghost énorme (160-220px) rendait chaque row trop haute,
impression de "pagination verticale". Sans ghost, les 3 rows tiennent
compactes comme holding-prep-rows. */
.ks-flow-mark::before{ display: none !important; }
/* Kanjis sumi-e style pinceau calligraphique · refonte 21/04.
Feedback Vlad : "blanc comme ça ça fait écriture ordinateur · rends-les
stylisés, effet pinceau, ombres, plus premium, pas word art".
- Font Yuji Mai en priorité · elle imite vraiment le coup de pinceau
(tracés irréguliers, pleins-et-déliés) · contrairement à Noto Serif JP
qui est une digital font propre sans caractère sumi-e.
- Couleur warm ivory #EDE3D0 (pas blanc pur) · ton papier vieilli.
- Triple drop-shadow : profondeur encre (noire proche) + halo chaud
(orange très subtil) + ombre portée douce · effet peinture sur papier.
- Léger tilt individuel par step (nth-child) pour le mouvement calligraphique. */
.ks-flow-kanji{
display:inline-block;
font-family: 'Yuji Mai','Shippori Mincho B1','Hina Mincho','Noto Serif JP',serif;
font-weight: 400;
font-size: clamp(68px, 7.5vw, 92px); line-height: 1;
color: rgba(245,242,236,.72);
letter-spacing: -.04em;
filter:
drop-shadow(0 1px 0 rgba(0,0,0,.35))
drop-shadow(0 0 24px rgba(245,220,180,.10))
drop-shadow(0 12px 36px rgba(0,0,0,.6));
transition: transform .35s var(--e-out);
}
.ks-flow-row:nth-child(1) .ks-flow-kanji{ transform: rotate(-2deg); }
.ks-flow-row:nth-child(2) .ks-flow-kanji{ transform: rotate(1.5deg); }
.ks-flow-row:nth-child(3) .ks-flow-kanji{ transform: rotate(-1deg); }
.ks-flow-row:hover .ks-flow-kanji{ transform: scale(1.04) rotate(0deg); }
/* 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: 'Shippori Mincho B1','Playfair Display', Georgia, serif;
font-style: normal; font-weight: 700;
font-size: 16px;
color: var(--ks-v2-rouge);
letter-spacing: 0;
margin-top: 4px;
order: 2;
}
.ks-flow-label .ks-flow-hira{
font-family: 'Yuji Mai','Shippori Mincho B1','Noto Serif JP', serif;
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: .08em;
font-size: 14px;
color: rgba(245,242,236,.5);
margin-top: 1px;
order: 1;
}
/* Shimmer sumi-e · refonte 22/04 PM v3 · animation-fill-mode retirée
pour que le kanji reste visible AVANT/APRÈS animation · le `both` avec
opacity:0 à 0% cachait le kanji quand .in pas encore ajouté. */
.ks-flow-row.in .ks-flow-kanji{
animation: kanjiShimmerLand 2.8s cubic-bezier(.22,.61,.36,1) .1s;
}
@keyframes kanjiShimmerLand {
0% { filter: drop-shadow(0 4px 12px rgba(0,0,0,.25)); transform: translateY(22px) scale(.97); opacity: 0; }
60% { filter: drop-shadow(0 10px 28px rgba(175,28,28,.18)); opacity: 1; }
100% { filter: drop-shadow(0 8px 24px rgba(0,0,0,.5)); transform: translateY(0) scale(1); opacity: 1; }
}
/* Rotations sumi-e subtiles neutralisées quand shimmer finit (le kanji
doit être droit post-animation pour rester lisible éditorialement) */
.ks-flow-row:nth-child(1).in .ks-flow-kanji{ transform: rotate(-2deg); }
.ks-flow-row:nth-child(2).in .ks-flow-kanji{ transform: rotate(1.5deg); }
.ks-flow-row:nth-child(3).in .ks-flow-kanji{ transform: rotate(-1deg); }
/* Pullquote philosophique · reprise style holding entre Méthode et FAQ.
"Pour savoir, il faut voir." · écho direct au KENSHŌ 見性. */
.ks-quote-philosophy{
max-width: 640px;
margin: 72px auto 32px;
padding: 0 24px;
font-family: 'Playfair Display', Georgia, serif;
font-style: italic; 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-serif); 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: 'Shippori Mincho B1','Playfair Display', Georgia, serif;
font-style: normal;
font-weight: 700;
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-kanji{ width:48px; height:48px; font-size: 26px; }
.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 KENSHŌ
pour les 4 nav tabs (見 鍛 食 進). Weight 400 respect du brush
original (vs 900 trop bold). Size +6px pour densité visuelle. */
font-family: 'Yuji Mai', 'Shippori Mincho B1', var(--f-jp) !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-serif); font-weight: 900;
font-size: 32px; letter-spacing: -.03em; line-height: 1;
color: var(--ks-ink);
}
.ks-home-brand-kanji{
font-family: var(--f-jp); font-weight: 900;
font-size: 16px; color: var(--ks-accent);
letter-spacing: .06em;
}
.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-serif); 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-serif); font-weight: 900; font-style: italic;
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-serif); 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(255,106,24,.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(255,106,24,.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(255,106,24,.1);
border: 1px solid rgba(255,106,24,.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-serif);
font-weight: 900;
font-size: 34px;
letter-spacing: -.035em;
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-jp);
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-serif) !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-serif) !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-serif) !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(255,106,24,.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(255,106,24,.07) !important; }
#home .today-icon{
width: 48px !important; height: 48px !important;
background: rgba(255,106,24,.1) !important;
border: 1px solid rgba(255,106,24,.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-serif) !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-serif) !important;
font-weight: 700;
letter-spacing: -.015em;
}
/* Macro pills */
#diet .jmacro-val,
#diet .macro-val{
font-family: var(--f-serif) !important;
font-weight: 900;
font-style: italic;
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(255,106,24,.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-serif) !important;
font-style: italic;
font-weight: 900;
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-serif) !important;
font-weight: 900 !important;
font-size: clamp(52px, 10vw, 72px) !important;
letter-spacing: -.04em !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: 'Shippori Mincho B1', var(--f-serif) !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-serif) !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-serif) !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: 'Shippori Mincho B1', var(--f-serif) !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(255,106,24,.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: 'Shippori Mincho B1', var(--f-serif) !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: 'Shippori Mincho B1', var(--f-serif) !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-serif) !important;
font-weight: 900 !important;
font-style: italic !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(255,106,24"]{
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;
}
/* Kanji watermark 入 (entrer) · ancrage dojo discret fond de modal auth */
.ks-auth-modal::before{
content: '入';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(-4deg);
font-family: 'Yuji Mai','Shippori Mincho B1','Noto Serif JP',serif;
font-size: 360px;
line-height: 1;
font-weight: 400;
color: rgba(245,220,180,.035);
pointer-events: none;
user-select: none;
letter-spacing: -.04em;
z-index: 0;
filter: drop-shadow(0 4px 20px rgba(0,0,0,.3));
}
.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 · refonte éditoriale 27/04 (pass 13)
Pill container retiré · layout éditorial 2 colonnes avec trait shu 1px
qui slide sous l'onglet actif. Inspiration newspapers · signifie l'ancrage
dojo (trait rouge shu = intention, pas background pill cheap). */
.ks-auth-tabs{
position: relative;
display: flex;
gap: 0;
margin: 4px 0 26px;
padding: 0;
background: transparent;
border: 0;
border-bottom: 1px solid var(--ks-hair);
border-radius: 0;
}
.ks-auth-tab{
flex: 1;
position: relative; z-index: 1;
padding: 14px 10px 14px;
background: transparent;
border: 0;
font-family: 'Shippori Mincho B1','Shippori Mincho', Georgia, serif;
font-style: normal;
font-size: 15px; font-weight: 700;
letter-spacing: -.01em; text-transform: none;
color: var(--ks-ink-48, rgba(245,242,236,.48));
cursor: pointer;
border-radius: 0;
transition: color .3s var(--e-out), transform .2s var(--e-out);
-webkit-tap-highlight-color: transparent;
}
.ks-auth-tab::before{
content: '';
position: absolute;
left: 50%; top: 10px;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--ks-v2-rouge, #AF1C1C);
opacity: 0;
transform: translate(-50%, -50%) scale(.6);
transition: opacity .3s var(--e-out), transform .35s var(--e-out);
pointer-events: none;
}
.ks-auth-tab.is-active{
color: var(--ks-ink, #F5F2EC);
font-weight: 700;
}
.ks-auth-tab.is-active::before{
opacity: .85;
transform: translate(-50%, -50%) scale(1);
}
.ks-auth-tab:hover:not(.is-active){ color: var(--ks-ink-72, rgba(245,242,236,.72)); }
.ks-auth-tab:active:not(.is-active){ transform: translateY(1px); }
/* Trait shu sumi · slide sous l'onglet actif · éditorial dojo
(remplace le background pill ivory qui faisait cheap tab-bar standard) */
.ks-auth-tab-indicator{
position: absolute; z-index: 0;
left: 0; bottom: -1px;
width: 50%;
height: 2px;
background: var(--ks-v2-rouge, #AF1C1C);
box-shadow: 0 0 12px rgba(175,28,28,.45);
transition: transform .4s cubic-bezier(.16,1,.3,1);
pointer-events: none;
border-radius: 0;
}
.ks-auth-tab-indicator::after{
content: '';
position: absolute;
top: 0; left: 50%;
width: 18px; height: 2px;
background: linear-gradient(90deg, transparent, #AF1C1C, transparent);
transform: translateX(-50%);
opacity: 0;
animation: ksAuthIndicatorPulse 2.4s ease-in-out infinite;
}
@keyframes ksAuthIndicatorPulse {
0%, 100% { opacity: 0; }
50% { opacity: .75; }
}
.ks-auth-tab-indicator[data-mode="signin"]{ transform: translateX(100%); }
.ks-auth-tab-indicator[data-mode="signup"]{ transform: translateX(0); }
.ks-auth-h{
font-family: 'Shippori Mincho B1','Playfair Display',Georgia,serif;
font-style: normal;
font-weight: 700;
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: 'Inter', system-ui, sans-serif;
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: 'Shippori Mincho B1','Shippori Mincho',Georgia,serif;
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: serif; 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: 'Shippori Mincho B1','Shippori Mincho','GT Sectra',Georgia,serif;
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 2px 0 #FF6A18, 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 2px 0 #FF6A18, 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-serif) !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-serif) !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: 'Shippori Mincho B1', var(--f-serif) !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;
}
/* Kanji watermark discret en fond de screen */
.ks-reveal-phone-screen::before{
content: '見';
position: absolute;
right: -20px; bottom: -30px;
font-family: 'Yuji Mai','Shippori Mincho B1','Noto Serif JP',serif;
font-size: 260px; line-height: 1;
color: rgba(245,220,180,.04);
pointer-events: none;
z-index: 0;
}
.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 #FF6A18) */
.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: 'Inter', sans-serif;
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: 'Playfair Display', Georgia, serif;
font-style: italic; font-weight: 900;
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-kanji{
position: absolute; right: -8px; top: -14px;
font-family: 'Yuji Mai','Shippori Mincho B1','Noto Serif JP',serif;
font-size: 92px; line-height: 1;
color: rgba(245,220,180,.09);
pointer-events: none;
}
.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: 'Playfair Display', Georgia, serif;
font-weight: 900; font-size: 20px;
color: #F5F2EC;
letter-spacing: -.02em;
line-height: 1.1;
}
.ks-reveal-m-today-meta{
font-family: 'Inter', sans-serif;
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: 'Yuji Mai','Shippori Mincho B1','Noto Serif JP',serif;
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: 'Playfair Display', Georgia, serif;
font-weight: 900; 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: 'Playfair Display', Georgia, serif;
font-style: italic; font-weight: 900;
font-size: 22px;
color: rgba(245,242,236,.95);
letter-spacing: -.025em;
line-height: 1;
}
.ks-reveal-m-brand-kanji{
font-family: 'Yuji Mai','Shippori Mincho B1','Noto Serif JP',serif;
font-size: 11px;
color: rgba(255,106,24,.82);
text-shadow: 0 0 12px rgba(255,106,24,.35);
letter-spacing: .02em;
margin-left: 2px;
}
.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-kanji{
position: absolute;
right: -18px; bottom: -30px;
font-family: 'Yuji Mai','Shippori Mincho B1','Noto Serif JP',serif;
font-size: 120px; line-height: 1;
color: rgba(245,220,180,.07);
pointer-events: none;
z-index: 0;
}
.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: 'Playfair Display', Georgia, serif;
font-style: italic; font-weight: 900;
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: 'Inter', system-ui, sans-serif;
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: 'Playfair Display', Georgia, serif;
font-style: italic; font-weight: 700;
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: 'Playfair Display', Georgia, serif;
font-style: italic; font-weight: 900;
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: 'Inter', 'Helvetica Neue', sans-serif;
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: 'Inter', sans-serif;
font-weight: 700; font-size: 13px;
color: #F5F2EC;
letter-spacing: -.01em;
line-height: 1.15;
}
.ks-reveal-m-tdesc{
font-family: 'Inter', sans-serif;
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: 'Playfair Display', Georgia, serif;
font-weight: 900; font-size: 17px;
color: #F5F2EC;
letter-spacing: -.015em;
line-height: 1.1;
}
.ks-reveal-cal-d{
font-family: 'Inter', sans-serif;
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: 'Shippori Mincho B1','Playfair Display',Georgia,serif;
font-style: normal;
font-weight: 700;
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: 'Playfair Display','GT Sectra',Georgia,serif;
font-style: italic;
font-weight: 900;
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: 'Shippori Mincho B1', var(--f-serif);
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 KENSHŌ dans le wordmark + 見性
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: 'Playfair Display', Georgia, serif;
font-style: italic;
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: 'Yuji Mai','Noto Serif JP', serif;
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; }
}
/* 5 · Kanji intro 見 · rotation très subtile scroll-linked (JS set --ksKanjiRot) */
.ks-intro-kanji {
transition: transform .3s cubic-bezier(.16,1,.3,1);
}
/* ─── 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; }
}