/* ═══ Organic — design-system tokens (source : projet Claude Design) ═══ */ @import url('https://fonts.googleapis.com/css2?family=Caprasimo:wght@400&family=Figtree:wght@400;600;700&display=swap'); :root { --color-bg: #f5ead8; --color-surface: #ebddc5; --color-text: #201e1d; --color-accent: #c67139; /* Variante a11y : ≥ 4.5:1 avec la crème — fonds porteurs de texte crème (boutons primaires, timer, badge). L'accent d'origine reste pour le décoratif (focus, pastilles, sélection). */ --color-accent-deep: #9c4f1d; --color-accent-2: #7a8a5e; --color-divider: color-mix(in srgb, #201e1d 16%, transparent); --color-neutral-100: #f9f4ed; --color-neutral-200: #eee7db; --color-neutral-300: #dcd3c4; --color-neutral-500: #a19786; --color-neutral-900: #2e2b25; --color-accent-100: #fff2eb; --color-accent-200: #ffe1d0; --color-accent-300: #ffc6a5; --color-accent-600: #b2622d; --color-accent-700: #8c491a; --color-accent-900: #402310; --color-accent-2-200: #e1eecc; --color-accent-2-900: #272e1b; --color-neutral-800: #474238; --font-heading: "Caprasimo", system-ui, sans-serif; --font-heading-weight: 400; --font-body: "Figtree", system-ui, sans-serif; --space-1: 4.4px; --space-2: 8.8px; --space-3: 13.2px; --space-4: 17.6px; --space-6: 26.4px; --space-8: 35.2px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent); } /* ═══ Contraste élevé (users.theme = 'hc', data-theme sur ) ═══ Noir et blanc, source : proposition THEME_HC du projet Claude Design. Les ombres deviennent des liserés blancs (une ombre noire est invisible sur fond noir) ; les widgets natifs passent en sombre (color-scheme). */ :root[data-theme="hc"] { color-scheme: dark; --color-bg: #000000; --color-surface: #141414; --color-text: #ffffff; --color-accent: #ffffff; --color-accent-deep: #ffffff; --color-accent-2: #d9d9d9; --color-divider: rgba(255, 255, 255, .42); --color-neutral-100: #0a0a0a; --color-neutral-200: #1c1c1c; --color-neutral-300: #000000; --color-neutral-500: #8a8a8a; --color-neutral-800: #e6e6e6; --color-neutral-900: #000000; --color-accent-100: #0d0d0d; --color-accent-200: #1f1f1f; --color-accent-300: #4d4d4d; --color-accent-600: #e0e0e0; --color-accent-700: #ffffff; --color-accent-900: #ffffff; --color-accent-2-200: #242424; --color-accent-2-900: #ffffff; --shadow-sm: 0 0 0 1px rgba(255, 255, 255, .28); --shadow-md: 0 0 0 1px rgba(255, 255, 255, .34); --shadow-lg: 0 0 0 1px rgba(255, 255, 255, .42); } /* Le toast s'inverse : son fond neutral-900 devient noir en HC. */ :root[data-theme="hc"] .toast { background: #ffffff; color: #000000; } /* Rail de l'interrupteur : neutral-300 = noir en HC, un liseré le dessine. */ :root[data-theme="hc"] .swt { box-shadow: inset 0 0 0 1px var(--color-divider); } /* Textes atténués des templates (inline) : estompe relevée, comme le design. !important : seule façon de surclasser un style inline. */ :root[data-theme="hc"] [style*="opacity:.7"] { opacity: .8 !important; } *, *::before, *::after { box-sizing: border-box; } html { height: 100%; } body { margin: 0; /* 100dvh, pas 100% : sur iOS (PWA), le viewport de layout s'arrête au-dessus de la zone du geste home — 100% laisserait une bande non peinte en bas de l'écran. */ height: 100dvh; /* iOS peint la zone sous le viewport (geste home) avec le fond du canvas : couleur de la tab bar pour qu'elle semble se prolonger jusqu'en bas. */ background: var(--color-surface); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; /* Le body ne scrolle jamais : le scroll vit dans .app-main. Sans ça, iOS (PWA) fait rebondir les éléments flottants avec la page. */ overflow: hidden; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } p { margin: 0 0 var(--space-3); } /* accent-700 pour le texte : l'accent d'origine plafonne à 3:1 sur crème. */ a { color: var(--color-accent-700); text-underline-offset: 3px; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } button { font-family: inherit; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; appearance: textfield; } .text-muted { color: color-mix(in srgb, var(--color-text) 70%, transparent); } /* — boutons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: 999px; } .btn svg { display: block; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .btn-primary { background: var(--color-accent-deep); color: var(--color-bg); } .btn-primary:hover { background: var(--color-accent-700); } .btn-primary:active { background: var(--color-accent-900); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-icon { width: 36px; height: 36px; padding: 0; } .btn-icon-sm { width: 32px; height: 32px; padding: 0; } .btn-block { width: 100%; margin-top: var(--space-2); } /* — formulaires — */ .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .input { width: 100%; min-height: 36px; padding: 6px 14px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 999px; } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } /* — cartes — */ .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: calc(var(--radius-lg) * 1.15); background: var(--color-surface); } .card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); } .card-body { margin: 0; font-size: 13px; opacity: 0.8; } /* — tags — */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px; } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } /* ═══ Couche applicative time-time ═══ */ /* La coquille couvre tout l'écran ; tab bar, timer et toast sont ancrés en absolu DANS la coquille — position:fixed est piégeux en PWA iOS. */ .viewport { height: 100%; display: flex; justify-content: center; background: var(--color-neutral-300); } .shell { width: 100%; max-width: 430px; height: 100%; background: var(--color-bg); display: flex; flex-direction: column; position: relative; overflow: hidden; /* Barre de statut translucide (PWA iOS) : le contenu passe dessous. */ padding-top: env(safe-area-inset-top, 0px); } .app-header { padding: var(--space-6) var(--space-4) var(--space-3); } .app-topline { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 4px; } /* Couleur d'équipe (hash de l'id, --team-color inline) : fond teinté à 25 % pour garantir ≥ 4.5:1 avec l'encre quelle que soit la teinte, pastille en couleur pleine pour l'identification. */ .team-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 9px 15px 9px 12px; border-radius: 999px; background: color-mix(in srgb, var(--team-color, var(--color-accent-2)) 25%, var(--color-bg)); color: var(--color-text); } /* Pastille couleur d'équipe (pill d'en-tête + sheet « Changer d'équipe »). */ .team-dot { width: 12px; height: 12px; border-radius: 999px; flex: none; } /* Pill-sélecteur (plusieurs équipes) : ouvre la sheet #equipes. */ a.team-pill { text-decoration: none; cursor: pointer; } a.team-pill:hover { filter: brightness(.96); } .app-topline .who { margin-left: auto; font-size: 12px; opacity: .7; } .app-header h1 { margin: 0; font-size: 29px; letter-spacing: -0.02em; } /* Dégagement bas = tab bar + bandeau timer + marge, safe area comprise. Seul conteneur scrollable de l'app (cf. body overflow hidden). */ .app-main { flex: 1; min-height: 0; padding: 0 var(--space-4) calc(140px + var(--tabbar-pad)); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* — timer — */ .timer-slot { position: absolute; left: 0; right: 0; margin: 0; padding: 0 var(--space-4); /* ≈ 23px d'écart au-dessus de la tab bar, quel que soit l'appareil. */ bottom: calc(72px + var(--tabbar-pad)); display: flex; justify-content: center; pointer-events: none; z-index: 4; } /* Bandeau pleine largeur (lancer / en cours / mesure en attente). */ .timer-banner { pointer-events: auto; width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); cursor: pointer; text-decoration: none; font: inherit; font-size: 15px; font-weight: 700; } .timer-banner .t-note { font-size: 13px; font-weight: 400; opacity: .85; } .timer-running { background: var(--color-accent-deep); color: var(--color-bg); } .timer-waiting { background: var(--color-accent-200); color: var(--color-accent-900); } .timer-start { background: var(--color-surface); color: var(--color-accent-700); transition: background .15s ease, color .15s ease; } .timer-start:hover { background: var(--color-accent-2); color: var(--color-bg); } /* Écran minuteur (onglet Ajouter pendant qu'un timer tourne). */ .chrono-card { background: var(--color-accent-200); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4); text-align: center; } .chrono-kicker { margin: 0 0 var(--space-2); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-900); opacity: .7; } .chrono-time { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 44px; line-height: 1.1; color: var(--color-accent-900); } .chrono-start { margin: var(--space-2) 0 0; font-size: 14px; color: var(--color-accent-900); opacity: .7; } .chrono-hint { margin: var(--space-4) 0 var(--space-6); font-size: 14px; opacity: .7; text-align: center; text-wrap: pretty; } /* Bandeau « X min mesurées » (étape 1). */ .measure-card { background: var(--color-accent-200); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); } .measure-card p { margin: 0; font-size: 16px; color: var(--color-accent-900); text-wrap: pretty; } .measure-card .warn { margin-top: var(--space-2); font-size: 13px; opacity: .75; } /* — tab bar — */ /* max(), pas une somme : quand le viewport s'arrête déjà au-dessus de la zone home (PWA iOS), ajouter la safe area par-dessus doublerait le vide. */ :root { --tabbar-pad: max(calc(var(--space-3) + 6px), env(safe-area-inset-bottom, 0px)); } /* Android (PWA) : la barre gestuelle recouvre le bas du viewport mais env(safe-area-inset-bottom) y vaut 0 — on gonfle le padding à la main. Ciblage : écran tactile ET pas iOS (-webkit-touch-callout n'existe que là). */ @media (hover: none) and (pointer: coarse) { @supports not (-webkit-touch-callout: none) { :root { --tabbar-pad: calc(var(--space-3) + 46px); } /* Même compensation pour les bottom sheets (:target), ancrées au bas du viewport : sans elle la barre gestuelle mange la dernière entrée. */ .sheet { padding-bottom: calc(var(--space-8) + 46px); } } } .tabbar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; padding: var(--space-2) var(--space-2) var(--tabbar-pad); background: var(--color-surface); border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border-radius: 999px; text-decoration: none; color: color-mix(in srgb, var(--color-text) 70%, transparent); font-size: 11px; } .tab[aria-current="page"] { color: var(--color-accent-700); font-weight: 700; } .tab-ico { position: relative; display: inline-flex; } .tab-badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--color-accent-deep); color: var(--color-bg); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--color-surface); } /* — équipes (paramètres) — */ .team-choice { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); border-radius: 999px; cursor: pointer; background: var(--color-surface); border: 1px solid transparent; color: var(--color-text); font: inherit; } .team-choice:hover { border-color: var(--color-accent-2); } .team-choice:disabled { opacity: .55; cursor: default; } .team-choice:disabled:hover { border-color: transparent; } .team-choice.current:disabled:hover { border-color: var(--color-accent-2); } .team-choice.current { background: var(--color-accent-2-200); border-color: var(--color-accent-2); color: var(--color-accent-2-900); } .invite-card { background: var(--color-accent-200); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-2); } .invite-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-2); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--color-accent-900); } .invite-kicker .idot { width: 8px; height: 8px; border-radius: 999px; background: var(--color-accent); } .invite-card p { margin: 0 0 var(--space-4); font-size: 15px; color: var(--color-accent-900); text-wrap: pretty; } .sent-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } .tab svg { display: block; } /* — login — */ .login { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: safe center; padding: var(--space-8) var(--space-6) 64px; /* La coquille ne scrolle plus : au clavier ouvert, c'est ici que ça défile. */ overflow-y: auto; } /* Logo, titre et tagline centrés — le formulaire reste pleine largeur. */ .login-logo { display: block; flex: none; margin: 0 auto var(--space-6); } .login h1 { font-size: 44px; margin: 0 0 var(--space-2); letter-spacing: -0.02em; text-align: center; } .login .tagline { font-size: 15px; opacity: .7; margin: 0 auto var(--space-8); max-width: 15em; text-align: center; } .form-error { font-size: 13px; color: var(--color-accent-700); margin: 0 0 var(--space-3); } /* — ajout étape 1 : liste de catégories — */ .step-hint { font-size: 13px; opacity: .7; margin: 0 0 var(--space-4); } .category-pick { display: grid; gap: var(--space-2); } .category-pick a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid transparent; border-radius: 999px; font-size: 16px; color: var(--color-text); text-decoration: none; } .category-pick a:hover { border-color: var(--color-accent); } .category-pick .tname { flex: 1; } .category-pick .tweek { font-size: 12px; opacity: .7; } .dot { border-radius: 999px; flex: none; display: inline-block; } .dot-14 { width: 14px; height: 14px; } .dot-12 { width: 12px; height: 12px; } .dot-16 { width: 16px; height: 16px; } /* — ajout étape 2 — */ .picked { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); } .picked .pname { font-size: 20px; font-family: var(--font-heading); } .mini-label { display: block; font-size: 12px; opacity: .7; margin: 0 0 var(--space-2); } .duration-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .stepper { display: flex; align-items: center; gap: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 999px; padding: 5px 6px; } .stepper-btn { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border: none; border-radius: 999px; background: var(--color-bg); color: var(--color-accent-700); cursor: pointer; text-decoration: none; } .stepper-btn:hover { background: var(--color-accent-200); } .stepper-btn:active { background: var(--color-accent-300); } .stepper .minutes-input { width: 92px; font-size: 32px; font-family: var(--font-heading); min-height: 44px; text-align: center; padding: 0; background: transparent; border-color: transparent; } .duration-row .unit { font-size: 15px; opacity: .7; } .duration-row .pretty { font-size: 13px; opacity: .7; } .presets { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); } .preset { padding: 9px 16px; border-radius: 999px; font-size: 14px; font-family: var(--font-heading); text-decoration: none; border: 1px solid var(--color-divider); color: var(--color-text); } .preset[aria-current="true"] { background: var(--color-accent-deep); color: var(--color-bg); border-color: transparent; } .date-row { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); } .date-row .input { flex: 1; min-height: 44px; text-align: center; } .date-label { font-size: 13px; opacity: .7; margin: 0 0 var(--space-6); } /* — stats — */ .legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-6); padding: 0; list-style: none; } .legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } .legend .dot { width: 10px; height: 10px; } .chart-section { margin-bottom: var(--space-8); } .chart-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); } .chart-head h2 { margin: 0; font-size: 21px; } .chart-nav { margin-left: auto; display: flex; gap: 6px; } .chart-range { font-size: 12px; opacity: .7; margin: 0 0 var(--space-4); } .chart-empty { font-size: 14px; opacity: .7; margin: 0; padding: var(--space-6) 0; } .cols { display: flex; align-items: flex-end; gap: var(--space-4); height: 190px; padding-top: var(--space-2); } .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; } .col .total { font-size: 12px; opacity: .7; } .col .user { font-size: 13px; font-weight: 600; } .col-bar { width: 100%; max-width: 64px; display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; background: var(--color-neutral-200); } /* 24px : cible tactile minimale (WCAG 2.5.8) — la hauteur cliquable prime légèrement sur la proportion visuelle pour les petits segments. */ .col-bar a { display: block; min-height: 24px; width: 100%; } /* — bottom sheet (zéro JS : :target ; .open = variante injectée en JS) — */ .sheet-wrap { position: absolute; inset: 0; display: none; z-index: 10; } .sheet-wrap:target, .sheet-wrap.open { display: flex; align-items: flex-end; justify-content: center; } /* Contenu long (flux « effectuée ») : la sheet scrolle elle-même. */ .sheet-scroll { max-height: 86%; overflow-y: auto; -webkit-overflow-scrolling: touch; } .sheet-scroll .done-title { margin-bottom: var(--space-4); } .sheet-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent); } .sheet { position: relative; width: 100%; max-width: 430px; background: var(--color-bg); border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); padding: var(--space-6) var(--space-4) var(--space-8); box-shadow: var(--shadow-lg); animation: tt-rise-sheet .18s ease-out; } .sheet-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } .sheet-head .pname { font-family: var(--font-heading); font-size: 20px; } .sheet-head .close { margin-left: auto; } .sheet-figures { display: flex; gap: var(--space-6); } .sheet-figures .k { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .08em; } .sheet-figures .v { font-size: 30px; font-family: var(--font-heading); } .sheet-note { font-size: 13px; opacity: .7; margin: var(--space-4) 0 0; } /* — mes temps — */ .times { list-style: none; margin: 0; padding: 0; } .times li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } .times .tinfo { flex: 1; min-width: 0; } .times .tcat { font-size: 15px; } .times .tdate { font-size: 12px; opacity: .7; } .times .tdur { font-size: 16px; font-family: var(--font-heading); } /* — catégories — */ .category-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } .category-row form.rename { flex: 1; } .category-row .rename .input { border-color: transparent; background: transparent; padding-left: 0; font-size: 15px; border-radius: 0; } .category-row .rename .input:hover { border-color: var(--color-divider); } .category-row.archived .rename .input { opacity: .45; } .category-add-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); } .category-add-row .input { flex: 1; min-height: 44px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* — todos — */ .todo-toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--space-4); } .todo-empty { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-4); text-align: center; } .todo-empty .te-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: 21px; } .todo-empty .te-body { margin: 0; font-size: 14px; opacity: .7; text-wrap: pretty; } .blk-head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); } .blk-head h2 { margin: 0; font-size: 15px; } .blk-empty { font-size: 14px; opacity: .7; margin: 0 0 var(--space-8); } .blk-toggle { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); text-decoration: none; } /* Interrupteur (rendu serveur : .on ; variante checkbox via .swt-check). */ .swt { width: 44px; height: 26px; flex: none; padding: 3px; border-radius: 999px; display: flex; align-items: center; background: var(--color-neutral-300); transition: background .15s ease; } .swt .knob { width: 20px; height: 20px; border-radius: 999px; background: var(--color-bg); box-shadow: var(--shadow-sm); transition: transform .15s ease; } .swt.on { background: var(--color-accent-700); } .swt.on .knob { transform: translateX(18px); } .todo-grid { display: grid; gap: var(--space-2); margin-bottom: var(--space-8); } .todo-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4); } .todo-card.other { background: var(--color-neutral-200); } .todo-card.forme { box-shadow: inset 0 0 0 1.5px var(--color-accent-2); } .todo-main { display: flex; align-items: center; gap: var(--space-3); } .todo-name { font-size: 16px; } .todo-meta { font-size: 13px; opacity: .7; } .todo-meta.late { opacity: 1; color: var(--color-accent-700); font-weight: 600; } /* Pastilles nominatives des assignés — « moi » en foncé. Couleurs ajustées vs le design (accent-2 plein ne fait que 3.1:1 avec la crème à 12 px). */ .asg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .asg-chip { height: 26px; border-radius: 999px; flex: none; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--color-accent-2-200); color: var(--color-accent-2-900); } .asg-chip.me { background: var(--color-accent-2-900); color: var(--color-bg); } .todo-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); } .todo-actions form { display: contents; } .todo-actions .btn { min-height: 44px; flex: 1; } .later { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); } .later summary { cursor: pointer; font-size: 15px; font-weight: 700; list-style: none; } .later-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } /* Chips radio/checkbox (création : catégorie, assignés). */ .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); position: relative; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; border: 1px solid var(--color-divider); } .chip input { position: absolute; width: 1px; height: 1px; opacity: 0; } .chip:has(input:checked) { border-color: transparent; background: var(--color-accent-2-200); color: var(--color-accent-2-900); } .chip:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; } .chip .cdot { width: 10px; height: 10px; border-radius: 999px; flex: none; } /* Flux « effectuée » : toggles-interrupteurs et sections estompées si off. */ .done-title { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-6); } .done-check { width: 30px; height: 30px; border-radius: 999px; flex: none; background: var(--color-accent-700); color: var(--color-bg); display: flex; align-items: center; justify-content: center; } .done-name { font-family: var(--font-heading); font-size: 21px; text-wrap: pretty; } .done-head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); } .done-head h2 { margin: 0; font-size: 15px; } .swt-check { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; position: relative; } .swt-check input { position: absolute; width: 1px; height: 1px; opacity: 0; } .swt-check:has(input:checked) .swt { background: var(--color-accent-700); } .swt-check:has(input:checked) .swt .knob { transform: translateX(18px); } .swt-check:has(input:focus-visible) .swt { outline: 2px solid var(--color-accent); outline-offset: 2px; } .done-sec .done-body { transition: opacity .15s ease; } .done-sec:has(.swt-check input:not(:checked)) .done-body { opacity: .35; } /* Sélecteur de thème (Réglages, section Affichage). */ .theme-choice { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3); border-radius: var(--radius-md); cursor: pointer; background: var(--color-surface); border: 1.5px solid transparent; color: var(--color-text); font: inherit; text-align: left; } .theme-choice:hover { border-color: var(--color-accent-2); } .theme-choice.current { background: var(--color-accent-2-200); border-color: var(--color-accent-2); color: var(--color-accent-2-900); } /* Échantillons en couleurs littérales : chaque pastille montre SON thème, quel que soit le thème actif. */ .theme-swatch { width: 34px; height: 34px; flex: none; border-radius: var(--radius-md); border: 1px solid var(--color-divider); } .swatch-organic { background: linear-gradient(135deg, #f5ead8 0 50%, #c67139 50% 100%); } .swatch-hc { background: linear-gradient(135deg, #000 0 50%, #fff 50% 100%); } /* Sélecteur de langue (Réglages). */ .lang-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); min-height: 40px; } .lang-pill.current { background: var(--color-accent-2-200); color: var(--color-accent-2-900); border-color: var(--color-accent-2); } /* Carte-lien « Mes saisies » (Réglages). */ a.times-link { flex-direction: row; align-items: center; text-decoration: none; color: var(--color-text); } /* — toast — */ /* En haut : le bas de l'écran est déjà occupé par la pill timer et la tab bar. */ .toast { position: absolute; top: calc(var(--space-4) + env(safe-area-inset-top, 0px)); left: var(--space-4); right: var(--space-4); background: var(--color-neutral-900); color: var(--color-neutral-100); padding: var(--space-3) var(--space-4); border-radius: 999px; font-size: 14px; text-align: center; box-shadow: var(--shadow-md); /* Apparition, puis fondu automatique après 5 s — zéro JS. */ animation: tt-drop .18s ease-out, tt-fade .4s ease-in 1.5s forwards; z-index: 5; } @keyframes tt-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } @keyframes tt-fade { to { opacity: 0; visibility: hidden; } } @keyframes tt-rise-sheet { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Motion réduit : pas de glissements, mais le toast doit quand même disparaître — on ne garde que le fondu différé. */ @media (prefers-reduced-motion: reduce) { .sheet { animation: none; } .toast { animation: tt-fade .4s ease-in 1.5s forwards; } }