ou
════════════════════════════════════════════════════════════════════ */
body.ft .ft-card {
display: block;
background: var(--ft-papier);
border: 1px solid var(--ft-bordure);
border-radius: 6px; /* sobre */
padding: 22px 24px;
text-decoration: none;
color: var(--ft-encre);
box-shadow: var(--ft-ombre-douce);
transition: transform .3s cubic-bezier(.22, 1, .36, 1),
box-shadow .3s cubic-bezier(.22, 1, .36, 1),
border-color .3s;
position: relative;
}
body.ft .ft-card:hover {
transform: translateY(-3px);
box-shadow: var(--ft-ombre-marquee);
border-color: var(--ft-or-pale);
}
body.ft .ft-card .ft-card-tag {
display: inline-block;
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ft-or-deep);
font-weight: 700;
margin-bottom: 10px;
}
body.ft .ft-card h3 {
margin: 4px 0 8px;
font-size: 1.15rem;
}
body.ft .ft-card .ft-card-sub {
font-family: 'Noto Serif SC', serif;
color: var(--ft-encre-soft);
font-size: .86rem;
}
body.ft .ft-card .ft-card-arrow {
position: absolute;
right: 22px; bottom: 18px;
color: var(--ft-encre-soft);
font-size: 1.1rem;
transition: transform .3s, color .3s;
}
body.ft .ft-card:hover .ft-card-arrow {
color: var(--ft-bordeaux);
transform: translateX(4px);
}
/* ════════════════════════════════════════════════════════════════════
Hero « classe »
════════════════════════════════════════════════════════════════════ */
body.ft .ft-hero {
position: relative;
padding: clamp(48px, 8vw, 100px) 0 clamp(32px, 5vw, 60px);
overflow: hidden;
}
body.ft .ft-hero::before {
/* Mini filigrane décoratif en arrière-plan */
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 40% at 12% 18%, rgba(201, 165, 92, .07), transparent 60%),
radial-gradient(ellipse 60% 50% at 88% 82%, rgba(107, 26, 58, .05), transparent 65%);
pointer-events: none;
z-index: 0;
}
body.ft .ft-hero > * { position: relative; z-index: 1; }
body.ft .ft-hero h1 {
margin: 0 0 14px;
}
body.ft .ft-hero .sub {
font-family: 'Playfair Display', serif;
font-style: italic;
color: var(--ft-encre-mid);
font-size: clamp(1.05rem, 2vw, 1.3rem);
margin: 0 0 24px;
}
body.ft .ft-hero .lead {
max-width: 580px;
line-height: 1.75;
font-size: 1rem;
margin: 0 0 28px;
color: var(--ft-encre-mid);
}
/* ════════════════════════════════════════════════════════════════════
Unité (groupe de leçons)
Usage : ...
════════════════════════════════════════════════════════════════════ */
body.ft .ft-unit { margin: 40px 0 56px; }
body.ft .ft-unit-head {
display: flex;
gap: 18px;
align-items: flex-start;
margin: 0 0 22px;
padding-bottom: 16px;
border-bottom: 1px solid var(--ft-bordure);
}
body.ft .ft-unit-num {
font-family: 'Playfair Display', serif;
font-size: 2.6rem;
font-weight: 800;
color: var(--ft-or);
line-height: 1;
-webkit-text-stroke: 1px var(--ft-or-deep);
-webkit-text-fill-color: transparent;
flex-shrink: 0;
}
body.ft .ft-unit-title {
flex: 1; min-width: 0;
}
body.ft .ft-unit-title .ft-unit-range {
font-size: .72rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ft-or-deep);
font-weight: 700;
margin-bottom: 4px;
display: block;
}
body.ft .ft-unit-title h2 {
margin: 0;
}
body.ft .ft-unit-title .ft-cn {
font-family: 'Noto Serif SC', serif;
color: var(--ft-encre-soft);
font-size: .98rem;
margin-top: 4px;
display: block;
}
/* Grille de cartes leçons */
body.ft .ft-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
@media (max-width: 540px) {
body.ft .ft-grid {
grid-template-columns: 1fr;
}
}
/* ════════════════════════════════════════════════════════════════════
Pourcentage / état d'avancement (cartes leçon)
════════════════════════════════════════════════════════════════════ */
body.ft .ft-card[data-status="completed"] {
background: linear-gradient(135deg, var(--ft-papier) 0%, #f4f9ee 100%);
}
body.ft .ft-card[data-status="completed"]::before {
content: '✓';
position: absolute;
top: -8px; right: -8px;
width: 28px; height: 28px;
background: #58a76e;
color: white;
border-radius: 50%;
display: grid; place-items: center;
font-weight: 800;
font-size: .85rem;
box-shadow: 0 3px 10px rgba(88, 167, 110, .35);
}
body.ft .ft-card[data-status="in_progress"]::after {
content: '';
position: absolute;
bottom: 0; left: 0;
height: 3px;
background: linear-gradient(90deg, var(--ft-or), var(--ft-bordeaux));
width: var(--ft-pct, 0%);
border-radius: 0 3px 3px 0;
}
/* ════════════════════════════════════════════════════════════════════
"Reprends ici" — style français classe (pour les hubs migrés)
════════════════════════════════════════════════════════════════════ */
body.ft .ft-resume {
display: flex;
align-items: center;
gap: 22px;
padding: 20px 28px;
background: linear-gradient(135deg, var(--ft-papier), var(--ft-creme-2));
border-left: 3px solid var(--ft-or);
border-radius: 4px;
text-decoration: none;
color: var(--ft-encre);
box-shadow: var(--ft-ombre-douce);
transition: transform .25s, box-shadow .25s;
margin: 24px 0;
}
body.ft .ft-resume:hover {
transform: translateY(-2px);
box-shadow: var(--ft-ombre-marquee);
color: var(--ft-encre);
}
body.ft .ft-resume .ft-resume-text {
flex: 1; min-width: 0;
}
body.ft .ft-resume .ft-resume-eyebrow {
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ft-or-deep);
font-weight: 700;
display: block;
margin-bottom: 4px;
}
body.ft .ft-resume .ft-resume-title {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--ft-encre);
}
body.ft .ft-resume .ft-resume-meta {
color: var(--ft-encre-soft);
font-size: .85rem;
margin-top: 2px;
}
body.ft .ft-resume .ft-resume-bar {
width: 140px;
height: 4px;
background: rgba(201, 165, 92, .2);
border-radius: 999px;
overflow: hidden;
flex-shrink: 0;
}
body.ft .ft-resume .ft-resume-fill {
height: 100%;
background: linear-gradient(90deg, var(--ft-or), var(--ft-bordeaux));
border-radius: 999px;
}
body.ft .ft-resume .ft-resume-cta {
font-size: 1.3rem;
color: var(--ft-bleu);
flex-shrink: 0;
}
@media (max-width: 600px) {
body.ft .ft-resume { flex-wrap: wrap; gap: 12px; padding: 16px 18px; }
body.ft .ft-resume .ft-resume-bar { width: 100%; }
}
/* ════════════════════════════════════════════════════════════════════
Navbar dans le contexte "ft" — un poil plus classique
(sans casser la base de mobile-first.css)
════════════════════════════════════════════════════════════════════ */
body.ft .navbar-v2 {
background: rgba(250, 246, 239, .9);
border-bottom: 1px solid var(--ft-bordure);
}
body.ft .navbar-v2 .brand .wordmark .top {
color: var(--ft-bleu);
}
body.ft .navbar-v2 .menu a {
color: var(--ft-encre-mid);
}
body.ft .navbar-v2 .menu a:hover {
color: var(--ft-bordeaux);
background: transparent;
}
body.ft .navbar-v2 .menu a.current {
color: var(--ft-bleu);
font-weight: 700;
background: transparent;
border-bottom: 2px solid var(--ft-or);
border-radius: 0;
}
body.ft .nav-cta-signup {
background: var(--ft-bleu);
color: var(--ft-papier) !important; /* contre body.ft a { color: ... } */
box-shadow: 0 4px 14px rgba(26, 45, 74, .2);
}
body.ft .nav-cta-signup:hover {
background: var(--ft-bordeaux);
color: var(--ft-papier) !important;
box-shadow: 0 6px 18px rgba(107, 26, 58, .3);
}
body.ft .nav-cta-signin {
color: var(--ft-encre-mid) !important;
}
body.ft .nav-cta-signin:hover {
color: var(--ft-bordeaux) !important;
}
/* User-chip (élève connecté dans la nav) — re-force la bonne couleur */
body.ft .user-chip { color: var(--ft-encre) !important; }
body.ft .user-chip:hover { color: var(--ft-bleu) !important; }
body.ft .user-chip .avatar { color: var(--ft-papier) !important; }
/* Lang-pill — re-force aussi (sinon les codes "中文 EN FR" deviennent bleus) */
body.ft .lang-pill a { color: var(--ft-encre-soft) !important; }
body.ft .lang-pill a.active { color: var(--ft-bleu) !important; }
/* Brand (logo + wordmark) — la mascotte ne doit pas bleuir */
body.ft .navbar-v2 .brand { color: var(--ft-encre) !important; }
/* ─── Bottom-nav mobile : items en mode neutre, actif en bleu ─── */
body.ft .mb-nav a { color: var(--ft-encre-soft) !important; }
body.ft .mb-nav a.is-current { color: var(--ft-bleu) !important; }
/* Boutons "primary/secondary" hérités (mobile-first.css) — on les
classe française aussi : texte blanc, look sobre. */
body.ft .btn-primary,
body.ft .cta-primary {
color: var(--ft-papier) !important;
}
body.ft .btn-secondary,
body.ft .cta-secondary {
color: var(--ft-bleu) !important;
}
/* ─── Footer dans le contexte ft ─── */
body.ft .site-footer {
background: var(--ft-papier) !important;
color: var(--ft-encre-soft) !important;
border-top: 1px solid var(--ft-bordure);
margin-top: 60px;
}
body.ft .site-footer a { color: var(--ft-bleu) !important; }
body.ft .site-footer a:hover { color: var(--ft-bordeaux) !important; }