/* ===================================================================== Brief familial — Mini App Telegram Thème piloté par les variables --tg-theme-* (injectées par Telegram) avec repli clair/sombre (prefers-color-scheme) pour le dev hors Telegram. ===================================================================== */ :root { /* THÈME CLAIR FIXE (choix de Jérémie) : on N'hérite PAS du thème Telegram — fond clair + texte sombre, lisible, identique partout (y compris Telegram sombre). */ --bg: #eef2f6; --card: #ffffff; --text: #0f172a; --hint: #64748b; --link: #2563eb; --sep: color-mix(in srgb, var(--text) 12%, transparent); --tab-bg: #ffffff; /* Accent de la personne (Baptiste orange, Matthieu bleu, Préma vert, Jérémie violet). Posé en JS sur ; valeur de secours ici. */ --accent: #f97316; --radius: 16px; --gap: 12px; --pad: 16px; --maxw: 680px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .app { max-width: var(--maxw); margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; } /* ---------- Loader ---------- */ .loader { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--hint); background: var(--bg); font-size: 15px; z-index: 50; transition: opacity .25s ease; } .loader.hidden { opacity: 0; pointer-events: none; } /* ---------- En-tête dégradé (météo) ---------- */ .head { padding: calc(var(--pad) + env(safe-area-inset-top, 0px)) var(--pad) 18px; color: #fff; /* le dégradé est posé en JS selon la température (réplique grad() du PNG) */ background: linear-gradient(135deg, #fb923c, #f43f5e); } /* Ligne 1 : salutation (gauche) | température (droite, grande) */ .head-row { display: flex; justify-content: space-between; gap: 14px; } .head-row.r1 { align-items: flex-start; } .head .greet { font-size: clamp(24px, 6.5vw, 32px); font-weight: 800; letter-spacing: -.5px; margin: 0; } .head .wx-temp { font-size: clamp(30px, 9vw, 40px); font-weight: 800; line-height: 1; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .head .wx-temp .wx-ic svg { width: 30px; height: 30px; } /* Ligne 2 : date (gauche) | UV · vent (droite) — MÊME taille, MÊME ligne */ .head-row.r2 { align-items: baseline; margin-top: 7px; } .head .date { font-size: 15px; opacity: .95; text-transform: capitalize; } .head .wx-meta { display: flex; align-items: center; gap: 16px; font-size: 15px; /* identique à la date */ opacity: .97; } .head .wx-meta .wx-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .head .wx-meta svg { width: 15px; height: 15px; } /* ---------- Onglets (collants) ---------- */ .tabs { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; gap: 5px; padding: 7px 12px; background: var(--tab-bg); border-bottom: 1px solid var(--sep); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; appearance: none; border: 0; background: transparent; color: var(--hint); font: inherit; font-weight: 600; font-size: 14px; padding: 9px 11px; border-radius: 11px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 7px; transition: color .15s, background .15s; } .tab .emoji { font-size: 21px; line-height: 1; } /* Onglets = ICÔNES SEULES (le nom de la section s'affiche dans .section-head du contenu). */ .tab .label { display: none; } .tab:hover { color: var(--text); } .tab[aria-selected="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 700; } /* Titre de la section active (puisque les onglets sont en icônes seules) */ .section-head { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 800; color: var(--text); margin: 0 2px 2px; } .section-head .section-head-ic { font-size: 21px; } /* ---------- Contenu ---------- */ .content { flex: 1; padding: var(--pad); padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--gap); } .content:focus { outline: none; } /* Carte générique */ .card { background: var(--card); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } /* Carte « teintée » d'un accent (actu, mémo, hébreu, activité) : fond = teinte douce de l'accent, barre/bordure gauche pleine couleur. Réplique de la logique COLORS (bg clair + texte foncé) du PNG, version thème-aware. */ .tinted { --c: var(--accent); position: relative; background: color-mix(in srgb, var(--c) 14%, var(--card)); border-left: 4px solid var(--c); border-radius: 12px; padding: 13px 15px 14px; } .tinted .kicker { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: color-mix(in srgb, var(--c) 78%, var(--text)); margin: 0 0 6px; } .tinted .title { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: var(--text); } .tinted .subtitle { font-size: 13px; color: var(--hint); margin: 0 0 8px; } .tinted .body { color: color-mix(in srgb, var(--text) 88%, transparent); } .tinted .body p { margin: 0 0 6px; font-size: 14.5px; } .tinted .body p:last-child { margin-bottom: 0; } /* Note d'accroche */ .note { background: color-mix(in srgb, var(--accent) 10%, var(--card)); border-radius: 12px; padding: 14px 16px; font-size: 15px; color: var(--text); display: flex; gap: 10px; align-items: flex-start; } .note .ic { font-size: 20px; line-height: 1.2; } /* Récap du jour (onglet « Aujourd'hui ») */ .digest { background: var(--card); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .digest-title { font-size: 13px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--hint); margin: 0 0 12px; } .digest-items { display: flex; flex-direction: column; gap: 11px; } .digest-row { display: flex; gap: 12px; align-items: flex-start; } .digest-ic { flex: 0 0 auto; width: 26px; text-align: center; font-size: 18px; line-height: 1.3; } .digest-tx { font-size: 15px; color: var(--text); } .digest-tx b, .digest-row strong { font-weight: 700; } /* Hébreu (footer rendu en carte) */ .hebrew { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .hebrew .word { font-size: 22px; font-weight: 800; color: color-mix(in srgb, #0f766e 72%, var(--text)); } .hebrew .trad { color: var(--hint); font-size: 15px; } /* ---------- Emploi du temps (compact : heure à gauche, tient sur une page) ---------- */ .lessons { display: flex; flex-direction: column; gap: 6px; } .lesson { --c: var(--accent); display: flex; align-items: stretch; background: color-mix(in srgb, var(--c) 11%, var(--card)); border-left: 5px solid var(--c); border-radius: 11px; overflow: hidden; } .lesson-time { flex: 0 0 58px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 6px 4px; line-height: 1.2; color: color-mix(in srgb, var(--c) 60%, var(--text)); border-right: 1px solid color-mix(in srgb, var(--c) 22%, transparent); } .lesson-time .h1 { font-size: 15px; font-weight: 800; } .lesson-time .h2 { font-size: 12px; font-weight: 600; opacity: .6; } .lesson-main { flex: 1; min-width: 0; padding: 7px 12px; display: flex; flex-direction: column; justify-content: center; } .lesson-subject { font-size: 16px; font-weight: 700; color: var(--text); } .lesson-meta { font-size: 13px; color: var(--hint); display: flex; gap: 12px; margin-top: 1px; flex-wrap: wrap; } .lesson-meta .room { font-weight: 600; } .lesson .flag { display: inline-block; width: fit-content; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; margin-bottom: 3px; } .lesson.changed { box-shadow: inset 0 0 0 2px #d97706; } .lesson.changed .flag { background: #fef3c7; color: #b45309; } .lesson.canceled { box-shadow: inset 0 0 0 2px #dc2626; border-left-color: #dc2626; } .lesson.canceled .flag { background: #fee2e2; color: #b91c1c; } .lesson.canceled .lesson-subject { color: var(--hint); text-decoration: line-through; } /* ---------- Quiz du jour (interactif) ---------- */ .quiz { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .quiz-cat { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .quiz-q { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 14px; line-height: 1.35; } .quiz-options { display: flex; flex-direction: column; gap: 9px; } .quiz-opt { display: flex; align-items: center; gap: 11px; text-align: left; width: 100%; font: inherit; font-size: 15px; color: var(--text); padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--sep); background: var(--card); cursor: pointer; transition: border-color .15s, background .15s; } .quiz-opt:hover:not(.answered) { border-color: var(--accent); } .quiz-opt-txt { min-width: 0; } .quiz-letter { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; } .quiz-opt.answered { cursor: default; } .quiz-opt.correct { border-color: #16a34a; background: color-mix(in srgb, #16a34a 12%, var(--card)); } .quiz-opt.correct .quiz-letter { background: #16a34a; color: #fff; } .quiz-opt.wrong { border-color: #dc2626; background: color-mix(in srgb, #dc2626 12%, var(--card)); } .quiz-opt.wrong .quiz-letter { background: #dc2626; color: #fff; } .quiz-result { margin-top: 13px; font-weight: 700; font-size: 15px; } .quiz-result.ok { color: #16a34a; } .quiz-result.ko { color: #b45309; } .quiz-explain { margin-top: 6px; font-size: 14px; color: var(--hint); line-height: 1.4; } /* ---------- Cantine (menu du midi) ---------- */ .menu { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .menu-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--sep); } .menu-row:last-child { border-bottom: 0; } .menu-emoji { flex: 0 0 auto; width: 34px; text-align: center; font-size: 26px; } .menu-label { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--hint); } .menu-dish { font-size: 16px; font-weight: 600; color: var(--text); } .empty { text-align: center; color: var(--hint); padding: 28px 12px; font-size: 15px; } /* ---------- Devoirs ---------- */ .hwlist { display: flex; flex-direction: column; gap: 8px; } .hw { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border-radius: 12px; padding: 12px 14px; border-left: 4px solid var(--accent); } .hw .day { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #fff; background: var(--accent); border-radius: 8px; padding: 3px 8px; margin-top: 1px; white-space: nowrap; } .hw .hw-txt { min-width: 0; } .hw .hw-subject { font-weight: 700; font-size: 14px; } .hw .hw-desc { color: var(--hint); font-size: 14px; } /* ---------- Onglet « à venir » (placeholder) ---------- */ .placeholder { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .placeholder-ic { font-size: 42px; opacity: .65; } .placeholder-title { font-size: 16px; font-weight: 700; color: var(--text); } .placeholder-text { font-size: 14px; color: var(--hint); max-width: 300px; } /* ---------- Groupe d'actu (un centre d'intérêt, N news) ---------- */ .newsgroup { --c: var(--accent); } .newsgroup-title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: color-mix(in srgb, var(--c) 80%, var(--text)); margin: 2px 2px 9px; } .newsgroup-title::before { content: ""; flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px; background: var(--c); } .newscard { background: color-mix(in srgb, var(--c) 12%, var(--card)); border-left: 4px solid var(--c); border-radius: 12px; padding: 12px 14px; margin-bottom: 9px; } .newscard:last-child { margin-bottom: 0; } .newscard-src { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: color-mix(in srgb, var(--c) 72%, var(--hint)); margin-bottom: 3px; } .newscard-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .newscard-desc { font-size: 14px; color: color-mix(in srgb, var(--text) 86%, transparent); } .newsgroup-empty { font-size: 14px; color: var(--hint); padding: 4px 2px 8px; } /* ---------- Titre de section ---------- */ .sec-title { font-size: 13px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--hint); margin: 6px 2px 0; } /* Petite animation d'entrée des onglets */ @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .content > * { animation: fade .22s ease both; } @media (prefers-reduced-motion: reduce) { .content > * { animation: none; } }