/* ============================================================ Flying Fries — Interactive checklists module Self-contained styles for /checklists/* Reuses tokens from tokens.css. Adds dark variant scoped to the module only (data-cl-theme="dark" on ). ============================================================ */ /* --- Tokens module (light by default, swappable in dark) --- */ :root { --cl-bg: #fbf8f0; --cl-bg-warm: #faf9f6; --cl-bg-elevated: #ffffff; --cl-text: #252525; --cl-text-muted: #6b6b6b; --cl-text-faint: #9a9a9a; --cl-border: #e5e2dc; --cl-border-soft: #efece5; --cl-leader-dots: #c8c1ac; --cl-check-bg: #ffffff; --cl-check-bg-checked: var(--ff-gold); } html[data-cl-theme="dark"] { --cl-bg: #0e0e10; --cl-bg-warm: #18181b; --cl-bg-elevated: #1c1c20; --cl-text: #f0ede5; --cl-text-muted: #9a978d; --cl-text-faint: #65625a; --cl-border: #2a2a2e; --cl-border-soft: #1f1f23; --cl-leader-dots: #45433d; --cl-check-bg: #18181b; --cl-check-bg-checked: #d4a939; } /* Bascule body bg quand on est sur le module. `transparent` est obligatoire : le body opaque masquerait le fond ATC global (en z-index:-1). On bascule la couleur d'arriere-plan sur a la place. Le sticky footer (flex column + min-height:100vh) est applique globalement dans base.css. */ html:has(body.cl-page) { background: var(--cl-bg); transition: background 0.3s ease; } body.cl-page { background: transparent; color: var(--cl-text); transition: color 0.3s ease; } /* ============================================================ Theme toggle (sun/moon segmented control, top-right) ============================================================ */ .cl-theme-toggle { position: fixed; top: calc(var(--ff-header-height) + 12px); right: 16px; z-index: 50; display: inline-flex; align-items: center; padding: 3px; background: var(--cl-bg-warm); border: 1px solid var(--cl-border); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cl-theme-toggle button { appearance: none; border: none; background: transparent; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--cl-text-muted); cursor: pointer; transition: all 0.25s ease; } .cl-theme-toggle button.active { background: var(--cl-bg-elevated); color: var(--ff-gold); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } .cl-theme-toggle svg { width: 14px; height: 14px; } /* ============================================================ Container & typography ============================================================ */ .cl-container { max-width: 880px; margin: 0 auto; /* Le top compense la hauteur du header sticky pour que le back-link ne soit pas masqué */ padding: calc(var(--ff-header-height) + 24px) 24px 80px; } @media (max-width: 600px) { .cl-container { padding: calc(var(--ff-header-height) + 16px) 16px 60px; } } .cl-page-title { font-family: Futura, 'Trebuchet MS', sans-serif; font-weight: 700; font-size: 32px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cl-text); margin: 0; line-height: 1.1; } .cl-page-tagline { color: var(--ff-gold); font-family: Futura, 'Trebuchet MS', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 8px 0; } .cl-intro { color: var(--cl-text-muted); font-size: 13px; line-height: 1.6; margin-top: 10px; max-width: 540px; } .cl-empty { color: var(--cl-text-muted); margin-top: 32px; font-style: italic; } .cl-back-link { display: inline-flex; align-items: center; gap: 6px; background: none; padding: 6px 10px 6px 0; margin: 0 0 14px -2px; color: var(--cl-text-muted); text-decoration: none; font-family: Futura, 'Trebuchet MS', sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.18s ease, transform 0.18s ease; } .cl-back-link:hover { color: var(--ff-gold); transform: translateX(-2px); } @media (max-width: 600px) { .cl-page-title { font-size: 24px; } } /* ============================================================ Fade-in (page mount) ============================================================ */ .cl-fadein { opacity: 0; transform: translateY(14px); animation: clFadeIn 0.55s ease forwards; } @keyframes clFadeIn { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .cl-fadein { opacity: 1; transform: none; animation: none; } } /* ============================================================ Picker — aircraft tile grid ============================================================ */ .cl-aircraft-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; } @media (max-width: 600px) { .cl-aircraft-grid { grid-template-columns: 1fr; gap: 10px; } .cl-aircraft-card { aspect-ratio: 21 / 9 !important; } } .cl-aircraft-card { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; cursor: pointer; border: 1px solid var(--cl-border); background: var(--cl-bg-elevated); text-decoration: none; color: #fff; display: block; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .cl-aircraft-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); border-color: var(--ff-gold); } .cl-aircraft-card .cl-card-bg { position: absolute; inset: 0; z-index: 0; background: var(--cl-tile-gradient); /* fallback derivé du products.color */ background-size: cover; background-position: center; } .cl-aircraft-card .cl-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%); z-index: 1; } .cl-aircraft-card .cl-card-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px; z-index: 2; } .cl-aircraft-card .cl-card-tagline { font-family: Futura, 'Trebuchet MS', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ff-gold); margin: 0 0 6px 0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); } .cl-aircraft-card .cl-card-name { font-size: 26px; font-weight: 700; margin: 0; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); line-height: 1.05; letter-spacing: 1px; text-transform: uppercase; } .cl-aircraft-card .cl-card-arrow { position: absolute; bottom: 24px; right: 24px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: #fff; transition: all 0.25s ease; } .cl-aircraft-card .cl-card-arrow svg { /* Le triangle play est leger a droite (axe optique). Petit shift pour compenser et lui donner l'air centre dans le cercle. */ width: 13px; height: 13px; margin-left: 2px; } .cl-aircraft-card:hover .cl-card-arrow { background: var(--ff-gold); border-color: var(--ff-gold); transform: translateX(4px); } @media (max-width: 600px) { .cl-aircraft-card .cl-card-content { padding: 14px 16px; } .cl-aircraft-card .cl-card-tagline { font-size: 9px; margin-bottom: 4px; } .cl-aircraft-card .cl-card-name { font-size: 19px; line-height: 1; } .cl-aircraft-card .cl-card-arrow { bottom: 14px; right: 14px; width: 36px; height: 36px; } } /* ============================================================ Phase index — phase grid ============================================================ */ .cl-phase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; } @media (max-width: 600px) { .cl-phase-grid { grid-template-columns: 1fr; gap: 10px; } } .cl-phase-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--cl-bg-elevated); border: 1px solid var(--cl-border); border-radius: 12px; text-decoration: none; color: inherit; transition: all 0.25s ease; } .cl-phase-card:hover { border-color: var(--ff-gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); } .cl-phase-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: var(--cl-bg-warm); border: 1px solid var(--cl-border); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 12px; font-weight: 600; color: var(--cl-text-muted); letter-spacing: 0.5px; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .cl-phase-num-check { width: 16px; height: 16px; display: none; } /* Phase complète : badge passe en vert + check au lieu du numéro */ .cl-phase-card.cl-complete .cl-phase-num { background: var(--ff-green); border-color: var(--ff-green); color: #fff; } .cl-phase-card.cl-complete .cl-phase-num-text { display: none; } .cl-phase-card.cl-complete .cl-phase-num-check { display: block; } .cl-phase-info { flex: 1; min-width: 0; } .cl-phase-name { font-family: Futura, 'Trebuchet MS', sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--cl-text); margin: 0 0 4px 0; } .cl-phase-progress { display: flex; align-items: center; gap: 8px; } .cl-phase-progress-text { min-width: 36px; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 11px; color: var(--cl-text-muted); } .cl-phase-bar { flex: 1; max-width: 100px; height: 3px; background: var(--cl-border); border-radius: 999px; overflow: hidden; } .cl-phase-bar-fill { height: 100%; background: var(--ff-gold); border-radius: 999px; transition: width 0.4s ease; } .cl-phase-card.cl-complete .cl-phase-bar-fill { background: var(--ff-green); } /* Léger teint vert sur la card complète, pour la repérer en un coup d'œil */ .cl-phase-card.cl-complete { background: color-mix(in srgb, var(--ff-green) 6%, var(--cl-bg-elevated)); border-color: color-mix(in srgb, var(--ff-green) 30%, var(--cl-border)); } .cl-phase-arrow { flex-shrink: 0; color: var(--cl-text-faint); font-size: 16px; transition: all 0.25s ease; } .cl-phase-card:hover .cl-phase-arrow { color: var(--ff-gold); transform: translateX(3px); } /* --- Reset bar (en bas de l'index) --- */ .cl-reset-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding: 14px 18px; background: var(--cl-bg-warm); border: 1px solid var(--cl-border); border-radius: 10px; } .cl-reset-label { margin: 0; font-size: 12px; color: var(--cl-text-muted); } .cl-reset-label strong { color: var(--cl-text); font-weight: 700; } /* ============================================================ Phase detail — header + items ============================================================ */ .cl-phase-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; } .cl-phase-meta { font-family: Futura, 'Trebuchet MS', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ff-gold); margin: 0 0 6px 0; } .cl-phase-progress-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--cl-bg-warm); border: 1px solid var(--cl-border); border-radius: 999px; font-size: 12px; color: var(--cl-text-muted); font-family: 'JetBrains Mono', 'Courier New', monospace; } .cl-phase-progress-pill .cl-progress-done { color: var(--cl-text); font-weight: 700; } /* --- Item list --- */ .cl-item-list { display: flex; flex-direction: column; margin-top: 24px; border-top: 1px solid var(--cl-border-soft); } .cl-item { display: flex; flex-direction: column; padding: 18px 4px; border-bottom: 1px solid var(--cl-border-soft); cursor: pointer; transition: background 0.2s ease; user-select: none; outline: none; } .cl-item:hover { background: var(--cl-bg-warm); } .cl-item:focus-visible { background: var(--cl-bg-warm); box-shadow: inset 0 0 0 2px var(--ff-gold); } .cl-item-row { display: flex; align-items: center; gap: 10px; } .cl-checkbox { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--cl-border); background: var(--cl-check-bg); display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; margin-right: 4px; } .cl-checkbox svg { width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(0.5); transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .cl-item.checked .cl-checkbox { background: var(--cl-check-bg-checked); border-color: var(--cl-check-bg-checked); } .cl-item.checked .cl-checkbox svg { opacity: 1; transform: scale(1); } .cl-subject { font-family: Futura, 'Trebuchet MS', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.3px; color: var(--cl-text); text-transform: uppercase; flex-shrink: 0; } .cl-leader { flex: 1; border-bottom: 1.5px dotted var(--cl-leader-dots); margin: 0 4px; min-width: 24px; align-self: center; position: relative; top: 2px; } .cl-expectation { font-family: Futura, 'Trebuchet MS', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.5px; color: var(--ff-gold); text-transform: uppercase; text-align: right; flex-shrink: 0; max-width: 50%; } .cl-clue { margin: 6px 0 0 38px; font-size: 11.5px; color: var(--cl-text-muted); line-height: 1.5; } .cl-item.checked .cl-subject, .cl-item.checked .cl-expectation { color: var(--cl-text-faint); } .cl-item.checked .cl-subject { text-decoration: line-through; } .cl-item.checked .cl-clue { opacity: 0.55; } @media (max-width: 600px) { .cl-item-row { gap: 8px; } .cl-subject { flex: 1 1 auto; min-width: 0; white-space: normal; font-size: 13px; line-height: 1.25; } .cl-expectation { font-size: 13px; max-width: 45%; } .cl-leader { min-width: 12px; } .cl-clue { margin-left: 32px; } } /* --- Bulk action --- */ .cl-bulk-actions { display: flex; justify-content: center; margin-top: 18px; } .cl-bulk-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px dashed var(--cl-border); color: var(--cl-text-muted); font-family: Futura, 'Trebuchet MS', sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 11px 18px; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; } .cl-bulk-btn:hover { border-color: var(--ff-gold); border-style: solid; color: var(--ff-gold); background: rgba(194, 153, 30, 0.1); } .cl-bulk-hint { text-transform: none; letter-spacing: 0.02em; font-size: 11px; opacity: 0.7; font-style: italic; } /* --- Complete banner --- */ /* L'attribut HTML5 `hidden` doit toujours gagner sur display:flex */ .cl-complete-banner[hidden] { display: none !important; } .cl-complete-banner { margin-top: 22px; padding: 18px 22px; background: color-mix(in srgb, var(--ff-green) 10%, var(--cl-bg-warm)); border: 1px solid color-mix(in srgb, var(--ff-green) 30%, var(--cl-border)); border-left: 4px solid var(--ff-green); border-radius: 12px; display: flex; align-items: center; gap: 14px; } .cl-banner-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--ff-green); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cl-banner-icon svg { width: 18px; height: 18px; } .cl-banner-title { font-family: Futura, 'Trebuchet MS', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--ff-green); margin: 0 0 2px 0; } .cl-banner-sub { font-size: 12px; color: var(--cl-text-muted); margin: 0; } /* --- Phase nav (top + bottom) --- */ .cl-foot-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .cl-foot-nav-top { margin: 24px 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--cl-border-soft); } .cl-foot-nav-bottom { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--cl-border-soft); } .cl-nav-ghost { display: inline-block; min-width: 1px; flex: 0 0 auto; } .cl-btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: transparent; border: 1px solid var(--cl-border); border-radius: 8px; color: var(--cl-text); font-family: Futura, 'Trebuchet MS', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: all 0.2s ease; } .cl-btn-outline:hover { border-color: var(--ff-gold); color: var(--ff-gold); transform: translateY(-1px); } .cl-btn-primary { background: var(--ff-gold); border-color: var(--ff-gold); color: #fff; } .cl-btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(194, 153, 30, 0.3); }