/* ========================================================= DESIGN TOKENS ========================================================= */ :root { /* ── Charte HFLE (marque) — polices + Encre & Papier + rouge Hachette ── */ --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-surface-soft: #F6F0EB; /* beige chaud HFLE */ --color-border: rgba(0,0,0,0.08); --color-border-strong: rgba(0,0,0,0.18); --color-ink: #282828; /* encre HFLE */ --color-ink-muted: #706F6F; --color-ink-faint: #8A9094; --color-accent: #E00019; /* rouge Hachette (marque) */ --color-accent-light: #FCE6E9; --color-reject: #B84040; --color-reject-light: #F5E5E5; --color-accept: #3BA936; /* vert édito HFLE (succès/appris) */ --color-accept-light: #EAF3DE; /* Polices de la marque : Inter (UI/titres) + TiemposText (serif éditorial). --font-display = serif éditorial ; --font-ui = sans-serif. */ --font-display: 'TiemposText', Georgia, 'Times New Roman', serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --transition-fast: 0.15s ease; --transition-card: 0.32s cubic-bezier(0.4, 0, 0.2, 1); } /* ── THÈME VERT FORÊT (état précédent — fallback) ───────────────────────── Décommenter ce bloc pour revenir à l'accent vert (ou pour l'ajuster). Il surcharge les tokens de marque ci-dessus. :root { --color-bg: #FAFAF7; --color-surface-soft: #F3F2EC; --color-ink: #1A1916; --color-ink-muted: #6B6A65; --color-ink-faint: #A8A7A2; --color-accent: #2D5F4F; --color-accent-light: #E4EDE9; --color-accept: #2D5F4F; --color-accept-light: #E4EDE9; --font-display: 'Fraunces', Georgia, serif; --font-ui: 'DM Sans', sans-serif; } ──────────────────────────────────────────────────────────────────────── */ /* ========================================================= RESET & BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--color-bg); font-family: var(--font-ui); color: var(--color-ink); -webkit-font-smoothing: antialiased; overscroll-behavior: none; } /* overflow:clip uniquement pendant le jeu (cartes) — empêche les barres de scroll lors du déplacement de la carte, sans casser le scroll de la liste. (classe is-playing posée sur par setView/showWelcome) */ html.is-playing, html.is-playing body { overflow: clip; } #app { max-width: 430px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-bg); position: relative; } button { font-family: var(--font-ui); cursor: pointer; border: none; background: none; color: inherit; } /* ========================================================= LAYOUT — APPLICATION SHELL ========================================================= */ #app { max-width: 430px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-bg); } /* ========================================================= HEADER — barre de navigation principale ========================================================= */ #app-header { padding: 12px 16px 10px; background: var(--color-surface); position: sticky; top: 0; z-index: 100; } /* En jeu : header transparent pour que la carte ne soit pas coupée par le fond blanc pendant son trajet (en liste on garde l'opaque pour masquer le scroll). */ html.is-playing #app-header { background: transparent; } /* Breadcrumb méthode > unité > leçon + sélecteur langue */ #header-breadcrumb { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } #breadcrumb-nav { display: flex; align-items: center; gap: 0; flex-wrap: wrap; } .breadcrumb__item { font-size: 12px; font-weight: 500; color: var(--color-ink-muted); cursor: pointer; padding: 3px 6px; border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .breadcrumb__item:hover { background: var(--color-surface-soft); color: var(--color-ink); } .breadcrumb__item.is-active { color: var(--color-ink); font-weight: 500; } /* Méthode (Inspire 1) : libellé statique, non cliquable */ .breadcrumb__item--static { cursor: default; } .breadcrumb__item--static:hover { background: transparent; color: var(--color-ink-muted); } .breadcrumb__sep { font-size: 12px; color: var(--color-ink-faint); padding: 0 1px; pointer-events: none; } /* Sélecteur langue (drapeaux) */ #lang-selector { display: flex; gap: 4px; align-items: center; flex-shrink: 0; } /* Accueil — icône maison anthracite en haut à droite (hors écran d'accueil) */ #home-btn { width: 30px; height: 30px; flex-shrink: 0; padding: 0; background: transparent; border: none; cursor: pointer; color: var(--color-ink); display: flex; align-items: center; justify-content: center; } #home-btn svg { width: 22px; height: 22px; fill: currentColor; } .lang-btn { font-size: 18px; width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } .lang-btn.is-active { border-color: var(--color-border-strong); background: var(--color-surface-soft); } /* Titre leçon */ #lesson-title { font-family: var(--font-display); font-size: 21px; font-weight: 500; color: var(--color-ink); line-height: 1.2; margin-bottom: 10px; } /* Ligne vue + mode */ #header-row-controls { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; } /* Toggle mode classique / oral */ #mode-toggle { display: flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; } .mode-toggle__btn { padding: 5px 9px; display: flex; align-items: center; justify-content: center; color: var(--color-ink-muted); transition: background var(--transition-fast), color var(--transition-fast); } .mode-toggle__btn svg { width: 17px; height: 17px; fill: currentColor; } .mode-toggle__btn.is-active { background: var(--color-ink); color: var(--color-surface); } /* Thèmes sur l'écran d'accueil */ #welcome-themes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; margin-bottom: 4px; } .welcome-theme-pill { font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 20px; border: 1.5px solid transparent; cursor: pointer; transition: opacity var(--transition-fast), transform 0.1s; -webkit-tap-highlight-color: transparent; } .welcome-theme-pill:active { transform: scale(0.95); } /* Couleurs actives (sélectionné) — héritées de THEME_COLORS */ .welcome-theme-pill.is-on[data-color="teal"] { background:#E1F5EE; color:#0F6E56; border-color:#0F6E56; } .welcome-theme-pill.is-on[data-color="blue"] { background:#E6F1FB; color:#185FA5; border-color:#185FA5; } .welcome-theme-pill.is-on[data-color="amber"] { background:#FAEEDA; color:#854F0B; border-color:#854F0B; } .welcome-theme-pill.is-on[data-color="coral"] { background:#FAECE7; color:#993C1D; border-color:#993C1D; } .welcome-theme-pill.is-on[data-color="purple"] { background:#EEEDFE; color:#534AB7; border-color:#534AB7; } .welcome-theme-pill.is-on[data-color="pink"] { background:#FBEAF0; color:#993556; border-color:#993556; } .welcome-theme-pill.is-on[data-color="green"] { background:#EAF3DE; color:#3B6D11; border-color:#3B6D11; } .welcome-theme-pill.is-on[data-color="gray"] { background:#F1EFE8; color:#5F5E5A; border-color:#5F5E5A; } /* État désélectionné — grisé, bordure pointillée */ .welcome-theme-pill.is-off { background: transparent; color: var(--color-ink-faint); border: 1.5px dashed var(--color-border-strong); opacity: 0.55; } /* ========================================================= ÉCRAN D'ACCUEIL — boutons de mode ========================================================= */ #welcome-modes { display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 8px 0 4px; } .welcome-mode-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; text-align: left; transition: border-color var(--transition-fast), background var(--transition-fast); -webkit-tap-highlight-color: transparent; } .welcome-mode-btn:hover { border-color: var(--color-border-strong); background: var(--color-surface-soft); } .welcome-mode-btn:active { opacity: 0.75; } .welcome-mode-btn.is-selected { border-color: var(--color-accent); background: var(--color-accent-light); } .welcome-mode-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-surface-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-ink-muted); transition: background var(--transition-fast), color var(--transition-fast); } .welcome-mode-btn.is-selected .welcome-mode-icon { background: var(--color-accent); color: var(--color-surface); } .welcome-mode-icon svg { width: 18px; height: 18px; fill: currentColor; } .welcome-mode-label { font-size: 18px; font-weight: 600; color: var(--color-ink); display: block; line-height: 1.2; } .welcome-mode-desc { font-size: 13px; color: var(--color-ink-muted); display: block; margin-top: 2px; } .welcome-mode-btn .welcome-mode-label, .welcome-mode-btn .welcome-mode-desc { flex: 1; } /* Colonne texte dans le bouton */ .welcome-mode-btn > span:not(.welcome-mode-icon) { display: flex; flex-direction: column; } /* Toggle vue liste / tinder */ #view-toggle { display: flex; gap: 5px; flex: 1; } .view-toggle__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 8px; font-size: 13px; font-weight: 500; color: var(--color-ink-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .view-toggle__btn.is-active { background: var(--color-surface-soft); color: var(--color-ink); border-color: var(--color-border-strong); } .view-toggle__icon { width: 14px; height: 14px; flex-shrink: 0; } /* Filtre thèmes */ #theme-filter { display: flex; gap: 5px; flex-wrap: wrap; } .theme-filter__btn { font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--color-border); color: var(--color-ink-muted); background: transparent; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } /* Thème sélectionné → coloré (même code couleur que les pills d'accueil) */ .theme-filter__btn.is-on[data-color="teal"] { background:#E1F5EE; color:#0F6E56; border-color:transparent; } .theme-filter__btn.is-on[data-color="blue"] { background:#E6F1FB; color:#185FA5; border-color:transparent; } .theme-filter__btn.is-on[data-color="amber"] { background:#FAEEDA; color:#854F0B; border-color:transparent; } .theme-filter__btn.is-on[data-color="coral"] { background:#FAECE7; color:#993C1D; border-color:transparent; } .theme-filter__btn.is-on[data-color="purple"] { background:#EEEDFE; color:#534AB7; border-color:transparent; } .theme-filter__btn.is-on[data-color="pink"] { background:#FBEAF0; color:#993556; border-color:transparent; } .theme-filter__btn.is-on[data-color="green"] { background:#EAF3DE; color:#3B6D11; border-color:transparent; } .theme-filter__btn.is-on[data-color="gray"] { background:#F1EFE8; color:#5F5E5A; border-color:transparent; } /* Thème désélectionné → grisé, bordure pointillée (comme l'accueil) */ .theme-filter__btn.is-off { background: transparent; color: var(--color-ink-faint); border: 1px dashed var(--color-border-strong); opacity: 0.55; } /* Mode toggle — masqué en vue liste */ #mode-toggle.is-hidden-in-list { display: none; } /* ========================================================= PROGRESS — barre de progression + stats cliquables ========================================================= */ #session-progress { padding: 6px 16px 16px; /* + 10px de padding-bas du header => barre centrée entre fil d'Ariane et carte */ } /* Barre segmentée : un segment par carte de la pile */ #progress-track { display: flex; gap: 2px; height: 5px; margin-bottom: 0; border-radius: 2px; overflow: hidden; } .progress-seg { flex: 1; background: var(--color-border); /* gris : carte encore dans la pile */ border-radius: 1px; transition: background 0.3s ease; } .progress-seg--learned { background: var(--color-accept); } /* vert : apprise */ .progress-seg--review { background: var(--color-reject); } /* rouge « revoir » */ #stats-row { display: flex; gap: 6px; margin-bottom: 10px; } .stat-card { flex: 1; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 7px 8px; text-align: center; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); -webkit-tap-highlight-color: transparent; } .stat-card:hover { background: var(--color-surface-soft); border-color: var(--color-border-strong); } .stat-card:active { opacity: 0.75; } .stat-card__value { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--color-ink); line-height: 1; } .stat-card__label { font-size: 11px; color: var(--color-ink-faint); margin-top: 3px; } /* ========================================================= COULEURS GENRE (méthode Inspire) bleu = masculin · vert = féminin · orange = pluriel ========================================================= */ .genre--masculin { color: #185FA5; } .genre--feminin { color: #2D5F4F; } .genre--pluriel { color: #854F0B; } /* Pastille genre dans l'item-renderer */ .list-card__genre-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-right: 5px; vertical-align: middle; } .list-card__genre-dot--masculin { background: #185FA5; } .list-card__genre-dot--feminin { background: #2D5F4F; } .list-card__genre-dot--pluriel { background: #854F0B; } .list-card__genre-dot--invariant { background: var(--color-ink-faint); } /* ========================================================= MAIN CONTENT AREA ========================================================= */ #main-content { flex: 1; display: flex; flex-direction: column; } /* ========================================================= VUE LISTE ========================================================= */ #view-list { padding: 4px 20px 24px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; } /* Carte dans la liste */ .list-card { display: flex; align-items: center; gap: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 12px 14px; cursor: default; transition: border-color var(--transition-fast), opacity var(--transition-fast); -webkit-tap-highlight-color: transparent; } .list-card:active { opacity: 1; } .list-card.is-learned { opacity: 0.4; } .list-card.is-learned .list-card__word { text-decoration: line-through; text-decoration-color: var(--color-ink-faint); } /* Bouton audio principal (côté gauche, remplace le visuel) */ .list-card__audio-trigger { width: 56px; height: 56px; border-radius: var(--radius-md); background: transparent; border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--transition-fast); } .list-card__audio-trigger:active { background: var(--color-accent-light); } .list-card__audio-trigger svg { width: 18px; height: 18px; color: var(--color-ink-muted); } /* Texte de la carte liste */ .list-card__body { flex: 1; min-width: 0; } .list-card__word { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--color-ink); line-height: 1.2; } /* Mot long (ex. « deux cent trente-cinq ») : un cran plus petit pour tenir sur une ligne */ .list-card__bigword { font-size: 17px; } .list-card__definition { font-size: 13px; color: var(--color-ink-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Wrapper multi-themes pills dans l'item-renderer */ .list-card__themes { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 3px; } /* Cartouche objectif dans l'item-renderer */ .list-card__objectif-tag { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 20px; margin-bottom: 4px; line-height: 1.4; } /* Palette objectifs — chaque objectif reçoit une couleur via data-attribute */ .list-card__objectif-tag[data-color="teal"] { background: #E1F5EE; color: #0F6E56; } .list-card__objectif-tag[data-color="blue"] { background: #E6F1FB; color: #185FA5; } .list-card__objectif-tag[data-color="amber"] { background: #FAEEDA; color: #854F0B; } .list-card__objectif-tag[data-color="coral"] { background: #FAECE7; color: #993C1D; } .list-card__objectif-tag[data-color="purple"] { background: #EEEDFE; color: #534AB7; } .list-card__objectif-tag[data-color="pink"] { background: #FBEAF0; color: #993556; } .list-card__objectif-tag[data-color="green"] { background: #EAF3DE; color: #3B6D11; } .list-card__objectif-tag[data-color="gray"] { background: #F1EFE8; color: #5F5E5A; } .list-card__acquired-checkbox { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); background: transparent; } .list-card__acquired-checkbox svg { width: 14px; height: 14px; opacity: 0; transition: opacity var(--transition-fast); } /* État coché */ .list-card__acquired-checkbox.is-checked { background: var(--color-accent); border-color: var(--color-accent); } .list-card__acquired-checkbox.is-checked svg { opacity: 1; color: white; } /* ========================================================= VUE TINDER ========================================================= */ #view-tinder { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 20px 24px; } /* Indication directionnelle */ #swipe-hints { display: flex; justify-content: space-between; width: 100%; padding: 0 4px; margin-bottom: 8px; } .swipe-hint--reject { font-size: 13px; color: var(--color-reject); font-weight: 500; } .swipe-hint--accept { font-size: 13px; color: var(--color-accept); font-weight: 500; } /* Zone d'empilement des cartes */ #card-stack { position: relative; width: 100%; height: 460px; margin-bottom: 20px; } /* Carte individuelle dans le stack */ .tinder-card { position: absolute; inset: 0; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 24px; cursor: pointer; user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; transition: transform var(--transition-card), opacity var(--transition-card), border-color 0.25s ease; } /* Bordures genre — apparaissent seulement au verso (classe .is-verso) */ .tinder-card.is-verso.genre--masculin { border-color: #7471af; } .tinder-card.is-verso.genre--feminin { border-color: #95c369; } .tinder-card.is-verso.genre--pluriel { border-color: #ea973e; } /* Visual agrandi en mode image (recto) — carré, image au cadre. Sélecteur double pour primer sur .tinder-card__visual (max-height paysage). */ .tinder-card__visual.tinder-card__visual--large { width: auto; height: 300px; aspect-ratio: 1 / 1; max-width: 100%; max-height: 100%; flex: 0 0 auto; font-size: 80px; border-radius: var(--radius-lg); background: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 0; } .tinder-card__visual--large .tinder-card__icon-img { width: 100%; height: 100%; object-fit: contain; } /* Positionnement des cartes empilées */ .tinder-card--top { z-index: 3; transition: none; } .tinder-card--under1 { z-index: 2; transform: scale(0.94) translateY(10px); pointer-events: none; } .tinder-card--under2 { z-index: 1; transform: scale(0.88) translateY(20px); pointer-events: none; } /* Indicateurs de swipe (apparaissent en glissant) */ .tinder-card__swipe-label { position: absolute; top: 20px; padding: 5px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; opacity: 0; transition: opacity 0.08s; pointer-events: none; } .tinder-card__swipe-label--reject { left: 18px; background: var(--color-reject-light); color: var(--color-reject); border: 1px solid rgba(184, 64, 64, 0.25); } .tinder-card__swipe-label--accept { right: 18px; background: var(--color-accept-light); color: var(--color-accept); border: 1px solid rgba(45, 95, 79, 0.25); } /* Contenu interne de la carte tinder */ .tinder-card__face-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-faint); margin-bottom: 10px; } .tinder-card__word { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--color-ink); text-align: center; line-height: 1.15; margin-bottom: 6px; } .tinder-card__visual { width: auto; height: 220px; aspect-ratio: 1 / 1; max-width: 100%; flex: 0 0 auto; border-radius: var(--radius-lg); background: transparent; display: flex; align-items: center; justify-content: center; font-size: 100px; margin-bottom: 14px; overflow: hidden; } /* Image fichier (png/jpg/svg) */ .tinder-card__icon-img { width: 100%; height: 100%; object-fit: contain; /* Le geste de swipe doit toujours aller à la carte, jamais déclencher le drag natif de l'image ni une sélection. */ pointer-events: none; -webkit-user-drag: none; user-select: none; } /* SVG inline dans tinder */ .tinder-card__icon-svg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .tinder-card__icon-svg svg { width: 100%; height: 100%; max-width: 180px; max-height: 180px; } /* Images dans la vue liste : remplissent la vignette, fond blanc, sans bordure */ .list-card__audio-trigger img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; } .list-card__audio-trigger .list-card__icon-svg svg { width: 32px; height: 32px; object-fit: contain; } .list-card__icon-svg { display: flex; align-items: center; justify-content: center; } .tinder-card__definition { font-size: 15px; color: var(--color-ink-muted); text-align: center; line-height: 1.55; margin-bottom: 16px; max-width: 280px; } .tinder-card__audio-btn { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--color-border-strong); border-radius: 99px; font-size: 14px; color: var(--color-ink-muted); transition: background var(--transition-fast); } .tinder-card__audio-btn:active { background: var(--color-surface-soft); } .tinder-card__audio-btn svg { width: 16px; height: 16px; } /* Bouton play mode oral — recto, grand format */ .tinder-card__play-trigger { width: 88px; height: 88px; border-radius: var(--radius-lg); background: var(--color-surface-soft); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast); } .tinder-card__play-trigger:active { background: var(--color-accent-light); } .tinder-card__play-trigger svg { width: 36px; height: 36px; color: var(--color-ink-muted); } .tinder-card__flip-hint { position: absolute; bottom: 18px; font-size: 12px; color: var(--color-ink-faint); } /* Barre d'actions (X, flip, ✓) */ /* Actions déplacées dans la bottom-bar → on masque l'ancien bloc sous la carte + les hints */ #tinder-actions, #swipe-hints { display: none; } #tinder-actions--legacy { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; } .tinder-action-btn { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; background: var(--color-surface); transition: transform 0.15s ease, background var(--transition-fast), border-color var(--transition-fast); } .tinder-action-btn:active { transform: scale(0.93); } .tinder-action-btn svg { width: 22px; height: 22px; } .tinder-action-btn--reject { border-color: rgba(184, 64, 64, 0.35); } .tinder-action-btn--reject:active { background: var(--color-reject-light); } .tinder-action-btn--accept { border-color: rgba(45, 95, 79, 0.35); } .tinder-action-btn--accept:active { background: var(--color-accept-light); } .tinder-action-btn--shuffle { border-color: var(--color-border-strong); } .tinder-action-btn--shuffle:active { background: var(--color-surface-soft); } /* ========================================================= ÉCRAN D'ACCUEIL ========================================================= */ #view-welcome { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 32px 24px; } #welcome-content { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 300px; } #welcome-icon { width: 80px; height: 80px; color: var(--color-accent); opacity: 1; } #welcome-icon svg, #welcome-icon img { width: 100%; height: 100%; object-fit: contain; display: block; } #welcome-title { font-family: var(--font-ui); /* Inter — titre de marque (gras, encre) */ font-size: 28px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-ink); line-height: 1.15; } #welcome-subtitle { font-size: 15px; color: var(--color-ink-muted); line-height: 1.6; } #welcome-subtitle strong { color: var(--color-ink); font-weight: 500; } #welcome-start-btn { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center; margin-top: 8px; } #welcome-start-btn svg { width: 14px; height: 14px; } #welcome-list-btn { width: 100%; } /* ========================================================= ÉCRAN FIN DE SESSION ========================================================= */ #session-complete { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; gap: 12px; } #session-complete__score { font-family: var(--font-display); font-size: 62px; font-weight: 300; font-style: italic; color: var(--color-accent); line-height: 1; } #session-complete__title { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--color-ink); } #session-complete__subtitle { font-size: 15px; color: var(--color-ink-muted); line-height: 1.5; max-width: 260px; } #session-complete__actions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px; margin-top: 12px; } .btn-primary { padding: 12px 20px; background: var(--color-ink); color: var(--color-surface); border-radius: var(--radius-md); font-size: 15px; font-weight: 500; transition: opacity var(--transition-fast); } .btn-primary:active { opacity: 0.75; } .btn-secondary { padding: 12px 20px; background: transparent; color: var(--color-ink-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 15px; font-weight: 500; transition: background var(--transition-fast); } .btn-secondary:active { background: var(--color-surface-soft); } /* ========================================================= BARRE BOTTOM — navigation persistante en mode jeu ========================================================= */ #app-bottom-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--color-surface); border-top: 1px solid var(--color-border); display: flex; gap: 0; z-index: 200; padding-bottom: env(safe-area-inset-bottom, 0px); } .bottom-bar__btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 8px; font-size: 12px; font-weight: 500; color: var(--color-ink-muted); border: none; background: transparent; cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); -webkit-tap-highlight-color: transparent; } .bottom-bar__btn:active { background: var(--color-surface-soft); } .bottom-bar__btn.is-active { color: var(--color-accent); } .bottom-bar__btn svg { width: 20px; height: 20px; fill: currentColor; } /* Boutons de mode (vue liste) : 3 sections égales, hauteur doublée, icône + texte */ .bottom-bar__btn--mode { min-height: 76px; padding: 12px 8px; gap: 7px; font-size: 14px; } .bottom-bar__btn--mode svg { width: 28px; height: 28px; } /* Actions du jeu (icônes en trait) : à revoir = rouge, appris = vert, retourner = encre */ .bottom-bar__action svg { fill: none; } .bottom-bar__action--reject { color: var(--color-reject); } .bottom-bar__action--accept { color: var(--color-accept); } .bottom-bar__sep { width: 1px; background: var(--color-border); margin: 8px 0; } /* Padding pour que le contenu ne soit pas caché par la barre */ #main-content { padding-bottom: 92px; } #view-list__footer { padding: 8px 20px 16px; display: flex; justify-content: center; } #list-restart-btn { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 10px 18px; } #list-restart-btn svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; } /* ========================================================= UTILITAIRES ========================================================= */ .u-hidden { display: none !important; }