/* ============================================================ style.css - Feuille de style globale (Design, Layout, Animations) RÔLE : C'est la "Peau" et les "Muscles" de l'application. Gère la mise en page, les couleurs dynamiques et les animations fluides. ============================================================ */ /* ─── RÉINITIALISATION GLOBALE box-sizing (F-15) ─────────────────── */ /* RÔLE : Tous les éléments calculent largeur/hauteur padding+border inclus. */ /* POURQUOI : Avant ce reset, box-sizing était posé ponctuellement (~10×) sur les blocs avec padding+border. Un nouveau bloc oublié → débord ou mauvaise largeur silencieuse. Une déclaration globale en tête supprime ce piège. */ *, *::before, *::after { box-sizing: border-box; } /* ─── SYSTÈME 5 : PERSONNALISATION & DESIGN SYSTEM ───────────────── */ :root { /* Palette par défaut (écrasée dynamiquement par config.js / ui.js) */ --bg: #ddd6e8; --card: rgba(255, 255, 255, 0.88); --solid: #fff; --bubble-bg: #fff; /* RÔLE : fond de la bulle de pensée - surchargeable par les palettes */ --pink: #e8a0bf; --lilac: #b090d0; --mint: #80d0a8; --peach: #e8c4a0; --sky: #88bee8; --coral: #e09090; --gold: #e8d088; --tama: #c8d8c0; --text: #5a5070; /* était #38304a - adouci, même teinte prune, moins contrasté */ --text2: #6e5e8c; /* était #887ea0 - foncé pour passer WCAG AA (ratio > 5:1 sur --card) */ --border: #ccc4d8; --shadow: rgba(56, 48, 74, 0.08); /* ─── COULEURS GRAPHIQUE HUMEUR ─────────────────────────────────────── */ /* RÔLE : Couleurs fixes pour le graphique énergie/bonheur dans l'onglet Progrès. */ /* POURQUOI : Indépendantes des palettes de thème - ne changent jamais avec --lilac/--gold. */ --mood-energy: #e8d088; /* jaune doré pastel - énergie (sliders, graphique) */ --mood-happy: #b090d0; /* violet pastel - bonheur (sliders, graphique) - intentionnellement fixe : couleur sémantique humeur, lisibilité indépendante du thème */ --mood-energy-text: #9a7c00; /* gold foncé - texte énergie lisible sur fond clair */ --mood-happy-text: #7a50b0; /* violet foncé - texte bonheur lisible sur fond clair */ /* ─── COULEURS SÉMANTIQUES ────────────────────────────────────────── */ /* RÔLE : Couche de sens au-dessus des couleurs déco - succès, erreur, warning, info, focus */ /* POURQUOI : Actuellement tout passe par les couleurs décoratives (--mint, --coral…) sans intention claire */ --success: var(--mint); /* Validation, habitude cochée, connexion OK */ --danger: var(--coral); /* Reset, suppression, erreur */ --warning: #e8c068; /* Attention, limite de quota */ --info: var(--sky); /* Information neutre */ --focus-ring: var(--lilac); /* Anneau de focus clavier (cf. :focus-visible) */ /* ─── RGB POUR rgba() ───────────────────────────────────────────── */ /* RÔLE : Composantes RGB de --lilac, nécessaires pour rgba(var(--lilac-rgb), opacité) */ /* POURQUOI : CSS ne peut pas extraire automatiquement les canaux d'une couleur hex - on doit les déclarer séparément. Utilisé notamment dans ui-agenda.js */ --lilac-rgb: 176, 144, 208; --lilac-light: #ede6f7; /* fond actif filtre - lilas très pâle - recalculé dynamiquement par applyUIPalette() dans ui-settings.js */ --lilac-xlight: color-mix(in srgb, var(--lilac) 12%, #ffffff); /* fond console-top - suit la palette automatiquement */ --lilac-dark: #6b3fa8; /* texte actif filtre - lilas profond - recalculé dynamiquement par applyUIPalette() dans ui-settings.js */ /* Variables d'environnement PWA (Encoches iPhone / Android) */ --sat: env(safe-area-inset-top, 0px); /* rétabli - protège l'encoche/Dynamic Island en haut */ --sab: 0px; /* pas de home indicator sur cet appareil - valeur fixe intentionnelle */ --sal: env(safe-area-inset-left, 0px); /* absorbe le bord gauche en paysage */ --sar: env(safe-area-inset-right, 0px); /* absorbe le bord droit en paysage */ /* ─── FAMILLES TYPOGRAPHIQUES ─────────────────────────────────────── */ /* RÔLE : 4 rôles distincts pour 4 registres visuels de l'app */ /* POURQUOI : Chaque police joue un rôle narratif précis - le terminal reste rétro, les titres sont chaleureux, la voix du gotchi est reconnaissable, le reste est lisible et doux */ --font-terminal: 'Courier New', monospace; /* Terminal, pixel art, boutons boutique */ --font-title: 'Caveat', cursive; /* Stade du gotchi, titres importants, accents cocooning */ --font-gotchi: 'Nunito', sans-serif; /* Voix du gotchi - toujours utilisé en italic 300 */ --font-body: 'Nunito', sans-serif; /* Tout le reste : labels, stats, modales, corps de texte */ /* ─── ÉCHELLE TYPOGRAPHIQUE ───────────────────────────────────────── */ /* RÔLE : Plancher de lisibilité - rien ne doit descendre sous --fs-xs */ /* POURQUOI : Les tailles 8/9/10px épuisent la lecture, surtout sur iPhone avec TDAH */ --fs-xs: 11px; /* Réservé aux timestamps, numéros de version */ --fs-sm: 13px; /* Labels secondaires, badges, sous-titres */ --fs-md: 15px; /* Corps de texte standard */ --fs-lg: 18px; /* Titres de carte, titres de section */ --fs-xl: 22px; /* Titre de panneau principal */ --fs-icon-lg: 40px; /* Emoji décoratif en grand (ex : 🔑 en tête de modale) - BD-17 */ /* ─── ESPACEMENTS ────────────────────────────────────────────────── */ /* RÔLE : Espacements cohérents qui évoluent avec la typographie */ /* POURQUOI : Quand le texte grossit, les conteneurs calibrés en px fixes deviennent trop serrés */ --sp-xs: 4px; /* Séparateurs, gaps internes minimes */ --sp-sm: 8px; /* Padding interne des petits composants (badges, tags) */ --sp-md: 12px; /* Padding standard des cartes et boutons */ --sp-lg: 16px; /* Padding généreux, marges entre sections */ --sp-xl: 24px; /* Marges entre blocs majeurs */ --app-gutter: 14px; /* RÔLE : marge latérale uniforme - console, dynamic-zone, tama, bulle, sliders */ /* ─── BORDER RADIUS ──────────────────────────────────────────────── */ /* RÔLE : Rayon de courbure cohérent sur tous les composants */ --r-sm: 6px; /* Tags, badges, petits boutons */ --r-md: 10px; /* Boutons standard, inputs */ --r-lg: 14px; /* Cartes, modales */ --r-xl: 20px; /* Éléments très arrondis (languette, pills) */ /* Thème Papier */ --paper-bg: #e8e0d0; --paper-border: #c8b8a0; --paper-text: #6a5a40; --paper-entry: rgba(255,255,255,.5); --paper-entry-ts: #a09880; --paper-entry-btn: #f0e8d8; --paper-book-bg: #f4edd8; --paper-book-border: #c8b898; --paper-book-shadow: #b8a888; --paper-book-line: #d4c4a8; /* Thème Terminal */ --terminal-box: #1a1a1a; --terminal-border: #444; --terminal-screen: #0a0a0a; --terminal-screen-border:#333; --terminal-text: #00ff41; --terminal-text-dim: #007a1f; --terminal-line-div: #0f2a0f; /* ── Jeux ────────────────────────────────────────────────────────────── RÔLE : Variables de design partagées par tous les mini-jeux (canvas p5 + HTML). POURQUOI un bloc dédié : les valeurs du canvas p5 ne peuvent pas lire var(--…) nativement - game-ui.js les lit via getComputedStyle() dans setup() et les passe au sketch. Centraliser ici permet de changer le thème des jeux en un seul endroit sans toucher à chaque fichier jeu. Convention : toutes les variables commencent par --game-* ou --cx-* (cristaux). ─────────────────────────────────────────────────────────────────────────────── */ /* Fond du canvas - --bg légèrement assombri pour un effet "scène" */ --game-bg: #cdc5de; /* Fond de la barre HUD (timer, vague, score) - semi-transparent sur le canvas */ --game-hud-bg: rgba(56, 48, 74, 0.12); /* Polices des jeux - héritent directement des variables app */ --game-hud-font: var(--font-body); --game-title-font: var(--font-title); /* Arrondis des zones de tri / zones de jeu */ --game-zone-radius: 14px; /* Boutons fin de partie - héritent des couleurs app */ --game-btn-primary: var(--lilac); --game-btn-secondary: var(--pink); /* Ombre - identique à l'app */ --game-shadow: var(--shadow); /* Texte - identiques aux variables app */ --game-text: var(--text); --game-text2: var(--text2); /* ── Cristaux (Tri de Cristaux) ──────────────────────────────────────── RÔLE : Couleurs des 4 cristaux de base + cristal doré bonus. POURQUOI ici plutôt que dans ui-cristaux.js : p5 lit ces valeurs via getComputedStyle() dans setup() - elles doivent être des custom properties CSS accessibles au niveau :root pour que la lecture fonctionne. Les fichiers JS référencent ces variables par leur nom cssVar : { id:'violet', cssVar:'--cx-violet', couleur:'#b090d0' } etc. ──────────────────────────────────────────────────────────────────── */ --cx-violet: #b090d0; /* correspond à --lilac */ --cx-rose: #f0a0c0; /* correspond à --pink adouci */ --cx-bleu: #90c0f0; /* correspond à --sky adouci */ --cx-vert: #90d0b0; /* correspond à --mint adouci */ --cx-dore: #f0d060; /* correspond à --gold adouci - cristal bonus */ /* ── Dégradés de fond par jeu ────────────────────────────────────────── RÔLE : Couple top/bottom utilisé par chaque sketch p5 pour son background (lu via readGameTheme dans game-ui.js). POURQUOI : auparavant les trois jeux partageaient --game-bg (#cdc5de violet générique), ce qui créait une rupture visuelle avec les cartes du hub qui ont chacune leur propre palette (cf. .game-card[data-jeu-id="…"]). Ces variables alignent le canvas de chaque jeu sur sa carte. CONVENTION : ---bg-top / ---bg-bot où préfixe = cx/bl/pt. ──────────────────────────────────────────────────────────────────── */ /* Cristaux - violet lilas (cf. .game-card[data-jeu-id="cristaux"]) */ --cx-bg-top: #e8dcf8; /* lilas très clair - haut de canvas */ --cx-bg-bot: #cdb8ef; /* lilas médium - bas de canvas */ /* Bulles - bleu ciel aqua (cf. .game-card[data-jeu-id="bulles"]) */ --bl-bg-top: #d8f0fc; /* bleu très pâle - évoque l'eau/le ciel */ --bl-bg-bot: #9cc8e4; /* aqua médium - fond bas */ /* Potions - rose pêche (cf. .game-card[data-jeu-id="potions"]) */ --pt-bg-top: #fce8f0; /* rose très clair - pétale */ --pt-bg-bot: #e8a8c4; /* pêche rosé médium - fond bas */ /* ─── COULEURS CYCLE MENSTRUEL ─────────────────────────────────── RÔLE : Couleurs partagées par les modules cycle (ui-agenda.js, ui-journal.js, ui-settings.js, app.js). POURQUOI : Auparavant hardcodées dans plusieurs fichiers JS (BD-16) - centralisées ici pour cohérence et thématisation possible. Lecture côté JS : getCSSVar('--c-cycle-rose') (cf. ui-core.js) ──────────────────────────────────────────────────────────────── */ --c-cycle-warm: #e07060; /* warm - alerte douce (journal : temps faible) */ --c-cycle-rose: #e07080; /* phase menstruelle / point rose marqueur */ --c-cycle-bleu: #80b8e0; /* phase folliculaire / point bleu marqueur */ --c-cycle-vert: #60c8a0; /* phase ovulation */ --c-cycle-violet: #b090d0; /* phase lutéale (= --lilac, dupliqué pour cohérence sémantique cycle) */ --c-cycle-warm-alpha: #e0708066;/* contour pointillé semi-transparent (rose alpha) */ --c-cycle-bleu-alpha: #80b8e066;/* contour semi-transparent (bleu ovulation) */ } /* Reset CSS basique */ * { -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; } /* RÔLE : Reset typographique - force l'héritage de font sur les éléments de formulaire */ /* POURQUOI : Par défaut, button/input/select/textarea ignorent font-family du body en CSS. Sans ce reset, ils affichent la police système du navigateur (souvent monospace). Les éléments qui doivent rester terminal ont font-family: var(--font-terminal) explicitement. */ button, input, select, textarea { font-family: inherit; } /* RÔLE : Force le rendu texte du caractère ✿ (U+273F) sur iOS/Android POURQUOI : Certains systèmes l'interprètent comme emoji et l'affichent en bleu. @font-face avec unicode-range intercepte ce seul caractère et le force en rendu texte (pas de variation selector FE0E nécessaire dans le HTML). */ @font-face { font-family: 'NunitoFleur'; src: local('Nunito'); unicode-range: U+273F; /* ✿ uniquement */ } /* Application ciblée : boutons et éléments de l'app - pas les emojis vrais */ button, .btn, .btn-p, .btn-s, .btn-d, .thought-flowers, .bilan-flowers, #bilan-flowers, #journal-flowers, #thought-count { font-family: 'NunitoFleur', var(--font-body); } body { background: var(--bg); color: var(--text); /* RÔLE : Police de base de toute l'app - Nunito remplace Courier New comme police par défaut */ /* POURQUOI : Courier New était un héritage du style terminal appliqué partout par défaut. Nunito est plus lisible, plus douce, mieux adaptée au quotidien sur mobile. Les éléments "terminal" conservent --font-terminal explicitement. */ font-family: var(--font-body); min-height: 100dvh; padding-top: var(--sat); padding-left: var(--sal); padding-right: var(--sar); display: flex; flex-direction: column; } /* Custom Scrollbar minimaliste */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; } #dynamic-zone { scrollbar-width: none; } /* Firefox */ /* ─── SYSTÈME 7 : INGÉNIERIE & LAYOUT GLOBAL ─────────────────────── */ /* CONSOLE FIXE (En haut) */ /* RÔLE : Fond lilas très clair pour distinguer visuellement la zone Gotchi/canvas de la zone dynamique basse (navigation + panneaux). Le canvas p5.js dessine son propre fond - ce background est derrière le canvas, pas dedans. body.garden-fullscreen surcharge ces trois propriétés explicitement → pas de conflit. */ #console-top { flex-shrink: 0; position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--lilac-xlight); padding: calc(var(--sat) + 6px) var(--app-gutter) 0; border-bottom: none; box-shadow: 0 4px 16px rgba(var(--lilac-rgb), 0.22); } /* ZONE DYNAMIQUE (Contenu défilant en bas) */ #dynamic-zone{ flex: 1; overflow-y: auto; padding: 8px var(--app-gutter); padding-top: 320px; /* fallback avant calcul JS - remplacé immédiatement par syncConsoleHeight() */ padding-bottom: calc(64px + var(--sab)); width: 100%; max-width: 460px; align-self: center; } /* RÔLE : masque les liens de don tant qu'aucune URL n'est configurée. POURQUOI : appliquerLienDon() retire cette classe seulement si USER_CONFIG.links.donateUrl existe - donc jamais sur le profil d'Alexia. */ .don-hidden { display: none !important; } /* ─── CADRE TÉLÉPHONE - GRAND ÉCRAN (desktop / tablette large) ─────── RÔLE : sur écran large, contenir l'app dans une colonne ~460px centrée, façon console portable, au lieu de s'étaler sur toute la largeur. POURQUOI min-width 600px : aucun téléphone en portrait n'atteint 600px, donc le rendu mobile n'est jamais affecté. À VÉRIFIER : modales plein écran, jardin fullscreen, clavier. */ @media (min-width: 600px) { html { /* le "bureau" autour du téléphone - centre la coque vert. + horiz. */ background: color-mix(in srgb, var(--lilac) 30%, #ffffff); min-height: 100dvh; display: flex; align-items: center; justify-content: center; } body { position: relative; /* ancre les enfants absolute (console, languette, modales) */ box-sizing: border-box; width: 460px; height: min(100dvh - 32px, 900px); /* callé en hauteur (marges « bureau ») */ min-height: 0; /* annule le min-height:100dvh de base */ margin: 0; border: 12px solid #ffffff; /* contour mobile flat blanc (bezel) */ border-radius: 44px; /* rayon ext. ; rayon int. ≈ 44 - 12 = 32 */ box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22); overflow: hidden; /* coupe au rayon de la coque */ background-clip: padding-box; /* le fond app reste sous l'écran, pas sous le bezel */ } /* RÔLE : le contour blanc redessiné PAR-DESSUS le contenu pour garantir le crop, coins arrondis inclus. POURQUOI : la bordure de est peinte AVANT ses enfants → un enfant positionné (languette, modale) peut la recouvrir. Ce calque masque ce débordement et donne un vrai bezel net. pointer-events:none → n'intercepte aucun clic. z-index 9500 : au-dessus du contenu, sous #rotate-overlay (9999). */ body::after { content: ""; position: absolute; inset: -12px; /* atteint le bord extérieur (border box) */ box-sizing: border-box; border: 12px solid #ffffff; border-radius: 44px; pointer-events: none; z-index: 9500; } /* La console est fixée au VIEWPORT en mobile. Dans le cadre desktop, on l'ancre DANS la coque (absolute), sinon elle se détache en haut de l'écran et le scroll de #dynamic-zone ne fonctionne plus. */ #console-top { position: absolute; top: 0; left: 0; right: 0; transform: none; width: auto; max-width: none; z-index: 60; /* garde-fou : le tama reste au-dessus de #dynamic-zone (clics) */ border-radius: 32px 32px 0 0; /* = rayon intérieur du bezel */ overflow: hidden; /* arrondit le haut de la coque */ } /* #dynamic-zone (flex:1 + overflow-y:auto) scrolle À L'INTÉRIEUR de la coque. */ #dynamic-zone { max-width: none; } /* TAMA NET : le canvas a une résolution interne fixe (CS = 200) étirée en width:100%. Si la taille d'affichage n'est pas un multiple entier de 200, la mise à l'échelle est fractionnaire → pixel art flou. On fige donc l'affichage à 400px (= 2× CS) sur l'accueil desktop : mise à l'échelle entière → net (avec image-rendering:pixelated). */ #console-top:not(.compact) #tama-shell-main { max-width: 400px; margin-left: auto; margin-right: auto; } /* Chrome normalement fixée au VIEWPORT → ancrée DANS la coque sur desktop, sinon elle déborde du faux mobile (languette, modales, terminal, toast, bannière, jardin). ⚠️ Préfixe `body ` indispensable : à spécificité égale, les règles position:fixed de base (plus bas dans le fichier) gagnaient sur la media query. `body #x`/`body .x` passe au-dessus (spécificité supérieure) et l'emporte quel que soit l'ordre. L'overflow:hidden de la coque recadre alors tout sous le bezel blanc. */ body .menu-languette, body .app-overlay, body #modal, body #update-banner, body #toast, body .canvas-fullscreen-overlay, body .canvas-fs-close { position: absolute; } /* Overlays créés dynamiquement en JS (humeur #etats-overlay, RDV #rdv-overlay) avec position:fixed EN INLINE → une règle CSS normale ne suffit pas, il faut !important pour les ancrer dans la coque au lieu de couvrir tout le viewport. inset:0 inline les recadre alors sur la coque (body = bloc conteneur en position:relative). */ body #etats-overlay, body #rdv-overlay, body #snack, body #garden-lost-banner, body #hg-zen-intro-overlay { position: absolute !important; } } /* ─── INVITE DESKTOP « OUVRIR SUR MOBILE » (QR) ────────────────────── RÔLE : QR dans l'espace « bureau » À GAUCHE, téléphone poussé À DROITE. POURQUOI ≥768px : couvre tablette (paysage + iPad récents) et PC. En dessous, pas assez de place à côté de la coque → on n'affiche que le cadre centré. */ #desktop-mobile-invite { display: none; } @media (min-width: 768px) { /* Téléphone poussé à DROITE pour dégager le QR à GAUCHE. */ html { justify-content: flex-end; padding-right: clamp(24px, 8vw, 140px); } #desktop-mobile-invite { display: flex; flex-direction: column; align-items: center; gap: 12px; position: fixed; top: 50%; /* Collé au flanc gauche de la coque : bord droit du QR = (marge droite du téléphone) + (largeur coque 460) + 24px d'écart. Suit le téléphone à toute largeur. */ right: calc(clamp(24px, 8vw, 140px) + 460px + 24px); left: auto; transform: translateY(-50%); width: clamp(180px, 22vw, 240px); padding: 24px; background: rgba(255, 255, 255, 0.62); border-radius: 20px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10); color: var(--text); text-align: center; z-index: 5; } #desktop-mobile-invite .dmi-title { font-family: var(--font-title, sans-serif); font-size: 1.1rem; margin: 0; color: var(--lilac-dark); } #desktop-mobile-invite .dmi-text { font-size: 0.9rem; margin: 0; line-height: 1.4; } #desktop-mobile-invite .dmi-hint { font-size: 0.8rem; margin: 0; color: var(--text2); } #desktop-mobile-invite #dmi-qr { width: 140px; height: 140px; background: #fff; padding: 8px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } #desktop-mobile-invite #dmi-qr img, #desktop-mobile-invite #dmi-qr canvas { width: 124px !important; height: 124px !important; } #desktop-mobile-invite .dmi-don { display: inline-block; margin-top: 4px; padding: 6px 14px; font-size: 0.85rem; text-decoration: none; color: var(--lilac-dark); background: rgba(255, 255, 255, 0.7); border-radius: 999px; border: 1px solid rgba(var(--lilac-rgb), 0.35); } } /* Header (Date et Bouton Menu) */ .hdr { text-align: center; padding: 2px 0; display: flex; justify-content: space-between; align-items: flex-start; /* boutons et slot tama alignés en haut */ position: relative; /* POURQUOI : nécessaire pour que z-index soit appliqué */ z-index: 1; /* POURQUOI : en mode compact, #tama-bubble-wrap remonte de -48px et passe par-dessus .hdr, bloquant les clics sur les boutons boutique/tablette. Ce z-index garantit que .hdr reste au premier plan. */ } /* RÔLE : Titre central du header (HabitGotchi + date) */ #hdr-title { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; align-self: stretch; border-radius: var(--r-sm); /* fondu + légère montée en sortant */ transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.35s ease, background 0.15s; opacity: 1; transform: translateY(0); max-height: 60px; overflow: hidden; } /* RÔLE : Feedback tap sur le titre → ouvre l'agenda */ /* POURQUOI var(--lilac-rgb) : suit la palette active - sans ça le fond restait violet même en thème Forêt */ #hdr-title:active { background: rgba(var(--lilac-rgb), 0.15); } #console-top.compact #hdr-title { opacity: 0; transform: translateY(-8px); max-height: 0; pointer-events: none; } /* RÔLE : Label vertical de l'onglet courant - ancré à gauche du tama en mode compact */ /* POURQUOI : Le tama occupe la place du titre en mode compact. Ce label vertical comble le vide à gauche sans toucher au layout. */ #compact-tab-label { display: none; } #console-top.compact #compact-tab-label { display: block; position: absolute; left: 4px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-size: var(--fs-lg); font-family: var(--font-title); color: var(--lilac); opacity: 0.7; letter-spacing: 1px; pointer-events: none; white-space: nowrap; transition: opacity 0.2s; } /* RÔLE : Titre "HabitGotchi" dans le header - --font-terminal conservé pour l'identité pixel */ .hdr h1 { font-size: 20px; color: var(--lilac); letter-spacing: 0.5px; line-height: 1.1; font-family: var(--font-title); font-weight: 700; } .hdr sub { font-size: var(--fs-xs); color: var(--text2); } /* RÔLE : Date du header - remplace l'ancien sémantiquement incorrect (BD-07). POURQUOI : portait une intention typographique (indice) - un dédié clarifie le rôle et permet d'appliquer la taille sans cascade implicite. */ .header-date { font-size: 0.75em; vertical-align: baseline; } .hdr .menu-btn { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--border); /* était 36×36 - Apple HIG : 44pt minimum */ background: var(--solid); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .15s; flex-shrink: 0; } /* RÔLE : Icône PNG header (boutique/tablette) - centrée dans le .menu-btn 44×44 */ /* POURQUOI : taille 28px laisse une marge de tap confortable dans le bouton 44px */ .nav-icon-img { width: 28px; height: 28px; image-rendering: pixelated; pointer-events: none; } /* RÔLE : Icône PNG dans les titres de modales et overlays (h2, span de titre) */ /* POURQUOI : vertical-align:middle aligne l'image avec le texte adjacent sur la ligne de base */ .title-icon-img { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; margin-right: 6px; } /* RÔLE : Icône .title-icon-img à l'intérieur d'un bouton - taille ramenée à 1em */ /* POURQUOI : 24px fixes dans un .btn (fs-sm ≈ 13px) double la hauteur du bouton. */ /* 1em réserve l'espace layout, scale(1.4) agrandit visuellement */ /* sans affecter le flux - le bouton ne grossit pas. */ .btn .title-icon-img { width: 1em; height: 1em; transform: scale(1.4); } /* RÔLE : Icône PNG vitality (🌱/💜 dans le label jardin) - remplace les emojis de 11px */ .vitality-icon-img { width: 14px; height: 14px; image-rendering: pixelated; display: block; } .hdr .menu-btn:active { transform: scale(.9); background: var(--border); } /* ─── SYSTÈME 1 : MÉTABOLISME (L'Écran du Gotchi) ────────────────── */ /* Le boîtier externe */ .tama-shell { background: none; border: none; padding: 2px; box-shadow: none; margin: 4px auto 0; max-width: 100%; /* POURQUOI : le padding de #console-top gère déjà les marges latérales */ position: relative; z-index: 1; /* RÔLE : bloque le scroll natif sur la zone Gotchi pour que le frottement de nettoyage soit fiable. POURQUOI : sur Android Chrome, touchmove est passive par défaut → return false du touchMoved p5 ignoré → le navigateur intercepte le geste comme un scroll vertical au lieu de laisser passer le scrub. pinch-zoom permet le zoom d'accessibilité tout en bloquant scroll/pan. Ajouté 2026-05-18 (feedback testeuse Android). */ touch-action: pinch-zoom; /* Réduction dynamique de la console (quand on change d'onglet) */ transition: max-width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), margin 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: top center; } /* ─── BARRE DE PROGRESSION DES HABITUDES DU JOUR ─────────────────── */ /* RÔLE : Conteneur - fond lilas pâle visible à 0/6, contour lilas discret */ /* POURQUOI pas overflow:hidden : le box-shadow de contour serait coupé dedans */ #hab-progress-bar { width: 100%; height: 7px; background: rgba(var(--lilac-rgb), 0.15); border: 1px solid rgba(var(--lilac-rgb), 0.3); border-radius: 4px; margin-top: 6px; position: relative; transition: height 0.4s cubic-bezier(0.25, 1.15, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 1.15, 0.5, 1), margin-top 0.4s cubic-bezier(0.25, 1.15, 0.5, 1); } /* RÔLE : Fill - gradient lilas→pervenche→mint, grandit depuis la gauche */ /* POURQUOI position:absolute : s'étend dans le conteneur sans pousser son layout, border-radius identique pour rester dans le contour. */ /* POURQUOI couleur intermédiaire #88aad4 : évite le gris sRGB au milieu du gradient */ #hab-progress-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: linear-gradient(to right, var(--lilac) 0%, #88aad4 50%, var(--mint) 100%); background-size: var(--bar-w, 100%) 100%; border-radius: 4px; transition: width 0.4s cubic-bezier(0.25, 1.15, 0.5, 1); } /* RÔLE : Mode compact - barre masquée pour ne pas surcharger la console réduite */ /* POURQUOI height:0 + opacity:0 : height:0 retire l'espace, opacity:0 garantit l'invisibilité pendant la transition - même technique que max-height:0 sur #hdr-title */ #console-top.compact #hab-progress-bar { height: 0; opacity: 0; margin-top: 0; } /* RÔLE : Mode compact - bannières Mode Cocon + installation iOS masquées pour ne pas surcharger la console réduite. */ /* POURQUOI !important : les bannières ont un style inline display:flex/none piloté en JS */ /* (updateCoconBanner / updateIosInstallBanner) - sans !important, le style inline gagnerait sur la règle CSS */ /* et la bannière resterait visible. La sortie du cocon reste accessible via la section "Mode Cocon" dans Réglages ; */ /* le tuto iOS reste accessible via Réglages › Notifications. */ #console-top.compact #cocon-banner, #console-top.compact #ios-install-banner { display: none !important; } /* RÔLE : Pastille Mode Cocon - rappel visuel en mode compact, en miroir de #compact-tab-label. */ /* POURQUOI : La bannière est masquée en compact (règle ci-dessus). Sur un autre onglet, rien ne signalait le Cocon actif. La pastille ne s'affiche QUE si compact ET cocon-active (classe posée par updateCoconBanner) - pure logique CSS, le JS ne fait que basculer la classe d'état. */ #cocon-pastille { display: none; } #console-top.compact.cocon-active #cocon-pastille { display: flex; align-items: center; gap: 3px; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; padding: 6px 3px; border-radius: 11px; background: linear-gradient(180deg, #e8d5ff, #f5eaff); border: 1px solid #c8a8e0; color: var(--text); font-size: var(--fs-xs); letter-spacing: 0.5px; pointer-events: none; z-index: 2; } /* RÔLE : Masque la pastille pendant la transition jardin / le plein écran - comme #compact-tab-label. */ /* POURQUOI : Cohérence avec le label d'onglet, qui est masqué dans ces deux états (cf. règles plus bas). */ body.garden-preparing #cocon-pastille, body.garden-fullscreen #cocon-pastille { display: none !important; } /* RÔLE : Wrapper tama + bulle - en mode normal, dans le flux */ /* position:relative nécessaire pour ancrer #compact-tab-label en absolute à l'intérieur */ #tama-bubble-wrap { position: relative; transition: margin-top 0.4s cubic-bezier(0.25, 1.15, 0.5, 1); } /* RÔLE : Mode compact - le wrapper remonte pour s'aligner avec les boutons du .hdr */ /* POURQUOI : Le .hdr fait ~48px (boutons 44px + padding). En mode compact, #hdr-title disparaît (max-height→0) mais .hdr garde sa hauteur pour les boutons. On remonte #tama-bubble-wrap de cette hauteur pour que le tama soit visuellement aligné avec les boutons. */ #console-top.compact #tama-bubble-wrap { margin-top: -48px; /* remonte de la hauteur du .hdr */ } /* Tama réduit en mode compact */ #console-top.compact #tama-shell-main { max-width: 220px; /* un peu plus grand, avec marge latérale pour ne pas coller aux boutons */ padding-left: 8px; padding-right: 8px; margin-left: auto; margin-right: auto; transition: max-width 0.4s cubic-bezier(0.25, 1.15, 0.5, 1); } #console-top.compact .bubble { margin-bottom: 8px; } /* RÔLE : Padding sous la bulle uniquement sur l'onglet accueil (mode non-compact) */ /* POURQUOI : En mode compact (autres onglets), la bulle est masquée - pas de padding nécessaire */ #console-top:not(.compact) { padding-bottom: 10px; } /* L'écran Canvas (Le jeu en lui-même) */ .tama-screen { touch-action: manipulation; background: var(--tama); border: 3px solid var(--lilac); border-radius: 8px; overflow: hidden; aspect-ratio: 1/1; width: 100%; margin: 0 auto; position: relative; /* RÔLE : contexte de positionnement pour .tama-env-flash */ } /* RÔLE : Flash coloré par-dessus le canvas lors d'un changement d'env depuis l'inventaire. POURQUOI : Le flash p5 (_envFadeState) s'exécute dans le canvas lui-même - invisible si le canvas est trop petit (compact) ou si la couleur pastel se noie dans le fond. Cet overlay CSS est posé AU-DESSUS du canvas et garantit un flash visible quelle que soit la taille du tama. */ @keyframes tamaEnvFlash { 0% { opacity: 0; } 30% { opacity: 0.82; } 100% { opacity: 0; } } .tama-env-flash { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; animation: tamaEnvFlash 0.75s ease-out forwards; } /* Empêche le lissage des pixels pour garder l'effet Rétro */ .tama-screen canvas { display: block; image-rendering: pixelated !important; image-rendering: crisp-edges !important; width: 100% !important; height: 100% !important; } /* ─── SYSTÈME 3 : COGNITION & IA (Dialogue) ──────────────────────── */ /* La Bulle de pensée */ .bubble { background: var(--bubble-bg); /* POURQUOI : --bubble-bg défini dans :root à #fff, surchargeable par les palettes */ border: none; border-radius: 8px; padding: 10px 16px; white-space: pre-line; /* RÔLE : permet les sauts de ligne via \n dans flashBubble() */ /* RÔLE : Police du gotchi - italic fin pour marquer que c'est SA voix */ /* POURQUOI : On veut que le lecteur·ice sente immédiatement que c'est le gotchi qui s'exprime */ font-family: var(--font-gotchi); font-style: italic; font-weight: 300; font-size: var(--fs-sm); line-height: 1.4; text-align: center; height: auto; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px var(--shadow); position: relative; margin: 6px auto 0; max-width: 100%; /* POURQUOI : le padding de #console-top gère déjà les marges latérales */ width: 100%; z-index: 10; } /* La petite flèche pointant vers le Gotchi */ /* POURQUOI : triangle blanc sans bordure - cohérent avec le fond blanc de la bulle */ .bubble::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 8px solid var(--bubble-bg); display: block; } .bubble::after { display: none; } /* CHAT IA (Soutien) */ .soutien-chat { display: flex; flex-direction: column; gap: 8px; max-height: 50dvh; overflow-y: auto; padding: 8px 0; } .chat-bubble-user { align-self: flex-end; background: var(--lilac); color: #fff; border-radius: 12px 12px 2px 12px; padding: 8px 12px; font-size: var(--fs-sm); max-width: 85%; line-height: 1.5; /* était 11px */ font-family: var(--font-gotchi); font-style: italic; font-weight: 300; } .chat-bubble-claude { align-self: flex-start; background: #f0e8ff; color: var(--text); border-radius: 12px 12px 12px 2px; padding: 8px 12px; font-size: var(--fs-sm); max-width: 90%; line-height: 1.5; /* était 11px */ border: 1px solid var(--border); font-family: var(--font-gotchi); /* POURQUOI : voix du gotchi - même registre que la bulle principale */ font-style: italic; font-weight: 300; } .chat-bubble-system { text-align: center; font-size: var(--fs-xs); color: var(--text2); /* était 9px - messages système = secondaires */ padding: 2px 0; font-style: italic; } /* ─── SYSTÈME 2 : NAVIGATION (Menu & Tiroir) ─────────────────────── */ /* ─── RUBAN DIAGONAL - Bouton menu ───────────────────────────────── */ /* RÔLE : Remplace l'ancienne languette centrée en bas, trop proche visuellement des cartes de l'onglet Inventaire (mêmes bords, même largeur). POURQUOI ruban diagonal : forme distinctive, ancrée dans un coin, aucune ambiguïté avec les éléments de contenu. */ .menu-languette { position: fixed; bottom: 0; right: 0; /* RÔLE : crée le triangle de coin via clip-path - pointe vers le haut à droite */ width: 92px; height: 92px; clip-path: polygon(100% 0, 100% 100%, 0 100%); background: var(--lilac); border: none; padding: 0; cursor: pointer; z-index: 150; /* RÔLE : ombre portée sous le triangle */ /* POURQUOI var(--lilac-rgb) : l'ombre doit suivre la couleur de la languette qui utilise déjà var(--lilac) */ filter: drop-shadow(2px -2px 6px rgba(var(--lilac-rgb), .40)); /* RÔLE : on anime width + height pour l'effet "on tire sur une feuille de coin" */ /* POURQUOI pas transform : le triangle est ancré en bas à droite via position fixed - agrandir width/height depuis ce coin donne l'illusion que la feuille se décolle */ transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease; } /* RÔLE : Icône ☰ positionnée dans le coin inférieur droit du triangle */ .menu-languette::after { content: '☰'; position: absolute; bottom: 20px; right: 20px; font-size: 18px; color: #fff; line-height: 1; pointer-events: none; transition: font-size 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; } /* RÔLE : Feedback tactile - légère expansion au tap */ .menu-languette:active { width: 102px; height: 102px; } /* RÔLE : État menu ouvert - le triangle s'agrandit comme une feuille qu'on tire */ /* POURQUOI 110px : assez grand pour être perçu clairement, pas au point de gêner le contenu */ .menu-languette.is-open { width: 110px; height: 110px; /* POURQUOI var(--lilac-rgb) : l'ombre ouverte amplifie la couleur de la languette - doit rester cohérente avec le thème */ filter: drop-shadow(-2px -4px 12px rgba(var(--lilac-rgb), .55)); } .menu-languette.is-open::after { content: '✕'; font-size: 22px; } /* ─── CLASSE PARTAGÉE POUR TOUS LES OVERLAYS ────────────────────── */ /* RÔLE : Garantit que chaque overlay couvre bien tout le viewport ET capte les taps. POURQUOI : Sans pointer-events:auto explicite, certains navigateurs mobiles laissent les événements touch "passer à travers" l'overlay vers les éléments derrière. Quand display:none, pointer-events est automatiquement ignoré - pas de conflit. CONVENTION : Toute modale/overlay DOIT avoir cette classe OU utiliser openModal()/clModal(). */ .app-overlay { position: fixed; inset: 0; pointer-events: auto; } /* Modale du Menu Principal */ /* RÔLE : -webkit-backdrop-filter dupliqué - iOS Safari 15/16/17 ne reconnaît pas la version standard. POURQUOI : sans préfixe, le fond reste opaque sur ~5-15 % du parc iOS (audit cross-platform 2026-05-18 F-07). */ .menu-overlay { z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(56, 48, 74, 0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .menu-overlay.open { display: flex; } /* ─── MENU CAHIER D'ADO ──────────────────────────────────────────── */ /* RÔLE : Conteneur principal - aspect cahier spirale avec lignes bleues */ .menu-book { background: var(--paper-book-bg); border: 4px solid var(--paper-book-border); border-radius: var(--r-sm); padding: var(--sp-md) var(--sp-md) var(--sp-sm) 28px; /* 28px à gauche = espace reliure */ width: 300px; box-shadow: 4px 4px 0 var(--paper-book-shadow), inset 0 0 20px rgba(0,0,0,.05); font-family: var(--font-title); position: relative; /* POURQUOI repeating-linear-gradient : simule les lignes d'un cahier, sans image à charger */ background-image: repeating-linear-gradient( to bottom, transparent, transparent 27px, #c8d8f0 27px, #c8d8f0 28px ); background-position: 0 52px; /* décale les lignes sous le titre */ } /* Reliure rouge à gauche */ .menu-book::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: #e09090; } /* Trous de reliure */ .menu-book::after { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 10px; background-image: radial-gradient(circle, #d4c4a8 4px, transparent 4px); background-size: 10px 36px; background-repeat: repeat-y; background-position: 0 18px; } /* Titre du cahier */ .menu-book h2 { text-align: center; font-size: 18px; font-family: var(--font-title); font-weight: 700; letter-spacing: 0.5px; margin-bottom: 24px; /* POURQUOI : était 12px - plus d'air sous le nom du gotchi */ color: var(--paper-text); position: relative; /* passe au-dessus des lignes */ z-index: 1; } /* RÔLE : Rangée de stickers emoji collés dans le menu cahier */ /* POURQUOI : emojis grands, bien espacés, occupent toute la largeur utile du cahier */ .menu-stickers { display: flex; justify-content: space-around; /* POURQUOI space-around : répartit sur toute la largeur sans calc() */ align-items: center; margin-bottom: 14px; position: relative; z-index: 1; } /* RÔLE : Un sticker emoji individuel - grand, nu, avec contour blanc épousant sa forme */ /* POURQUOI drop-shadow multicouche : empile des ombres blanches dans toutes les directions pour simuler un stroke qui suit le contour exact de l'emoji (impossible avec border/outline) */ .menu-sticker { position: relative; /* RÔLE : ancrage pour badges absolute (cf. #badge-atelier) - POURQUOI : sans ça, le badge se positionnerait sur le parent .menu-stickers */ font-size: 52px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; transition: transform 0.1s ease; filter: drop-shadow(0px 3px 0 #fff) drop-shadow(0px -3px 0 #fff) drop-shadow( 3px 0px 0 #fff) drop-shadow(-3px 0px 0 #fff) drop-shadow( 2px 2px 0 #fff) drop-shadow(-2px 2px 0 #fff) drop-shadow( 2px -2px 0 #fff) drop-shadow(-2px -2px 0 #fff); } /* RÔLE : Inclinaisons alternées - effet stickers collés de travers */ .menu-sticker:nth-child(1) { transform: rotate(-6deg); } .menu-sticker:nth-child(2) { transform: rotate(3deg); } .menu-sticker:nth-child(3) { transform: rotate(-4deg); } /* RÔLE : Feedback tactile au tap */ .menu-sticker:active { transform: scale(0.88) !important; } /* RÔLE : État désactivé - estompé, non interactif */ .menu-sticker--disabled { opacity: 0.45; pointer-events: none; cursor: default; } /* Doodle pixel art coin haut droit */ .menu-doodle { position: absolute; top: 8px; right: 10px; opacity: 0.7; } /* RÔLE : Liste de navigation - lignes de cahier cliquables */ .menu-lines { display: flex; flex-direction: column; align-items: flex-start; /* ← nécessaire pour que --indent fonctionne */ gap: 8px; /* POURQUOI : était 2px - plus d'air entre les lignes de nav */ margin-bottom: 12px; position: relative; z-index: 1; } /* RÔLE : Une ligne de navigation - grande zone de tap, centrée */ .menu-line { display: flex; align-items: center; justify-content: center; gap: 12px; height: 44px; /* POURQUOI : réduit depuis 56px - moins de padding vertical, plus compact */ padding: 0 8px; /* POURQUOI : réduit depuis 12px */ cursor: pointer; border-radius: 6px; border: 2px solid rgba(200,184,160,0.4); transition: background .12s, border-color .12s; color: var(--paper-text); font-size: 22px; font-weight: bold; width: 70%; } /* RÔLE : Lignes paires décalées à droite - effet quinconce centré */ .menu-line--indent { align-self: flex-end; margin-right: 10%; } /* Rendre cliquable visuellement */ /* POURQUOI var(--lilac-rgb) : le fond tap doit correspondre à la couleur active du menu selon la palette */ .menu-line:active { background: rgba(var(--lilac-rgb), 0.2); border-color: var(--lilac); } /* RÔLE : État actif - effet surligneur au lieu d'un simple encadré */ /* POURQUOI : border seule ressemble à un encadrement neutre - le surligneur évoque le cahier d'ado, plus cohérent avec l'ADN visuel, et plus lisible d'un coup d'œil */ /* POURQUOI var(--lilac-rgb) : l'effet surligneur est la couleur principale de navigation - doit suivre la palette */ .menu-line.active { background: linear-gradient( to bottom, transparent 20%, rgba(var(--lilac-rgb), 0.35) 20%, rgba(var(--lilac-rgb), 0.35) 80%, transparent 80% ); border-color: transparent; /* POURQUOI : on supprime le cadre pour laisser le surligneur parler */ color: var(--lilac); font-weight: 900; } .ml-icon { font-size: 28px; line-height: 1; flex-shrink: 0; } .ml-label { font-size: 26px; letter-spacing: 0.3px; font-family: var(--font-title); } /* RÔLE : Icône PNG menu cahier - rendu pixel art net, contour blanc sticker */ /* POURQUOI drop-shadow multicouche : même effet que .menu-sticker - contour blanc qui suit le contour exact du PNG transparent, évite la confusion avec le fond beige du cahier */ .ml-icon-img { width: 28px; height: 28px; image-rendering: pixelated; flex-shrink: 0; filter: drop-shadow(0px 2px 0 #fff) drop-shadow(0px -2px 0 #fff) drop-shadow( 2px 0px 0 #fff) drop-shadow(-2px 0px 0 #fff) drop-shadow( 1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow( 1px -1px 0 #fff) drop-shadow(-1px -1px 0 #fff); } /* RÔLE : Icône PNG sticker (jardin/atelier/jeux) - remplace l'emoji, hérite des rotations et drop-shadow du parent */ /* POURQUOI : le filter drop-shadow sur .menu-sticker suit le contour du PNG transparent - effet sticker préservé */ .sticker-icon-img { width: 72px; height: 72px; image-rendering: pixelated; display: block; pointer-events: none; } /* RÔLE : Icône PNG post-it (agenda/soutien) - affiché au-dessus du label */ /* POURQUOI : séparé du texte pour permettre un sizing indépendant de la fonte */ .postit-icon-img { width: 32px; height: 32px; image-rendering: pixelated; display: block; margin: 0 auto 2px; } /* RÔLE : Post-its empilés verticalement */ .menu-postits { display: flex; flex-direction: column; align-items: center; /* POURQUOI : centre les post-its réduits à 72% dans le cahier */ gap: 6px; margin-top: 10px; position: relative; z-index: 1; } /* RÔLE : Post-it collé en bas du cahier */ /* POURQUOI rotate léger : effet post-it à la va-vite, comme dans un vrai cahier d'ado */ .menu-postit { width: 90%; /* POURQUOI : réduit depuis 100% - post-its moins larges, plus vraisemblables */ padding: 10px 14px; font-size: var(--fs-md); /* POURQUOI : était fs-sm - plus lisible, plus présent */ font-weight: bold; font-family: var(--font-body); cursor: pointer; border-radius: 2px; border: none; letter-spacing: 0.3px; box-shadow: 3px 3px 6px rgba(0,0,0,0.16); /* POURQUOI : ombre légèrement plus marquée */ transition: transform .12s; text-align: center; } .menu-postit:active { transform: scale(.95); } .menu-postit--rose { background: #f9c8dc; /* POURQUOI : était #fde8f0 trop pâle - fond plus soutenu */ color: #7a2848; transform: rotate(-1deg); } .menu-postit--rose:active { transform: rotate(-1deg) scale(.95); } .menu-postit--lilac { background: #d8bef5; /* POURQUOI : était #ede0f8 trop pâle - fond plus soutenu */ color: #3d1f6e; transform: rotate(0.8deg); margin-bottom: 20px; /* POURQUOI : espace sous le post-it soutien avant le bas du cahier */ } .menu-postit--lilac:active { transform: rotate(0.8deg) scale(.95); } @keyframes bookSlideUp { 0% { transform: translateY(60px) scale(.95); opacity: 0; } 70% { transform: translateY(-6px) scale(1.01); } 100% { transform: translateY(0) scale(1); opacity: 1; } } .menu-overlay.open .menu-book { animation: bookSlideUp .35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* ─── COMPOSANTS UI GÉNÉRIQUES (Boutons, Inputs, Cartes) ─────────── */ /* RÔLE : -webkit-backdrop-filter dupliqué - iOS Safari 15/16/17 ne reconnaît pas la version standard. POURQUOI : audit cross-platform 2026-05-18 F-07 - sans préfixe, le fond reste opaque sur iOS 15-17. */ .card { background: var(--card); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 2px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-md); margin-bottom: var(--sp-lg); box-shadow: 0 2px 8px var(--shadow); /* POURQUOI : sp-lg (16px) uniformise l'espace entre tous les blocs de l'accueil */ } /* RÔLE : Titre de section - cartes, panneaux et modales de l'app */ /* POURQUOI : Caveat est plus grande visuellement que Nunito à taille égale - 20px compense et donne un rendu cohérent avec les autres titres Caveat de l'app */ .card h2, .j90 h2, .modal-box h2 { font-family: var(--font-title); font-size: 20px; font-weight: 700; text-align: center; margin-bottom: var(--sp-sm); letter-spacing: 0.3px; } /* RÔLE : Carte action principale - visuellement dominante sur la page Gotchi */ /* POURQUOI : La carte habitudes est la cible principale de l'utilisatrice à l'ouverture - elle doit ressortir clairement par rapport à la card-gotchi (info secondaire). Fond plus saturé, bordure 2px pleine, ombre portée forte. */ .card-primary { border-color: var(--lilac); border-width: 2px; /* POURQUOI var(--lilac-rgb) : l'ombre colorée de la carte principale reflète la couleur d'accentuation du thème */ box-shadow: 0 8px 28px rgba(var(--lilac-rgb), 0.38), 0 2px 8px rgba(0,0,0,0.07); padding: 0; overflow: hidden; /* POURQUOI : fond blanc pur pour faire ressortir les icônes sticker et le contenu */ background: #ffffff; } /* RÔLE : Header coloré de la carte habitudes */ /* POURQUOI : space-between pousse le badge X/6 à droite, titre à gauche */ .card-primary-header { display: flex; justify-content: space-between; align-items: center; /* POURQUOI var(--lilac-rgb) : le header de carte suit la teinte principale - sinon reste violet en palette Océan */ background: rgba(var(--lilac-rgb), 0.15); border-bottom: 1px solid rgba(var(--lilac-rgb), 0.45); padding: var(--sp-sm) var(--sp-md); margin-bottom: 0; } /* RÔLE : Titre "Tes habitudes du jour" - Caveat pour un accent chaleureux */ .card-primary-header h2 { font-family: var(--font-title); font-size: 20px; font-weight: 600; letter-spacing: 0; margin-bottom: 0; } /* RÔLE : Badge compteur habitudes - pill X/6 dans le header de la carte habitudes */ /* POURQUOI : Signal de progression immédiatement lisible sans scanner la liste ; vire au vert quand toutes les habitudes sont cochées pour donner un feedback de complétion sans toast supplémentaire */ #hab-count { display: inline-flex; align-items: center; font-size: var(--fs-sm); background: var(--lilac); color: #fff; padding: 3px 10px; border-radius: 10px; font-weight: bold; transition: background 0.35s ease, transform 0.2s ease; letter-spacing: 0.3px; } #hab-count.all-done { /* POURQUOI : feedback vert doux - même teinte que .hab.done, cohérence palette */ background: var(--mint); transform: scale(1.08); } /* RÔLE : Zone liste des habitudes - padding interne après le header */ #hab-home { padding: var(--sp-md) var(--sp-md) var(--sp-lg); /* POURQUOI : padding latéral var(--sp-md) - aligné sur le padding latéral standard des .card */ } /* RÔLE : Icône PNG catégorie - rendu pixel art net à toutes les tailles */ /* POURQUOI : image-rendering:pixelated préserve les contours nets quand le PNG est affiché à une taille supérieure à sa taille native (24×24 → 28px) */ .cat-icon-img { /* RÔLE : Icône catégorie - centrée verticalement dans la ligne .hab, liseré blanc sticker */ display: block; width: 40px; height: 40px; flex-shrink: 0; image-rendering: pixelated; image-rendering: crisp-edges; /* RÔLE : Liseré blanc net style sticker - 4 drop-shadow à 0px blur décalés 2px */ /* POURQUOI : blur:0 = contour pixel-perfect, pas de halo flou */ filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow( 2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 1px 2px rgba(0,0,0,0.12)); transition: filter 0.3s ease, transform 0.3s ease; } /* RÔLE : Quinconce - variable CSS de rotation définie sur .hab, lue par .cat-icon-img */ /* POURQUOI : passer par une variable permet à l'animation de combiner scale + rotate sans que le transform de keyframe écrase la rotation quinconce */ .hab:nth-child(odd) { --icon-rot: -6deg; } .hab:nth-child(even) { --icon-rot: 6deg; } .cat-icon-img { transform: rotate(var(--icon-rot, 0deg)); } /* RÔLE : Bounce au cochage - scale + rotation quinconce combinés via var(--icon-rot) */ /* POURQUOI : intégrer la rotation dans chaque keyframe évite que scale() l'écrase */ @keyframes iconDone { 0% { transform: scale(1) rotate(var(--icon-rot, 0deg)); } 35% { transform: scale(1.28) rotate(var(--icon-rot, 0deg)); } 60% { transform: scale(0.88) rotate(var(--icon-rot, 0deg)); } 80% { transform: scale(1.1) rotate(var(--icon-rot, 0deg)); } 100% { transform: scale(1) rotate(var(--icon-rot, 0deg)); } } /* RÔLE : Désaturation quand l'habitude est cochée - icône grisée, liseré blanc conservé */ /* POURQUOI : grayscale(1) + opacity légère signale visuellement "fait" sans teinte bizarre */ .hab.done .cat-icon-img { filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow( 2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 1px 2px rgba(0,0,0,0.10)) grayscale(1) opacity(0.55); animation: iconDone 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; } /* RÔLE : Taille dans la mini-bar - conservée pour compat si jamais réactivée */ .hab-mini .cat-icon-img { width: 34px; height: 34px; filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow( 2px 0 0 #fff) drop-shadow(-2px 0 0 #fff); } /* RÔLE : Fallback emoji si le PNG est absent (onerror dans getCatIcon) */ .cat-icon-fallback { font-size: 26px; line-height: 1; flex-shrink: 0; } /* RÔLE : Pastille colorée identifiant une catégorie d'habitude (sport, nutri…) */ /* POURQUOI : Utilisée dans la modale d'édition des habitudes (ouvrirEditionHabitudes dans ui-habs.js) - couplée à un libellé textuel ("Sport", "Hydratation") pour donner deux signaux redondants (couleur + texte) sans dépendre des PNG sticker, qui restent réservés à la vue d'accueil. */ /* POURQUOI 14px : taille calée sur la cap-height d'un texte var(--fs-sm) - la pastille tient à côté du label sans dominer visuellement. flex-shrink:0 garantit qu'elle ne s'écrase pas si le conteneur manque de place. */ .cat-badge { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; /* Liseré blanc fin façon sticker - cohérence visuelle avec .cat-icon-img */ box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0,0,0,0.12); } /* RÔLE : Poignée de drag affichée dans la modale d'édition des habitudes. POURQUOI : SortableJS écoute uniquement sur cette poignée (option `handle`) - touche le glyphe ⋮⋮ pour réordonner, tape ailleurs pour éditer le label sans déclencher de drag accidentel. */ .drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; color: var(--text2); opacity: 0.55; font-size: 16px; line-height: 1; flex-shrink: 0; cursor: grab; user-select: none; -webkit-user-select: none; /* POURQUOI : sans touch-action:none, iOS interprète le geste comme un scroll et SortableJS ne reçoit pas l'événement de drag. */ touch-action: none; transition: opacity 0.15s ease, background 0.15s ease; } .drag-handle:hover { opacity: 0.9; background: rgba(var(--lilac-rgb), 0.10); } .drag-handle:active { cursor: grabbing; opacity: 1; } /* RÔLE : États visuels pendant le drag - appliqués par SortableJS via les options `ghostClass`, `chosenClass` et `dragClass`. */ /* POURQUOI : feedback discret pour confirmer que la ligne est saisie sans imiter un système d'OS étranger (pas de soulèvement spectaculaire). */ .hab-edit-row.sortable-ghost { opacity: 0.25; } .hab-edit-row.sortable-chosen { background: rgba(var(--lilac-rgb), 0.08); border-radius: 8px; } .hab-edit-row.sortable-drag { opacity: 0.95; box-shadow: 0 6px 16px rgba(0,0,0,0.18); } /* RÔLE : Carte principale Gotchi - stat + pensée IA réunies */ /* POURQUOI : Fond blanc mat (#fff) - le dégradé lilas/rose est retiré pour laisser toute la place à l'effet holographique ::after. La carte reste discrète au repos (opacity 0.13) et s'illumine au toucher/survol (opacity 0.32). */ .card-gotchi { background: #ffffff; /* POURQUOI var(--lilac-rgb) : bordure de la card-gotchi suit la palette - sans ça reste violet en thème Forêt */ border: 1px solid rgba(var(--lilac-rgb), 0.35); box-shadow: 0 2px 8px rgba(0,0,0,0.04); text-align: center; padding: var(--sp-lg); margin-bottom: var(--sp-lg); /* POURQUOI : espace généreux entre carte Gotchi et carte habitudes */ /* RÔLE : Socle pour l'effet holographique - le ::after est positionné en absolu par-dessus */ position: relative; overflow: hidden; will-change: transform; transition: transform 0.2s ease, box-shadow 0.2s ease; } /* RÔLE : Couche irisée holographique - style carte Pokémon holographique */ /* POURQUOI : Pseudo-élément indépendant du contenu (pointer-events:none), couvrant toute la carte. Le dégradé multi-stops simule l'iridescence d'un film mince (nacre/hologramme). Les stops utilisent --pink / --lilac / --mint (variables de palette) pour que le reflet suive automatiquement le thème choisi dans la personnalisation. Les propriétés --holo-* sont pilotées par JS (mousemove / touchmove) en temps réel. */ .card-gotchi::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( calc(var(--holo-angle, 125deg)), var(--pink), var(--lilac), color-mix(in srgb, var(--lilac) 50%, var(--mint)), var(--mint), color-mix(in srgb, var(--pink) 60%, var(--mint)), var(--pink) ); background-size: 250% 250%; background-position: var(--holo-x, 50%) var(--holo-y, 50%); /* POURQUOI 0.16 et non 0.13 : couleurs palette moins saturées que des HSL purs - l'opacity est légèrement remontée pour que l'effet reste visible au repos */ opacity: var(--holo-opacity, 0.16); transition: opacity 0.35s ease; z-index: 0; } /* RÔLE : Garde le contenu de la carte au-dessus de la couche irisée */ /* POURQUOI : ::after est z-index:0 - sans ce reset, le texte/boutons passeraient sous le reflet */ .card-gotchi > * { position: relative; z-index: 1; } /* RÔLE : Nom du gotchi - police Caveat, chaleureuse et personnelle */ /* POURQUOI : Le nom est un élément d'attachement fort - Caveat lui donne un côté manuscrit/doux */ #g-name { font-family: var(--font-title); font-weight: 700; font-size: 24px; } /* RÔLE : Ligne nom + badge anniversaire - centrée, espacée */ .g-name-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-xs); margin-bottom: 2px; } /* RÔLE : Stade du gotchi - même ligne que le nom, taille proche */ #g-stage { font-family: var(--font-title); font-weight: 600; font-style: italic; font-size: 22px; color: var(--lilac); } /* RÔLE : Bouton info - cercle lilas discret mais lisible */ /* POURQUOI var(--lilac-rgb) : le fond du bouton info est une surface translucide de la couleur principale */ .btn-info-discret { background: rgba(var(--lilac-rgb), 0.15); border: 1.5px solid var(--lilac); border-radius: 50%; width: 22px; height: 22px; font-size: 12px; color: var(--lilac); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: serif; font-style: italic; font-weight: bold; padding: 0; transition: background .15s; } /* POURQUOI var(--lilac-rgb) : hover plus intense sur la même teinte que le repos */ .btn-info-discret:hover { background: rgba(var(--lilac-rgb), 0.3); } /* RÔLE : Fleurs de quota - indique visuellement combien de pensées il reste */ .thought-flowers { display: flex; gap: 6px; justify-content: center; margin-top: 8px; font-size: 20px; letter-spacing: 3px; } .thought-flowers .flower-on { opacity: 1; color: var(--lilac); } .thought-flowers .flower-off { opacity: 0.2; color: var(--text2); } /* RÔLE : Fleurs de quota bilan - sous le bouton, sur fond blanc, centrées */ /* POURQUOI : Fleurs déplacées hors du bouton dans un div autonome - plus besoin d'override flex ni de blanc */ #bilan-flowers.thought-flowers { margin-top: 2px; justify-content: center; font-size: 16px; } /* RÔLE : Couleur des fleurs bilan sur fond blanc */ /* POURQUOI : Même palette que thought-count et journal-flowers - lilac pour on, text2 estompé pour off */ #bilan-flowers .flower-on { color: var(--lilac); opacity: 1; } #bilan-flowers .flower-off { color: var(--text2); opacity: 0.2; } /* RÔLE : Zone info agenda dans le post-it menu - RDV du jour + phase cycle */ /* POURQUOI : flex pour aligner cercle couleur + texte phase sur la même ligne */ .agenda-postit-info { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--fs-xs); color: #7a2848; line-height: 1.3; flex-wrap: wrap; } /* RÔLE : Fleurs de quota soutien - dans le post-it menu, centrées sous le texte */ /* POURQUOI : Override margin-top et font-size pour s'intégrer dans le bouton post-it sans trop de place */ #soutien-flowers.thought-flowers { margin-top: 0; font-size: 14px; letter-spacing: 2px; } /* POURQUOI : Sur le fond lilac foncé (#d8bef5), utiliser la couleur texte du post-it (#3d1f6e) */ #soutien-flowers .flower-on { color: #3d1f6e; opacity: 0.9; } #soutien-flowers .flower-off { color: #3d1f6e; opacity: 0.2; } /* RÔLE : Zone pensée IA - séparée de la carte par un trait pointillé lilas */ /* POURQUOI : C2.2 - le trait est plus léger qu'un fond coloré et crée une relation visuelle directe avec l'esthétique "cahier" du reste de l'app */ #claude-card { background: transparent; border: none; border-top: 1.5px dashed rgba(var(--lilac-rgb), 0.35); border-radius: 0; padding: var(--sp-md) var(--sp-sm) var(--sp-xs); margin-top: var(--sp-md); text-align: center; } /* RÔLE : Message de pensée IA - italic, fade-in doux à chaque nouvelle pensée */ #claude-card #claude-msg { font-style: italic; text-align: center; } /* RÔLE : Animation d'entrée du message IA - glisse depuis le haut, s'estompe */ /* POURQUOI : rend l'apparition de la pensée vivante, pas brutale */ @keyframes claudeMsgIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } #claude-card #claude-msg.has-msg { animation: claudeMsgIn .35s ease both; } /* RÔLE : Placeholder quand aucune pensée n'a encore été demandée */ /* POURQUOI : évite une zone vide qui donne l'impression que l'appli est cassée */ #claude-card #claude-msg:empty::before { content: 'Demande une pensée à ton Gotchi…'; font-style: italic; font-size: var(--fs-xs); color: rgba(var(--lilac-rgb), 0.45); display: block; margin-top: var(--sp-xs); } /* RÔLE : Centrage du message d'attente IA pendant le bilan et les props. POURQUOI : startThinkingAnim() pose text-align:center en JS, mais le reset CSS au stop peut l'effacer - on le fixe aussi en statique ici. */ #claude-summary, #prop-loading { text-align: center; font-style: italic; } /* RÔLE : Indicateur "en train de penser" - 3 pastilles qui rebondissent en cascade. POURQUOI : remplace les points médians texte (· ·· ···) par un visuel plus grand et vivant pendant les attentes IA (startThinkingAnim, tous contextes). */ .think-dots { display: inline-flex; gap: 5px; margin-left: 9px; vertical-align: middle; } .think-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--lilac); animation: thinkDot 1.3s ease-in-out infinite; } .think-dots i:nth-child(2) { animation-delay: .16s; } .think-dots i:nth-child(3) { animation-delay: .32s; } @keyframes thinkDot { 0%, 75%, 100% { transform: translateY(0); opacity: .3; } 35% { transform: translateY(-7px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .think-dots i { animation: none; opacity: .55; } } /* RÔLE : Bilan IA de la semaine - encart papier doux, italique manuscrit. POURQUOI : styles précédemment en inline (BD-04) - déplacés ici pour éviter d'écraser la cascade et permettre les overrides thématiques. */ #claude-summary { background: rgba(176, 144, 208, .07); padding: 14px 16px; border-radius: 8px; font-size: var(--fs-sm); border: 1px solid var(--border); margin-bottom: 12px; white-space: normal; color: var(--text); font-family: var(--font-gotchi); font-style: italic; font-weight: 400; } /* RÔLE : Contour de la courbe énergie/bonheur - même carte douce que le bilan, pour qu'elle ne "flotte" plus (la légende énergie/bonheur est dans le SVG). */ #mood-chart-wrap { background: rgba(176, 144, 208, .07); padding: 12px 14px 8px; border-radius: 8px; border: 1px solid var(--border); } #mood-chart-wrap:empty { display: none; } /* pas de boîte vide avant rendu */ /* RÔLE : Paragraphes du bilan IA - aération et lisibilité mobile POURQUOI : Le bilan est parsé en

côté JS (ui-ai.js) ; chaque paragraphe respire, la 1re phrase sert d'accroche visuelle */ .bilan-para { margin: 0 0 10px; line-height: 1.75; text-align: left; } .bilan-para:last-child { margin-bottom: 0; } .inp { width: 100%; padding: var(--sp-sm) var(--sp-md); border: 2px solid var(--border); border-radius: var(--r-md); /* RÔLE : Champs de saisie - police body pour lisibilité */ background: #fff; font-size: var(--fs-sm); font-family: var(--font-body); color: var(--text); outline: none; transition: .2s; } .inp:focus { border-color: var(--lilac); } /* RÔLE : Neutralise le rendu natif iOS sur input[type="time"] et