/* ========================================================================== M&S Developer — feuille de style Famille M&S Design : crème, bleu nuit, bleu clair, olive. Titres en Fraunces, interface en Instrument Sans. Mobile d'abord ; barre latérale bleu nuit à partir de 960 px. ========================================================================== */ @font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-normal-300-700-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-400-700-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* Écritures manuscrites (tableau blanc, notes) : Caveat, Playwrite France Moderne (modèle d'écriture de l'école française) et Playpen Sans, SIL Open Font License */ @font-face { font-family: "Caveat"; src: url("../fonts/caveat-400-700-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Playwrite FR Moderne"; src: url("../fonts/playwrite-fr-moderne-100-400.woff2") format("woff2"); font-weight: 100 400; font-style: normal; font-display: swap; } @font-face { font-family: "Playpen Sans"; src: url("../fonts/playpen-sans-100-800-latin.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } /* Bibliothèque de polices du tableau blanc et des notes (Google Fonts, SIL Open Font License), chargées seulement quand elles servent */ @font-face { font-family: "Indie Flower"; src: url("../fonts/indie-flower.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Patrick Hand"; src: url("../fonts/patrick-hand.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Kalam"; src: url("../fonts/kalam.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Shadows Into Light"; src: url("../fonts/shadows-into-light.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Gloria Hallelujah"; src: url("../fonts/gloria-hallelujah.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Homemade Apple"; src: url("../fonts/homemade-apple.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Dancing Script"; src: url("../fonts/dancing-script.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Satisfy"; src: url("../fonts/satisfy.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Architects Daughter"; src: url("../fonts/architects-daughter.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Reenie Beanie"; src: url("../fonts/reenie-beanie.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Gochi Hand"; src: url("../fonts/gochi-hand.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Pacifico"; src: url("../fonts/pacifico.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Amatic SC"; src: url("../fonts/amatic-sc.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Permanent Marker"; src: url("../fonts/permanent-marker.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lobster"; src: url("../fonts/lobster.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Bebas Neue"; src: url("../fonts/bebas-neue.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("../fonts/lora.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: "Nunito"; src: url("../fonts/nunito.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Slab"; src: url("../fonts/roboto-slab.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("../fonts/lexend.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Space Mono"; src: url("../fonts/space-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { --bg: #f5f1e9; --bg-2: #ede7da; --card: #fffdf8; --card-2: #faf6ee; --ink: #131a2a; --ink-2: #394155; --muted: #676d7e; --line: rgba(19, 26, 42, .09); --line-2: rgba(19, 26, 42, .17); --navy: #0f1e3d; --navy-2: #182c57; --navy-3: #22396b; --on-navy: #f5f1e9; --on-navy-2: rgba(245, 241, 233, .7); --blue: #155eef; --blue-2: #0f49c9; --on-blue: #fff; --sky: #9dc2ff; --sky-2: #dde9ff; --sky-3: #eef4ff; --sky-ink: #0f3a8a; --olive: #616b33; --olive-2: #7a8545; --olive-3: #e8eadb; --olive-ink: #4b5326; --sand: #8f6420; --sand-3: #f4e8d2; --rose: #a8452c; --rose-3: #f7e2da; --grey-3: #ebe7df; --s-pos: #6b7a20; --s-oth: #8db5f5; --danger: #b42318; --shadow: 0 1px 2px rgba(15, 30, 61, .05), 0 12px 32px -20px rgba(15, 30, 61, .28); --shadow-lg: 0 2px 6px rgba(15, 30, 61, .06), 0 28px 60px -28px rgba(15, 30, 61, .45); --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r: 20px; --r-lg: 24px; --display: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(.22, 1, .36, 1); --tab-h: 62px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --pad: 16px; color-scheme: light; } :root[data-theme="dark"] { --bg: #0a1325; --bg-2: #0d182e; --card: #111c34; --card-2: #14223e; --ink: #eef0f5; --ink-2: #c6cddb; --muted: #8d98ae; --line: rgba(214, 224, 255, .08); --line-2: rgba(214, 224, 255, .16); --navy: #16294f; --navy-2: #1d3461; --navy-3: #284577; --blue: #5287ff; --blue-2: #79a1ff; --on-blue: #fff; --sky: #8db6ff; --sky-2: rgba(120, 162, 255, .17); --sky-3: rgba(120, 162, 255, .08); --sky-ink: #b9d1ff; --olive: #aab56e; --olive-2: #c0ca86; --olive-3: rgba(170, 181, 110, .16); --olive-ink: #cbd497; --sand: #e0b46a; --sand-3: rgba(224, 180, 106, .14); --rose: #f08e74; --rose-3: rgba(240, 142, 116, .14); --grey-3: rgba(214, 224, 255, .07); --s-pos: #8f9d47; --s-oth: #4f7fd6; --danger: #ff8a7a; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -22px rgba(0, 0, 0, .7); --shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 30px 60px -30px rgba(0, 0, 0, .8); color-scheme: dark; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15.5px/1.5 var(--sans); letter-spacing: -.003em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; overflow-x: clip; } h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; } ul, ol { padding: 0; list-style: none; } fieldset { border: 0; padding: 0; min-width: 0; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } button:disabled { cursor: default; opacity: .45; } svg { display: block; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; } ::selection { background: var(--sky-2); } b, strong { font-weight: 600; } .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .muted { color: var(--muted); } .muted-s { color: var(--muted); font-size: 12.5px; } .pad { padding: 4px 0 6px; } .center { text-align: center; display: block; margin-inline: auto; } .is-late { color: var(--rose) !important; } .skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--navy); color: var(--on-navy); padding: 8px 14px; border-radius: var(--r-sm); } .skip:focus { left: 8px; } /* ---------- Écran d'ouverture ---------- */ #splash { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--bg); transition: opacity .55s var(--ease), visibility .55s; } #splash.out { opacity: 0; visibility: hidden; } .splash-mark { width: 92px; height: 92px; } .sp-bg { fill: var(--navy); transform-origin: 50% 50%; animation: sp-bg .7s var(--ease) both; } .sp-amp { fill: var(--on-navy); fill-opacity: 0; stroke: var(--on-navy); stroke-width: 8; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sp-draw .9s .15s var(--ease) forwards, sp-fill .4s .75s ease forwards; } .sp-cur { fill: var(--sky); opacity: 0; animation: sp-cur .9s .95s steps(1) infinite; } .splash-name { font: 500 19px/1 var(--display); color: var(--ink); opacity: 0; transform: translateY(6px); animation: sp-up .6s .55s var(--ease) forwards; } .splash-name span { font-weight: 600; } @keyframes sp-bg { from { transform: scale(.82); opacity: 0; } } @keyframes sp-draw { to { stroke-dashoffset: 0; } } @keyframes sp-fill { to { fill-opacity: 1; stroke-width: 0; } } @keyframes sp-cur { 0% { opacity: 1; } 50% { opacity: 0; } } @keyframes sp-up { to { opacity: 1; transform: none; } } /* ---------- Logo ---------- */ .logo-mark { width: 34px; height: 34px; flex: none; } .logo-mark.sm { width: 28px; height: 28px; } .logo-mark.xl { width: 96px; height: 96px; } .lm-bg { fill: var(--navy); } .lm-amp { fill: var(--on-navy); } .lm-cur { fill: var(--sky); } :root[data-theme="dark"] .side .lm-bg { fill: var(--blue); } .logo-mark.draw .lm-amp { stroke: var(--on-navy); stroke-width: 8; stroke-dasharray: 4000; stroke-dashoffset: 4000; fill-opacity: 0; animation: lm-draw 1.4s .1s var(--ease) forwards, sp-fill .5s 1s ease forwards; } .logo-mark.draw .lm-cur { animation: sp-cur 1s 1.3s steps(1) infinite; opacity: 0; } @keyframes lm-draw { to { stroke-dashoffset: 0; } } /* ---------- Coquille ---------- */ .shell { min-height: 100dvh; } .main { width: 100%; max-width: 760px; margin: 0 auto; padding: calc(var(--safe-t) + 10px) var(--pad) calc(var(--tab-h) + var(--safe-b) + 32px); outline: none; } .side { display: none; } .tabbar { position: fixed; inset: auto 0 0 0; z-index: 40; height: calc(var(--tab-h) + var(--safe-b)); padding: 0 6px var(--safe-b); display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(245, 241, 233, .86); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); border-top: 1px solid var(--line); } :root[data-theme="dark"] .tabbar { background: rgba(10, 19, 37, .86); } .tab { display: grid; place-content: center; justify-items: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 500; position: relative; transition: color .2s; } .tab .ic { width: 23px; height: 23px; transition: transform .35s var(--ease); } .tab.is-on { color: var(--navy); } :root[data-theme="dark"] .tab.is-on { color: var(--sky); } .tab.is-on .ic { stroke-width: 2; transform: translateY(-1px); } .tab.is-on::before { content: ""; position: absolute; top: 0; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--blue); } body[data-mode="full"] .tabbar, body[data-mode="full"] .side { display: none; } body[data-mode="full"] .main { max-width: 640px; padding: 0; } @media (min-width: 960px) { body { font-size: 15px; } .shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); } .tabbar { display: none; } .side { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 22px 14px 16px; background: var(--navy); color: var(--on-navy-2); } :root[data-theme="dark"] .side { background: #0c1730; border-right: 1px solid var(--line); } .side-brand { display: flex; align-items: center; gap: 11px; padding: 2px 10px 22px; color: var(--on-navy); font: 500 17px/1 var(--display); } .side-brand b { font-weight: 600; } .side .lm-bg { fill: var(--on-navy); } .side .lm-amp { fill: var(--navy); } :root[data-theme="dark"] .side .lm-amp { fill: #fff; } .side-nav, .side-sub { display: grid; gap: 2px; } .side-sub { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(245, 241, 233, .1); } .side-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); font-weight: 500; transition: background .2s, color .2s; } .side-i:hover { background: rgba(245, 241, 233, .07); color: var(--on-navy); } .side-i.is-on { background: rgba(157, 194, 255, .16); color: #fff; } .side-i.is-on .ic { color: var(--sky); } .side-foot { margin-top: auto; display: grid; gap: 10px; padding-top: 18px; } .side-trial { display: grid; gap: 4px; padding: 14px; border-radius: var(--r-md); background: rgba(245, 241, 233, .06); border: 1px solid rgba(245, 241, 233, .1); color: var(--on-navy); position: relative; overflow: hidden; } .side-trial span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--on-navy-2); } .side-trial span .ic { width: 16px; height: 16px; color: var(--sky); } .side-trial b { font-weight: 600; font-size: 14px; } .side-trial i { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: rgba(245, 241, 233, .12); } .side-trial i::after { content: ""; display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--sky); } .side-me { display: flex; align-items: center; gap: 11px; padding: 8px 8px; border-radius: var(--r-sm); color: var(--on-navy); } .side-me:hover { background: rgba(245, 241, 233, .06); } .side-me span { display: grid; line-height: 1.25; } .side-me span span { font-size: 12px; color: var(--on-navy-2); } .side-me .avatar { background: var(--sky); color: var(--navy); } .main { max-width: 1200px; padding: 30px 40px 64px; } .m-top { display: none !important; } body[data-mode="full"] .main { padding: 24px 0; } body[data-mode="full"] .shell { display: block; } } /* ---------- Animations d'entrée ---------- */ .view-anim .rise, .view-anim .ph { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); } .view-anim .ph { animation-delay: 0ms; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } } :root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; } /* ---------- En-têtes de page ---------- */ .ph { padding: 12px 0 18px; } .ph-back { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 10px -6px; padding: 6px 8px 6px 2px; border-radius: var(--r-sm); color: var(--blue); font-weight: 500; font-size: 15px; } .ph-back .ic { width: 22px; height: 22px; } .ph-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; } .ph-txt { min-width: 0; } .ph-k { color: var(--muted); font-size: 13.5px; margin-bottom: 4px; } .ph-t { font: 500 31px/1.1 var(--display); letter-spacing: -.018em; color: var(--ink); text-wrap: balance; } .ph-a { display: flex; gap: 8px; flex: none; } @media (min-width: 960px) { .ph-t { font-size: 38px; } .ph { padding: 4px 0 24px; } } .m-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 2px; } .m-brand { display: flex; align-items: center; gap: 9px; font: 500 16px/1 var(--display); } .m-brand b { font-weight: 600; } .lead { color: var(--ink-2); font-size: 16px; max-width: 62ch; margin-bottom: 18px; text-wrap: pretty; } .sec-title { font: 600 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 28px 2px 12px; } /* ---------- Cartes ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); } .card + .card, .card + .btn, .card + .sec-title { margin-top: 14px; } .card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .card-h h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; } .card-h p { color: var(--muted); font-size: 13px; margin-top: 1px; } .link { color: var(--blue); font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; } .link .ic { width: 16px; height: 16px; } .link.danger { color: var(--rose); } .link.center { margin-top: 12px; } /* ---------- Boutons ---------- */ .btn { --h: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h); padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform .15s var(--ease), background .2s, box-shadow .2s, border-color .2s; border: 1px solid transparent; user-select: none; -webkit-user-select: none; } .btn .ic { width: 19px; height: 19px; } .btn:active:not(:disabled) { transform: scale(.97); } .btn-primary { background: var(--blue); color: var(--on-blue); box-shadow: 0 6px 18px -8px rgba(21, 94, 239, .7); } .btn-primary:hover:not(:disabled) { background: var(--blue-2); } .btn-ghost { background: var(--card); border-color: var(--line-2); color: var(--ink); } .btn-ghost:hover:not(:disabled) { border-color: var(--ink-2); } .btn-sky { background: var(--sky); color: var(--navy); } .btn-sky:hover { background: #b7d3ff; } .btn-soft { background: var(--sky-2); color: var(--sky-ink); } .btn-olive { background: var(--olive); color: #fff; } :root[data-theme="dark"] .btn-olive { color: #10160a; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger-ghost { background: transparent; color: var(--rose); border-color: color-mix(in srgb, var(--rose) 35%, transparent); } .btn-block { width: 100%; } .btn-lg { --h: 54px; font-size: 16px; } .btn-sm { --h: 36px; padding: 0 13px; font-size: 14px; } .icon-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); transition: background .2s, color .2s, transform .15s; flex: none; } .icon-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--line-2); } .icon-btn:active { transform: scale(.94); } .icon-btn.sm { width: 32px; height: 32px; border: 0; background: transparent; color: var(--muted); } .icon-btn.sm .ic { width: 17px; height: 17px; } .icon-btn.is-on { color: #c48a12; background: #fff4d6; border-color: #f0dca0; } .icon-btn.is-on .ic { fill: currentColor; } :root[data-theme="dark"] .icon-btn.is-on { background: rgba(240, 190, 80, .14); border-color: transparent; color: #f2c25a; } .act-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; } .act-row > .btn-primary:first-child { flex: 1 1 auto; } @media (min-width: 560px) { .act-row > .btn-primary:first-child { flex: 0 0 auto; } } .btn-list { display: grid; gap: 8px; } .btn-list .btn { justify-content: flex-start; } .btn-list .btn .badge { margin-left: auto; } /* ---------- Puces, badges, segments ---------- */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--grey-3); color: var(--ink-2); white-space: nowrap; } .chip .ic { width: 14px; height: 14px; } .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; display: inline-block; } .t-grey { background: var(--grey-3); color: var(--muted); } .t-sky { background: var(--sky-3); color: var(--sky-ink); } .t-blue { background: var(--sky-2); color: var(--blue); } .t-navy { background: var(--navy); color: var(--on-navy); } :root[data-theme="dark"] .t-navy { background: var(--navy-3); } .t-sand { background: var(--sand-3); color: var(--sand); } .t-olive { background: var(--olive-3); color: var(--olive-ink); } .t-rose { background: var(--rose-3); color: var(--rose); } .t-navy .dot { background: var(--sky); } .badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; background: var(--grey-3); color: var(--ink-2); flex: none; } .b-trial { background: var(--sky-2); color: var(--sky-ink); } .b-pro { background: var(--sky-2); color: var(--blue); } .b-premium { background: var(--olive-3); color: var(--olive-ink); } .tag { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--olive-3); color: var(--olive-ink); margin-left: 6px; vertical-align: 2px; } .chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; } .chip-btn .ic { width: 16px; height: 16px; } .chip-btn b { font-weight: 600; color: var(--muted); } .chip-btn:hover { border-color: var(--ink-2); } .chip-btn.is-on, .chip-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); } .chip-btn.is-on b { color: var(--on-navy-2); } :root[data-theme="dark"] .chip-btn.is-on { background: var(--sky); border-color: var(--sky); color: var(--navy); } .chip-btn .ic-lock { width: 13px; height: 13px; opacity: .6; } .chips-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pad) * -1) 16px; padding: 0 var(--pad) 2px; } .chips-row::-webkit-scrollbar { display: none; } .chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; } .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--bg-2); margin-bottom: 16px; } .seg-i { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 10px; border-radius: var(--r-sm); font-weight: 500; font-size: 14px; color: var(--muted); transition: background .25s var(--ease), color .2s, box-shadow .25s; cursor: pointer; } .seg-i .ic { width: 18px; height: 18px; } .seg-i.is-on, .seg-radio .seg-i:has(input:checked) { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 30, 61, .08), 0 4px 12px -6px rgba(15, 30, 61, .2); } .seg-i.is-on .ic { color: var(--blue); } .seg-sm .seg-i { min-height: 34px; font-size: 13.5px; } .seg-radio input { position: absolute; opacity: 0; pointer-events: none; } @media (max-width: 420px) { .seg-i span { font-size: 13px; } .seg-i .ic { display: none; } .seg-sm .seg-i .ic { display: none; } } /* ---------- Champs ---------- */ .inp { width: 100%; min-height: 46px; padding: 11px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 16px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; } textarea.inp { resize: vertical; line-height: 1.5; min-height: 90px; } select.inp { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676d7e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; } .inp:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent); } .inp::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); } .inp.mono { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 14px; } .field { display: grid; gap: 6px; } .field-l { font-size: 13px; font-weight: 600; color: var(--ink-2); } .field-h { font-size: 12.5px; color: var(--muted); line-height: 1.45; } .field-h a { color: var(--blue); } .form { display: grid; gap: 14px; } .form .card-h { margin-bottom: 0; } .form-2, .form-3 { display: grid; gap: 14px; } @media (min-width: 560px) { .form-2 { grid-template-columns: 1fr 1fr; } .form-3 { grid-template-columns: repeat(3, 1fr); } } .search { position: relative; margin-bottom: 12px; } .search .inp { padding-left: 44px; border-radius: 999px; background: var(--card); } .search-ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .check { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); cursor: pointer; } .check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); flex: none; } .fill-for { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; margin-bottom: 14px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); } .fill-for > .ic { color: var(--muted); } .fill-for > span { font-size: 13.5px; font-weight: 600; color: var(--ink-2); flex: none; } .fill-for .inp { min-height: 40px; border: 0; background-color: var(--bg-2); font-size: 15px; } .file-btn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px dashed var(--line-2); color: var(--ink-2); font-weight: 500; cursor: pointer; } .file-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; } /* ---------- Bandeaux ---------- */ .strip { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 14px; border-radius: var(--r-md); background: var(--sky-2); color: var(--sky-ink); font-size: 14px; } .strip .ic { width: 18px; height: 18px; flex: none; } .strip-a { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-weight: 600; white-space: nowrap; } .strip-a .ic { width: 16px; height: 16px; } .strip.is-end { background: var(--sand-3); color: var(--sand); } .strip.is-soft { background: var(--card); border: 1px solid var(--line); color: var(--ink-2); } .note-demo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; margin-bottom: 14px; border-radius: var(--r-md); background: var(--olive-3); color: var(--olive-ink); font-size: 13.5px; } .note-demo .ic { width: 17px; height: 17px; } .note-demo > span { flex: 1 1 180px; } .note-demo .link { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; margin-left: auto; } .cta-trial { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; background: linear-gradient(180deg, var(--card), var(--card-2)); } .cta-trial > div { flex: 1 1 240px; } .cta-trial h2 { font: 500 21px/1.2 var(--display); margin-bottom: 4px; } .cta-trial p { color: var(--muted); font-size: 14px; } /* ---------- Accueil ---------- */ .ph-home { padding-top: 18px; } .home-grid { display: grid; gap: 14px; } .home-grid > .card { margin: 0; } @media (min-width: 960px) { .home-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; } .hero { grid-column: span 5; } .kpis { grid-column: span 7; } .chart-card { grid-column: span 7; } .todo { grid-column: span 5; } .next { grid-column: span 5; } .funnel { grid-column: span 7; } .recent { grid-column: span 12; } } .hero { background: var(--navy); color: var(--on-navy); border-color: transparent; display: grid; gap: 18px; position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(157, 194, 255, .2), transparent); pointer-events: none; } .hero-top { display: flex; align-items: center; gap: 18px; } .hero-ring { position: relative; flex: none; } .hero-ring-v { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; } .hero-ring-v b { font-size: 28px; font-weight: 600; letter-spacing: -.02em; } .hero-ring-v span { font-size: 12px; color: var(--on-navy-2); } .hero-k { font-size: 12.5px; color: var(--sky); font-weight: 600; margin-bottom: 4px; } .hero h2 { font: 500 22px/1.15 var(--display); margin-bottom: 6px; } .hero-txt p:last-child { color: var(--on-navy-2); font-size: 14px; } .hero-goals { display: grid; gap: 12px; padding-top: 4px; border-top: 1px solid rgba(245, 241, 233, .12); padding-top: 16px; } .hero-goals p { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--on-navy-2); margin-bottom: 6px; } .hero-goals b { color: var(--on-navy); font-weight: 600; } .ring-bg { fill: none; stroke: var(--sky-2); } .ring-fg { fill: none; stroke: var(--blue); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); } .view-anim .ring-fg { animation: ring-in 1.3s .2s var(--ease) both; } @keyframes ring-in { from { stroke-dashoffset: var(--c); } } .ring.on-navy .ring-bg { stroke: rgba(245, 241, 233, .12); } .ring.on-navy .ring-fg { stroke: var(--sky); } .bar { display: block; height: 6px; border-radius: 6px; background: var(--sky-2); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: inherit; background: var(--blue); transition: width 1s var(--ease); } .bar.olive i { background: var(--olive-2); } .bar.on-navy { background: rgba(245, 241, 233, .12); } .bar.on-navy i { background: var(--sky); } .bar.on-navy.olive i { background: #c3cd8b; } .view-anim .bar i { animation: bar-in 1.1s .25s var(--ease) both; } @keyframes bar-in { from { width: 0; } } .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .kpis-5 { margin-bottom: 14px; } @media (min-width: 960px) { .kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .kpi { display: grid; align-content: start; gap: 2px; padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .2s var(--ease), border-color .2s; min-width: 0; } a.kpi:hover { border-color: var(--line-2); transform: translateY(-1px); } .kpi-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); margin-bottom: 10px; } .kpi-ic .ic { width: 19px; height: 19px; } .kpi-l { font-size: 13px; color: var(--muted); } .kpi-v { font-size: 26px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; overflow-wrap: anywhere; } .kpi-d { font-size: 12.5px; color: var(--muted); } @media (min-width: 960px) { .kpis:not(.kpis-5) .kpi-v { font-size: 30px; } } /* Graphique */ .chart-card .card-h { margin-bottom: 8px; } .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; } .legend li { display: inline-flex; align-items: center; gap: 7px; } .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .s-pos { background: var(--s-pos); fill: var(--s-pos); } .s-oth { background: var(--s-oth); fill: var(--s-oth); } .chart { position: relative; min-height: 190px; touch-action: pan-y; } .chart svg { overflow: visible; } .ch-grid line { stroke: var(--line); stroke-width: 1; } .ch-tick, .ch-x { font-size: 11.5px; fill: var(--muted); font-variant-numeric: tabular-nums; } .ch-x.is-hl { fill: var(--ink); font-weight: 600; } .ch-val { font-size: 12px; font-weight: 600; fill: var(--ink); } .ch-hit { fill: transparent; } .ch-col { outline: none; cursor: default; } .ch-col .ch-seg { transition: opacity .2s; } .ch-col.is-hover .ch-seg, .ch-col:focus-visible .ch-seg { opacity: .78; } .ch-col:focus-visible .ch-hit { fill: var(--sky-3); } .ch-tip { position: absolute; top: 0; z-index: 3; min-width: 150px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; } .ch-tip.on { opacity: 1; transform: none; } .ch-tip-h { font-size: 12px; color: var(--muted); margin-bottom: 4px; } .ch-tip-r { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); } .ch-tip-r b { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 2ch; } .ch-key { width: 12px; height: 3px; border-radius: 2px; } .ch-tip-t { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); padding-left: 20px; } .ch-table, .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .ch-table th, .ch-table td, .tbl th, .tbl td { padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } .ch-table th, .tbl th { font-size: 12px; color: var(--muted); font-weight: 600; } .tbl-wrap { overflow-x: auto; margin: 0 -4px; } .tbl td { vertical-align: top; } /* Tâches */ .tasks { display: grid; } .task { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); } .task:first-child { border-top: 0; padding-top: 2px; } .tick { width: 24px; height: 24px; border-radius: 50%; border: 1.7px solid var(--line-2); flex: none; position: relative; margin-top: 1px; transition: background .2s, border-color .2s; } .tick::after { content: ""; position: absolute; left: 7.5px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--ease); } .tick:hover { border-color: var(--olive-2); } .tick.is-done { background: var(--olive-2); border-color: var(--olive-2); } .tick.is-done::after { transform: rotate(45deg) scale(1); } .task-b { flex: 1; min-width: 0; } .task-t { font-weight: 500; } .task.is-done .task-t { text-decoration: line-through; color: var(--muted); } .task-m { font-size: 13px; color: var(--muted); margin-top: 1px; } .task-m a { color: var(--blue); } .kind { display: inline-flex; align-items: center; gap: 4px; } .kind .ic { width: 14px; height: 14px; } /* Script conseillé, conseil */ .script-row { display: flex; align-items: center; gap: 13px; padding: 12px; border-radius: var(--r-md); background: var(--bg-2); transition: background .2s; } .script-row:hover { background: var(--sky-3); } .script-row-b { display: grid; flex: 1; min-width: 0; } .script-row-b span { font-size: 13px; color: var(--muted); } .chev { color: var(--muted); width: 18px; height: 18px; margin-left: auto; } .sec-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--sky-2); color: var(--navy); flex: none; } :root[data-theme="dark"] .sec-ic { color: var(--sky); } .sec-ic .ic { width: 22px; height: 22px; stroke-width: 1.6; } .sec-ic.lg { width: 50px; height: 50px; border-radius: var(--r-md); } .sec-ic.t-olive { background: var(--olive-3); color: var(--olive-ink); } .tip { margin-top: 14px; padding: 13px 15px; border-radius: var(--r-md); background: var(--olive-3); color: var(--ink-2); font-size: 14.5px; } .tip-k { font-size: 12px; font-weight: 600; color: var(--olive-ink); margin-bottom: 3px; } /* Entonnoir */ .fun { display: grid; gap: 11px; } .fun li { display: grid; grid-template-columns: minmax(108px, 30%) 1fr 44px 40px; align-items: center; gap: 10px; font-size: 13.5px; } .fun-l { color: var(--ink-2); } .fun-b { height: 14px; border-radius: 0 4px 4px 0; background: transparent; position: relative; } .fun-b i { display: block; height: 14px; border-radius: 0 4px 4px 0; background: var(--blue); min-width: 0; } .fun-v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .fun-p { text-align: right; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .view-anim .fun-b i { animation: bar-in 1s .3s var(--ease) both; } /* Listes */ .rows { display: grid; } .rows.card { padding: 6px 16px; } .row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); width: 100%; text-align: left; } .rows li:first-child .row, .menu li:first-child .row { border-top: 0; } .row-b { display: grid; flex: 1; min-width: 0; line-height: 1.3; } .row-b b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-b span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-e { display: grid; justify-items: end; gap: 3px; } .avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--navy); color: var(--on-navy); font-weight: 600; font-size: 14px; letter-spacing: .02em; flex: none; } :root[data-theme="dark"] .avatar { background: var(--navy-3); } .avatar.lg { width: 50px; height: 50px; border-radius: var(--r-md); font-size: 16px; } .avatar.xl { width: 62px; height: 62px; border-radius: var(--r); font-size: 20px; font-family: var(--display); font-weight: 500; } .m-avatar .avatar { width: 36px; height: 36px; border-radius: 50%; font-size: 13px; background: var(--sky-2); color: var(--navy); } .empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 40px 16px; } .empty-ic { width: 60px; height: 60px; display: grid; place-items: center; border-radius: var(--r); background: var(--sky-2); color: var(--blue); margin-bottom: 8px; } .empty-ic .ic { width: 28px; height: 28px; } .empty-t { font: 500 21px/1.2 var(--display); } .empty-p { color: var(--muted); max-width: 36ch; } .end-a { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; } /* ---------- Scripts ---------- */ .sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 560px) { .sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 960px) { .sec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sec-grid-sm { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .sec-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 15px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .2s var(--ease), border-color .2s; min-height: 108px; position: relative; } .sec-tile:hover { transform: translateY(-2px); border-color: var(--line-2); } .sec-tile:active { transform: scale(.98); } .sec-n { font-weight: 600; font-size: 14.5px; line-height: 1.25; } .sec-tile .tag { position: absolute; top: 12px; right: 12px; } .wide-tile { display: flex; align-items: center; gap: 14px; margin: 0 0 4px; padding: 16px; transition: border-color .2s, transform .2s var(--ease); } .wide-tile:hover { border-color: var(--line-2); } .wide-b { display: grid; flex: 1; min-width: 0; } .wide-b span { font-size: 13.5px; color: var(--muted); } .sec-grid + .muted, .sec-grid ~ .wide-tile { margin-top: 14px; } .hscroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 4px; } .mini-card { flex: 0 0 190px; display: grid; gap: 4px; padding: 14px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); } .mini-card .ic { color: var(--blue); margin-bottom: 6px; } .mini-card span { font-size: 12.5px; color: var(--muted); } .info { display: grid; gap: 12px; } .info-r { display: flex; gap: 12px; align-items: flex-start; } .info-r p { display: grid; font-size: 14.5px; color: var(--ink-2); } .info-r b { font-size: 12.5px; color: var(--muted); font-weight: 600; } .info-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--bg-2); color: var(--ink-2); flex: none; } .info-ic .ic { width: 17px; height: 17px; } .info .tip { margin-top: 2px; } .ch-list { display: grid; gap: 8px; } .ch-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .2s var(--ease); } .ch-row:hover { border-color: var(--line-2); transform: translateX(2px); } .ch-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--on-navy); flex: none; } :root[data-theme="dark"] .ch-ic { background: var(--navy-3); } .ch-ic .ic { width: 19px; height: 19px; } .ch-b { display: grid; flex: 1; min-width: 0; } .ch-b span { font-size: 13px; color: var(--muted); } .ch-m { flex: none; } .ic-lock { width: 16px; height: 16px; color: var(--muted); } .meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; } .meta-row .chip { height: auto; min-height: 28px; white-space: normal; padding: 4px 11px; } .timing { padding: 0; margin-bottom: 16px; } .timing summary { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; list-style: none; font-size: 14px; color: var(--ink-2); } .timing summary::-webkit-details-marker { display: none; } .timing summary b { color: var(--ink); margin-right: 4px; } .timing summary > .ic:first-child { color: var(--blue); } .timing[open] summary .chev { transform: rotate(180deg); } .timing p { padding: 0 16px 12px 46px; font-size: 14px; color: var(--ink-2); } .steps { display: grid; gap: 0; counter-reset: step; } .step { position: relative; padding: 0 0 22px 26px; } .step::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: -2px; width: 1.5px; background: var(--line-2); } .step:last-child::before { display: none; } .step-t { display: flex; align-items: center; gap: 8px; font: 600 16.5px/1.3 var(--sans); margin-bottom: 10px; } .step-dot { position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2.5px solid var(--blue); } .step.is-opt .step-dot { border-color: var(--line-2); } .step.is-opt .step-t { color: var(--ink-2); } .step-b { display: grid; gap: 8px; } .ln { position: relative; padding: 12px 14px; border-radius: var(--r-md); font-size: 16px; line-height: 1.55; } .ln p { text-wrap: pretty; } .ln-w { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; } .ln-v { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); } .ln-v .ln-w { color: var(--blue); } .ln-p { background: transparent; border: 1px dashed var(--line-2); color: var(--ink-2); font-style: italic; margin-left: 22px; } .ln-p .ln-w { color: var(--muted); font-style: normal; } .ln-n { display: flex; gap: 8px; padding: 2px 4px; font-size: 14px; color: var(--muted); } .ln-n .ic { width: 15px; height: 15px; margin-top: 3px; color: var(--olive-2); } .ln-m, .ln-o { display: flex; align-items: flex-start; gap: 8px; background: var(--sky-3); border: 1px solid color-mix(in srgb, var(--blue) 14%, transparent); padding-right: 6px; } .ln-m p, .ln-o p { flex: 1; } .ln-o .ln-w { color: var(--sky-ink); margin: 3px 4px 0 0; } .ln-o { align-items: center; font-weight: 500; } mark.v { background: var(--sky-2); color: var(--sky-ink); padding: 0 4px; border-radius: 5px; font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; } mark.v-empty { background: transparent; color: var(--blue); border: 1px dashed color-mix(in srgb, var(--blue) 50%, transparent); font-weight: 500; font-size: .92em; } .step-tip { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--olive-ink); padding: 2px 4px; } .step-tip .ic { width: 15px; height: 15px; margin-top: 3px; flex: none; } .objs { display: grid; gap: 8px; margin-bottom: 18px; } .obj { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); } .obj summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 600; font-size: 15px; } .obj summary::-webkit-details-marker { display: none; } .obj summary .chev { transition: transform .3s var(--ease); flex: none; } .obj[open] summary .chev { transform: rotate(180deg); } .obj p { padding: 0 16px 15px; color: var(--ink-2); font-size: 15px; } /* Verrou */ .paywall { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 32px 22px; margin: 6px 0 18px; border-radius: var(--r-lg); background: var(--navy); color: var(--on-navy); position: relative; overflow: hidden; } .paywall::before { content: ""; position: absolute; inset: auto -80px -120px auto; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(157, 194, 255, .18), transparent); } .paywall-ic { width: 54px; height: 54px; display: grid; place-items: center; border-radius: var(--r-md); background: rgba(157, 194, 255, .16); color: var(--sky); } .paywall-ic .ic { width: 26px; height: 26px; } .paywall h2 { font: 500 23px/1.2 var(--display); max-width: 22ch; } .paywall p { color: var(--on-navy-2); max-width: 44ch; font-size: 14.5px; } .paywall-a { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; } .paywall .btn-ghost { background: transparent; color: var(--on-navy); border-color: rgba(245, 241, 233, .28); } .paywall .btn-primary { background: var(--sky); color: var(--navy); box-shadow: none; } .paywall-n { font-size: 12.5px !important; } .paywall.is-compact { padding: 26px 20px; } .ghost-board { display: flex; gap: 12px; opacity: .45; filter: blur(1.5px); pointer-events: none; overflow: hidden; margin-top: 4px; } .ghost-board .kcol { flex: 0 0 220px; } .ghost-board .kcard { height: 74px; } /* ---------- CRM ---------- */ .crm-bar { display: grid; gap: 10px; margin-bottom: 4px; } .crm-bar .seg { margin-bottom: 12px; } @media (min-width: 720px) { .crm-bar { grid-template-columns: 1fr 260px; align-items: start; } .crm-bar .search { margin: 0; } } .board { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--pad) * -1); padding: 4px var(--pad) 14px; scrollbar-width: thin; align-items: flex-start; } @media (min-width: 960px) { .board { margin: 0 -40px; padding: 4px 40px 16px; scroll-padding: 40px; } } .kcol { flex: 0 0 min(80vw, 272px); scroll-snap-align: start; display: grid; gap: 8px; padding: 10px; border-radius: var(--r); background: var(--bg-2); transition: background .2s, box-shadow .2s; } .kcol.is-over { background: var(--sky-2); box-shadow: inset 0 0 0 2px var(--blue); } .kcol-h { display: flex; align-items: center; gap: 8px; padding: 4px 6px 6px; font-weight: 600; font-size: 14px; } .kcol-h .dot { width: 9px; height: 9px; background: currentColor; } .kcol-h .dot.t-grey { color: var(--muted); } .kcol-h .dot.t-sky { color: var(--sky); } .kcol-h .dot.t-blue { color: var(--blue); } .kcol-h .dot.t-navy { color: var(--navy); } :root[data-theme="dark"] .kcol-h .dot.t-navy { color: #c9d6f5; } .kcol-h .dot.t-sand { color: var(--sand); } .kcol-h .dot.t-olive { color: var(--olive-2); } .kcol-h .dot.t-rose { color: var(--rose); } .kcol-h b { font-weight: 600; color: var(--muted); font-size: 13px; } .kcol-sum { margin-left: auto; font-size: 12.5px; color: var(--muted); font-weight: 500; } .kcol-b { display: grid; gap: 8px; min-height: 60px; } .kcol-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 18px 8px; border: 1.5px dashed var(--line-2); border-radius: var(--r-md); } .kcard { display: grid; gap: 4px; padding: 13px 14px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15, 30, 61, .05); transition: transform .2s var(--ease), box-shadow .2s, opacity .2s; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: grab; } .kcard:hover { box-shadow: var(--shadow); } .kcard-t { font-weight: 600; line-height: 1.25; } .kcard-s { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } .kcard-s .ic { width: 14px; height: 14px; } .kcard-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 13px; } .kcard-n { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); background: var(--bg-2); padding: 2px 8px; border-radius: 999px; } .kcard-n .ic { width: 12px; height: 12px; } .kcard.is-dragging { opacity: .35; } .kcard-ghost { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; box-shadow: var(--shadow-lg); cursor: grabbing; } body.is-dragging, body.is-dragging * { cursor: grabbing !important; } .hint { font-size: 12.5px; color: var(--muted); text-align: center; } .stage-pick { display: grid; gap: 6px; } .stage-opt { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-md); background: var(--bg-2); font-weight: 500; text-align: left; } .stage-opt .dot { width: 10px; height: 10px; } .stage-opt .ic { margin-left: auto; color: var(--blue); } .stage-opt.is-on { background: var(--sky-2); } .stage-opt .dot.t-grey { color: var(--muted); } .stage-opt .dot.t-sky { color: var(--sky); } .stage-opt .dot.t-blue { color: var(--blue); } .stage-opt .dot.t-navy { color: var(--navy); } .stage-opt .dot.t-sand { color: var(--sand); } .stage-opt .dot.t-olive { color: var(--olive-2); } .stage-opt .dot.t-rose { color: var(--rose); } .stage-opt .dot, .kcol-h .dot { background: currentColor !important; } /* Fiche */ .fiche-h { display: flex; align-items: center; gap: 14px; margin: -8px 0 16px; } .fiche-h > div { flex: 1; min-width: 0; } .fiche-h .ph-t { font-size: 27px; overflow-wrap: anywhere; } .fiche-s { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 14px; margin-top: 3px; } .fiche-s .ic { width: 16px; height: 16px; } .fiche-s .tag { margin-left: 0; } .card .act-row .btn { flex: 1 1 0; padding: 0 12px; } .stage-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pad) * -1) 14px; padding: 2px var(--pad); } .stage-row::-webkit-scrollbar { display: none; } .stage-b { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 999px; font-size: 13.5px; font-weight: 500; white-space: nowrap; background: var(--card); border: 1px solid var(--line); color: var(--muted); transition: all .2s; } .stage-b .dot { opacity: .9; } .stage-b.t-grey .dot { background: var(--muted); } .stage-b.t-sky .dot { background: var(--sky); } .stage-b.t-blue .dot { background: var(--blue); } .stage-b.t-navy .dot { background: var(--navy); } .stage-b.t-sand .dot { background: var(--sand); } .stage-b.t-olive .dot { background: var(--olive-2); } .stage-b.t-rose .dot { background: var(--rose); } .stage-b:not(.is-on) { background: var(--card); color: var(--muted); } .stage-b.is-on { border-color: transparent; color: var(--ink); font-weight: 600; } .stage-b.is-on.t-grey { background: var(--grey-3); } .stage-b.is-on.t-sky { background: var(--sky-3); color: var(--sky-ink); } .stage-b.is-on.t-blue { background: var(--sky-2); color: var(--blue); } .stage-b.is-on.t-navy { background: var(--navy); color: var(--on-navy); } .stage-b.is-on.t-navy .dot { background: var(--sky); } .stage-b.is-on.t-sand { background: var(--sand-3); color: var(--sand); } .stage-b.is-on.t-olive { background: var(--olive-3); color: var(--olive-ink); } .stage-b.is-on.t-rose { background: var(--rose-3); color: var(--rose); } .quick-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; margin-bottom: 16px; } .qa { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--ink-2); transition: transform .15s, border-color .2s; } .qa .ic { width: 21px; height: 21px; color: var(--blue); } .qa:active { transform: scale(.96); } .qa.is-off { opacity: .5; } .fiche-grid { display: grid; gap: 14px; } .fiche-col { display: grid; gap: 14px; align-content: start; } .fiche-col .card + .card { margin: 0; } @media (min-width: 960px) { .fiche-grid { grid-template-columns: 1.25fr 1fr; gap: 18px; } } .dl { display: grid; } .dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; } .dl > div:first-child { border-top: 0; padding-top: 0; } .dl dt { color: var(--muted); flex: none; } .dl dd { text-align: right; overflow-wrap: anywhere; font-weight: 500; } .notes { min-height: 120px; } .tl { display: grid; } .tl-i { display: flex; gap: 12px; padding: 10px 0; position: relative; } .tl-i:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 44px; bottom: -4px; width: 1.5px; background: var(--line); } .tl-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); flex: none; } .tl-ic .ic { width: 15px; height: 15px; } .tl-b { flex: 1; min-width: 0; display: grid; gap: 3px; } .tl-t { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .tl-t .chip { height: 22px; font-size: 11.5px; } .tl-n { font-size: 14px; color: var(--ink-2); white-space: pre-line; } .tl-d { font-size: 12px; color: var(--muted); } .audit-mini { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; } .audit-mini i { height: 8px; border-radius: 3px; background: var(--grey-3); } .audit-mini i.on { background: var(--olive-2); } /* ---------- Mode appel ---------- */ .call { min-height: 100dvh; display: flex; flex-direction: column; gap: 12px; padding: calc(var(--safe-t) + 10px) var(--pad) calc(var(--safe-b) + 16px); background: var(--bg); } .call-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 14.5px; } .call-timer { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--blue); background: var(--sky-2); padding: 6px 11px; border-radius: 999px; min-width: 64px; text-align: center; } .call-p { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 16px; border-radius: var(--r); background: var(--navy); color: var(--on-navy); } .call-p .avatar { background: var(--sky); color: var(--navy); } .call-p-b { flex: 1; min-width: 160px; } .call-p h1 { font: 500 22px/1.15 var(--display); } .call-p-b > p { font-size: 13.5px; color: var(--on-navy-2); margin-top: 2px; } .call-p-n { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--sky); margin: 6px 10px 0 0; } .call-p-n .ic { width: 14px; height: 14px; } .call-p.is-practice { padding: 18px; } .call-dial { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px; border-radius: 999px; background: #34a853; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; width: 100%; justify-content: center; } .call-dial.is-demo { background: rgba(245, 241, 233, .14); } .call-dial.is-off { background: rgba(245, 241, 233, .1); color: var(--on-navy); } @media (min-width: 560px) { .call-dial { width: auto; } } .call-steps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 2px var(--pad); } .call-steps::-webkit-scrollbar { display: none; } .call-pill { flex: none; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); background: var(--card); border: 1px solid var(--line); } .call-pill.is-past { color: var(--ink-2); } .call-pill.is-on { background: var(--blue); border-color: var(--blue); color: #fff; } .call-card { flex: 1; padding: 20px 18px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; align-content: start; gap: 12px; } .call-k { font-size: 12.5px; color: var(--muted); font-weight: 500; } .call-card h2 { font: 500 25px/1.15 var(--display); } .call-lines { display: grid; gap: 10px; } .call-lines .ln { font-size: 18px; line-height: 1.55; } .call-lines .ln-v { box-shadow: none; background: var(--card-2); } .call-nav { display: grid; grid-template-columns: 56px 1fr 56px; gap: 10px; position: sticky; bottom: calc(var(--safe-b) + 10px); z-index: 5; padding: 8px; margin: 0 -8px; border-radius: var(--r); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .call-nav .btn { padding: 0; } .call-out { display: grid; gap: 10px; padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); } .call-note { min-height: 42px; font-size: 15px; } .out-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .out-grid .out:last-child { grid-column: 1 / -1; } .out { min-height: 48px; padding: 6px 10px; border-radius: var(--r-md); font-weight: 600; font-size: 14.5px; border: 1px solid transparent; transition: transform .15s; } .out:active { transform: scale(.97); } .out-grey { background: var(--grey-3); color: var(--ink-2); } .out-sky { background: var(--sky-3); color: var(--sky-ink); border-color: var(--sky-2); } .out-rose { background: var(--rose-3); color: var(--rose); } .out-blue { background: var(--sky-2); color: var(--blue); } .out-olive { background: var(--olive); color: #fff; } :root[data-theme="dark"] .out-olive { color: #10160a; } @media (min-width: 560px) { .out-grid { grid-template-columns: repeat(5, 1fr); } .out-grid .out:last-child { grid-column: auto; } } .call-end { justify-content: flex-start; } .end-b { display: grid; gap: 12px; padding: 30px 6px; text-align: center; justify-items: center; } .end-b h1 { font: 500 30px/1.15 var(--display); } .end-b > p { color: var(--muted); max-width: 40ch; } .end-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; width: 100%; margin-top: 8px; } .end-stats li { display: grid; padding: 14px 8px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); } .end-stats b { font-size: 26px; font-weight: 600; } .end-stats span { font-size: 12.5px; color: var(--muted); } /* ---------- Feuilles (dialogues) ---------- */ dialog.sheet { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; } dialog.sheet[open] { display: flex; align-items: flex-end; justify-content: center; } dialog.sheet::backdrop { background: rgba(8, 15, 32, 0); transition: background .25s; } dialog.sheet.open::backdrop { background: rgba(8, 15, 32, .42); } .sheet-in { position: relative; width: 100%; max-width: 560px; max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; background: var(--card); border-radius: 26px 26px 0 0; padding: 10px 18px calc(var(--safe-b) + 20px); transform: translateY(100%); transition: transform .32s var(--ease); box-shadow: var(--shadow-lg); } dialog.sheet.open .sheet-in { transform: none; } .sheet-grab { display: block; width: 38px; height: 5px; border-radius: 5px; background: var(--line-2); margin: 0 auto 10px; } .sheet-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .sheet-h h2 { font: 500 22px/1.2 var(--display); } .sheet-h p { color: var(--muted); font-size: 14px; margin-top: 2px; } .sheet-h .icon-btn { width: 36px; height: 36px; background: var(--bg-2); border: 0; } .sheet-body { display: grid; gap: 14px; } .sheet-p { color: var(--ink-2); margin-bottom: 18px; } .sheet-note { font-size: 12.5px; color: var(--muted); } .sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sheet-tall .sheet-in { min-height: 70dvh; } @media (min-width: 720px) { dialog.sheet[open] { align-items: center; } .sheet-in { border-radius: var(--r-lg); transform: translateY(16px) scale(.98); opacity: 0; transition: transform .3s var(--ease), opacity .25s; padding-bottom: 22px; } dialog.sheet.open .sheet-in { opacity: 1; } .sheet-grab { display: none; } .sheet-tall .sheet-in { min-height: 0; } .sheet-doc .sheet-in { max-width: 860px; } } .install-steps { display: grid; gap: 10px; counter-reset: s; } .install-steps li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; } .install-steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-2); color: var(--blue); font-weight: 600; font-size: 13px; flex: none; } /* ---------- Agenda & projets ---------- */ .days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(48px, 1fr); gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pad) * -1) 16px; padding: 2px var(--pad) 4px; } .days::-webkit-scrollbar { display: none; } .day { display: grid; justify-items: center; gap: 2px; padding: 9px 0 7px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 12px; } .day b { font-size: 17px; color: var(--ink); font-weight: 600; } .day i { height: 14px; min-width: 6px; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--blue); display: grid; place-items: center; } .day i.has:empty::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); } .day.is-today { border-color: var(--blue); } .day.is-on { background: var(--navy); border-color: var(--navy); color: var(--on-navy-2); } .day.is-on b { color: var(--on-navy); } .day.is-on i { color: var(--sky); } .day.is-on i.has:empty::before { background: var(--sky); } .done-box summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; } .done-box summary h2 { font-size: 16px; font-weight: 600; } .done-box summary::-webkit-details-marker { display: none; } .done-box[open] summary { margin-bottom: 10px; } .card-h h2.is-late { color: var(--rose); } .proj-grid { display: grid; gap: 14px; } @media (min-width: 960px) { .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .proj-grid .card + .card { margin: 0; } .proj-p { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; margin-bottom: 12px; } .proj-p .bar { flex: 1; height: 8px; } .proj-steps { display: grid; gap: 2px; } .pstep { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; text-align: left; font-size: 14.5px; } .pstep .tick { width: 22px; height: 22px; } .pstep .tick::after { left: 6.5px; top: 3px; } .pstep.is-done { color: var(--muted); } .proj-f { display: flex; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); } /* ---------- Outils ---------- */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; } .tool-grid .card + .card { margin: 0; } .tool { display: grid; align-content: start; gap: 6px; position: relative; transition: transform .2s var(--ease), border-color .2s; } .tool:hover { transform: translateY(-2px); border-color: var(--line-2); } .tool-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--sky-2); color: var(--navy); margin-bottom: 8px; } :root[data-theme="dark"] .tool-ic { color: var(--sky); } .tool > span:not(.tool-ic):not(.badge) { font-size: 13.5px; color: var(--muted); } .tool .badge { position: absolute; top: 16px; right: 16px; } .tool-2 { display: grid; gap: 14px; align-items: start; } .tool-2 > * + * { margin-top: 0 !important; } .tool-2 > div > .card + .card, .tool-2 > div > * + .card { margin-top: 14px; } @media (min-width: 960px) { .tool-2 { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 18px; } .qtot, .audit-res { position: sticky; top: 24px; } } .qlines { display: grid; gap: 8px; margin-bottom: 10px; } .qline { display: grid; grid-template-columns: 1fr 64px 92px 32px; gap: 6px; align-items: center; } .qline .inp { min-height: 42px; padding: 8px 10px; font-size: 15px; } .qtot { display: grid; gap: 12px; } .qtot h2 { font: 500 21px/1.2 var(--display); } .dl-tot > div { font-variant-numeric: tabular-nums; } .dl-tot .is-big { font-size: 18px; padding: 12px 0; } .dl-tot .is-big dt { color: var(--ink); font-weight: 600; } .dl-tot .is-big dd { font-weight: 700; } .msg-out { min-height: 240px; font-size: 15.5px; margin-bottom: 8px; } .audit { display: grid; padding: 6px 16px; } .audit-i { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; } .audit-i:first-child { border-top: 0; } .yn { display: flex; gap: 4px; flex: none; } .yn button { height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 500; font-size: 13.5px; color: var(--muted); } .yn .is-y { background: var(--olive); border-color: var(--olive); color: #fff; } .yn .is-n { background: var(--rose-3); border-color: transparent; color: var(--rose); } .audit-res { display: grid; gap: 12px; } .audit-score { display: flex; align-items: baseline; gap: 6px; } .audit-score b { font-size: 52px; font-weight: 600; letter-spacing: -.03em; line-height: 1; } .audit-score span { color: var(--muted); font-size: 18px; } .audit-res h3 { font-size: 15px; font-weight: 600; margin-top: 4px; } .bul { display: grid; gap: 8px; } .bul li { position: relative; padding-left: 16px; font-size: 14px; color: var(--ink-2); } .bul li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--olive-2); } .audit-svc { font-size: 14px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sky-3); } .tr-prog { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); margin: 4px 0 14px; } .tr-prog .bar { flex: 1; } .tr-card { display: grid; gap: 14px; padding: 26px 20px; min-height: 260px; align-content: center; } .tr-k { font-size: 12.5px; font-weight: 600; color: var(--muted); } .tr-q { font: 500 26px/1.25 var(--display); text-wrap: balance; } .tr-a { padding: 14px 16px; border-radius: var(--r-md); background: var(--sky-3); font-size: 16px; display: grid; gap: 4px; animation: rise .4s var(--ease) both; } .tr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .step-edit-h { display: flex; gap: 10px; align-items: flex-end; } .step-edit-h .field { flex: 1; } .icon-pick { display: flex; flex-wrap: wrap; gap: 6px; } .icon-pick legend { margin-bottom: 8px; } .icon-pick label { cursor: pointer; } .icon-pick input { position: absolute; opacity: 0; } .icon-pick span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line-2); color: var(--ink-2); } .icon-pick input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--on-navy); } .icon-pick input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; } details.card summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; } details.card summary::-webkit-details-marker { display: none; } details.card summary h2 { font-size: 16px; font-weight: 600; } details.card[open] summary .chev { transform: rotate(180deg); } details.form[open] summary { margin-bottom: 4px; } /* Devis imprimable */ .doc-prev { border: 1px solid var(--line); border-radius: var(--r-md); overflow: auto; max-height: 55dvh; background: #fff; } .doc { background: #fff; color: #131a2a; padding: 32px; font-size: 13px; line-height: 1.5; min-width: 560px; } .doc-h { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 2px solid #0f1e3d; } .doc-co { font: 600 18px/1.2 var(--display); } .doc-r { text-align: right; } .doc-r h1 { font: 500 30px/1 var(--display); color: #0f1e3d; margin-bottom: 8px; } .doc-to { margin: 22px 0; } .doc-k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #676d7e; margin-bottom: 4px; } .doc-t { width: 100%; border-collapse: collapse; } .doc-t th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #676d7e; padding: 8px 6px; border-bottom: 1px solid #ddd; } .doc-t td { padding: 10px 6px; border-bottom: 1px solid #eee; } .doc-t th:not(:first-child), .doc-t td:not(:first-child) { text-align: right; white-space: nowrap; } .doc-tot { margin: 16px 0 0 auto; width: 300px; } .doc-tot div { display: flex; justify-content: space-between; padding: 5px 0; } .doc-tot .is-big { font-weight: 700; font-size: 15px; border-top: 2px solid #0f1e3d; margin-top: 4px; padding-top: 9px; } .doc-n { margin-top: 20px; color: #394155; } .doc-f { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 36px; } .doc-sign { width: 240px; height: 70px; border: 1px solid #ccc; border-radius: var(--r-xs); margin-top: 8px; } .print-host { display: none; } @media print { @page { margin: 14mm; } body > *:not(.print-host) { display: none !important; } .print-host { display: block !important; } .doc { padding: 0; min-width: 0; } } /* ---------- Académie ---------- */ .guide-grid { display: grid; gap: 12px; } @media (min-width: 720px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .guide-grid .card + .card { margin: 0; } .guide { display: grid; align-content: start; gap: 6px; position: relative; transition: transform .2s var(--ease), border-color .2s; } .guide:hover { transform: translateY(-2px); border-color: var(--line-2); } .guide-k { font-size: 12px; color: var(--olive-ink); font-weight: 600; } .guide b { font: 500 19px/1.25 var(--display); } .guide-p { font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .guide-l { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 4px; } .guide-l .ic { width: 14px; height: 14px; } .article { max-width: 680px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); } .article .lead { font-size: 18px; color: var(--ink); } .article h2 { font: 500 22px/1.25 var(--display); color: var(--ink); margin: 26px 0 8px; } .article p + p { margin-top: 10px; } .article ul, .article ol { display: grid; gap: 8px; margin: 10px 0; } .article ul li { position: relative; padding-left: 18px; } .article ul li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); } .article ol { counter-reset: o; } .article ol li { counter-increment: o; position: relative; padding-left: 34px; } .article ol li::before { content: counter(o); position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-2); color: var(--blue); font-size: 12.5px; font-weight: 600; } .article .tip { margin: 22px 0 6px; font-size: 15.5px; } .say { margin: 12px 0; padding: 14px 18px; border-left: 3px solid var(--blue); background: var(--card); border-radius: 0 14px 14px 0; font: 400 18px/1.45 var(--display); color: var(--ink); } .article .tbl { font-size: 13.5px; } .next-guide { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; max-width: 680px; margin-top: 28px !important; } .next-guide b { font: 500 18px/1.25 var(--display); grid-column: 1; } .next-guide .chev { grid-row: 1 / span 2; grid-column: 2; } /* ---------- Abonnement ---------- */ .trial-card { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; background: var(--sky-3); border-color: var(--sky-2); } .trial-card > div { flex: 1 1 260px; } .trial-card h2 { font: 500 22px/1.2 var(--display); margin-bottom: 4px; } .trial-card p { color: var(--ink-2); font-size: 14.5px; } .plans { display: grid; gap: 14px; } @media (min-width: 960px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } } .plan { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); } .plan h2 { font: 500 24px/1.2 var(--display); } .plan-p { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; } .plan-p b { font-size: 34px; font-weight: 600; letter-spacing: -.03em; } .plan-p span { color: var(--muted); font-size: 14px; } .plan-plus { font-size: 13px; font-weight: 600; color: var(--muted); } .plan-f { display: grid; gap: 10px; flex: 1; align-content: start; } .plan-f li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-2); } .plan-f .ic { width: 18px; height: 18px; color: var(--olive-2); margin-top: 2px; } .plan-cur { text-align: center; font-weight: 600; font-size: 14px; color: var(--muted); padding: 12px; border-radius: 999px; background: var(--bg-2); } .plan.is-dark { background: var(--navy); color: var(--on-navy); border-color: transparent; } .plan.is-dark .plan-p span, .plan.is-dark .plan-plus { color: var(--on-navy-2); } .plan.is-dark .plan-f li { color: var(--on-navy); } .plan.is-dark .plan-f .ic { color: var(--sky); } .plan.is-dark .plan-cur { background: rgba(245, 241, 233, .1); color: var(--on-navy); } .faq { margin-top: 10px; display: grid; gap: 8px; } /* ---------- Réglages, menu ---------- */ .cat { display: grid; gap: 8px; } .cat li { display: grid; grid-template-columns: 1fr 84px auto 32px; gap: 6px; align-items: center; } .cat .inp { min-height: 40px; padding: 8px 10px; font-size: 14.5px; } .mini-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); } .mini-check input { accent-color: var(--blue); } .card .field-l + .seg { margin-top: 8px; } .card .seg + .field-l { margin-top: 4px; } .about { text-align: center; color: var(--muted); font-size: 12.5px; margin: 24px 0 8px; } .me { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .menu { padding: 4px 16px; } .menu .row { padding: 13px 0; } .menu-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--bg-2); color: var(--ink-2); flex: none; } .menu-ic .ic { width: 19px; height: 19px; } /* Sections diverses */ .quick { margin-top: 6px; } .view-in { } .kpi-v, .hero-goals b, .plan-p b, .dl-tot dd, .kcol-sum, .kcard-f b { word-spacing: .1em; } /* ========================================================================== v1.1 — accueil façon Apple, notifications, fleurs bleues, scripts détaillés ========================================================================== */ :root { --apple: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Instrument Sans", "Segoe UI", sans-serif; --olive-soft: #c3cd8b; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Bannières (notifications Apple) ---------- */ .toasts { position: fixed; z-index: 95; left: 0; right: 0; top: calc(var(--safe-t) + 8px); display: grid; justify-items: center; gap: 8px; padding: 0 10px; pointer-events: none; } @media (min-width: 960px) { .toasts { left: auto; right: 16px; top: 16px; width: 380px; padding: 0; } } .toast { pointer-events: auto; width: 100%; max-width: 420px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r); color: #111; background: rgba(250, 250, 252, .82); -webkit-backdrop-filter: saturate(1.8) blur(24px); backdrop-filter: saturate(1.8) blur(24px); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 10px 30px -8px rgba(0, 0, 0, .28); font-family: var(--apple); letter-spacing: -.01em; cursor: default; opacity: 0; transform: translateY(-120%) scale(.96); transition: transform .55s cubic-bezier(.2, 1.15, .3, 1), opacity .3s; } .toast.in { opacity: 1; transform: none; } .toast.out { opacity: 0; transform: translateY(-60%) scale(.97); transition: transform .35s ease-in, opacity .3s; } @media (min-width: 960px) { .toast { transform: translateX(110%); } .toast.in { transform: none; } .toast.out { transform: translateX(110%); } } :root[data-theme="dark"] .toast { background: rgba(38, 42, 52, .8); color: #f2f2f5; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .08), 0 10px 30px -8px rgba(0, 0, 0, .6); } .toast-ic .logo-mark { width: 38px; height: 38px; } .toast-b { min-width: 0; } .toast-h { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: rgba(60, 60, 67, .62); text-transform: uppercase; letter-spacing: .02em; } :root[data-theme="dark"] .toast-h { color: rgba(235, 235, 245, .55); } .toast-h span:last-child { text-transform: none; letter-spacing: 0; } .toast-t { font-weight: 600; font-size: 15px; line-height: 1.25; margin-top: 1px; } .toast-m { font-size: 14.5px; line-height: 1.3; } .toast-btn { align-self: center; height: 32px; padding: 0 13px; border-radius: 999px; background: rgba(120, 120, 128, .16); color: #0a64d8; font-weight: 600; font-size: 13.5px; white-space: nowrap; } :root[data-theme="dark"] .toast-btn { color: #64a8ff; } /* ---------- Fleurs bleues ---------- */ .fl { display: block; width: 64px; height: 64px; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-select: none; } .fl.xs { width: 38px; height: 38px; } .fl-cluster { position: relative; display: block; width: 120px; height: 96px; pointer-events: none; } .fl-cluster .fl { position: absolute; animation: fl-turn 26s linear infinite; } .fl-cluster .f-a { width: 58px; height: 58px; left: 8px; top: 18px; } .fl-cluster .f-b { width: 40px; height: 40px; left: 62px; top: 0; animation-duration: 32s; } .fl-cluster .f-c { width: 30px; height: 30px; left: 74px; top: 52px; animation-duration: 38s; } @keyframes fl-turn { to { transform: rotate(360deg); } } .drift { animation: fl-drift 9s ease-in-out infinite alternate; } @keyframes fl-drift { from { transform: translateY(0) rotate(0); } to { transform: translateY(-6px) rotate(24deg); } } .ph-home { position: relative; } .home-cl { position: absolute; right: -6px; top: 4px; } @media (min-width: 960px) { .home-cl { right: 8px; top: -6px; transform: scale(1.15); transform-origin: top right; } } .ph-flower { position: relative; height: 0; } .ph-flower .fl { position: absolute; right: 4px; top: 14px; width: 46px; height: 46px; } .paywall .pw-fl { position: absolute; z-index: 0; opacity: .95; } .paywall .pw-fl.a { width: 74px; height: 74px; right: -14px; top: -10px; animation: fl-turn 40s linear infinite; } .paywall .pw-fl.b { width: 44px; height: 44px; left: 14px; bottom: 12px; animation: fl-turn 52s linear infinite reverse; } .paywall > *:not(.pw-fl) { position: relative; z-index: 1; } .plan { position: relative; overflow: hidden; } .plan-fl { position: absolute; right: -16px; top: -16px; width: 92px; height: 92px; opacity: .9; animation: fl-turn 48s linear infinite; } .plan.is-dark > *:not(.plan-fl) { position: relative; } #splash .sp-fl { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; opacity: 0; animation: sp-fl 1.1s .5s var(--ease) forwards; } #splash .sp-fl.a { margin: -112px 0 0 -112px; } #splash .sp-fl.b { width: 38px; height: 38px; margin: 18px 0 0 62px; animation-delay: .65s; } @keyframes sp-fl { from { opacity: 0; transform: scale(.6) rotate(-40deg); } to { opacity: 1; transform: none; } } /* ---------- Un peu plus d'olive ---------- */ .sec-title { color: var(--olive-ink); } .g-commerce .sec-ic, .g-soin .sec-ic { background: var(--olive-3); color: var(--olive-ink); } .g-horeca .sec-ic { background: var(--sky-2); color: var(--navy); } .g-services .sec-ic, .g-batiment .sec-ic { background: var(--sky-3); color: var(--blue); } :root[data-theme="dark"] .g-horeca .sec-ic { color: var(--sky); } .side-i { position: relative; } .side-i.is-on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--olive-soft); } .hero::before { content: ""; position: absolute; left: -70px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(163, 178, 90, .24), transparent); pointer-events: none; } .tab.is-on::before { background: var(--olive-2); } .kpi-ic.t-blue { background: var(--olive-3); color: var(--olive-ink); } /* ---------- Interrupteurs et listes iOS ---------- */ .switch { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 51px; height: 31px; margin: 0; border-radius: 999px; background: rgba(120, 120, 128, .24); cursor: pointer; transition: background .25s; } .switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: transform .3s cubic-bezier(.3, 1.3, .5, 1); } .switch:checked { background: var(--olive-2); } .switch:checked::after { transform: translateX(20px); } .switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .ios-list { border-radius: var(--r-md); background: var(--card-2); border: 1px solid var(--line); margin-bottom: 12px; } .ios-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; min-height: 52px; cursor: pointer; font-size: 15.5px; } .ios-row + .ios-row { border-top: 1px solid var(--line); } .ios-row > span { display: grid; } .ios-row em { font-style: normal; font-size: 13px; color: var(--muted); } /* ---------- Accueil (façon Apple) ---------- */ .ob { min-height: 100dvh; display: flex; flex-direction: column; padding: calc(var(--safe-t) + 6px) 24px calc(var(--safe-b) + 20px); max-width: 560px; margin: 0 auto; font-family: var(--apple); } .ob-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; } .ob-top > :last-child { justify-self: end; } .btn-text { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 4px; color: var(--blue); font-size: 17px; font-weight: 400; letter-spacing: -.01em; font-family: var(--apple); } .btn-text .ic { width: 22px; height: 22px; stroke-width: 2.2; margin-left: -6px; } .ob-dots { display: flex; gap: 6px; } .ob-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: width .35s var(--ease), background .3s; } .ob-dots i.on { width: 18px; background: var(--olive-2); } .ob-welcome .ob-dots { visibility: hidden; } .ob-in { flex: 1; display: flex; flex-direction: column; } .ob-in.from-r { animation: ob-push .5s cubic-bezier(.25, 1, .35, 1) both; } .ob-in.from-l { animation: ob-pop .5s cubic-bezier(.25, 1, .35, 1) both; } @keyframes ob-push { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } } @keyframes ob-pop { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } } .ob-page { flex: 1; display: flex; flex-direction: column; padding-top: 14px; } .ob-center { align-items: center; text-align: center; } .ob-h { font: 700 32px/1.12 var(--apple); letter-spacing: -.025em; text-align: center; margin: 14px 0 10px; text-wrap: balance; } .ob-p { font-size: 17px; line-height: 1.42; color: var(--ink-2); text-align: center; max-width: 36ch; margin: 0 auto 18px; } .ob-foot { display: grid; gap: 6px; margin-top: 20px; position: sticky; bottom: 0; z-index: 3; padding: 18px 0 calc(var(--safe-b) + 6px); margin-bottom: calc((var(--safe-b) + 20px) * -1); background: linear-gradient(rgba(245, 241, 233, 0), var(--bg) 26%); } :root[data-theme="dark"] .ob-foot { background: linear-gradient(rgba(10, 19, 37, 0), var(--bg) 26%); } .btn-apple { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; border-radius: var(--r-md); background: var(--blue); color: #fff; font: 600 17px/1 var(--apple); letter-spacing: -.01em; transition: transform .15s, background .2s; } .btn-apple:active { transform: scale(.98); background: var(--blue-2); } .ob-foot .btn-text { justify-content: center; } .ob-small { text-align: center; font-size: 13px; color: var(--muted); margin-top: 4px; } .ob-hero { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: 14px; } .ob-mark { position: relative; } .ob-mark .logo-mark.xl { width: 108px; height: 108px; filter: drop-shadow(0 18px 30px rgba(15, 30, 61, .25)); } .ob-cl { position: absolute; right: -78px; top: -54px; opacity: 0; animation: ob-up .9s .9s var(--ease) forwards; } .ob-name { font: 700 34px/1.1 var(--apple); letter-spacing: -.025em; margin-top: 10px; opacity: 0; animation: ob-up .8s .55s var(--ease) forwards; } .ob-name span { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; } .ob-tag { max-width: 30ch; color: var(--ink-2); font-size: 17px; line-height: 1.4; opacity: 0; animation: ob-up .8s .7s var(--ease) forwards; } @keyframes ob-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .feat { display: grid; gap: 26px; margin: 20px 4px 0; } .feat li { display: flex; gap: 16px; align-items: flex-start; animation: ob-up .6s var(--ease) both; animation-delay: calc(.15s + var(--k) * .08s); } .feat b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; } .feat p { font-size: 15.5px; line-height: 1.38; color: var(--muted); } .feat-ic, .ob-badge, .group-ic, .tt-ic { display: grid; place-items: center; flex: none; } .feat-ic { width: 46px; height: 46px; } .feat-ic .ic { width: 34px; height: 34px; stroke-width: 1.8; } .f-blue { color: var(--blue); } .f-olive { color: var(--olive-2); } .f-navy { color: var(--navy); } .f-sky { color: #4f8ff7; } :root[data-theme="dark"] .f-navy { color: #c9d6f5; } .ob-privacy { display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 13px; line-height: 1.38; color: var(--muted); padding: 6px 12px 12px; font-family: var(--apple); } .ob-privacy-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; } .ob-privacy-ic .ic { width: 17px; height: 17px; } .ob-privacy u { color: var(--blue); text-decoration: none; } .ob-badge { width: 64px; height: 64px; border-radius: var(--r-md); margin: 6px auto 0; background: var(--olive-3); } .ob-badge .ic { width: 32px; height: 32px; } /* iPhone et notifications */ .phone { position: relative; width: 238px; height: 300px; margin: 6px auto 4px; padding: 9px 9px 0; border-radius: 46px 46px 0 0; background: #1b1d22; box-shadow: inset 0 0 0 2px #3a3d44, 0 30px 50px -30px rgba(15, 30, 61, .6); -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); } .phone-screen { position: relative; height: 100%; border-radius: 38px 38px 0 0; overflow: hidden; background: radial-gradient(120% 70% at 30% 0%, #2c5bd8 0%, #1b3a8f 38%, #0f1e3d 78%); padding: 14px 10px 0; color: #fff; text-align: center; } .phone-island { position: absolute; left: 50%; top: 9px; width: 74px; height: 22px; margin-left: -37px; border-radius: var(--r-sm); background: #000; z-index: 2; } .phone-date { position: relative; margin-top: 30px; font-size: 12px; font-weight: 600; opacity: .85; } .phone-time { position: relative; font: 700 56px/1 var(--apple); letter-spacing: -.02em; margin: 2px 0 14px; opacity: .95; } .ph-fl { position: absolute; opacity: .9; } .ph-fl.a { width: 46px; height: 46px; left: -8px; top: 60px; animation: fl-turn 30s linear infinite; } .ph-fl.b { width: 32px; height: 32px; right: 6px; top: 120px; animation: fl-turn 36s linear infinite reverse; } .phone-notes { position: relative; display: grid; gap: 6px; } .inote { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--r-md); text-align: left; color: #111; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35); font-family: var(--apple); opacity: 0; animation: inote-in .7s cubic-bezier(.2, 1.2, .3, 1) both; animation-delay: calc(.35s + var(--k) * .55s); } .inote .logo-mark { width: 28px; height: 28px; } .inote-h { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .02em; color: rgba(60, 60, 67, .62); } .inote-h span:last-child { text-transform: none; letter-spacing: 0; } .inote-t { font-size: 11.5px; font-weight: 600; line-height: 1.2; } .inote-h span { white-space: nowrap; } .inote p:last-child { font-size: 11px; line-height: 1.25; color: #222; } @keyframes inote-in { from { opacity: 0; transform: translateY(-26px) scale(.92); } to { opacity: 1; transform: none; } } /* Listes groupées (formulaire Apple) */ .group { border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); overflow: hidden; } .group-r { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 16px; text-align: left; font-size: 17px; font-family: var(--apple); background: var(--card); color: var(--ink); } .group-r + .group-r { box-shadow: inset 0 1px 0 var(--line); } .group-r > span:first-child:not(.group-ic) { width: 84px; flex: none; } .group-r input { flex: 1; min-width: 0; height: 50px; border: 0; background: transparent; font: inherit; color: var(--ink); outline: none; } .group-r input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); } .group-r.is-pick { cursor: pointer; } .group-r.is-pick:active { background: var(--bg-2); } .group-r.is-pick > span:not(.group-ic) { flex: 1; width: auto; } .group-r.two-l { min-height: 62px; padding-top: 8px; padding-bottom: 8px; } .group-r.two-l span { display: grid; } .group-r.two-l em { font-style: normal; font-size: 13.5px; color: var(--muted); line-height: 1.3; } .group-ic { width: 30px; height: 30px; border-radius: var(--r-xs); background: var(--bg-2); } .group-ic .ic { width: 18px; height: 18px; } .group-ck { width: 20px; height: 20px; color: var(--blue); stroke-width: 2.4; margin-left: auto; } .group-k { font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); margin: 22px 16px 7px; font-family: var(--apple); } .group-foot { font-size: 13px; color: var(--muted); margin: 8px 16px 0; } .ios-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: var(--r-xs); background: rgba(118, 118, 128, .14); } .ios-seg button { min-height: 34px; border-radius: var(--r-xs); font: 500 15px/1 var(--apple); color: var(--ink); } .ios-seg button.is-on { background: var(--card); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); font-weight: 600; } :root[data-theme="dark"] .ios-seg button.is-on { background: #5a5a60; } /* Choix des secteurs */ .pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .pk-n { font-size: 14px; line-height: 1.2; } .pk { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 92px; padding: 10px 12px 12px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); text-align: left; font: 500 14.5px/1.2 var(--apple); color: var(--ink); transition: border-color .2s, background .2s, transform .15s; } .pk:active { transform: scale(.97); } .pk-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--bg-2); flex: none; } .pk-ic .ic { width: 19px; height: 19px; } .pk-ck { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; } .pk-ck .ic { width: 14px; height: 14px; stroke-width: 3; color: #fff; } .pk.is-on { border-color: var(--olive-2); background: var(--olive-3); } .pk.is-on .pk-ic { background: var(--card); color: var(--olive-ink); } .pk.is-on .pk-ck { background: var(--olive-2); border-color: var(--olive-2); } /* Essai gratuit : frise */ .ob-trial-fl { position: relative; height: 70px; } .ob-trial-fl .tf-a { position: absolute; left: 50%; top: 2px; margin-left: -34px; width: 66px; height: 66px; animation: fl-turn 34s linear infinite; } .ob-trial-fl .tf-b { position: absolute; left: 50%; top: 34px; margin-left: 22px; width: 34px; height: 34px; animation: fl-turn 40s linear infinite reverse; } .trial-tl { display: grid; margin: 14px 4px 22px; } .trial-tl li { position: relative; display: flex; gap: 14px; padding-bottom: 22px; } .trial-tl li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 46px; bottom: 2px; width: 3px; border-radius: 3px; background: linear-gradient(var(--blue), var(--olive-2)); opacity: .35; } .tt-ic { width: 45px; height: 45px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); } .tt-ic .ic { width: 21px; height: 21px; } .trial-tl b { font-size: 16.5px; font-weight: 600; } .trial-tl p { font-size: 15px; line-height: 1.38; color: var(--muted); } .ob .ios-row { border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); font-family: var(--apple); } @media (min-width: 720px) { .ob { padding-top: 26px; } .ob-h { font-size: 36px; } } /* ---------- Scripts : onglets et détails ---------- */ .tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin: 0 0 18px; } .tabs::-webkit-scrollbar { display: none; } .tab-i { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0 12px; font-weight: 600; font-size: 15px; color: var(--muted); white-space: nowrap; } .tab-i b { font-size: 12px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-sm); display: inline-grid; place-items: center; background: var(--bg-2); color: var(--ink-2); } .tab-i.is-on { color: var(--ink); } .tab-i.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--olive-2); } .mini-time { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -2px calc(var(--pad) * -1) 16px; padding: 0 var(--pad); } .mini-time span { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); } .mini-time b { font-variant-numeric: tabular-nums; color: var(--olive-ink); font-weight: 600; } .step-why { display: grid; gap: 2px; padding: 11px 14px; border-radius: var(--r-md); background: var(--olive-3); font-size: 14px; color: var(--ink-2); } .step-why b { font-size: 12px; font-weight: 600; color: var(--olive-ink); } .step-more { border-radius: var(--r-md); border: 1px dashed var(--line-2); } .step-more summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--blue); } .step-more summary::-webkit-details-marker { display: none; } .step-more summary .chev { width: 16px; height: 16px; transition: transform .3s var(--ease); margin-left: 0; color: var(--blue); } .step-more[open] summary .chev { transform: rotate(180deg); } .step-more > :not(summary) { margin: 0 12px 12px; } .alt { display: grid; gap: 4px; } .alt + .alt { margin-top: 10px; } .alt-k { font-size: 12px; font-weight: 600; color: var(--muted); padding-left: 4px; } .alt .ln { font-size: 15px; box-shadow: none; } .step-avoid { display: grid; gap: 2px; padding: 10px 13px; border-radius: var(--r-sm); background: var(--rose-3); font-size: 14px; color: var(--ink-2); } .step-avoid b { font-size: 12px; color: var(--rose); } .two { display: grid; gap: 14px; } .two .card + .card { margin: 0; } @media (min-width: 720px) { .two { grid-template-columns: 1fr 1fr; } } .two + .card, .card + .two { margin-top: 14px; } .body { font-size: 15.5px; color: var(--ink-2); } .bul-olive li::before { background: var(--olive-2); } .bul-rose li::before { background: var(--rose); } .words { display: flex; flex-wrap: wrap; gap: 6px; } .word { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 500; } .word.ok { background: var(--olive-3); color: var(--olive-ink); } .word.ko { background: var(--rose-3); color: var(--rose); text-decoration: line-through; text-decoration-thickness: 1.5px; } .words-k { margin: 14px 0 8px; } .season { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; } .season-m { display: grid; justify-items: center; gap: 5px; } .season-c { width: 100%; height: 34px; border-radius: 4px 4px 2px 2px; } .season-c.l0, .sw.l0 { background: #dbe7ff; } .season-c.l1, .sw.l1 { background: #8db5f5; } .season-c.l2, .sw.l2 { background: #155eef; } :root[data-theme="dark"] .season-c.l0, :root[data-theme="dark"] .sw.l0 { background: #1f2f55; } :root[data-theme="dark"] .season-c.l1, :root[data-theme="dark"] .sw.l1 { background: #3d63b8; } :root[data-theme="dark"] .season-c.l2, :root[data-theme="dark"] .sw.l2 { background: #7aa4ff; } .season-l { font-size: 11.5px; color: var(--muted); font-weight: 500; } .season-m i { width: 6px; height: 6px; border-radius: 50%; background: transparent; } .season-m i.on { background: var(--olive-2); } .season-leg { margin: 12px 0 8px; } .sw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--olive-2); display: inline-block; } .season-p { font-size: 14.5px; color: var(--ink-2); } .args { display: grid; gap: 10px; } .arg { padding: 13px 14px; border-radius: var(--r-md); background: var(--bg-2); display: grid; gap: 4px; font-size: 14.5px; color: var(--ink-2); } .arg.is-on { background: var(--sky-3); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 30%, transparent); } .arg-k { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); font-size: 14px; } .arg-k .ic { width: 17px; height: 17px; color: var(--blue); } .arg-ex { font-size: 13.5px; color: var(--muted); } .checklist { display: grid; } .ck { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 0; text-align: left; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); } .checklist li:first-child .ck { border-top: 0; padding-top: 2px; } .ck .tick { margin-top: 0; } .ck > span:last-child { display: grid; gap: 1px; } .ck em { font-style: normal; font-size: 13.5px; color: var(--muted); } .ck.is-on > span:last-child { color: var(--muted); } .ck:disabled { opacity: 1; cursor: default; } .timeline { display: grid; } .timeline li { display: grid; grid-template-columns: 62px 14px 1fr; align-items: center; gap: 10px; padding: 7px 0; position: relative; font-size: 15px; } .timeline li:not(:last-child)::after { content: ""; position: absolute; left: 77.5px; top: 24px; height: 100%; width: 1.5px; background: var(--line-2); } .tl-time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--olive-ink); font-weight: 600; text-align: right; } .tl-dot { width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid var(--olive-2); background: var(--card); position: relative; z-index: 1; } .spin summary span { display: grid; gap: 1px; } .spin summary em { font-style: normal; font-weight: 400; font-size: 13px; color: var(--muted); } .spin .bul { padding: 0 16px 14px; } .card .obj { box-shadow: none; } .card .obj + .obj { margin-top: 8px; } .sit-row .mini-card { flex-basis: 210px; position: relative; } .sit-card .sit-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--olive-3); color: var(--olive-ink); margin-bottom: 6px; } .sit-card .sit-ic .ic { color: inherit; margin: 0; width: 18px; height: 18px; } .sit-card .sit-lock { position: absolute; top: 14px; right: 14px; margin: 0; } .parcours { margin-bottom: 18px; } .pc { display: grid; counter-reset: pc; } .pc li { counter-increment: pc; } .pc a { display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); } .pc li:first-child a { border-top: 0; padding-top: 2px; } .pc a::before { content: counter(pc); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--olive-3); color: var(--olive-ink); font-weight: 600; font-size: 13.5px; } .pc b { font-weight: 600; } .pc span { font-size: 13px; color: var(--muted); } .my-secs .chip .ic { width: 14px; height: 14px; } .article ul li::before { width: 10px; height: 10px; top: 8px; left: 1px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%234f6fe0'%3E%3Cellipse cx='10' cy='5' rx='3.2' ry='4.6'/%3E%3Cellipse cx='10' cy='5' rx='3.2' ry='4.6' transform='rotate(72 10 10)'/%3E%3Cellipse cx='10' cy='5' rx='3.2' ry='4.6' transform='rotate(144 10 10)'/%3E%3Cellipse cx='10' cy='5' rx='3.2' ry='4.6' transform='rotate(216 10 10)'/%3E%3Cellipse cx='10' cy='5' rx='3.2' ry='4.6' transform='rotate(288 10 10)'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='2' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; } .ob { overflow-x: clip; } .act-row { gap: 6px; } .act-row > .icon-btn { width: 40px; height: 40px; } .card + .steps, .info + .steps { margin-top: 20px; } @media (max-width: 560px) { .cat li { grid-template-columns: 1fr auto 28px; } .cat li > .inp:first-child { grid-column: 1 / -1; } .cat li > .price { width: 100%; } .cat li { padding-bottom: 8px; border-bottom: 1px solid var(--line); } } /* ========================================================================== v1.2 — produit recentré : navigation, tableau de bord, CRM personnalisé, compte et sécurité, états vides, validation, chargement Système : rayons --r-xs 8 / --r-sm 12 / --r-md 16 / --r 20 / --r-lg 24, espacements 4-8-12-16-24, titres de carte 16 px, titres de page 31/38 px. ========================================================================== */ /* ---------- Navigation ---------- */ @media (min-width: 960px) { .side { gap: 2px; } .side-cta { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--sky); color: var(--navy); font-weight: 600; font-size: 14.5px; transition: background .2s, transform .15s; } .side-cta:hover { background: #b7d3ff; } .side-cta:active { transform: scale(.98); } .side-cta .ic { width: 19px; height: 19px; } .side-cta.is-on { box-shadow: 0 0 0 2px var(--olive-soft); } .side-g { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 241, 233, .45); padding: 14px 12px 4px; } .side-nav + .side-g { margin-top: 2px; } .side-me { position: relative; } .side-me-ic { width: 16px; height: 16px; margin-left: auto; opacity: .6; } .side-me.is-on { background: rgba(157, 194, 255, .16); } } .tab-ic { display: grid; place-items: center; } .tab-call .tab-ic { width: 48px; height: 48px; margin-top: -18px; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 8px 18px -6px rgba(21, 94, 239, .6), 0 0 0 4px var(--bg); } .tab-call .tab-ic .ic { width: 22px; height: 22px; stroke-width: 2; } .tab-call.is-on .tab-ic { background: var(--navy); } :root[data-theme="dark"] .tab-call.is-on .tab-ic { background: var(--sky); color: var(--navy); } .tab-call.is-on::before { display: none; } .tab-call { color: var(--ink-2); } /* ---------- Hors connexion ---------- */ .offline-bar { display: none; position: fixed; z-index: 96; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 8px); align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px; background: var(--navy); color: var(--on-navy); font-size: 13px; box-shadow: var(--shadow-lg); } .offline-bar .ic { width: 16px; height: 16px; color: var(--sky); } body.is-offline .offline-bar { display: flex; } @media (min-width: 960px) { .offline-bar { left: calc(50% + 126px); } } /* ---------- Tableau de bord ---------- */ .dash { display: grid; gap: 14px; } .dash > .card { margin: 0; } @media (min-width: 960px) { .dash { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; } .today { grid-column: span 7; } .todo { grid-column: span 5; } .week { grid-column: span 12; } .dash .chart-card { grid-column: span 7; } .dash .recent { grid-column: span 5; } } .today { background: var(--navy); color: var(--on-navy); border-color: transparent; display: grid; gap: 16px; position: relative; overflow: hidden; } .today::after { content: ""; position: absolute; right: -70px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(157, 194, 255, .2), transparent); pointer-events: none; } .today::before { content: ""; position: absolute; left: -70px; bottom: -100px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(163, 178, 90, .22), transparent); pointer-events: none; } .today > * { position: relative; z-index: 1; } .today-top { display: flex; align-items: center; gap: 18px; } .today .hero-ring-v b { font-size: 36px; } .today .hero-ring-v span { font-size: 11.5px; max-width: 80px; line-height: 1.2; margin: 2px auto 0; } .today-txt h2 { font: 500 24px/1.15 var(--display); margin-bottom: 6px; } .today-txt p:last-child { color: var(--on-navy-2); font-size: 14.5px; } .today-next { display: grid; gap: 1px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(245, 241, 233, .07); border: 1px solid rgba(245, 241, 233, .1); transition: background .2s; } .today-next:hover { background: rgba(245, 241, 233, .11); } .today-next-k { font-size: 12px; color: var(--sky); font-weight: 600; } .today-next b { font-size: 17px; font-weight: 600; } .today-next span:last-child { font-size: 13.5px; color: var(--on-navy-2); } .today-a { display: grid; gap: 10px; } .today-sc { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; color: var(--on-navy-2); } .today-sc .ic { width: 16px; height: 16px; } .today-sc:hover { color: var(--on-navy); } .week { display: grid; gap: 12px; } @media (min-width: 640px) { .week { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .kpi.big { gap: 4px; padding: 18px; } .kpi.big .kpi-v { font-size: 38px; line-height: 1.05; margin: 2px 0 8px; } .kpi.big .bar { height: 8px; } .kpi.big .kpi-d { margin-top: 6px; } .bar.navy i { background: var(--navy); } :root[data-theme="dark"] .bar.navy i { background: var(--sky); } .mini-empty { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-md); background: var(--bg-2); color: var(--ink-2); font-size: 14px; } .mini-empty .ic { width: 22px; height: 22px; color: var(--muted); flex: none; margin-top: 1px; } .mini-empty + .act-row { margin: 12px 0 0; } .start { margin-bottom: 14px; } .start .card-h { margin-bottom: 10px; } .start-n { font-size: 22px; font-weight: 600; color: var(--olive-ink); } .start .bar { margin-bottom: 8px; height: 8px; } .start-l { display: grid; } .start-l a { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .start-l li:first-child a { border-top: 0; } .start-l a > span:nth-child(2) { display: grid; flex: 1; min-width: 0; } .start-l b { font-weight: 600; } .start-l em { font-style: normal; font-size: 13px; color: var(--muted); } .start-l .is-done b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; } .notif-cta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 14px 16px; } .notif-cta > div { flex: 1; min-width: 0; } .notif-cta b { display: block; font-size: 15px; } .notif-cta p { font-size: 13.5px; color: var(--muted); } .notif-cta .feat-ic { width: 36px; height: 36px; } .notif-cta .feat-ic .ic { width: 26px; height: 26px; } /* ---------- CRM personnalisé ---------- */ .tag-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-xs); background: var(--olive-3); color: var(--olive-ink); font-size: 11.5px; font-weight: 500; white-space: nowrap; } .kcard-tags, .fiche-tags { display: flex; flex-wrap: wrap; gap: 4px; } .kcard-tags { margin-top: 2px; } .fiche-tags { margin-top: 12px; } .kcard-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .owner { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-2); color: var(--sky-ink); font-size: 10.5px; font-weight: 600; } .chips-row-2 { margin-top: -6px; } .cfg { display: grid; margin-bottom: 12px; } .cfg li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .cfg li:first-child { border-top: 0; padding-top: 0; } .cfg .inp { flex: 1; min-height: 40px; padding: 8px 12px; font-size: 15px; } .cfg .dot { width: 10px; height: 10px; flex: none; background: currentColor; } .cfg .dot.t-grey { color: var(--muted); } .cfg .dot.t-sky { color: var(--sky); } .cfg .dot.t-blue { color: var(--blue); } .cfg .dot.t-navy { color: var(--navy); } .cfg .dot.t-sand { color: var(--sand); } .cfg .dot.t-olive { color: var(--olive-2); } .cfg .dot.t-rose { color: var(--rose); } .cfg-n { flex: none; min-width: 58px; text-align: right; } .cfg-lock { width: 32px; display: grid; place-items: center; color: var(--muted); } .cfg-lock .ic { width: 15px; height: 15px; } .cfg-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--bg-2); color: var(--ink-2); flex: none; } .cfg-ic .ic { width: 17px; height: 17px; } .cfg-l { display: grid; flex: 1; min-width: 0; } .cfg-l em { font-style: normal; font-size: 13px; color: var(--muted); } .cfg li .avatar { width: 34px; height: 34px; border-radius: 50%; font-size: 12px; } .cfg-add { display: grid; gap: 8px; grid-template-columns: 1fr; margin-bottom: 10px; } @media (min-width: 640px) { .cfg-add { grid-template-columns: 1.4fr 1fr 1fr auto; } .cfg-add:has(> :nth-child(2):last-child), .cfg-add:has(> :nth-child(2):nth-last-child(1)) { grid-template-columns: 1fr auto; } } form[data-form="team-add"].cfg-add { grid-template-columns: 1fr auto; } /* ---------- Formulaires : erreurs, chargement ---------- */ .field-err { display: flex; gap: 6px; font-size: 13px; font-weight: 500; color: var(--danger); } .field-err::before { content: "!"; width: 16px; height: 16px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; margin-top: 1px; } .inp[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); } .btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; } .btn.is-loading { opacity: .85; pointer-events: none; } .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; flex: none; } /* ---------- Académie : progression ---------- */ .progress-card { display: grid; gap: 12px; } .pg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pg-n { font-size: 15px; color: var(--muted); } .pg-n b { font-size: 38px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; } .progress-card .bar { height: 8px; } .pg-next { font-size: 14px; color: var(--ink-2); } .pg-next a { color: var(--blue); font-weight: 500; } .pc li.is-read a::before { content: "✓"; background: var(--olive-2); color: #fff; } .pc li.is-read b { color: var(--muted); } .guide.is-read { background: var(--card-2); } .guide-l.is-read { color: var(--olive-ink); } .guide-end { display: flex; justify-content: center; margin: 28px 0 0; max-width: 680px; } /* ---------- Abonnement ---------- */ .status-card { display: grid; gap: 14px; margin-bottom: 14px; } .status-top { display: flex; gap: 14px; align-items: flex-start; } .status-top h2 { font: 500 24px/1.2 var(--display); margin: 1px 0 4px; } .status-top p:last-child { color: var(--ink-2); font-size: 14.5px; } .status-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--sky-2); color: var(--blue); flex: none; } .status-pay { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-2); font-size: 14px; color: var(--ink-2); } .status-pay .ic { width: 18px; height: 18px; color: var(--muted); flex: none; margin-top: 1px; } .access { display: grid; } .access li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); } .access li:first-child { border-top: 0; padding-top: 0; } .access li.is-ok { color: var(--ink); } .access li > span:nth-child(2) { flex: 1; } .acc-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-2); flex: none; } .acc-ic .ic { width: 14px; height: 14px; } .access li.is-ok .acc-ic { background: var(--olive-3); color: var(--olive-ink); } /* ---------- Compte ---------- */ .account { display: grid; gap: 12px; } .acc-top { display: flex; align-items: center; gap: 14px; } .acc-top h2 { font: 500 22px/1.2 var(--display); } .acc-top p { color: var(--muted); font-size: 14px; margin-bottom: 6px; } .account .row { border-top: 1px solid var(--line); padding: 12px 0 2px; } .acc-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--sky-3); font-size: 13.5px; color: var(--ink-2); } .acc-note .ic { width: 18px; height: 18px; color: var(--blue); flex: none; margin-top: 1px; } .danger-zone { border-color: color-mix(in srgb, var(--rose) 25%, transparent); } .about-card { text-align: center; padding: 26px 8px 8px; } .about-p { max-width: 52ch; margin: 0 auto 8px; font-size: 14.5px; color: var(--ink-2); } .btn-list .btn { text-align: left; white-space: normal; min-height: 46px; padding-top: 8px; padding-bottom: 8px; } /* ---------- Verrouillage ---------- */ body.is-locked > *:not(.lock):not(.toasts) { visibility: hidden; } .lock { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: calc(var(--safe-t) + 20px) 20px calc(var(--safe-b) + 20px); background: var(--navy); color: var(--on-navy); font-family: var(--apple); transition: opacity .3s; } .lock.out { opacity: 0; } .lock-in { display: grid; justify-items: center; gap: 14px; width: 100%; max-width: 300px; } .lock .logo-mark.lg { width: 64px; height: 64px; } .lock .lm-bg { fill: var(--on-navy); } .lock .lm-amp { fill: var(--navy); } .lock-t { font-size: 19px; font-weight: 500; } .lock-dots { display: flex; gap: 18px; height: 16px; } .lock-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--on-navy); transition: background .15s; } .lock-dots i.on { background: var(--on-navy); } .lock.shake .lock-dots { animation: shake .4s; } @keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } } .lock-msg { min-height: 20px; font-size: 14px; color: #ffb4a3; } .lock-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 22px; margin-top: 4px; } .lock-k { width: 76px; height: 76px; border-radius: 50%; background: rgba(245, 241, 233, .12); color: var(--on-navy); font: 400 30px/1 var(--apple); transition: background .15s; } .lock-k:active { background: rgba(245, 241, 233, .3); } .lock-k.is-del { background: transparent; font-size: 15px; } .lock-forgot { color: var(--sky); font-size: 15px; padding: 8px; } .lock-reset { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-md); background: rgba(245, 241, 233, .08); font-size: 14px; color: var(--on-navy-2); } .lock-reset label { display: grid; gap: 6px; font-size: 13px; } .lock-reset input { min-height: 44px; border-radius: var(--r-sm); border: 1px solid rgba(245, 241, 233, .25); background: transparent; color: var(--on-navy); padding: 0 12px; font-size: 16px; } .lock-reset button { min-height: 44px; border-radius: var(--r-sm); background: #d9452b; color: #fff; font-weight: 600; } .lock-reset button:disabled { opacity: .4; } /* ---------- Accueil (premier écran) ---------- */ .ob-welcome-p { align-items: center; text-align: center; padding-top: 4px; } .ob-welcome-p .ob-mark { margin: 10px 0 4px; } .ob-promise { font: 600 22px/1.25 var(--apple); letter-spacing: -.015em; max-width: 22ch; margin: 6px auto 6px; color: var(--ink); text-wrap: balance; } .ob-aud { font-size: 15px; color: var(--muted); margin-bottom: 4px; } .ob-welcome-p .feat { text-align: left; gap: 20px; margin-top: 14px; } .ob-welcome-p .ob-name { font-size: 30px; margin-top: 6px; } .group-r.is-pick input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .group-r.is-pick .group-ck { visibility: hidden; } .group-r.is-pick input:checked ~ .group-ck { visibility: visible; } .group-r.is-pick:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: -2px; } .notif-sheet { justify-items: center; text-align: center; font-family: var(--apple); } .notif-sheet .phone { margin-top: 0; } .notif-sheet .ob-h { font-size: 26px; margin: 6px 0 0; } .notif-sheet .btn-apple { margin-top: 4px; } /* ---------- Taille du texte ---------- */ :root[data-text="l"] body { zoom: 1.1; } :root[data-text="xl"] body { zoom: 1.22; } /* ---------- Tableaux sur petit écran ---------- */ @media (max-width: 600px) { .tbl-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tbl-cards, .tbl-cards tbody, .tbl-cards tr, .tbl-cards td { display: block; width: 100%; } .tbl-cards tr { padding: 10px 0; border-bottom: 1px solid var(--line); } .tbl-cards td { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 3px 0; border: 0; } .tbl-cards td::before { content: attr(data-l); font-size: 12.5px; font-weight: 600; color: var(--muted); } } .start-l .is-done em { display: none; } .start-l .is-done a { padding: 8px 0; } .ob-welcome-p .ob-mark { margin-top: 34px; } .ob-welcome-p .ob-cl { top: -34px; right: -84px; transform: scale(.9); } /* ========================================================================== v1.3 — application d'organisation : tâches, notes en pages, quiz, CRM par métier, recherche, bouton Créer, abonnement complet (mode test) ========================================================================== */ /* ---------- Navigation ---------- */ .tabbar { grid-template-columns: repeat(5, 1fr); } .m-acts { display: flex; align-items: center; gap: 8px; } .m-acts .icon-btn { width: 38px; height: 38px; } .fab { display: none; position: fixed; z-index: 41; right: 16px; bottom: calc(var(--tab-h) + var(--safe-b) + 14px); width: 54px; height: 54px; border-radius: 50%; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 10px 24px -8px rgba(21, 94, 239, .65), 0 2px 6px rgba(15, 30, 61, .18); transition: transform .2s var(--ease), background .2s; } .fab .ic { width: 26px; height: 26px; stroke-width: 2.1; } .fab:active { transform: scale(.94); background: var(--blue-2); } body[data-fab="1"] .fab { display: grid; } body[data-mode="full"] .fab, body.is-locked .fab { display: none !important; } @media (min-width: 960px) { body[data-fab="1"] .fab { display: none; } .side-top { display: grid; gap: 6px; margin: 0 0 10px; } .side-top .side-cta { margin: 0; } .side-search { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--on-navy-2); font-size: 14px; background: rgba(245, 241, 233, .05); border: 1px solid rgba(245, 241, 233, .08); transition: background .2s, color .2s; } .side-search:hover { background: rgba(245, 241, 233, .09); color: var(--on-navy); } .side-search .ic { width: 17px; height: 17px; } .side-search kbd { margin-left: auto; font: 500 11px/1 var(--sans); padding: 3px 6px; border-radius: 6px; background: rgba(245, 241, 233, .1); color: var(--on-navy-2); } .side-sub-i { padding: 6px 12px 6px 34px; font-size: 13.5px; font-weight: 400; } .side-sub-i .ic { width: 15px; height: 15px; opacity: .7; } .side-sub-i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-trial.is-warn span .ic { color: #ffb4a3; } } /* ---------- Tableau de bord ---------- */ @media (min-width: 960px) { .dash .day-card { grid-column: span 7; } .dash-side { grid-column: span 5; } } .dash-side { display: grid; gap: 14px; align-content: start; } .dash-side .card + .card { margin: 0; } .day-card { display: grid; gap: 14px; } .day-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .day-k { font-size: 12.5px; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; } .day-card h2 { font: 500 30px/1.1 var(--display); letter-spacing: -.015em; } .day-sub { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; max-width: 46ch; } .day-f { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 4px; border-top: 1px solid var(--line); margin-top: 2px; } .hero-ring.sm .hero-ring-v b { font-size: 20px; } .hero-ring.sm .hero-ring-v span { font-size: 11px; color: var(--muted); } .ring .ring-fg { stroke: var(--olive-2); } .ring.on-navy .ring-fg { stroke: var(--sky); } .side-card { padding: 16px; } .side-card .card-h { margin-bottom: 10px; } .side-card .rows .row { padding: 9px 0; } .calls-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .calls-top h2 { font-size: 16px; font-weight: 600; } .calls-top p { font-size: 13.5px; color: var(--muted); } .calls-card .ring .ring-fg { stroke: var(--blue); } .quiz-card { display: flex; align-items: center; gap: 14px; transition: border-color .2s; } .quiz-card:hover { border-color: var(--line-2); } .quiz-card .row-b b { white-space: normal; } .quiz-card .day-k { margin: 0; } .week .kpi { padding: 14px 16px; } .week .kpi-v { font-size: 24px; } /* ---------- Saisie rapide ---------- */ .qadd { position: relative; display: grid; grid-template-columns: 22px 1fr 40px; align-items: center; gap: 8px; padding: 4px 4px 4px 14px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid transparent; transition: border-color .2s, background .2s, box-shadow .2s; margin-bottom: 14px; } .qadd:focus-within { background: var(--card); border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); } .qadd-ic { color: var(--muted); display: grid; } .qadd-ic .ic { width: 20px; height: 20px; } .qadd-in { min-width: 0; height: 44px; border: 0; background: transparent; font-size: 16px; color: var(--ink); outline: none; } .qadd-in::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); } .qadd-go { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--blue); color: #fff; transition: opacity .2s, transform .15s; } .qadd-go:disabled { opacity: 0; transform: scale(.85); } .qadd-go .ic { width: 19px; height: 19px; } .qadd-p { grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--blue); font-weight: 500; } .qadd-p:empty { display: none; } .qadd-p .ic { width: 15px; height: 15px; } .qadd-p:not(:empty) { margin: -6px 0 6px; } .day-card .qadd { margin: 0; } .qadd-sm { margin: 12px 0 0; } .qadd-sm .qadd-in { height: 40px; font-size: 15px; } .empty .qadd { width: 100%; max-width: 460px; margin: 10px auto 0; text-align: left; } /* ---------- Tâches ---------- */ .view-seg { margin-bottom: 14px; } .tsec { padding: 14px 16px 6px; } .tsec .card-h { margin-bottom: 4px; } .tsec .card-h p { font-weight: 600; } .trow { align-items: center; padding: 6px 0; } .trow .tick { margin-top: 0; } .task-b { display: grid; gap: 1px; flex: 1; min-width: 0; text-align: left; padding: 6px 0; min-height: 44px; align-content: center; } .task-b .task-t { display: flex; align-items: center; gap: 6px; font-weight: 500; overflow-wrap: anywhere; } .task-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; } .task-m .sep { color: var(--line-2); } .task-m .ic { width: 13px; height: 13px; } .lst { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 0 7px; height: 20px; border-radius: 999px; } .lst .dot { width: 6px; height: 6px; } .subs, .has-note { display: inline-flex; align-items: center; gap: 3px; } .flag { display: inline-grid; font-style: normal; } .flag .ic { width: 14px; height: 14px; stroke-width: 2; } .flag.f1 { color: var(--sand); } .flag.f2 { color: var(--rose); } .flag.f2 .ic { fill: currentColor; fill-opacity: .25; } .trow.is-done .task-t { text-decoration: line-through; color: var(--muted); } .tasks .trow:first-child { padding-top: 0; } .list-tools { display: flex; gap: 14px; margin: -6px 0 12px; } .tboard .kcard { cursor: pointer; } .tboard .kcard.is-done .kcard-t { text-decoration: line-through; color: var(--muted); } .kcard-t .flag { margin-right: 4px; } .due-chips { margin: 0 0 8px; } .due-chips .chip-btn { min-height: 34px; font-size: 13px; } .subs-l { display: grid; gap: 6px; } .sub-r { display: grid; grid-template-columns: 24px 1fr 32px; align-items: center; gap: 8px; } .sub-r input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--olive-2); margin: 0; } .sub-r .inp { min-height: 40px; padding: 8px 12px; font-size: 15px; } .subs-l:empty { display: none; } .draft-note { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--sky-3); color: var(--sky-ink); font-size: 13.5px; } .draft-note .ic { width: 16px; height: 16px; } .draft-note .link { margin-left: auto; font-size: 13.5px; } /* ---------- Notes ---------- */ .notes-empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 28px 18px; margin-bottom: 4px; } .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; } .tpl { display: grid; align-content: start; gap: 4px; padding: 14px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); text-align: left; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; } .tpl:hover { border-color: var(--line-2); box-shadow: var(--shadow); } .tpl:active { transform: scale(.98); } .tpl b { font-size: 14.5px; font-weight: 600; } .tpl span:not(.tpl-ic) { font-size: 12.5px; color: var(--muted); line-height: 1.35; } .tpl-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--sky-2); color: var(--navy); margin-bottom: 6px; } .tpl-ic .ic { width: 18px; height: 18px; } :root[data-theme="dark"] .tpl-ic { color: var(--sky-ink); } .pages-tree { padding: 4px 16px; } .page-row { padding-left: calc(var(--d, 0) * 22px); } .page-row .menu-ic { width: 34px; height: 34px; } .fav-ic { width: 15px; height: 15px; color: #c48a12; fill: currentColor; } .page-card .ic { color: var(--navy); } :root[data-theme="dark"] .page-card .ic { color: var(--sky); } .note-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-bottom: 6px; } .note-bar .ph-back { margin: 0 0 0 -6px; min-width: 0; } .note-bar .ph-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; } .note-acts { display: flex; align-items: center; gap: 8px; } .note-acts .icon-btn { width: 38px; height: 38px; } .note { position: relative; max-width: 760px; margin: 0 auto; padding-bottom: 40px; } .note-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 10px; } .note-crumbs a:hover { color: var(--blue); } .note-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--sky-2); color: var(--navy); margin-bottom: 10px; transition: transform .2s var(--ease); } .note-icon:hover { transform: scale(1.04); } .note-icon .ic { width: 26px; height: 26px; } :root[data-theme="dark"] .note-icon { color: var(--sky-ink); } .note-title { display: block; width: 100%; border: 0; background: transparent; resize: none; overflow: hidden; padding: 0; font: 500 34px/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); outline: none; } .note-title::placeholder { color: color-mix(in srgb, var(--muted) 55%, transparent); } @media (min-width: 960px) { .note-title { font-size: 42px; } } .note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); margin: 8px 0 18px; } .note-meta a { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); } .note-meta a .ic { width: 14px; height: 14px; } .note-saved { color: var(--olive-ink); } .blocks { display: grid; gap: 2px; } .blk { position: relative; display: flex; align-items: flex-start; gap: 6px; margin-left: -34px; padding-left: 34px; } .blk-h { position: absolute; left: 4px; top: 4px; width: 26px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--muted); opacity: 0; transition: opacity .15s, background .15s; } .blk-h .ic { width: 18px; height: 18px; stroke-width: 2.6; } .blk:hover .blk-h, .blk:focus-within .blk-h { opacity: .7; } .blk-h:hover { background: var(--bg-2); opacity: 1 !important; } @media (pointer: coarse) { .blk { margin-left: 0; padding-left: 26px; } .blk-h { left: -4px; opacity: .35; } } .blk-in { flex: 1; min-width: 0; display: block; width: 100%; border: 0; background: transparent; resize: none; overflow: hidden; padding: 4px 0; font: 400 16.5px/1.6 var(--sans); color: var(--ink); outline: none; field-sizing: content; } .blk-in::placeholder { color: transparent; } .blk-in:focus::placeholder, .blk:only-child .blk-in::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); } .blk-h1 .blk-in { font: 500 26px/1.25 var(--display); letter-spacing: -.012em; padding-top: 14px; } .blk-h2 .blk-in { font-size: 19px; font-weight: 600; letter-spacing: -.01em; padding-top: 12px; } .blk-h2 .blk-h { top: 14px; } .blk-h1 .blk-h { top: 18px; } .blk-todo .tick { margin-top: 6px; width: 22px; height: 22px; } .blk-todo .tick::after { left: 7px; top: 3.5px; } .blk-todo.is-done .blk-in:not(:placeholder-shown) { text-decoration: line-through; color: var(--muted); } .blk-bul { flex: none; width: 22px; height: 30px; display: grid; place-items: center; } .blk-bul::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--olive-2); } .blk-num { flex: none; min-width: 22px; padding-top: 4px; font-weight: 600; color: var(--olive-ink); font-variant-numeric: tabular-nums; line-height: 1.6; font-size: 15.5px; } .blk-quote .blk-in { border-left: 3px solid var(--navy); } .blk-quote .blk-in { font-family: var(--display); font-size: 18px; font-style: italic; color: var(--ink-2); padding-left: 12px; } :root[data-theme="dark"] .blk-quote .blk-in { border-left-color: var(--sky); } .blk-callout { background: var(--sky-3); border-radius: var(--r-sm); padding: 6px 12px 6px 46px; margin: 4px 0 4px -34px; } .blk-callout .blk-cic { flex: none; color: var(--blue); padding-top: 6px; } .blk-callout .blk-cic .ic { width: 18px; height: 18px; } @media (pointer: coarse) { .blk-callout { margin-left: 0; padding-left: 30px; } } .blk-hr { flex: 1; border: 0; height: 1px; background: var(--line-2); margin: 16px 0; } .blk-divider { cursor: default; } .qa-w { flex: 1; display: grid; gap: 2px; padding: 10px 14px; margin: 4px 0; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15, 30, 61, .04); } .qa-k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .qa-w .qa-q { font-weight: 600; } .qa-w .qa-a { color: var(--ink-2); } .blk-qa .blk-h { top: 10px; } .add-blk { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--muted); font-size: 14px; transition: background .2s, color .2s; } .add-blk:hover { background: var(--bg-2); color: var(--ink); } .add-blk .ic { width: 17px; height: 17px; } .subpages { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); } .subpages header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .subpages h2 { font: 600 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .slash { position: absolute; z-index: 30; width: 280px; max-height: 320px; overflow-y: auto; padding: 6px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); } .slash-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: var(--r-xs); text-align: left; } .slash-i.is-on, .slash-i:hover { background: var(--sky-3); } .slash-i b { display: block; font-size: 14px; font-weight: 500; } .slash-i em { display: block; font-style: normal; font-size: 12px; color: var(--muted); } .slash-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--bg-2); color: var(--ink-2); flex: none; } .slash-ic .ic { width: 17px; height: 17px; } .blk-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .blk-types .chip-btn { min-height: 34px; font-size: 13px; } .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; } .icon-grid .icon-btn { width: 100%; height: 48px; border-radius: var(--r-sm); } .ic.rot90 { transform: rotate(90deg); } /* ---------- Quiz ---------- */ .qz-daily { display: grid; gap: 16px; background: var(--navy); color: var(--on-navy); border-color: transparent; position: relative; overflow: hidden; } .qz-daily::after { content: ""; position: absolute; right: -80px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(157, 194, 255, .2), transparent); pointer-events: none; } .qz-daily > * { position: relative; } .qz-daily h2 { font: 500 26px/1.15 var(--display); margin-bottom: 4px; } .qz-daily p:last-child { color: var(--on-navy-2); font-size: 14.5px; } @media (min-width: 640px) { .qz-daily { grid-template-columns: 1fr auto; align-items: center; } } .qz-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } .qz-stats > div { position: relative; display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); } .qz-stats b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; } .qz-stats span { font-size: 13px; color: var(--muted); } .qz-stats .bar { margin-top: 6px; } .qz-flame { position: absolute; right: 14px; top: 14px; color: var(--sand); } .qz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .qz-grid .card + .card { margin: 0; } .qz-tile { display: grid; align-content: start; gap: 6px; transition: border-color .2s, transform .2s var(--ease); } .qz-tile:hover { border-color: var(--line-2); transform: translateY(-1px); } .qz-tile b { font-size: 16px; font-weight: 600; line-height: 1.3; } .qz-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--olive-3); color: var(--olive-ink); flex: none; margin-bottom: 4px; } .qz-ic .ic { width: 21px; height: 21px; } .qz-d { font-size: 13.5px; color: var(--muted); line-height: 1.4; } .qz-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .qz-prog { display: flex; gap: 4px; margin: -4px 0 16px; } .qz-prog i { flex: 1; height: 5px; border-radius: 3px; background: var(--bg-2); transition: background .3s; } .qz-prog i.cur { background: var(--sky); } .qz-prog i.ok { background: var(--olive-2); } .qz-prog i.ko { background: var(--rose); } .qz-card { display: grid; gap: 16px; max-width: 720px; } .qz-q { font: 500 22px/1.3 var(--display); letter-spacing: -.01em; text-wrap: pretty; } .qz-q.sm { font-size: 17px; } .qz-opts { display: grid; gap: 10px; } .qz-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: var(--r-md); border: 1.5px solid var(--line-2); background: var(--card); text-align: left; font-size: 15.5px; line-height: 1.4; transition: border-color .2s, background .2s, transform .15s; } .qz-opt:hover:not(:disabled) { border-color: var(--blue); } .qz-opt:active:not(:disabled) { transform: scale(.99); } .qz-opt:disabled { opacity: 1; cursor: default; } .qz-l { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--bg-2); font-size: 13px; font-weight: 600; color: var(--ink-2); } .qz-opt.is-ok { border-color: var(--olive-2); background: var(--olive-3); } .qz-opt.is-ok .qz-l { background: var(--olive-2); color: #fff; } .qz-opt.is-ko { border-color: var(--rose); background: var(--rose-3); } .qz-opt.is-ko .qz-l { background: var(--rose); color: #fff; } .qz-opt.is-off { opacity: .55; } .qz-ck { margin-left: auto; width: 20px; height: 20px; } .qz-opt.is-ok .qz-ck { color: var(--olive-ink); } .qz-opt.is-ko .qz-ck { color: var(--rose); } .qz-why { padding: 14px 16px; border-radius: var(--r-md); background: var(--bg-2); animation: rise .4s var(--ease) both; } .qz-why.ok { background: var(--olive-3); } .qz-why.ko { background: var(--sand-3); } .qz-why-k { font-weight: 600; margin-bottom: 2px; } .qz-why.ok .qz-why-k { color: var(--olive-ink); } .qz-why.ko .qz-why-k { color: var(--sand); } .qz-why p:last-child { color: var(--ink-2); font-size: 15px; } .qz-res { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; } .qz-res h2 { font: 500 26px/1.2 var(--display); margin-bottom: 4px; } .qz-res p { color: var(--ink-2); max-width: 46ch; } .qz-res .hero-ring-v b { font-size: 34px; } .qz-res .hero-ring-v small { font-size: 16px; color: var(--muted); font-weight: 500; } .qz-res .hero-ring-v span { font-size: 13px; color: var(--muted); } .qz-res .ring-fg { stroke: var(--olive-2); } .qz-rev { display: grid; gap: 8px; } .qz-good { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; color: var(--olive-ink); } .qz-good .ic { width: 18px; height: 18px; margin-top: 2px; flex: none; } .fcard { min-height: 220px; display: grid; align-content: center; gap: 6px; text-align: center; padding: 28px 22px; margin: 14px 0; max-width: 640px; } .fcard.is-flip { animation: rise .45s var(--ease) both; } .fc-k { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 8px; } .fc-q { font: 500 23px/1.3 var(--display); text-wrap: balance; } .fc-a { font-size: 17px; color: var(--ink-2); text-wrap: pretty; } .fc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; } .fc-ko { color: var(--rose); } .qb { display: grid; gap: 12px; } .qb.is-err { border-color: var(--rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 18%, transparent); } .qb-list { display: grid; gap: 14px; margin: 14px 0; } .qb-list .card + .card { margin: 0; } .qb-ans { display: grid; gap: 8px; } .qb-a { display: grid; grid-template-columns: 22px 28px 1fr; align-items: center; gap: 8px; } .qb-a input[type="radio"] { width: 20px; height: 20px; accent-color: var(--olive-2); margin: 0; } .qb-a .inp { min-height: 42px; padding: 9px 12px; } /* ---------- Abonnement ---------- */ .test-strip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--r-md); background: var(--sand-3); color: var(--ink-2); font-size: 13.5px; } .test-strip .ic { width: 18px; height: 18px; color: var(--sand); flex: none; margin-top: 1px; } .test-strip b { color: var(--ink); } .status-card.st-past_due { border-color: color-mix(in srgb, var(--rose) 40%, transparent); } .status-card.st-past_due .status-ic { background: var(--rose-3); color: var(--rose); } .status-card.st-active .status-ic, .status-card.st-canceling .status-ic { background: var(--olive-3); color: var(--olive-ink); } .status-card .act-row { margin: 0; } .plan.is-reco { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow); } .plan-tag { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--sky-2); color: var(--blue); margin: -6px 0 -4px; } .plan-sub { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: -6px; } .plan.is-dark .plan-sub { color: var(--on-navy-2); } .plan-f em { font-style: normal; color: var(--muted); } .plan.is-dark .plan-f em { color: var(--on-navy-2); } @media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .cmp-wrap { overflow-x: auto; margin: 0 -6px; } .cmp { width: 100%; border-collapse: collapse; font-size: 14px; } .cmp th, .cmp td { padding: 10px 6px; border-top: 1px solid var(--line); text-align: center; vertical-align: middle; } .cmp thead th { border-top: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); padding-top: 0; } .cmp tbody th { text-align: left; font-weight: 400; color: var(--ink-2); min-width: 150px; } .cmp td { width: 22%; } .cmp .is-cur { background: var(--sky-3); } .cmp thead .is-cur { color: var(--blue); border-radius: var(--r-xs) var(--r-xs) 0 0; } .cmp .ok { display: inline-grid; color: var(--olive-2); } .cmp .ok .ic { width: 18px; height: 18px; stroke-width: 2.2; } .cmp .no { color: var(--line-2); font-weight: 600; } .cmp .txt { font-size: 12.5px; font-weight: 500; } .cmp-p th, .cmp-p td { font-weight: 600 !important; color: var(--ink) !important; } @media (max-width: 480px) { .cmp { font-size: 13px; } .cmp tbody th { min-width: 120px; } .cmp .txt { font-size: 11.5px; } } .bill .row { padding: 10px 0; } .bill .row-e { justify-items: end; } .co-sum { display: grid; padding: 4px 14px; border-radius: var(--r-md); background: var(--bg-2); } .co-sum > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; } .co-sum > div:first-child { border-top: 0; } .co-sum dt { color: var(--muted); } .co-sum dd { font-weight: 500; text-align: right; } .co-tot dt, .co-tot dd { color: var(--ink) !important; font-weight: 600; font-size: 16px; } .co .test-strip { margin: 0; } .co-err { padding: 12px 14px; border-radius: var(--r-md); background: var(--rose-3); color: var(--rose); font-size: 14px; font-weight: 500; } .test-tools summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; } .test-tools summary::-webkit-details-marker { display: none; } .test-tools summary h2 { font-size: 16px; font-weight: 600; } .test-tools[open] summary { margin-bottom: 12px; } .test-tools[open] summary .chev { transform: rotate(180deg); } .test-tools .body { margin-bottom: 12px; color: var(--ink-2); font-size: 14.5px; } /* ---------- Recherche et Créer ---------- */ .sheet-search .sheet-in { padding-top: 10px; } @media (min-width: 700px) { dialog.sheet-search { align-items: flex-start; padding-top: 12vh; } .sheet-search .sheet-in { border-radius: var(--r-lg); max-width: 620px; } .sheet-search .sheet-grab { display: none; } } .srch-in { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; } .srch-in .search-ic { left: 15px; } .srch-in .btn-text { font-size: 16px; } .srch-r { display: grid; max-height: min(60dvh, 520px); overflow-y: auto; padding-bottom: 6px; } .srch-g { font: 600 11.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 14px 4px 6px; } .srch-g span { font-weight: 500; letter-spacing: 0; } .srch-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: var(--r-sm); text-align: left; } .srch-i.is-on, .srch-i:hover { background: var(--sky-3); } .srch-i .menu-ic { width: 34px; height: 34px; } .srch-hint { display: flex; gap: 10px; align-items: flex-start; padding: 14px 4px; color: var(--muted); font-size: 14px; } .srch-hint .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; } .create-grid { display: grid; gap: 8px; } .create-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-2); text-align: left; transition: background .2s; } .create-i:hover { background: var(--sky-3); } .sheet .qadd { margin-bottom: 4px; background: var(--card); border-color: var(--line-2); } /* ---------- CRM par métier ---------- */ .preset-grid { display: grid; gap: 8px; margin-bottom: 14px; } @media (min-width: 640px) { .preset-grid { grid-template-columns: 1fr 1fr; } } .preset { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--card); text-align: left; transition: border-color .2s, background .2s; } .preset:hover { border-color: var(--ink-2); } .preset.is-on { border-color: var(--olive-2); background: var(--olive-3); } .preset-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--bg-2); color: var(--ink-2); flex: none; } .preset.is-on .preset-ic { background: var(--olive-2); color: #fff; } .preset-ic .ic { width: 19px; height: 19px; } .preset-b { display: grid; flex: 1; min-width: 0; line-height: 1.3; } .preset-b b { font-size: 14.5px; font-weight: 600; } .preset-b em { font-style: normal; font-size: 12.5px; color: var(--muted); } .preset-ck { width: 18px; height: 18px; color: var(--olive-ink); flex: none; } /* ---------- Compte : modules, offre ---------- */ .mod-r { display: flex !important; align-items: center; gap: 12px; } .mod-r > span:last-child { display: grid; } .mod-r .feat-ic { width: 32px; height: 32px; } .mod-r .feat-ic .ic { width: 24px; height: 24px; } .offer-box { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-md); background: var(--bg-2); } .offer-box legend { float: left; width: 100%; margin-bottom: 2px; } /* ---------- Accueil : modules et exemple ---------- */ .group-r.is-multi input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .group-r.is-multi .group-ck { visibility: hidden; } .group-r.is-multi input:checked ~ .group-ck { visibility: visible; } .group-r.is-multi:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: -2px; } .group-r.is-multi { padding: 10px 16px; } .group-t { display: grid; line-height: 1.3; } .group-t b { font-weight: 500; font-size: 16.5px; } .group-t em { font-style: normal; font-size: 13.5px; color: var(--muted); } .group-r select { flex: 1; min-width: 0; height: 50px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); outline: none; text-align: right; } .ob-ex { margin: 22px 0 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); text-align: left; font-size: 15px; line-height: 1.45; color: var(--ink-2); animation: ob-up .6s .5s var(--ease) both; } .ob-ex span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--olive-ink); margin-bottom: 4px; } .ob-need { color: var(--rose); } /* ---------- Scripts : choix du service ---------- */ .svc-seg { display: flex; overflow-x: auto; scrollbar-width: none; } .svc-seg::-webkit-scrollbar { display: none; } .svc-seg .seg-i { flex: 1 0 auto; white-space: nowrap; } /* ---------- Accessibilité : cibles tactiles ---------- */ @media (pointer: coarse) { .icon-btn.sm { width: 40px; height: 40px; } .link { min-height: 40px; } .chip-btn { min-height: 40px; } } .dot.t-grey { background: var(--muted); } .dot.t-sky { background: var(--sky); } .dot.t-blue { background: var(--blue); } .dot.t-navy { background: var(--navy); } .dot.t-sand { background: var(--sand); } .dot.t-olive { background: var(--olive-2); } .dot.t-rose { background: var(--rose); } :root[data-theme="dark"] .dot.t-navy { background: #c9d6f5; } .tsec .card-h > div { display: flex; align-items: baseline; gap: 8px; } @media (max-width: 959px) { body[data-fab="1"] .ph-a .btn-primary.fab-dup { display: none; } } @media (max-width: 560px) { .qz-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .qz-tile { padding: 14px; } .qz-tile b { font-size: 14.5px; } .qz-tile .qz-d { display: none; } .qz-tile .qz-f { flex-direction: column; align-items: flex-start; margin-top: auto; } } .bill .row-b b { white-space: normal; line-height: 1.3; } .dash .start { margin: 0; } @media (min-width: 960px) { .dash .day-card { grid-column: 1 / span 7; } .dash .start { grid-column: 1 / span 7; } .dash-side { grid-column: 8 / span 5; grid-row: 1 / span 2; } .dash .week { grid-column: 1 / -1; } } /* ========================================================================== v1.3.1 — vue d'ensemble (cartes chiffres, courbe, activité, répartition), accueil hiérarchisé, premiers écrans guidés, page Compte ========================================================================== */ /* Couleurs catégorielles validées (validate_palette : clair et sombre, ordre adjacent, tour complet) */ :root { --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c-other: #a8a39a; } :root[data-theme="dark"] { --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c-other: #6b7385; } .c1 { background: var(--c1); fill: var(--c1); } .c2 { background: var(--c2); fill: var(--c2); } .c3 { background: var(--c3); fill: var(--c3); } .c4 { background: var(--c4); fill: var(--c4); } .c5 { background: var(--c5); fill: var(--c5); } .c6 { background: var(--c6); fill: var(--c6); } .c-other { background: var(--c-other); fill: var(--c-other); } /* ---------- Cartes chiffres ---------- */ .kpi-grid { display: grid; gap: 12px; margin-bottom: 14px; } @media (min-width: 640px) { .kpi-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-grid.n3, .kpi-grid.n4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .kpi-grid.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .kpi2 { --k: var(--blue); --k-bg: var(--sky-2); position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 16px 18px 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; transition: border-color .2s, transform .2s var(--ease); min-width: 0; } .kpi2:hover { border-color: var(--line-2); transform: translateY(-1px); } .kpi2.k-olive { --k: var(--olive-2); --k-bg: var(--olive-3); } .kpi2.k-sand { --k: var(--sand); --k-bg: var(--sand-3); } .kpi2.k-navy { --k: var(--navy-3); --k-bg: var(--grey-3); } :root[data-theme="dark"] .kpi2.k-navy { --k: #9fb4e0; } .kpi2-h { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .kpi2-l { font-size: 14px; font-weight: 500; color: var(--ink-2); } .kpi2-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--k-bg); color: var(--k); flex: none; } .kpi2-ic .ic { width: 19px; height: 19px; } .kpi2-v { grid-column: 1 / -1; font-size: 32px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; margin: 6px 0 2px; font-variant-numeric: tabular-nums; word-spacing: .1em; } .kpi2-d { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; font-size: 13px; color: var(--muted); } .kpi2-d b { font-weight: 600; } .kpi2-d.up b, .kpi2-d.up .ic { color: var(--olive-ink); } .kpi2-d.down b, .kpi2-d.down .ic { color: var(--rose); } .kpi2-d .ic { width: 15px; height: 15px; stroke-width: 2.2; } .ic.up-ic { transform: rotate(-90deg); } .ic.down-ic { transform: rotate(90deg); } .spark { grid-column: 1 / -1; width: 100%; height: 40px; margin-top: 10px; overflow: visible; } .spark-l { fill: none; stroke: var(--k); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .spark-a { fill: var(--k); fill-opacity: .1; } .spark-d { fill: var(--k); } .kpi-grid.compact .kpi2 { padding: 12px 14px; box-shadow: none; background: var(--card-2); } .kpi-grid.compact .kpi2-v { font-size: 24px; margin-top: 2px; } .kpi-grid.compact .kpi2-ic { width: 30px; height: 30px; } .kpi-grid.compact .kpi2-ic .ic { width: 16px; height: 16px; } .kpi-grid.compact .spark { height: 28px; margin-top: 6px; } @media (max-width: 639px) { .kpi-grid.compact { grid-template-columns: 1fr; gap: 8px; } .kpi-grid.compact .kpi2 { grid-template-columns: 1fr 96px; align-items: center; } .kpi-grid.compact .kpi2-h { grid-column: 1; } .kpi-grid.compact .kpi2-ic { display: none; } .kpi-grid.compact .kpi2-v, .kpi-grid.compact .kpi2-d { grid-column: 1; } .kpi-grid.compact .spark { grid-column: 2; grid-row: 1 / span 3; margin: 0; height: 36px; } } /* ---------- Vue d'ensemble ---------- */ .ov-period { margin: 0; } .ov-range { font-size: 13.5px; color: var(--muted); margin: -8px 0 14px; } .ov-chart { margin-bottom: 14px; } .ov-tools { display: flex; align-items: center; gap: 8px; } .ov-sel { min-height: 38px; padding: 6px 34px 6px 12px; font-size: 14px; width: auto; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676d7e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; } .ln-chart { min-height: 240px; } .ln-line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .ln-area { fill: var(--blue); fill-opacity: .08; } .ln-pt { fill: var(--blue); stroke: var(--card); stroke-width: 2; transition: r .15s; } .ln-pt.is-hover { r: 6; } .ln-cross { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; } .ln-cross.on { opacity: 1; } .ln-hit { outline: none; } .ln-hit:focus-visible { fill: var(--sky-3); fill-opacity: .6; } .ov-two { display: grid; gap: 14px; } .ov-two .card + .card { margin: 0; } @media (min-width: 1000px) { .ov-two { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } } .act-t { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 12px; } .act-t th { font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; padding: 0 8px 8px 0; border-bottom: 1px solid var(--line); } .act-t td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); vertical-align: middle; } .act-t .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .act-ev { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; } .act-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; flex: none; } .act-ic .ic { width: 15px; height: 15px; } .act-what { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 600px) { .act-t.tbl-cards td { grid-template-columns: 90px 1fr; padding: 3px 0; } .act-t.tbl-cards .num { text-align: left; } .act-what { max-width: none; white-space: normal; } } .dn-wrap { display: grid; gap: 18px; align-items: center; justify-items: center; margin-bottom: 12px; } @media (min-width: 480px) { .dn-wrap { grid-template-columns: auto 1fr; justify-items: stretch; } } .dn-chart { position: relative; width: 172px; height: 172px; min-height: 0; } .dn-chart svg { display: block; } .dn-s { stroke: var(--card); stroke-width: 2; transition: opacity .2s; outline: none; } .dn-s.is-dim { opacity: .35; } .dn-s:focus-visible { opacity: 1; stroke: var(--ink); } .dn-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; line-height: 1.1; } .dn-c b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; } .dn-c span { font-size: 12px; color: var(--muted); } .dn-chart .ch-tip { left: 50% !important; top: -6px !important; transform: translate(-50%, -100%); white-space: nowrap; } .dn-chart .ch-tip.on { transform: translate(-50%, -100%); } .dn-leg { display: grid; gap: 8px; width: 100%; } .dn-leg li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); } .dn-leg .sw { width: 10px; height: 10px; border-radius: 50%; } .dn-leg b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } /* ---------- Accueil ---------- */ .sec-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 2px 10px; } .sec-row .sec-title { margin: 0; } .home-kpis .kpi-grid { margin: 0; } @media (min-width: 960px) { .dash .home-kpis { grid-column: 1 / -1; } } .qadd-main { background: var(--card); border-color: var(--line-2); box-shadow: 0 1px 2px rgba(15, 30, 61, .05); } .qadd-main .qadd-go:disabled { opacity: .35; transform: none; background: var(--muted); } .qadd-main .qadd-in { font-weight: 500; } .day-sub .is-late { font-weight: 600; } .calls-card .btn { margin-top: 2px; } .row-b .tag, .task-t .tag, .kcard-t .tag { display: inline-flex; font-size: 10.5px; font-weight: 600; color: var(--olive-ink); background: var(--olive-3); height: 18px; padding: 0 6px; border-radius: 5px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; } .task-m .tag { margin: 0; } /* ---------- Premiers écrans guidés ---------- */ .onboard-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 32px 20px 24px; } .onboard-empty h2 { font: 500 26px/1.2 var(--display); letter-spacing: -.01em; text-wrap: balance; } .onboard-empty > p { color: var(--ink-2); max-width: 48ch; } .onboard-empty .btn-lg { margin-top: 6px; } .oe-k { font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 10px; } .oe-ex { justify-content: center; margin: 0; } .oe-alt { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .oe-foot { font-size: 13.5px; color: var(--muted); max-width: 46ch; } .oe-foot .link { font-size: 13.5px; padding: 0; display: inline; } .demo-preview { position: relative; width: 100%; max-width: 420px; margin: 8px 0 2px; padding: 14px 16px 10px; border-radius: var(--r-md); border: 1.5px dashed var(--line-2); background: var(--card-2); text-align: left; opacity: .85; } .demo-preview > .tag { position: absolute; top: -10px; left: 14px; margin: 0; height: 20px; } .dp-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); } .dp-row:first-of-type { border-top: 0; } .dp-row > span:last-child { display: grid; line-height: 1.3; } .dp-row b { font-weight: 500; font-size: 14.5px; } .dp-row em { font-style: normal; font-size: 12.5px; color: var(--muted); } .dp-row .tick { pointer-events: none; } .dp-card .dp-t { font-weight: 600; } .dp-card .dp-s { font-size: 13px; color: var(--muted); } .dp-card .dp-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; } /* ---------- Compte ---------- */ .acc-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 14px calc(var(--pad) * -1) 0; padding: 10px var(--pad); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .acc-nav::-webkit-scrollbar { display: none; } @media (min-width: 960px) { .acc-nav { margin: 14px 0 0; padding: 10px 0; } } .sec-title[id] { scroll-margin-top: 70px; } .save-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); white-space: nowrap; flex: none; } .save-st .ic { width: 14px; height: 14px; } .save-st.is-ok { color: var(--olive-ink); } .save-st.is-err { color: var(--danger); white-space: normal; text-align: right; max-width: 190px; } @media (max-width: 520px) { .card-h:has(.save-st) { flex-wrap: wrap; } .save-st.is-err { text-align: left; max-width: none; } } .backup-st { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--r-md); background: var(--olive-3); color: var(--olive-ink); font-size: 14px; } .backup-st.is-warn { background: var(--sand-3); color: var(--sand); } .backup-st .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; } .backup-st b { font-weight: 600; } .danger-zone .body { margin-bottom: 14px; } .demo-tools summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; } .demo-tools summary::-webkit-details-marker { display: none; } .demo-tools summary h2 { font-size: 16px; font-weight: 600; } .demo-tools[open] summary { margin-bottom: 12px; } .demo-tools[open] summary .chev { transform: rotate(180deg); } .demo-tools .body { color: var(--ink-2); font-size: 14.5px; margin-bottom: 12px; } .card .body { color: var(--ink-2); font-size: 14.5px; } .dn-leg b { white-space: nowrap; } .dn-leg span { min-width: 0; } @media (max-width: 639px) { .kpi-grid:not(.compact) { grid-template-columns: 1fr 1fr; gap: 10px; } .kpi-grid:not(.compact) .kpi2 { padding: 12px 13px 10px; } .kpi-grid:not(.compact) .kpi2-l { font-size: 13px; line-height: 1.25; } .kpi-grid:not(.compact) .kpi2-ic { width: 28px; height: 28px; } .kpi-grid:not(.compact) .kpi2-ic .ic { width: 15px; height: 15px; } .kpi-grid:not(.compact) .kpi2-v { font-size: 24px; } .kpi-grid:not(.compact) .kpi2-d { font-size: 12px; } .kpi-grid:not(.compact) .spark { height: 28px; margin-top: 6px; } .act-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .act-t, .act-t tbody { display: block; } .act-t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .act-t td { padding: 0; border: 0; } .act-t td:nth-child(1) { grid-column: 1; grid-row: 1; } .act-t td:nth-child(2) { grid-column: 1; grid-row: 2; padding-left: 38px; font-size: 13px; color: var(--muted); max-width: none; white-space: normal; } .act-t td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; font-size: 12.5px; } .act-t td:nth-child(4) { grid-column: 2; grid-row: 2; font-size: 13px; } } @media (max-width: 639px) { .ov-chart .card-h { flex-wrap: wrap; } .ov-chart .card-h > div:first-child { flex: 1 1 100%; } .ov-tools { flex: 1 1 100%; } .ov-tools .ov-sel { flex: 1; } } /* ---------- Monogramme M&S (v1.3.2) ---------- */ .lm-t { font-family: var(--display); font-weight: 600; font-size: 400px; letter-spacing: 8px; fill: var(--on-navy); } .lm-a { fill: var(--sky); } .side .lm-t, .lock .lm-t { fill: var(--navy); } .side .lm-a, .lock .lm-a { fill: var(--blue); } :root[data-theme="dark"] .side .lm-t { fill: #fff; } :root[data-theme="dark"] .side .lm-a { fill: #dfe9ff; } .logo-mark.draw .lm-t { stroke: var(--on-navy); stroke-width: 6; stroke-dasharray: 2600; stroke-dashoffset: 2600; fill-opacity: 0; animation: lm-draw 1.5s .1s var(--ease) forwards, sp-fill .5s 1.05s ease forwards; } .logo-mark.draw .lm-a { stroke: var(--sky); } .sp-t { font-family: var(--display); font-weight: 600; font-size: 400px; letter-spacing: 8px; fill: var(--on-navy); fill-opacity: 0; stroke: var(--on-navy); stroke-width: 6; stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: lm-draw 1s .15s var(--ease) forwards, sp-fill .4s .8s ease forwards; } .sp-a { fill: var(--sky); stroke: var(--sky); } /* ========================================================================== v1.3.2 — accueil (accroche, présentation, faire connaissance), exemples partout ========================================================================== */ /* ---------- Accroche ---------- */ .ob-kick { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--olive-ink); margin-top: 14px; opacity: 0; animation: ob-up .7s .45s var(--ease) forwards; } .ob-hook { font: 500 25px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink-2); max-width: 21ch; margin: 10px auto 0; text-wrap: balance; opacity: 0; animation: ob-up .8s .6s var(--ease) forwards; } .ob-welcome-p .ob-name { font-size: 29px; margin-top: 14px; max-width: 18ch; margin-inline: auto; text-wrap: balance; opacity: 0; animation: ob-up .8s 1.05s var(--ease) forwards; } .ob-welcome-p .ob-promise { margin-top: 14px; opacity: 0; animation: ob-up .8s 1.3s var(--ease) forwards; } .ob-welcome-p .ob-aud { opacity: 0; animation: ob-up .8s 1.45s var(--ease) forwards; } .ob-restore { position: relative; justify-content: center; font-size: 15px; cursor: pointer; } /* ---------- Présentation ---------- */ .ob-tour-p { padding-top: 0; } .tour { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -24px; outline: none; } .tour::-webkit-scrollbar { display: none; } .tour-s { flex: 0 0 100%; scroll-snap-align: center; padding: 8px 24px 0; display: grid; justify-items: center; align-content: start; } .tour-s .ob-h { font-size: 27px; margin-top: 22px; } .tour-s .ob-p { margin-bottom: 0; } .tour-m { position: relative; width: 100%; max-width: 330px; } .tour-tag { position: absolute; top: -9px; left: 16px; margin: 0; } .tour-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; } .tour-dots button { width: 8px; height: 8px; border-radius: 4px; background: var(--line-2); transition: width .35s var(--ease), background .3s; } .tour-dots button.on { width: 22px; background: var(--olive-2); } .mock { display: grid; gap: 8px; padding: 18px 16px 14px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); text-align: left; font-family: var(--sans); min-height: 238px; align-content: start; } .mk-k { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--blue); } .mk-h { font: 500 22px/1.15 var(--display); margin-bottom: 2px; } .mk-in { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--blue); font-size: 13.5px; color: var(--ink); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent); } .mk-in .ic { width: 16px; height: 16px; color: var(--blue); } .mk-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); } .mk-row .tick { width: 20px; height: 20px; } .mk-row .tick::after { left: 6px; top: 3px; width: 5px; height: 9px; } .mk-row > span { display: grid; line-height: 1.25; } .mk-row b { font-size: 13.5px; font-weight: 500; } .mk-row b.done { text-decoration: line-through; color: var(--muted); } .mk-row em { font-style: normal; font-size: 11.5px; color: var(--muted); } .mk-row em.late { color: var(--rose); } .mk-pic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--sky-2); color: var(--navy); } .mk-pic .ic { width: 18px; height: 18px; } .mk-title { font: 500 21px/1.15 var(--display); } .mk-h2 { font-size: 13.5px; font-weight: 600; margin-top: 4px; } .mk-li { position: relative; padding-left: 16px; font-size: 13px; color: var(--ink-2); } .mk-li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--olive-2); } .mk-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mock.mk-board { align-items: start; } .mk-col { display: grid; gap: 6px; padding: 8px; border-radius: var(--r-md); background: var(--bg-2); align-content: start; min-height: 120px; } .mk-col p { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ink-2); line-height: 1.2; } .mk-col .dot { width: 7px; height: 7px; flex: none; } .mk-card { display: grid; padding: 7px 8px; border-radius: 9px; background: var(--card); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; line-height: 1.25; } .mk-card b { font-weight: 600; } .mk-card em { font-style: normal; font-weight: 400; font-size: 10.5px; color: var(--muted); } .mk-stats { gap: 12px; } .mk-stats .kpi2 { box-shadow: none; padding: 12px 14px 10px; } .mk-stats .kpi2:hover { transform: none; } .mk-stats .kpi2-v { font-size: 26px; } .mk-stats .spark { height: 30px; margin-top: 6px; } .mk-donut { display: flex; align-items: center; gap: 16px; padding: 4px 6px; } .mk-ring { width: 64px; height: 64px; border-radius: 50%; flex: none; background: conic-gradient(var(--c1) 0 62%, var(--card) 0 62.6%, var(--c2) 0 78%, var(--card) 0 78.6%, var(--c3) 0 99.4%, var(--card) 0); -webkit-mask: radial-gradient(circle, transparent 19px, #000 20px); mask: radial-gradient(circle, transparent 19px, #000 20px); } .mk-donut ul { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); } .mk-donut li { display: flex; align-items: center; gap: 7px; } .mk-donut .sw { width: 9px; height: 9px; border-radius: 50%; } .mk-q { font: 500 17px/1.3 var(--display); margin: 2px 0 4px; } .mk-opt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); font-size: 13.5px; } .mk-opt.ok { border-color: var(--olive-2); background: var(--olive-3); font-weight: 600; color: var(--olive-ink); } .mk-opt .ic { width: 16px; height: 16px; } /* ---------- Faire connaissance ---------- */ .pick-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pick-c { position: relative; display: grid; gap: 2px; align-content: start; padding: 12px 12px 11px; border-radius: var(--r-md); background: var(--card); border: 1.5px solid var(--line); cursor: pointer; font-family: var(--apple); transition: border-color .2s, background .2s, transform .15s; } .pick-c:active { transform: scale(.98); } .pick-c input { position: absolute; opacity: 0; pointer-events: none; } .pick-c b { font-size: 15px; font-weight: 600; line-height: 1.25; } .pick-c em { font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.3; } .pick-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--bg-2); color: var(--ink-2); margin-bottom: 6px; transition: background .2s, color .2s; } .pick-ic .ic { width: 18px; height: 18px; } .pick-ck { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; color: var(--olive-ink); visibility: hidden; } .pick-c:has(input:checked) { border-color: var(--olive-2); background: var(--olive-3); } .pick-c:has(input:checked) .pick-ic { background: var(--olive-2); color: #fff; } .pick-c:has(input:checked) .pick-ck { visibility: visible; } .pick-c:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; } .ob-seg { margin: 0; } .ob-seg .seg-i { min-height: 46px; font-size: 15px; } .ob-seg input { position: absolute; opacity: 0; pointer-events: none; } .ob-mods { display: flex; gap: 10px; align-items: flex-start; margin: 16px 2px 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--sky-3); color: var(--ink-2); font-size: 14px; font-family: var(--apple); } .ob-mods .ic { width: 18px; height: 18px; color: var(--blue); flex: none; margin-top: 1px; } .ob-mods b { font-weight: 600; color: var(--ink); } .ready-l { display: grid; gap: 14px; margin: 6px 4px 4px; } .ready-l li { display: flex; gap: 14px; align-items: flex-start; } .ready-l b { font-size: 16px; font-weight: 600; } .ready-l p { font-size: 14.5px; line-height: 1.38; color: var(--muted); } .ob-trial-t { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); margin: 0 16px; font-family: var(--apple); } /* ---------- Exemples ---------- */ .example-bar { display: grid; gap: 10px; padding: 16px 18px; margin-bottom: 16px; border-radius: var(--r); background: var(--olive-3); border: 1px solid color-mix(in srgb, var(--olive-2) 35%, transparent); color: var(--ink-2); } .example-bar > .tag { justify-self: start; margin: 0; } .example-bar b { color: var(--ink); } .example-bar .end-a { margin: 0; } .is-example .kpi2, .is-example .card { position: relative; } .is-example .kpi2::after, .is-example .card::after { content: "Exemple"; position: absolute; top: -9px; left: 14px; height: 19px; padding: 0 7px; border-radius: 6px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--olive-ink); background: var(--olive-3); border: 1px solid color-mix(in srgb, var(--olive-2) 30%, transparent); } .is-example .card { overflow: visible; } .is-example .kpi2 { overflow: visible; } .home-kpis.is-example .kpi2 { border-style: dashed; } .ex-note { font-size: 13.5px; color: var(--muted); margin: -4px 2px 10px; } .sec-title .tag { vertical-align: 1px; text-transform: none; letter-spacing: 0; } .demo-preview .tag { text-transform: none; letter-spacing: 0; } .dp-page .dp-pt { display: flex; align-items: center; gap: 10px; font: 500 19px/1.2 var(--display); margin-bottom: 4px; } .dp-pic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--sky-2); color: var(--navy); } .dp-pic .ic { width: 16px; height: 16px; } .dp-h2 { font-size: 13.5px; font-weight: 600; margin-top: 6px; } .dp-li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--ink-2); } .dp-li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--olive-2); } .dp-board { max-width: 460px; } .dp-board .mk-col { min-height: 0; } .dp-days { display: flex; gap: 6px; margin-bottom: 4px; } .dp-days span { flex: 1; display: grid; justify-items: center; padding: 6px 0; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 11px; color: var(--muted); } .dp-days em { font-style: normal; } .dp-days b { font-size: 14px; color: var(--ink); } .dp-days i { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); margin-top: 2px; } .dp-days span.on { background: var(--navy); border-color: var(--navy); color: var(--on-navy-2); } .dp-days span.on b { color: var(--on-navy); } .dp-days span.on i { background: var(--sky); } .dp-mini { max-width: none; margin: 4px 0 12px; } .dp-line { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); } .dp-line:first-of-type { border-top: 0; } .dp-line > span:last-child { display: grid; line-height: 1.3; } .dp-line b { font-size: 14.5px; font-weight: 600; } .dp-line em { font-style: normal; font-size: 12.5px; color: var(--muted); } .dp-flash { display: grid; gap: 2px; text-align: center; padding: 6px 4px; } .dp-flash em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .dp-flash b { font: 500 17px/1.3 var(--display); } .dp-flash span { font-size: 14px; color: var(--ink-2); } .empty .demo-preview { margin: 10px auto 12px; } .demo-preview .bar { margin: 8px 0 4px; } .demo-preview .dp-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; } .notes-empty .btn-lg { margin-top: 6px; } .example-bar .end-a { justify-content: flex-start; } /* ========== v1.4 : projets, devis, notifications, connecteurs, RGPD ========== */ .k-grey { --k: var(--muted); --k-bg: var(--grey-3); } .k-sky { --k: var(--sky-ink); --k-bg: var(--sky-3); } .k-blue { --k: var(--blue); --k-bg: var(--sky-2); } .k-navy { --k: var(--navy-3); --k-bg: var(--grey-3); } :root[data-theme="dark"] .k-navy { --k: #9fb4e0; } .k-sand { --k: var(--sand); --k-bg: var(--sand-3); } .k-olive { --k: var(--olive-ink); --k-bg: var(--olive-3); } .k-rose { --k: var(--rose); --k-bg: var(--rose-3); } /* Projets */ .pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); gap: 12px; } .pj-grid .card + .card { margin-top: 0; } .pj-card { display: grid; gap: 8px; align-content: start; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; } .pj-card:hover { border-color: var(--line-2); transform: translateY(-1px); } .pj-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pj-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--k-bg); color: var(--k); flex: none; } .pj-ic .ic { width: 20px; height: 20px; } .pj-st { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .pj-st .chip { height: 24px; font-size: 12px; } .pj-n { font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; } .pj-c { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); } .pj-c .ic { width: 14px; height: 14px; flex: none; } .pj-p { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; } .pj-p b { color: var(--ink); font-weight: 600; } .pj-card .bar { height: 7px; } .pj-next { display: flex; align-items: flex-start; gap: 7px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); } .pj-next .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--muted); } .pj-layout { display: grid; gap: 14px; align-items: start; } .pj-layout > div > * + * { margin-top: 14px; } @media (min-width: 960px) { .pj-layout { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; } } .pj-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; } .pj-prog .hero-ring-v b { color: var(--ink); font-size: 26px; } .pj-prog .hero-ring-v small { font-size: 14px; font-weight: 500; } .pj-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 28px; } .pj-stats dt { font-size: 12.5px; color: var(--muted); } .pj-stats dd { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; } .pj-desc { flex-basis: 100%; color: var(--ink-2); font-size: 15px; } .pj-g { font: 600 11.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 16px 0 4px; } .pj-g b { font-weight: 500; letter-spacing: 0; } .pj-done { margin-top: 14px; } .pj-done summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--muted); padding: 6px 0; list-style: none; } .pj-done summary::-webkit-details-marker { display: none; } .pj-chip { display: inline-flex; align-items: center; gap: 4px; color: var(--k); font-weight: 500; } .pj-chip .ic { width: 12px; height: 12px; } .st-doing { color: var(--blue); font-weight: 500; } .dp-pj .dp-s { font-size: 13px; color: var(--muted); } /* Liste déroulante en forme de pastille (filtres) */ .chip-sel { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 0 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; flex: none; } .chip-sel .ic { width: 15px; height: 15px; flex: none; } .chip-sel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; color: inherit; padding: 0 28px 0 0; min-height: 34px; cursor: pointer; max-width: 200px; text-overflow: ellipsis; } .chip-sel::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); pointer-events: none; opacity: .7; } .chip-sel:not(:has(> .ic)) { padding-left: 4px; } .chip-sel:not(:has(> .ic)) select { padding-left: 8px; } .chip-sel.is-on { background: var(--navy); border-color: var(--navy); color: var(--on-navy); } .chip-sel select option { color: var(--ink); background: var(--card); } .chip-sel select:focus-visible { outline: none; } .chip-sel:focus-within { box-shadow: 0 0 0 3px var(--sky-2); } /* Devis */ .qt-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .qt-kpis .card + .card { margin-top: 0; } .qk { display: grid; gap: 2px; padding: 13px 14px; min-width: 0; } .qk span { font-size: 12.5px; color: var(--muted); } .qk b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; word-spacing: .1em; } .qk em { font-style: normal; font-size: 12px; color: var(--muted); } @media (max-width: 420px) { .qk { padding: 11px 10px; } .qk b { font-size: 16px; } .qk span, .qk em { font-size: 11.5px; } } .qt-v { display: grid; justify-items: end; gap: 4px; flex: none; } .qt-v b { font-variant-numeric: tabular-nums; font-weight: 600; word-spacing: .1em; } .qt-v .chip { height: 22px; font-size: 11.5px; } .pill-alert { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--rose-3); color: var(--rose); font-size: 11.5px; font-weight: 600; white-space: nowrap; } .qt-status { margin-bottom: 14px; } .qt-steps { display: flex; margin: 2px 0 12px; } .qt-steps li { flex: 1; position: relative; display: grid; justify-items: center; gap: 8px; font-size: 13px; color: var(--muted); text-align: center; } .qt-steps li::before { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: var(--line-2); } .qt-steps li:first-child::before { display: none; } .qt-steps i { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 2px solid var(--line-2); } .qt-steps .is-past i { background: var(--olive-2); border-color: var(--olive-2); } .qt-steps .is-past::before, .qt-steps .is-cur::before { background: var(--olive-2); } .qt-steps .is-cur { color: var(--ink); font-weight: 600; } .qt-steps .is-cur i { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 4px var(--sky-2); } .qt-steps .is-cur.is-ok i { background: var(--olive-2); border-color: var(--olive-2); box-shadow: 0 0 0 4px var(--olive-3); } .qt-steps .is-cur.is-ko i { background: var(--rose); border-color: var(--rose); box-shadow: 0 0 0 4px var(--rose-3); } .qt-info { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); margin: 0 0 12px; } .qt-info .ic { width: 16px; height: 16px; flex: none; } .qt-info.is-late { color: var(--rose); } .qt-info.is-ok { color: var(--olive-ink); } .qt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .qt-acts .field-h { flex-basis: 100%; } .qline-h { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; } .form .inp[readonly] { background: var(--bg-2); color: var(--ink-2); } .doc-obj { margin: 0 0 14px; } .dp-qt .dp-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); } .dp-qt .tag + .dp-q { border-top: 0; } .dp-q > span:first-child { display: grid; min-width: 0; } .dp-q em { font-style: normal; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp-qv { display: grid; justify-items: end; gap: 3px; flex: none; font-variant-numeric: tabular-nums; } .dp-qv .chip { height: 20px; font-size: 11px; } /* Pipeline : cartes d'opportunité */ .kcard.deal { gap: 6px; } .deal-m { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; } .deal-m b { font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; word-spacing: .1em; } .deal-d { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; } .deal-d .ic { width: 12px; height: 12px; } .deal-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .deal-f .kcard-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .deal .tag-chip { background: var(--navy); color: var(--on-navy); border-radius: 6px; } :root[data-theme="dark"] .deal .tag-chip { background: var(--navy-3); } .deal-next { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; background: var(--bg-2); color: var(--ink-2); font-size: 12.5px; font-weight: 500; line-height: 1.3; } .deal-next .ic { width: 13px; height: 13px; flex: none; } .deal-next span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .deal-next.is-late { background: var(--rose-3); color: var(--rose); } .kcol-add { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border-radius: var(--r-sm); color: var(--muted); font-size: 13.5px; font-weight: 500; transition: background .2s, color .2s; } .kcol-add .ic { width: 15px; height: 15px; } .kcol-add:hover { background: var(--card); color: var(--ink); } .board-tools { display: flex; gap: 8px; margin: 0 0 10px; } .kind-seg { max-width: 440px; margin-bottom: 12px; } .kind-seg .seg-i b { font-weight: 600; font-size: 12px; opacity: .65; } .tag-ok { background: var(--sky-2); color: var(--sky-ink); } .convert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 14px; margin: 0 0 14px; border-radius: var(--r-md); background: var(--olive-3); color: var(--olive-ink); } .convert p { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; flex: 1 1 260px; } .convert p .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; } .row-b .bar { margin-top: 6px; height: 5px; } /* Fichiers et liens, connecteurs */ .svc { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--k-bg); color: var(--k); font-weight: 700; font-size: 14px; flex: none; font-family: var(--sans); } .svc .ic { width: 20px; height: 20px; } .svc-lg { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; } .links .lk { border-top: 1px solid var(--line); } .links .lk:first-child { border-top: 0; } .lk-r { display: flex; align-items: center; gap: 6px; } .lk-r .row { flex: 1; border-top: 0; min-width: 0; } .lk-r .row-b { min-width: 0; } .lk-r .row-b b, .lk-r .row-b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lk > .link { margin: 0 0 10px 44px; } .lk-embed { aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); margin: 0 0 8px; } .lk-embed iframe { width: 100%; height: 100%; border: 0; display: block; } .lk-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .lk-empty p { flex-basis: 100%; font-size: 13.5px; color: var(--muted); } .cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; } .cx-grid .card + .card { margin-top: 0; } .cx { display: grid; gap: 12px; align-content: start; } .cx-h { display: flex; align-items: center; gap: 12px; } .cx-h h2 { font-size: 17px; font-weight: 600; } .cx-h p { font-size: 13px; color: var(--muted); } .cx-p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; } .cx-a { display: flex; flex-wrap: wrap; gap: 8px; } .cx-soon { display: flex; gap: 14px; margin-top: 14px; background: var(--card-2); border-style: dashed; box-shadow: none; } .cx-soon > .ic { width: 22px; height: 22px; flex: none; color: var(--olive-2); margin-top: 2px; } .cx-soon p { font-size: 14px; color: var(--ink-2); margin-top: 4px; } /* Notifications */ .nf-ic { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--k-bg); color: var(--k); flex: none; } .nf-ic .ic { width: 15px; height: 15px; } .notif-g h2 { display: flex; align-items: center; gap: 10px; } .nf-list .nf { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); } .nf-list .nf:first-child { border-top: 0; } .nf .row { border-top: 0; flex: 1; min-width: 0; } .nf .row-b { min-width: 0; } .nf .row-b span { overflow: hidden; text-overflow: ellipsis; } .nf-dot { width: 24px; flex: none; } .nf.is-new .row-b b { font-weight: 600; } .nf:not(.is-new) .row-b b { font-weight: 500; color: var(--ink-2); } .nf-new { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); flex: none; } .dp-nf .dp-row { gap: 10px; } .ios-row:has(> .nf-ic) { justify-content: flex-start; } .ios-row:has(> .nf-ic) > span:not(.nf-ic) { flex: 1; } .bell { position: relative; } .bell-n { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; background: var(--rose); color: #fff; font-size: 10.5px; font-weight: 700; border: 2px solid var(--bg); font-variant-numeric: tabular-nums; } .nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--rose); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Recherche : filtres */ .srch-f { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 0 8px; margin-bottom: 2px; } .srch-f::-webkit-scrollbar { display: none; } .srch-f .chip-sel { min-height: 32px; font-size: 13px; } .srch-f .chip-sel select { min-height: 30px; } .srch-f .chip-sel[hidden] { display: none; } .srch-clear { font-size: 13px; white-space: nowrap; flex: none; padding: 0 6px; } .srch-g span { color: var(--muted); } /* Confidentialité */ .priv-l { display: grid; gap: 14px; } .priv-l li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); line-height: 1.5; } .priv-l .ic { width: 20px; height: 20px; flex: none; color: var(--olive-2); margin-top: 2px; } .priv-l b { color: var(--ink); } .card.article { max-width: none; font-size: 15.5px; } .card.article h2 { margin: 0 0 8px; font-size: 20px; } .card.article .act-row { margin-top: 14px; } .priv-todo { border-style: dashed; box-shadow: none; background: var(--card-2); } .priv-link { margin-top: 14px; padding: 14px 16px; } .nf-bar { display: flex; justify-content: flex-end; margin: -6px 0 10px; } .nf-bar .link { font-size: 14px; } .nf-count { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 2px; } .notif-g .card-h { margin-bottom: 6px; } .chip-sel select { field-sizing: content; } /* ========== v1.5 : vérification des paiements ========== */ .verif .body { margin-bottom: 14px; } .verif-l { display: grid; gap: 8px; } .verif-l > li { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); } .verif-l > li.is-ko { border-color: var(--rose); background: var(--rose-3); } .verif-l summary { display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; list-style: none; font-size: 15px; } .verif-l summary::-webkit-details-marker { display: none; } .verif-l summary b { flex: 1; font-weight: 600; } .verif-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--olive-3); color: var(--olive-ink); flex: none; } .verif-ic .ic { width: 15px; height: 15px; } .verif-l .is-ko .verif-ic { background: var(--rose); color: #fff; } .verif-l details ul { display: grid; gap: 6px; padding: 0 14px 12px 49px; } .verif-l details li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); } .verif-l details li .ic { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--olive-2); } .verif-l details li.is-ko { color: var(--rose); font-weight: 600; } .verif-l details li.is-ko .ic { color: var(--rose); } /* v1.6 : une grande pervenche sur Premium (les fleurs ne restent que sur l'abonnement) */ .plan.is-dark { overflow: hidden; } .plan-fl.is-big { width: 230px; height: 230px; right: -64px; top: -70px; opacity: .95; animation-duration: 70s; } @media (min-width: 960px) { .plan-fl.is-big { width: 260px; height: 260px; right: -70px; top: -84px; } } .fo-ring .ring-fg { transition: stroke-dashoffset .5s linear; } /* ========== v1.6 : Études ========== */ .subj { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--k); margin-right: 8px; } .subj i { width: 9px; height: 9px; border-radius: 3px; background: var(--k); } .subj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .subj-card { display: grid; gap: 2px; text-align: left; padding: 12px 14px 12px 16px; border-radius: var(--r-md); background: var(--k-bg); color: var(--ink); position: relative; overflow: hidden; transition: transform .2s var(--ease); } .subj-card:hover { transform: translateY(-1px); } .subj-card i { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k); } .subj-card b { font-weight: 600; } .subj-card span { font-size: 12.5px; color: var(--muted); } .st-kpis .kpi2-v small { font-size: 15px; font-weight: 500; color: var(--muted); } .st-kpis .kpi2-d span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-two { display: grid; gap: 14px; margin-top: 14px; } .st-two > .card + .card { margin-top: 0; } @media (min-width: 900px) { .st-two { grid-template-columns: 1fr 1fr; align-items: start; } } .st-tools { margin-bottom: 14px; } /* Examens */ .ex-row .row-b .bar { margin-top: 6px; height: 5px; } .ex-cd { flex: none; min-width: 64px; text-align: center; padding: 6px 8px; border-radius: 10px; background: var(--sky-3); color: var(--sky-ink); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; } .ex-cd.is-soon { background: var(--rose-3); color: var(--rose); } .ex-card { display: grid; gap: 12px; } .ex-card.is-past { opacity: .7; } .ex-top { display: flex; align-items: center; gap: 16px; } .ex-big { flex: none; width: 78px; height: 78px; border-radius: 20px; display: grid; place-content: center; text-align: center; background: var(--navy); color: var(--on-navy); } .ex-big b { font: 600 30px/1 var(--display); letter-spacing: -.02em; } .ex-big span { font-size: 11.5px; color: var(--on-navy-2); margin-top: 2px; } .ex-big.is-soon { background: var(--rose); } .ex-b { flex: 1; min-width: 0; } .ex-b h2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; } .ex-b p { color: var(--muted); font-size: 14px; margin-top: 3px; } .ex-ch { display: flex; flex-wrap: wrap; gap: 6px; } .ex-ch span { padding: 4px 10px; border-radius: 999px; background: var(--bg-2); font-size: 12.5px; color: var(--ink-2); } .ex-prog { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: -6px; } .ex-prog b { color: var(--ink); } .ex-card .bar i { background: var(--olive-2); } .check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; } .check-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); flex: none; } .form-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } /* Emploi du temps */ .tt-day { display: grid; gap: 8px; } .tt-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r-md); background: var(--card-2); border: 1px solid var(--line); border-left: 4px solid var(--k); transition: background .2s; } .tt-item:hover { background: var(--k-bg); } .tt-item.is-live { background: var(--k-bg); box-shadow: 0 0 0 2px var(--k) inset; } .tt-time { display: grid; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14.5px; min-width: 58px; } .tt-time em { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--muted); } .tt-b { flex: 1; display: grid; min-width: 0; } .tt-b b { font-weight: 600; } .tt-b span { font-size: 13px; color: var(--muted); } .tt-card { padding: 14px 14px 8px; } .tt-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; } .tt-grid { display: grid; grid-template-columns: 44px repeat(var(--days), minmax(110px, 1fr)); min-width: calc(44px + var(--days) * 110px); position: relative; } .tt-hours { position: relative; height: var(--h); margin-top: 34px; } .tt-hours span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .tt-col { border-left: 1px solid var(--line); } .tt-col.is-today .tt-dh { color: var(--blue); } .tt-col.is-today .tt-cb { background: color-mix(in srgb, var(--sky-3) 70%, transparent); } .tt-dh { height: 34px; display: grid; place-items: center; font-weight: 600; font-size: 13px; color: var(--ink-2); } .tt-cb { position: relative; height: var(--h); } .tt-line { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); } .tt-now { position: absolute; left: -1px; right: 0; border-top: 2px solid var(--rose); z-index: 2; } .tt-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); } .tt-ev { position: absolute; left: 3px; right: 3px; display: block; padding: 5px 7px; border-radius: 8px; background: var(--k-bg); border-left: 3px solid var(--k); text-align: left; overflow: hidden; font-size: 12px; color: var(--ink-2); transition: transform .15s; } .tt-ev:hover { transform: scale(1.02); z-index: 1; } .tt-ev b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tt-ev span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tt-mini { display: flex; flex-wrap: wrap; gap: 6px; } .tt-mb { padding: 8px 10px; border-radius: 8px; background: var(--k-bg); border-left: 3px solid var(--k); font-size: 13px; font-weight: 600; } /* Moyennes */ .gr-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; } .gr-sum .hero-ring-v b { color: var(--ink); font-size: 28px; } .gr-sum .hero-ring-v span { color: var(--muted); } .gr-sum h2 { font-size: 20px; font-weight: 600; } .gr-sum p { color: var(--ink-2); margin: 4px 0 10px; max-width: 46ch; } .gr-target-f { max-width: 180px; } .gr-grid { display: grid; gap: 12px; margin-top: 14px; } .gr-grid .card + .card { margin-top: 0; } @media (min-width: 900px) { .gr-grid { grid-template-columns: 1fr 1fr; align-items: start; } } .gr-card { border-top: 4px solid var(--k); } .gr-h { display: flex; align-items: center; gap: 12px; } .gr-h div { flex: 1; min-width: 0; } .gr-h h2 { font-size: 17px; font-weight: 600; } .gr-h p { font-size: 13px; color: var(--muted); } .gr-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--k); } .gr-avg { font: 600 26px/1 var(--display); font-variant-numeric: tabular-nums; } .gr-avg small { font: 500 13px var(--sans); color: var(--muted); } .gr-avg.is-low { color: var(--rose); } .gr-bar { position: relative; margin: 14px 0 6px; } .gr-bar .bar { height: 8px; } .gr-bar .bar i { background: var(--k); } .gr-target { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--ink); border-radius: 2px; } .gr-need { font-size: 13.5px; color: var(--ink-2); margin: 6px 0 8px; } .gr-list { margin: 4px 0 6px; } .gr-list .row { padding: 8px 0; } .gr-v { font-variant-numeric: tabular-nums; } .gr-v small { font-weight: 500; color: var(--muted); } /* Révision espacée */ .srs-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; } .srs-hero .hero-ring-v b { color: var(--ink); font-size: 28px; } .srs-hero .hero-ring-v span { color: var(--muted); font-size: 12px; } .srs-hero h2 { font-size: 20px; font-weight: 600; } .srs-hero p { color: var(--ink-2); margin: 4px 0 12px; max-width: 48ch; } .srs-hero .field { max-width: 300px; margin-bottom: 12px; } .srs-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .srs-b { display: grid; gap: 2px; padding: 12px 6px; border-radius: var(--r-md); background: var(--k-bg); color: var(--k); text-align: center; transition: transform .15s; } .srs-b:hover { transform: translateY(-1px); } .srs-b b { font-weight: 700; font-size: 15px; } .srs-b span { font-size: 12px; color: var(--ink-2); } .mini-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 120px; } .mini-bars span { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; } .mini-bars i { display: block; width: 100%; max-width: 34px; height: max(4px, var(--v)); border-radius: 6px 6px 3px 3px; background: var(--olive-2); } .mini-bars em { font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 6px; } /* Concentration */ .fo-card { display: grid; justify-items: center; gap: 16px; padding: 26px 18px; text-align: center; } .fo-card:fullscreen { background: var(--navy); color: var(--on-navy); align-content: center; } .fo-phase { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--olive-ink); } .fo-card.is-pause .fo-phase { color: var(--sky-ink); } .fo-ring { position: relative; } .fo-ring .ring-fg { stroke: var(--blue); } .fo-card.is-pause .fo-ring .ring-fg { stroke: var(--olive-2); } .fo-time { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; } .fo-clock { font: 600 54px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .fo-time span { font-size: 14px; color: var(--muted); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fo-acts { display: flex; align-items: center; gap: 10px; } .fo-set { width: 100%; max-width: 520px; display: grid; gap: 12px; } .fo-set .chips-wrap { justify-content: center; } .fo-subj { display: grid; gap: 8px; margin-top: 14px; } .fo-subj li { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; } .fo-subj .bar i { background: var(--blue); } /* ========== v1.6 : Calendrier ========== */ .cal-kpis .kpi2-d span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 6px 0 12px; } .cal-nav { display: flex; align-items: center; gap: 8px; min-width: 0; } .cal-title { font: 500 26px/1.15 var(--display); letter-spacing: -.01em; margin-left: 6px; } @media (max-width: 600px) { .cal-title { font-size: 21px; flex-basis: 100%; margin: 6px 0 0; order: 3; } .cal-nav { flex-wrap: wrap; } } .cal-views { margin: 0; min-width: 300px; } .cal-views .ic { width: 12px; height: 12px; opacity: .6; } .cal-card { padding: 10px; } /* Mois */ .cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--rows), minmax(118px, auto)); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--line); gap: 1px; } .cal-wd { background: var(--card-2); padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .cal-cell { position: relative; background: var(--card); padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: background .15s; } .cal-cell.is-out { background: var(--card-2); } .cal-cell.is-out .cal-num { color: var(--muted); opacity: .7; } .cal-cell.is-sel { background: var(--sky-3); } .cal-cell.is-over { background: var(--sky-2); } .cal-num { align-self: flex-start; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); } .cal-num:hover { background: var(--bg-2); } .cal-cell.is-today .cal-num { background: var(--blue); color: #fff; } .cal-evs { display: grid; gap: 3px; min-width: 0; } .cal-ev { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; padding: 3px 7px; border-radius: 7px; background: var(--k-bg); color: var(--ink); font-size: 12.5px; text-align: left; border-left: 3px solid var(--k); cursor: pointer; transition: transform .12s, box-shadow .12s; } .cal-ev:hover { box-shadow: 0 2px 8px -4px rgba(15, 30, 61, .4); } .cal-ev span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-ev em { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--k); flex: none; font-variant-numeric: tabular-nums; } .cal-ev .ic { width: 12px; height: 12px; flex: none; color: var(--k); } .cal-ev.is-done span { text-decoration: line-through; color: var(--muted); } .cal-ev.is-late { background: var(--rose-3); border-left-color: var(--rose); } .cal-ev.ev-exam { font-weight: 600; } .cal-more { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--muted); padding: 1px 6px; border-radius: 6px; } .cal-more:hover { background: var(--bg-2); } .cal-dots { display: none; gap: 3px; justify-content: center; } .cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--k); } .cal-add { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); opacity: 0; transition: opacity .15s, background .15s; } .cal-add .ic { width: 15px; height: 15px; } .cal-cell:hover .cal-add { opacity: 1; } .cal-add:hover { background: var(--bg-2); color: var(--ink); } @media (max-width: 760px) { .cal-month { grid-template-rows: auto repeat(var(--rows), 58px); } .cal-cell { align-items: center; padding: 5px 2px; gap: 3px; } .cal-num { align-self: center; min-width: 30px; } .cal-evs, .cal-add { display: none; } .cal-dots { display: flex; } .cal-wd { text-align: center; padding: 6px 2px; font-size: 11px; } } .cal-day .cal-list { display: grid; gap: 6px; margin-bottom: 10px; } .cal-day .cal-list li { display: grid; gap: 2px; } .cal-day .cal-ev { font-size: 14px; padding: 9px 11px; border-radius: 10px; } .cal-sub { font-style: normal; font-size: 12.5px; color: var(--muted); padding-left: 14px; } /* Semaine et jour */ .cal-gridcard { padding: 6px 6px 10px; } .cal-grid-wrap { overflow-x: auto; } .cal-grid { display: grid; grid-template-columns: 50px repeat(var(--days), minmax(96px, 1fr)); min-width: calc(50px + var(--days) * 96px); } .cg-corner { position: sticky; top: 0; } .cg-head { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-left: 1px solid var(--line); border-radius: 0; } .cg-head em { font-style: normal; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .cg-head b { font: 600 22px/1 var(--display); width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; } .cg-head.is-today b { background: var(--blue); color: #fff; } .cg-adl { font-size: 11px; color: var(--muted); padding: 8px 4px; text-align: right; border-top: 1px solid var(--line); } .cg-allday { display: grid; gap: 3px; align-content: start; padding: 4px; min-height: 34px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); } .cg-allday.is-over { background: var(--sky-3); } .cg-hours { position: relative; height: var(--h); border-top: 1px solid var(--line); } .cg-hours span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .cg-hours span:first-child { transform: none; } .cg-col { position: relative; height: var(--h); border-left: 1px solid var(--line); border-top: 1px solid var(--line); cursor: copy; } .cg-col.is-today { background: color-mix(in srgb, var(--sky-3) 60%, transparent); } .cg-col.is-over { background: var(--sky-3); } .cg-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); pointer-events: none; } .cg-line:nth-of-type(odd) { border-top-style: solid; } .cg-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--rose); z-index: 3; pointer-events: none; } .cg-now::before { content: ""; position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); } .cg-ev { position: absolute; display: block; padding: 4px 7px; border-radius: 8px; background: var(--k-bg); border-left: 3px solid var(--k); text-align: left; overflow: hidden; font-size: 12px; color: var(--ink-2); cursor: pointer; z-index: 1; transition: box-shadow .15s; } .cg-ev:hover { box-shadow: 0 4px 14px -6px rgba(15, 30, 61, .45); z-index: 2; } .cg-ev b { display: block; font-size: 12.5px; line-height: 1.3; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cg-ev span { display: block; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cg-ev.is-done b { text-decoration: line-through; color: var(--muted); } .cg-ev.is-late { background: var(--rose-3); border-left-color: var(--rose); } .cg-ev.ev-course { background: color-mix(in srgb, var(--k-bg) 70%, var(--card)); border-left-style: solid; } .cal-ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: .92; box-shadow: var(--shadow-lg); } .cal-ghost[data-time]::after { content: attr(data-time); position: absolute; right: -6px; top: -22px; padding: 2px 7px; border-radius: 6px; background: var(--navy); color: var(--on-navy); font-size: 11.5px; font-weight: 600; } .is-dragging.cal-ev, .is-dragging.cg-ev { opacity: .35; } .cal-demo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .cal-demo div { display: grid; gap: 4px; align-content: start; } .cal-demo em { font-style: normal; font-size: 11.5px; color: var(--muted); text-align: center; } .cal-demo span { padding: 6px; border-radius: 7px; background: var(--k-bg); border-left: 3px solid var(--k); font-size: 11.5px; font-weight: 600; } /* ========== v1.7 : moteur de dessin et tableau blanc ========== */ .dw-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; } .dw-svg[data-tool="select"] { cursor: default; } .dw-svg[data-tool="hand"] { cursor: grab; } .dw-svg[data-tool="pen"], .dw-svg[data-tool="write"], .dw-svg[data-tool="highlighter"], .dw-svg[data-tool="underline"], .dw-svg[data-tool="shape"], .dw-svg[data-tool="sticky"], .dw-svg[data-tool="bubble"], .dw-svg[data-tool="chart"], .dw-svg[data-tool="timeline"] { cursor: crosshair; } .dw-svg[data-tool="text"] { cursor: text; } .dw-svg[data-tool="eraser"] { cursor: none; } .dw-svg[data-tool="list"], .dw-svg[data-tool="stamp"] { cursor: copy; } .dw-i { cursor: inherit; } .dw-svg[data-tool="select"] .dw-i { cursor: move; } .dw-svg[data-tool="select"] .dw-tick, .dw-svg[data-tool="list"] .dw-tick { cursor: pointer; } .dw-t { width: 100%; line-height: 1.35; white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; box-sizing: border-box; } .dw-measure { pointer-events: none; } .dw-box { fill: none; stroke: var(--blue); pointer-events: none; } .dw-h { fill: #ffffff; stroke: var(--blue); cursor: nwse-resize; } .dw-h[data-h="ne"], .dw-h[data-h="sw"] { cursor: nesw-resize; } .dw-h[data-h="e"], .dw-h[data-h="w"] { cursor: ew-resize; } .dw-h[data-h="s"] { cursor: ns-resize; } .dw-h[data-h="p1"], .dw-h[data-h="p2"] { cursor: move; } .dw-marq { fill: rgba(21, 94, 239, .08); stroke: var(--blue); pointer-events: none; } .dw-guide { stroke: #e64980; stroke-dasharray: 5 4; pointer-events: none; } .dw-eraser { fill: rgba(255, 255, 255, .55); stroke: #868e96; pointer-events: none; } .dw-reading { fill: rgba(21, 94, 239, .05); stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 6 5; animation: dw-read .9s linear infinite; pointer-events: none; } @keyframes dw-read { to { stroke-dashoffset: -22; } } .dw-fade { animation: dw-fade .5s ease forwards; pointer-events: none; } @keyframes dw-fade { to { opacity: 0; } } .dw-pop { animation: dw-in .5s var(--ease) both; transform-box: fill-box; transform-origin: left center; } @keyframes dw-in { from { opacity: 0; transform: translateY(5px) scale(.97); } } .dw-snap { animation: dw-snap .32s var(--ease) both; transform-box: fill-box; transform-origin: center; } @keyframes dw-snap { from { opacity: .45; transform: scale(.95); } } /* Cadre d'écriture (texte mis en forme, listes) */ .dw-edit { position: absolute; z-index: 20; margin: 0; border: 0; border-radius: 6px; background: rgba(255, 253, 248, .97); box-shadow: 0 0 0 2px var(--blue), 0 0 0 6px rgba(21, 94, 239, .14); line-height: 1.35; outline: none; box-sizing: border-box; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; } .dw-edit:empty::before { content: attr(data-ph); color: #a8a39a; } textarea.dw-edit { resize: none; padding: 0 2px; color: #131a2a; font-family: inherit; overflow: hidden; } /* Barre d'outils (en bas), réglages de l'outil (au-dessus) */ .dw-tools { display: flex; align-items: stretch; gap: 2px; padding: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 14px 36px rgba(15, 30, 61, .16), 0 2px 6px rgba(15, 30, 61, .06); } .dw-tool { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 60px; height: 56px; padding: 4px 6px; border-radius: 15px; color: var(--ink-2); font-size: 11px; font-weight: 600; letter-spacing: .01em; flex: none; transition: background .15s, color .15s, transform .15s var(--ease); } .dw-tool .ic { width: 23px; height: 23px; } .dw-tool span { line-height: 1; white-space: nowrap; } .dw-tool:hover:not(.is-on) { background: var(--bg-2); color: var(--ink); } .dw-tool:active { transform: scale(.96); } .dw-tool.is-on { background: var(--navy); color: var(--on-navy); } .dw-props { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 28px rgba(15, 30, 61, .13); padding: 6px; } .dw-props[hidden] { display: none; } .dw-tray-in, .dw-selbar-in { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .dw-tray-in::-webkit-scrollbar, .dw-selbar-in::-webkit-scrollbar { display: none; } .dw-sep { display: block; width: 1px; height: 26px; background: var(--line-2); margin: 0 3px; flex: none; } .dw-lbl { font-size: 12px; color: var(--muted); flex: none; } .dw-sw { display: flex; align-items: center; gap: 4px; flex: none; } .dw-sw.is-grid { display: grid; grid-template-columns: repeat(6, 30px); gap: 7px; } .dw-c { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line-2); flex: none; transition: transform .12s; } .dw-sw.is-grid .dw-c { width: 30px; height: 30px; } .dw-c:hover { transform: scale(1.1); } .dw-c.is-on { box-shadow: 0 0 0 2px var(--blue); } .dw-c.is-none { background: linear-gradient(135deg, transparent 45%, var(--rose) 45%, var(--rose) 55%, transparent 55%), var(--card); } .dw-c.is-custom { background: conic-gradient(#ff6b6b, #ffd43b, #69db7c, #4dabf7, #9775fa, #f783ac, #ff6b6b); overflow: hidden; cursor: pointer; } .dw-c.is-custom input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; border: 0; padding: 0; } .dw-size { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; flex: none; } .dw-size i { display: block; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); } .dw-size:hover { background: var(--bg-2); } .dw-size.is-on { background: var(--bg-2); box-shadow: inset 0 0 0 1.5px var(--blue); } .dw-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-2); border-radius: 11px; flex: none; } .dw-seg button { height: 30px; padding: 0 11px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; } .dw-seg button.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 30, 61, .12); } .dw-fonts { display: flex; gap: 6px; flex: none; } .dw-font { display: grid; justify-items: center; align-content: center; min-width: 98px; height: 54px; padding: 2px 12px; border-radius: 13px; border: 1.5px solid var(--line-2); background: #fffdf8; color: #131a2a; font-size: 22px; line-height: 1.05; } .dw-font small { font: 600 10.5px/1.2 var(--apple); color: var(--muted); letter-spacing: .02em; } .dw-font.is-on { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21, 94, 239, .16); } .dw-shapes { display: flex; align-items: center; gap: 3px; flex: none; } .dw-shapes-l { font-size: 11px; font-weight: 600; color: var(--muted); padding-left: 8px; margin-left: 4px; border-left: 1px solid var(--line-2); align-self: stretch; display: flex; align-items: center; } .dw-shp { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--ink-2); flex: none; } .dw-shp svg { width: 30px; height: 30px; } .dw-shp:hover { background: var(--bg-2); } .dw-shp.is-on { background: var(--sky-2); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--blue); } .dw-grid { display: flex; gap: 4px; } .dw-pick { display: grid; justify-items: center; gap: 4px; min-width: 74px; padding: 7px 8px; border-radius: 13px; font-size: 12px; font-weight: 600; color: var(--ink-2); } .dw-pick .ic { width: 23px; height: 23px; } .dw-pick:hover, .dw-pick.is-on { background: var(--bg-2); color: var(--ink); } .dw-f { display: inline-flex; align-items: center; flex: none; } .dw-f select, .dw-num select { height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; padding: 0 6px; } .dw-num { display: inline-flex; align-items: center; gap: 1px; flex: none; } .dw-num select { width: 64px; } .dw-num button { width: 28px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--ink-2); } .dw-num button:hover { background: var(--bg-2); } .dw-num .ic { width: 15px; height: 15px; } .dw-tog { min-width: 34px; height: 34px; padding: 0 7px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-2); font-size: 16px; flex: none; } .dw-tog .ic { width: 17px; height: 17px; } .dw-tog:hover { background: var(--bg-2); } .dw-tog.is-on { background: var(--navy); color: var(--on-navy); } .dw-tog.is-danger { color: var(--rose); } .dw-cbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 9px 0 6px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); flex: none; } .dw-cbtn i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); } .dw-cbtn i.is-none { background: linear-gradient(135deg, transparent 45%, var(--rose) 45%, var(--rose) 55%, transparent 55%), var(--card); } .dw-cbtn:hover { background: var(--bg-2); } .dw-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 10px; background: var(--sky-2); color: var(--sky-ink); font-weight: 600; font-size: 13px; flex: none; } .dw-btn .ic { width: 15px; height: 15px; } .dw-btn.is-primary { background: var(--blue); color: #ffffff; } .dw-hw { display: inline-flex; align-items: center; gap: 4px; flex: none; } .dw-hw > .ic { width: 16px; height: 16px; color: var(--blue); margin-left: 4px; } .dw-hw-l { font-size: 12px; color: var(--muted); margin-right: 2px; } .dw-alt { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 9px; background: var(--bg-2); color: var(--ink); font-size: 14px; white-space: nowrap; } .dw-alt .ic { width: 14px; height: 14px; } .dw-alt.is-on { background: var(--sky-2); color: var(--navy); font-weight: 700; } .dw-alt.is-edit { background: transparent; color: var(--blue); font-weight: 600; } /* Barre de l'élément choisi, palette, conseil */ .dw-selbar { position: absolute; z-index: 30; max-width: calc(100% - 16px); padding: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 12px 32px rgba(15, 30, 61, .17); } .dw-selbar[hidden], .dw-pop[hidden] { display: none; } .dw-pop { position: absolute; z-index: 32; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 14px 36px rgba(15, 30, 61, .2); } .dw-pop p { margin: 0 0 9px; font-size: 12px; font-weight: 600; color: var(--muted); } .dw-tip { position: absolute; left: 50%; top: 12px; z-index: 31; max-width: min(560px, calc(100% - 24px)); margin: 0; padding: 10px 15px; border-radius: 13px; background: var(--navy); color: var(--on-navy); font-size: 13.5px; line-height: 1.4; text-align: center; opacity: 0; transform: translate(-50%, -8px); transition: opacity .25s, transform .25s var(--ease); pointer-events: none; box-shadow: 0 10px 26px rgba(15, 30, 61, .25); } .dw-tip.is-on { opacity: 1; transform: translate(-50%, 0); } .dw-zoom { position: absolute; right: 12px; top: 12px; z-index: 20; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); } .dw-zoom button { min-width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; } .dw-zoom button:hover { background: var(--bg-2); } .dw-zoom .ic { width: 16px; height: 16px; } .dw-zv { min-width: 58px !important; } /* Tableau blanc : liste */ .bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; } .bd-grid .card + .card { margin-top: 0; } .bd-card { display: grid; gap: 10px; padding: 10px; transition: transform .2s var(--ease), border-color .2s; } .bd-card:hover { transform: translateY(-1px); border-color: var(--line-2); } .bd-th { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; background: #fffdf8 radial-gradient(#e3ddd1 1px, transparent 1.2px) 0 0 / 16px 16px; border: 1px solid var(--line); } .bd-th.is-empty { display: grid; place-items: center; color: var(--muted); } .bd-b { display: grid; padding: 0 4px 4px; } .bd-b b { font-weight: 600; } .bd-b span { font-size: 13px; color: var(--muted); } .bd-demo { display: block; width: 100%; height: auto; background: #fffdf8; border-radius: 12px; } .bd-lock { display: grid; gap: 14px; margin-bottom: 18px; } @media (min-width: 900px) { .bd-lock { grid-template-columns: 1fr 1fr; align-items: center; } } .bd-hero { margin-top: 0; } /* Tableau blanc : éditeur */ .bd-ed { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; gap: 8px; padding: calc(var(--safe-t) + 8px) 10px calc(var(--safe-b) + 10px); background: var(--bg); } .bd-top { display: flex; align-items: center; gap: 6px; min-width: 0; } .bd-title { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 22px/1.2 var(--display); color: var(--ink); padding: 6px 4px; border-radius: 8px; } .bd-title:focus { outline: none; background: var(--card); } .bd-saved { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .bd-hist { display: flex; gap: 2px; } .bd-top .icon-btn:disabled { opacity: .35; pointer-events: none; } .bd-stage { position: relative; min-height: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #fffdf8; box-shadow: var(--shadow); } .bd-bottom { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 24px); z-index: 35; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; width: max-content; max-width: calc(100% - 32px); transform: translateX(-50%); pointer-events: none; } .bd-bottom > * { pointer-events: auto; max-width: 100%; } .bd-dock { overflow-x: auto; scrollbar-width: none; } .bd-dock::-webkit-scrollbar { display: none; } .bd-ro { position: absolute; left: 50%; bottom: 18px; z-index: 30; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 24px); padding: 8px 8px 8px 14px; transform: translateX(-50%); background: var(--card); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 12px 30px rgba(15, 30, 61, .16); font-size: 14px; } .bd-ro > .ic { width: 17px; height: 17px; color: var(--muted); flex: none; } .bd-coach { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(245, 241, 233, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); overflow-y: auto; } .bd-coach-in { width: 100%; max-width: 780px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 60px rgba(15, 30, 61, .2); animation: rise .5s var(--ease) both; } .bd-coach h2 { margin: 0 0 16px; font: 500 26px/1.15 var(--display); } .bd-coach ul { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; } @media (min-width: 720px) { .bd-coach ul { grid-template-columns: repeat(3, 1fr); } } .bd-coach li { display: grid; gap: 6px; align-content: start; } .bd-coach li svg { width: 100%; height: 86px; background: #fffdf8 radial-gradient(#e3ddd1 1px, transparent 1.2px) 0 0 / 14px 14px; border: 1px solid var(--line); border-radius: 14px; } .bd-coach li b { font-weight: 600; } .bd-coach li span { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); } .bd-coach-a { display: flex; flex-wrap: wrap; gap: 8px; } .bd-bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 6px 0 16px; } .bd-bg { display: grid; gap: 6px; padding: 6px; border-radius: 12px; border: 1.5px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .bd-bg.is-on { border-color: var(--blue); color: var(--ink); } .bd-bg i { display: block; height: 46px; border-radius: 8px; background-color: #fffdf8; border: 1px solid var(--line); } .bd-bg .bg-dots { background-image: radial-gradient(#d9d2c4 1.3px, transparent 1.5px); background-size: 12px 12px; } .bd-bg .bg-grid { background-image: linear-gradient(#e6e0d4 1px, transparent 1px), linear-gradient(90deg, #e6e0d4 1px, transparent 1px); background-size: 14px 14px; } .bd-bg .bg-seyes { background-image: linear-gradient(#b9c7f5 1px, transparent 1px), linear-gradient(#e7ecfb 1px, transparent 1px), linear-gradient(90deg, #f3d6db 1px, transparent 1px); background-size: 16px 16px, 16px 4px, 16px 16px; } .bd-bg .bg-lines { background-image: linear-gradient(#dbe4ff 1.2px, transparent 1.2px); background-size: 100% 14px; } .bd-help h3 { margin: 4px 0 8px; font-size: 15px; } .bd-help ul { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; } .bd-help p { font-size: 14px; line-height: 1.55; color: var(--ink-2); } @media (max-width: 700px) { .bd-saved, .bd-wide { display: none; } .bd-title { font-size: 18px; } .bd-ed { padding-left: 6px; padding-right: 6px; gap: 6px; } .bd-stage { border-radius: 14px; } .bd-bottom { left: 6px; right: 6px; bottom: calc(var(--safe-b) + 8px); width: auto; max-width: none; transform: none; justify-items: stretch; gap: 6px; } .dw-tools { border-radius: 18px; } .dw-tool { min-width: 56px; height: 52px; } .dw-zoom { display: none; } .dw-tip { top: auto; bottom: 150px; } } @media (min-width: 960px) { .bd-ed { padding: 16px 20px 18px; } } /* Données d'un graphique */ .dt-list { display: grid; gap: 8px; } .dt-row { display: grid; grid-template-columns: 1fr 120px 32px; gap: 6px; align-items: center; } /* Impression d'un tableau */ @media screen { .print-sheet { position: fixed; left: -99999px; top: 0; } } @media print { body.is-printing > *:not(.print-sheet) { display: none !important; } body.is-printing { background: #ffffff !important; } .print-sheet h1 { margin: 0 0 6mm; font: 600 20pt/1.2 Fraunces, Georgia, serif; color: #0f1e3d; } .print-sheet svg { display: block; width: 100%; height: auto; max-height: 175mm; } } /* ========== v1.6 : éditeur de notes mis en forme + calque de dessin ========== */ div.blk-in { min-height: 1.6em; white-space: pre-wrap; word-break: break-word; cursor: text; } div.blk-in:empty::before { content: attr(data-ph); color: transparent; pointer-events: none; } div.blk-in:focus:empty::before, .blk:only-child div.blk-in:empty::before { color: color-mix(in srgb, var(--muted) 70%, transparent); } .blk-todo.is-done div.blk-in:not(:empty) { text-decoration: line-through; color: var(--muted); } div.blk-in b { font-weight: 700; } div.blk-in mark { padding: 0 2px; border-radius: 3px; } /* Cadres et alignement par bloc */ .blk.fr > div.blk-in, .blk.fr > .qa-w { border: 2px solid var(--frc); border-radius: 12px; padding: 10px 14px; margin: 6px 0; } .blk.fr-ink { --frc: var(--ink); } .blk.fr-blue { --frc: var(--blue); } .blk.fr-olive { --frc: var(--olive-2); } .blk.fr-red { --frc: #d92d20; } .blk.fr-sand { --frc: var(--sand); } .blk.fr-fill > div.blk-in { border-color: transparent; background: var(--sky-3); } .blk.al-center div.blk-in { text-align: center; } .blk.al-right div.blk-in { text-align: right; } /* Barre de mise en forme */ .nt-bar { position: sticky; top: calc(var(--safe-t) + 6px); z-index: 25; display: flex; align-items: center; gap: 8px; max-width: 820px; margin: 0 auto 14px; padding: 6px 8px; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); } .nt-fmt { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .nt-fmt::-webkit-scrollbar { display: none; } .nt-s { position: relative; flex: none; } .nt-s select { height: 34px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; padding: 0 6px; max-width: 120px; } .nt-s .nt-lock { position: absolute; right: -4px; top: -4px; } .nt-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 2px; flex: none; } .nt-b { position: relative; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-2); flex: none; } .nt-b:hover { background: var(--bg-2); color: var(--ink); } .nt-b .ic { width: 18px; height: 18px; } .nt-a { font: 700 16px/1 var(--display); border-bottom: 3px solid #d92d20; padding: 0 2px 1px; } .nt-red .ic { color: #d92d20; } .nt-lock { position: absolute; right: 1px; top: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--sand-3); color: var(--sand); display: grid; place-items: center; } .nt-lock .ic { width: 8px; height: 8px; stroke-width: 3; } .nt-pw { position: relative; flex: none; } .nt-pop { position: fixed; z-index: 60; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; width: 196px; margin-top: 6px; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-lg); } .nt-sw { width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line-2); } .nt-sw.is-none { background: linear-gradient(135deg, transparent 45%, var(--rose) 45%, var(--rose) 55%, transparent 55%), var(--card); } .nt-frames { width: 210px; display: grid; gap: 4px; } .nt-fr { text-align: left; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; border: 2px solid transparent; } .nt-fr:hover { background: var(--bg-2); } .nt-fr.fr-ink { border-color: var(--ink); } .nt-fr.fr-blue { border-color: var(--blue); } .nt-fr.fr-olive { border-color: var(--olive-2); } .nt-fr.fr-red { border-color: #d92d20; } .nt-fr.fr-sand { border-color: var(--sand); } .nt-fr.fr-fill { background: var(--sky-3); } .nt-drawbtn { flex: none; background: var(--navy); color: var(--on-navy); position: relative; } .nt-drawbtn:hover { background: var(--navy-2); } .nt-drawbtn .nt-lock { right: -4px; top: -4px; } @media (max-width: 640px) { .nt-drawbtn span { display: none; } .nt-drawbtn { width: 38px; padding: 0; justify-content: center; } } /* Calque de dessin */ .nt-ink { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .nt-ink .dw-svg { pointer-events: none; } .nt-ink .dw-svg .dw-i { pointer-events: none; } .note.is-drawing .nt-ink { pointer-events: auto; } .note.is-drawing .nt-ink .dw-svg, .note.is-drawing .nt-ink .dw-i { pointer-events: auto; } .note.is-drawing { outline: 2px dashed color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 10px; border-radius: 6px; } .nt-draw { position: sticky; top: calc(var(--safe-t) + 6px); z-index: 25; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; max-width: 820px; margin: 0 auto 14px; } .nt-draw[hidden] { display: none; } .nt-dtools { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 5px; grid-column: 1 / -1; } .nt-dtools::-webkit-scrollbar { display: none; } .nt-dtools .dw-sep { width: 1px; height: 24px; margin: 0 3px; } .nt-dprops { min-height: 46px; } .nt-done { height: 46px; } @media (min-width: 900px) { .nt-bar { max-width: 900px; } .nt-fmt { flex-wrap: wrap; overflow: visible; row-gap: 4px; } } .nt-s select { max-width: 112px; } .cx.is-focus { box-shadow: 0 0 0 3px var(--sky-2), var(--shadow); } .cx-nav { margin-top: 4px; } .lk-embed.is-video { aspect-ratio: 16 / 9; } .btn.is-locked { opacity: .85; } .side-auth { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--on-navy-2); font-size: 13.5px; transition: background .2s, color .2s; } .side-auth:hover { background: rgba(245, 241, 233, .07); color: var(--on-navy); } .side-auth .ic { width: 17px; height: 17px; } /* ========== v1.6 : logo cerveau animé ========== */ .logo-mark .mv-eye { transform-box: fill-box; transform-origin: center; animation: mv-blink 5.2s infinite; } .logo-mark .mv-eye + .mv-eye { animation-delay: .02s; } .logo-mark .mv-pupil { animation: mv-look 9s ease-in-out infinite; } .logo-mark .mv-spark { transform-box: fill-box; transform-origin: center; animation: mv-spark 3.4s ease-in-out infinite; } .logo-mark .mv-brow { animation: mv-brow 9s ease-in-out infinite; } .logo-mark.xl .mv-body, .logo-mark.lg .mv-body, .splash-mark .mv-body { transform-box: fill-box; transform-origin: 50% 92%; animation: mv-bob 3.6s ease-in-out infinite; } .logo-mark.draw .mv-body { animation: mv-pop .9s .1s cubic-bezier(.2, 1.4, .4, 1) both, mv-bob 3.6s 1s ease-in-out infinite; } .logo-mark.sm .mv-folds g, .logo-mark.sm .mv-spark { display: none; } @keyframes mv-blink { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } 97% { transform: scaleY(1); } } @keyframes mv-look { 0%, 16%, 100% { transform: translate(0, 0); } 22%, 38% { transform: translate(-9px, 2px); } 46%, 60% { transform: translate(8px, -4px); } 68% { transform: translate(0, 0); } } @keyframes mv-brow { 0%, 40%, 100% { transform: translateY(0); } 48%, 58% { transform: translateY(-5px); } } @keyframes mv-spark { 0%, 100% { opacity: .25; transform: scale(.55) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } } @keyframes mv-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-10px) scale(1.015, .985); } } @keyframes mv-pop { from { transform: scale(.4); opacity: 0; } } .splash-mark.logo-mark { width: 104px; height: 104px; } .study-card { display: flex; align-items: center; gap: 14px; } .sc-cd { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-content: center; text-align: center; background: var(--navy); color: var(--on-navy); } .sc-cd b { font: 600 24px/1 var(--display); } .sc-cd b .ic { width: 24px; height: 24px; } .sc-cd em { font-style: normal; font-size: 10.5px; color: var(--on-navy-2); } .plan-fl.is-big { top: auto; bottom: -70px; right: -70px; width: 260px; height: 260px; opacity: .9; } @media (min-width: 960px) { .plan-fl.is-big { top: auto; bottom: -80px; right: -80px; width: 300px; height: 300px; } } .plan-p b { white-space: nowrap; } .mk-hl { background: #ffe066; padding: 0 3px; border-radius: 3px; } .mk-red { text-decoration: underline 2px #d92d20; } .mk-trio { display: grid; gap: 8px; } .mk-t { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); } .mk-t b { min-width: 52px; font: 600 22px/1 var(--display); color: var(--navy); } .mk-t em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--ink); } .plan-fl.is-big { bottom: 110px; } @media (min-width: 960px) { .plan-fl.is-big { bottom: 120px; } } /* Calque de dessin des notes : outils compacts */ .nt-dtools .dw-tool { min-width: 52px; height: 48px; font-size: 10.5px; } .nt-dtools .dw-tool .ic { width: 21px; height: 21px; } .nt-dprops { min-height: 0; } /* Tableau blanc en plein écran : ni onglets ni bouton flottant */ body[data-mode="board"] .main { max-width: none; padding: 0; height: 100dvh; } body[data-mode="board"] .tabbar, body[data-mode="board"] .fab, body[data-mode="board"] .m-top { display: none !important; } @media (max-width: 700px) { .bd-dock { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); } .bd-dock.is-end { -webkit-mask-image: none; mask-image: none; } } /* Accueil : création du compte avec l'adresse e-mail */ .ob-acc-ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 6px auto 14px; border-radius: 20px; background: var(--sky-2); color: var(--navy); } .ob-acc-ic .ic { width: 30px; height: 30px; } .ob-acc-list { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; } .ob-acc-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); } .ob-acc-list .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--olive); flex: none; } .ob-acc-n { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); } .ob-err { margin-top: 10px; } .acc-local { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--sky-2); } .acc-local .ic { width: 18px; height: 18px; color: var(--navy); flex: none; } /* Lecture précise de l'écriture : état et installation */ .dw-ai { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; flex: none; } .dw-ai .ic { width: 15px; height: 15px; } .dw-ai.is-ok { background: color-mix(in srgb, var(--olive) 14%, transparent); color: var(--olive); } .dw-ai.is-off { background: var(--blue); color: #ffffff; } .dw-ai.is-busy { position: relative; overflow: hidden; background: var(--bg-2); color: var(--ink); } .dw-ai.is-busy::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--sky-2); transition: width .3s; } .dw-ai.is-busy span { position: relative; } .dw-card { position: absolute; inset: 0; z-index: 41; display: grid; place-items: center; padding: 16px; background: rgba(245, 241, 233, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .dw-card-in { width: 100%; max-width: 440px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 60px rgba(15, 30, 61, .2); animation: rise .45s var(--ease) both; } .dw-card-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 16px; background: var(--sky-2); color: var(--navy); } .dw-card-ic .ic { width: 26px; height: 26px; } .dw-card h3 { margin: 0 0 8px; font: 500 22px/1.2 var(--display); } .dw-card p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); } .dw-card-bar { height: 8px; margin: 0 0 12px; border-radius: 99px; background: var(--bg-2); overflow: hidden; } .dw-card-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width .3s; } .dw-card-a { display: flex; flex-wrap: wrap; gap: 8px; } .dw-card-p { margin: 0 !important; font-size: 13.5px !important; color: var(--muted) !important; } .dw-reading-t { fill: var(--blue); font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 600; pointer-events: none; } .dw-bind { fill: rgba(21, 94, 239, .06); stroke: var(--blue); pointer-events: none; } .dw-h.is-bend { fill: var(--blue); stroke: #ffffff; cursor: grab; } /* Bibliothèque de polices */ .dw-fontbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; max-width: 170px; padding: 0 8px 0 11px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 15px; flex: none; } .dw-fontbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dw-fontbtn .ic { width: 14px; height: 14px; color: var(--muted); flex: none; } .dw-fontpop { width: min(320px, calc(100vw - 40px)); max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; } .dw-fg { display: grid; gap: 2px; margin-bottom: 10px; } .dw-fg > span { position: sticky; top: -12px; padding: 6px 0 4px; background: var(--card); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); } .dw-fo { display: block; width: 100%; padding: 8px 10px; border-radius: 9px; text-align: left; font-size: 20px; line-height: 1.2; color: var(--ink); } .dw-fo:hover { background: var(--bg-2); } .dw-fo.is-on { background: var(--sky-2); color: var(--navy); } .dw-fonts .dw-fontbtn { align-self: center; } /* Mes tableaux (depuis un tableau ouvert) */ .bd-switch { display: grid; gap: 8px; margin-top: 12px; } .bd-sw-i { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px; border-radius: 14px; border: 1px solid transparent; color: inherit; } .bd-sw-i:hover { background: var(--bg-2); } .bd-sw-i.is-on { border-color: var(--blue); background: var(--sky-2); } .bd-sw-i .bd-th { aspect-ratio: 16 / 10; border-radius: 9px; } .bd-sw-i span { display: grid; gap: 2px; min-width: 0; } .bd-sw-i b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-sw-i em { font-style: normal; font-size: 13px; color: var(--muted); } .tpl-grid.is-sheet { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* Formules : à qui elles s'adressent */ .plan-for { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); } .plan.is-dark .plan-for { color: var(--on-navy-2); } .plan-tag.is-light { background: rgba(245, 241, 233, .12); color: var(--on-navy); } .dw-seg button .ic { width: 15px; height: 15px; margin-right: 5px; vertical-align: -3px; } .dw-seg button { display: inline-flex; align-items: center; } /* ========== v1.9 : vue d'ensemble façon tableau de bord (barres hachurées, plages, jauge) ========== */ :root { --fx-blue: #3d63f5; --fx-blue-2: #6d8bff; --fx-lav: #b9bdf5; --fx-lime: #d6f26a; --fx-hatch: #dfe3f6; --fx-soft: #eef0fb; } :root[data-theme="dark"] { --fx-hatch: #2c3a5c; --fx-soft: #1b2744; --fx-lav: #7c84d8; } .fx-grid { display: grid; gap: 14px; margin-bottom: 26px; } @media (min-width: 760px) { .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-prog { grid-column: 1 / -1; } } @media (min-width: 1180px) { .fx-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .fx-prog { grid-column: span 7; } .fx-cal { grid-column: span 5; } .fx-gauge, .fx-up, .fx-side { grid-column: span 4; } } .card.fx { margin: 0; padding: 20px; border-color: transparent; border-radius: 26px; background: var(--card); box-shadow: 0 1px 2px rgba(15, 30, 61, .04), 0 14px 34px rgba(61, 82, 180, .08); } .fx-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .fx-h h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 600; } .fx-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--fx-soft); color: var(--ink-2); flex: none; } .fx-ic .ic { width: 18px; height: 18px; } .fx-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fx-soft); } .fx-seg a { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .fx-seg a.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 30, 61, .1); } .fx-pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--fx-soft); font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .fx-pill .ic { width: 14px; height: 14px; } /* Progression : barres hachurées, période en cours pleine */ .fx-bars { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 2vw, 18px); height: 260px; padding-top: 6px; } .fx-line { position: absolute; left: 0; right: 0; top: 36px; height: 2px; background: var(--fx-blue); opacity: .85; } .fx-line::before, .fx-line::after { content: ""; position: absolute; top: -4px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .fx-line::before { left: -1px; border-right: 7px solid var(--fx-blue); } .fx-line::after { right: -1px; border-left: 7px solid var(--fx-blue); } .fx-col { position: relative; display: grid; grid-template-rows: 28px minmax(0, 1fr) 24px; align-items: end; justify-items: center; min-width: 0; } .fx-chg { align-self: start; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; } .fx-chg.is-cur { padding: 3px 8px; border-radius: 999px; background: var(--fx-lime); color: #1f2a10; } .fx-chg .ic { width: 12px; height: 12px; transform: rotate(-45deg); } .fx-bar { position: relative; width: 100%; max-width: 92px; height: var(--h); margin-top: 22px; border-radius: 14px 14px 6px 6px; background: repeating-linear-gradient(135deg, var(--fx-hatch) 0 2px, transparent 2px 10px); box-shadow: inset 0 0 0 1px var(--fx-hatch); transition: height .6s var(--ease); } .fx-col.is-cur .fx-bar { background: linear-gradient(180deg, var(--fx-blue-2), var(--fx-blue)); box-shadow: 0 12px 26px rgba(61, 99, 245, .3); } .fx-lb { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .fx-col.is-cur .fx-lb { color: var(--ink); font-weight: 600; } .fx-tip { position: absolute; right: calc(100% - 18px); top: 44%; z-index: 2; display: grid; gap: 3px; min-width: 168px; padding: 11px 14px; border-radius: 14px; background: var(--card); box-shadow: 0 12px 30px rgba(15, 30, 61, .16); text-align: left; } .fx-tip b { font-size: 14px; } .fx-tip span { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; } .fx-tip em { font-style: normal; font-weight: 700; color: #3a6b15; background: var(--fx-lime); padding: 1px 6px; border-radius: 999px; } @media (max-width: 560px) { .fx-tip { right: auto; left: 50%; top: -6px; transform: translateX(-100%); min-width: 140px; } .fx-bars { height: 230px; } } /* Calendrier : plages arrondies */ .fx-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 6px; } .fx-dn { display: grid; place-items: center; height: 22px; font-size: 11px; font-weight: 600; color: var(--muted); } .fx-d { display: grid; place-items: center; height: 38px; color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; border-radius: 0; } .fx-d > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; } .fx-d.is-l { border-top-left-radius: 999px; border-bottom-left-radius: 999px; } .fx-d.is-r { border-top-right-radius: 999px; border-bottom-right-radius: 999px; } .fx-d.k-imp { background: var(--fx-blue); color: #ffffff; } .fx-d.k-day { background: var(--fx-lime); color: #1f2a10; } .fx-d.k-team { background: var(--fx-lav); color: #1b2150; } .fx-d.k-late { background: repeating-linear-gradient(135deg, var(--fx-hatch) 0 2px, transparent 2px 7px); box-shadow: inset 0 0 0 1px var(--fx-hatch); color: var(--ink-2); } .fx-d.is-today > span { box-shadow: 0 0 0 2px var(--ink); font-weight: 700; } .fx-d.k-imp.is-today > span { box-shadow: 0 0 0 2px #ffffff; } .fx-d:hover > span { background: rgba(15, 30, 61, .06); } .fx-leg { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); } .fx-leg li { display: inline-flex; align-items: center; gap: 7px; } .fx-leg i { width: 10px; height: 10px; border-radius: 50%; } .fx-leg .k-imp { background: var(--fx-blue); } .fx-leg .k-day { background: var(--fx-lime); } .fx-leg .k-team { background: var(--fx-lav); } .fx-leg .k-late { background: repeating-linear-gradient(135deg, var(--fx-hatch) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--fx-hatch); } /* Jauge */ .fx-g { position: relative; max-width: 260px; margin: 4px auto 0; } .fx-g svg { display: block; width: 100%; height: auto; } .fx-g path:last-child { transition: stroke-dasharray .8s var(--ease); } .fx-gv { position: absolute; left: 0; right: 0; bottom: 2px; margin: 0; display: grid; justify-items: center; } .fx-gv b { font: 600 38px/1 var(--display); } .fx-gv span { font-size: 12.5px; color: var(--muted); } .fx-gn { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 9px 12px; border-radius: 999px; background: var(--fx-soft); font-size: 13px; font-weight: 600; } .fx-badge { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fx-lime); color: #1f2a10; flex: none; } .fx-badge .ic { width: 13px; height: 13px; } .fx-badge .up-ic { transform: rotate(-45deg); } .fx-badge .down-ic { transform: rotate(45deg); } .fx-badge.is-down { background: #ffd8d8; color: #8a1c1c; } .fx-gh { margin: 8px 2px 0; font-size: 12px; color: var(--muted); } /* Carte bleue */ .card.fx.fx-up { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; min-height: 240px; color: #ffffff; background: radial-gradient(circle at 85% 105%, rgba(255, 255, 255, .22) 0 22%, transparent 22.5%), radial-gradient(circle at 105% 70%, rgba(255, 255, 255, .14) 0 30%, transparent 30.5%), linear-gradient(140deg, #6d8bff, #2f55f0 70%); box-shadow: 0 18px 40px rgba(47, 85, 240, .3); } .fx-up h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; color: #ffffff; } .fx-up p { margin: 0; max-width: 26ch; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .86); } .fx-up-b { align-self: flex-start; margin-top: auto; padding: 10px 18px; border-radius: 999px; background: #ffffff; color: #1b2a6b; font-weight: 600; font-size: 14px; } .card.fx.fx-up.is-done { background: radial-gradient(circle at 85% 105%, rgba(255, 255, 255, .2) 0 22%, transparent 22.5%), linear-gradient(140deg, #22325e, #0f1e3d); } /* Accès rapide et note de la journée */ .fx-side { display: grid; gap: 14px; align-content: start; } .fx-quick h2, .fx-mood h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; } .fx-q { display: flex; flex-wrap: wrap; gap: 10px; } .fx-q a { display: grid; justify-items: center; gap: 5px; color: var(--ink-2); } .fx-q span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--fx-soft); transition: transform .2s var(--ease), background .2s; } .fx-q a:first-child span { background: var(--fx-lime); color: #1f2a10; } .fx-q a:hover span { transform: translateY(-2px); background: var(--sky-2); } .fx-q .ic { width: 20px; height: 20px; } .fx-q em { font-style: normal; font-size: 11.5px; font-weight: 600; } .fx-dots { display: flex; gap: 5px; margin-bottom: 12px; } .fx-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--fx-hatch); } .fx-dots i.on { width: 26px; background: var(--fx-blue); } .fx-rate { display: flex; justify-content: space-between; gap: 8px; } .fx-rate button { flex: 1; max-width: 52px; aspect-ratio: 1; border-radius: 50%; background: var(--fx-soft); font-weight: 600; color: var(--ink-2); transition: transform .15s var(--ease), background .2s; } .fx-rate button:hover { transform: translateY(-2px); } .fx-rate button.on { background: var(--fx-blue); color: #ffffff; } .ov-detail { margin-top: 6px; } .fx-bars > .fx-tip { right: calc(20% + 4px); top: 42%; } @media (max-width: 560px) { .fx-bars > .fx-tip { right: auto; left: 0; top: 40px; transform: none; min-width: 0; padding: 9px 12px; } .fx-bars > .fx-tip b { font-size: 13px; } } /* ========== v1.9 : accueil et connexion, l'application sur un Mac et un iPhone ========== */ body[data-mode="hero"] .tabbar, body[data-mode="hero"] .side, body[data-mode="hero"] .fab, body[data-mode="hero"] .m-top { display: none !important; } body[data-mode="hero"] .main { max-width: none; padding: 0; } body[data-mode="hero"] .shell { display: block; } body[data-mode="hero"] { background: #0b1630; } .wl { --h-ink: #f5f1e9; --h-ink-2: rgba(245, 241, 233, .72); --h-line: rgba(245, 241, 233, .14); position: relative; min-height: 100dvh; overflow: hidden; color: var(--h-ink); font-family: var(--apple); padding: calc(var(--safe-t) + 14px) 20px calc(var(--safe-b) + 24px); background: radial-gradient(900px 520px at 78% 38%, rgba(61, 99, 245, .30), transparent 62%), radial-gradient(700px 420px at 8% 104%, rgba(157, 194, 255, .10), transparent 60%), linear-gradient(180deg, #0b1630, #0d1a38 60%, #0b1630); } .wl::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(245, 241, 233, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 241, 233, .035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%); } .wl > * { position: relative; } .wl-top { display: flex; align-items: center; justify-content: space-between; max-width: 1240px; margin: 0 auto; min-height: 44px; } .wl-brand { display: inline-flex; align-items: center; gap: 10px; font: 500 18px/1 var(--display); color: var(--h-ink); } .wl-brand b { font-weight: 600; } .wl-brand .logo-mark { width: 34px; height: 34px; } .wl-link { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--h-line); color: var(--h-ink); font-size: 14.5px; font-weight: 600; transition: background .2s, border-color .2s; } .wl-link:hover { background: rgba(245, 241, 233, .08); border-color: rgba(245, 241, 233, .3); } .wl-grid { display: grid; gap: 26px; max-width: 1240px; margin: 0 auto; padding-top: 26px; } .wl-head { display: grid; gap: 14px; } .wl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .wl-tags span { padding: 6px 11px; border-radius: 999px; background: rgba(245, 241, 233, .07); border: 1px solid var(--h-line); font-size: 12.5px; font-weight: 600; color: var(--h-ink-2); } .wl-tags span:first-child { background: #d6f26a; border-color: transparent; color: #1f2a10; } .wl-h { margin: 0; font: 600 clamp(36px, 9.6vw, 70px)/1.02 var(--display); letter-spacing: -.028em; color: var(--h-ink); text-wrap: balance; } .wl-h em { font-style: italic; font-weight: 500; color: #b9cdff; } .wl-p { margin: 0; max-width: 46ch; font-size: clamp(15.5px, 1.4vw, 18px); line-height: 1.55; color: var(--h-ink-2); } .wl-act { display: grid; gap: 14px; } .wl-cta { display: grid; gap: 10px; } .wl-b1, .wl-b2 { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 0 26px; border-radius: 999px; font: 600 16.5px/1 var(--apple); letter-spacing: -.01em; transition: transform .15s, background .2s, box-shadow .2s, border-color .2s; } .wl-b1 { background: #3d63f5; color: #fff; box-shadow: 0 14px 34px rgba(61, 99, 245, .42), inset 0 1px 0 rgba(255, 255, 255, .22); } .wl-b1:hover { background: #4a6ff8; transform: translateY(-1px); } .wl-b2 { color: var(--h-ink); border: 1px solid rgba(245, 241, 233, .24); background: rgba(245, 241, 233, .04); } .wl-b2:hover { background: rgba(245, 241, 233, .09); } .wl-b2 .ic { width: 16px; height: 16px; } .wl-b1:active, .wl-b2:active { transform: scale(.98); } .wl-note { display: flex; align-items: flex-start; gap: 9px; text-align: left; font-size: 13px; line-height: 1.45; color: rgba(245, 241, 233, .58); } .wl-note .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; } .wl-note u { text-decoration: none; color: #b9cdff; } /* Entrée : le texte monte, le Mac se pose, l'iPhone glisse devant (une fois) */ .wl-head > *, .wl-act { animation: hr-up .9s var(--ease) both; } .wl-head > :nth-child(2) { animation-delay: .08s; } .wl-head > :nth-child(3) { animation-delay: .16s; } .wl-act { animation-delay: .26s; } @keyframes hr-up { from { opacity: 0; transform: translateY(16px); } } /* Appareils */ .dv { position: relative; width: 100%; max-width: 820px; margin: 0 auto; padding: 0 9% 10% 0; } .dv-mac { position: relative; animation: dv-mac 1.3s .15s cubic-bezier(.2, .9, .25, 1) both; } @keyframes dv-mac { from { opacity: 0; transform: translateY(46px) scale(.96); } } .dv-mac-scr { position: relative; padding: 2.1% 2.1% 2.6%; border-radius: 14px 14px 4px 4px; background: #05070c; box-shadow: inset 0 0 0 1.5px #2c313c, 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 90px -20px rgba(0, 0, 0, .65); } .dv-mac-scr img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900; border-radius: 3px; background: #f5f1e9; } .dv-cam { position: absolute; top: .75%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #1b2130; box-shadow: inset 0 0 0 1px #2c3445; } .dv-mac-base { position: relative; height: clamp(8px, 1.7vw, 16px); margin: 0 -7.5%; border-radius: 1px 1px 16px 16px / 1px 1px 10px 10px; background: linear-gradient(180deg, #e9ebf0 0%, #c4c8d1 38%, #8d929e 100%); box-shadow: 0 18px 30px -10px rgba(0, 0, 0, .6); } .dv-mac-base i { position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%); border-radius: 0 0 9px 9px; background: linear-gradient(180deg, #a9aeb9, #d3d6dd); } .dv-phone { position: absolute; right: 0; bottom: 0; width: 26%; padding: 1.15%; border-radius: 15% / 7%; background: #05070c; box-shadow: inset 0 0 0 1.5px #343a46, 0 0 0 1px rgba(255, 255, 255, .07), -18px 30px 60px -10px rgba(0, 0, 0, .6); animation: dv-ph 1.2s .55s cubic-bezier(.2, .9, .25, 1) both; } @keyframes dv-ph { from { opacity: 0; transform: translate(26px, 46px) rotate(3deg); } } .dv-phone-scr { position: relative; overflow: hidden; border-radius: 13.4% / 6.3%; background: #f5f1e9; } .dv-phone-scr img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; } .dv-island { position: absolute; top: 1.4%; left: 50%; z-index: 2; width: 31%; height: 3.3%; transform: translateX(-50%); border-radius: 999px; background: #000; } .dv-status { display: flex; align-items: center; justify-content: space-between; height: clamp(14px, 1.9vw, 24px); margin: 0; padding: 0 9% 0 11%; font-size: clamp(5px, .62vw, 8.5px); color: #131a2a; } .dv-status b { font-weight: 700; } .dv-status i { width: 14%; height: 34%; border-radius: 2px; background: linear-gradient(90deg, #131a2a 70%, rgba(19, 26, 42, .25) 70%); } /* Connexion */ .wl-login .wl-grid { align-items: start; } .login { display: grid; gap: 14px; width: 100%; max-width: 440px; padding: 26px 22px 22px; border-radius: 26px; background: var(--card); color: var(--ink); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55); animation: hr-up .9s .12s var(--ease) both; } .login h2 { margin: 0 0 2px; font: 600 22px/1.2 var(--display); letter-spacing: -.01em; } .login .btn-apple { margin-top: 4px; border-radius: 999px; background: #3d63f5; } .login-forgot { justify-self: center; } .login-or { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; font-size: 13px; color: var(--muted); } .login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .login-new { justify-content: center; min-height: 48px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font-weight: 600; } .login-n { display: flex; gap: 8px; margin: 2px 0 0; padding: 11px 12px; border-radius: 14px; background: var(--sky-3); font-size: 13px; line-height: 1.45; color: var(--ink-2); } .login-n .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--blue); } .login-restore { justify-self: center; cursor: pointer; font-size: 13.5px; } .dv.is-login { display: none; } /* Mot de passe avec « Afficher » */ .pw { position: relative; display: block; } .pw .inp { padding-right: 50px; } .pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--muted); } .pw-eye .ic { width: 19px; height: 19px; } .pw-eye.is-on { color: var(--blue); } .pw-eye.is-on::after { content: ""; position: absolute; width: 22px; height: 1.8px; border-radius: 2px; background: currentColor; transform: rotate(-40deg); box-shadow: 0 0 0 1.5px var(--card); } .acc-seg { margin-bottom: 4px; } .acc-forgot { justify-self: start; margin-top: -4px; } /* Accueil, étape compte : champs, solo ou équipe */ .ob-fields { display: grid; gap: 12px; margin-top: 4px; text-align: left; } .ob-pw-h { margin-top: -4px; } .ob-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ob-mode-c { position: relative; display: grid; gap: 4px; align-content: start; padding: 16px 14px 14px; border-radius: 20px; background: var(--card); border: 1.5px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s, transform .15s; } .ob-mode-c:active { transform: scale(.98); } .ob-mode-c input { position: absolute; opacity: 0; pointer-events: none; } .ob-mode-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px; background: var(--sky-3); color: var(--navy); transition: background .2s, color .2s; } .ob-mode-ic .ic { width: 22px; height: 22px; } .ob-mode-c b { font-size: 16px; font-weight: 600; } .ob-mode-c em { font-style: normal; font-size: 12.5px; line-height: 1.35; color: var(--muted); } .ob-mode-c:has(input:checked) { border-color: #3d63f5; background: color-mix(in srgb, #3d63f5 7%, var(--card)); } .ob-mode-c:has(input:checked) .ob-mode-ic { background: #3d63f5; color: #fff; } .ob-mode-c:has(input:checked) .pick-ck { visibility: visible; color: #3d63f5; } .ob-mode-c:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; } .ob-team { margin-top: 12px; } .ob-err { margin-top: 12px; } .ob-soc { margin-top: 16px; } /* Accueil, étape formule */ .ob-plans { display: grid; gap: 10px; } .ob-pl { position: relative; display: grid; gap: 6px; padding: 16px 16px 14px; border-radius: 22px; background: var(--card); border: 1.5px solid var(--line); cursor: pointer; transition: border-color .2s, box-shadow .25s, transform .15s; } .ob-pl input { position: absolute; opacity: 0; pointer-events: none; } .ob-pl:active { transform: scale(.99); } .ob-pl-h { display: flex; align-items: center; gap: 8px; } .ob-pl-h b { font: 600 20px/1.1 var(--display); } .ob-pl-tag { padding: 4px 9px; border-radius: 999px; background: #d6f26a; color: #1f2a10; font-size: 11.5px; font-weight: 700; } .ob-pl-ck { margin-left: auto; width: 22px; height: 22px; padding: 3px; border-radius: 50%; border: 1.5px solid var(--line-2); color: transparent; transition: background .2s, border-color .2s; } .ob-pl-p { display: flex; align-items: baseline; gap: 6px; } .ob-pl-p b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .ob-pl-p span { font-size: 13px; color: var(--muted); } .ob-pl-for { font-size: 13.5px; color: var(--ink-2); } .ob-pl ul { display: grid; gap: 5px; margin: 4px 0 0; padding: 0; list-style: none; } .ob-pl li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); } .ob-pl li .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; color: #3d63f5; } .ob-pl:has(input:checked) { border-color: #3d63f5; box-shadow: 0 14px 30px -14px rgba(61, 99, 245, .45); } .ob-pl:has(input:checked) .ob-pl-ck { background: #3d63f5; border-color: #3d63f5; color: #fff; } .ob-pl.is-premium:has(input:checked) { border-color: var(--navy); box-shadow: 0 14px 30px -14px rgba(15, 30, 61, .5); } .ob-pl.is-premium:has(input:checked) .ob-pl-ck { background: var(--navy); border-color: var(--navy); } :root[data-theme="dark"] .ob-pl.is-premium:has(input:checked) { border-color: var(--sky); } .ob-pl:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; } .ob-tl { position: relative; display: grid; gap: 12px; margin: 16px 0 0; padding: 14px 16px 14px 40px; border-radius: 20px; background: var(--sky-3); list-style: none; } .ob-tl::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(#3d63f5, #3d63f5 50%, var(--line-2) 50%); } .ob-tl li { position: relative; display: grid; gap: 1px; font-size: 13.5px; } .ob-tl li::before { content: ""; position: absolute; left: -25px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--line-2); } .ob-tl li:first-child::before { background: #3d63f5; box-shadow: 0 0 0 4px color-mix(in srgb, #3d63f5 20%, transparent); } .ob-tl b { font-weight: 600; } .ob-tl span { color: var(--muted); } .ob-plan .ob-mods { margin: 0 0 6px; } .ob-go { background: #3d63f5; } .ob-free { font-size: 14px; color: var(--muted); } @media (min-width: 560px) { .wl { padding-left: 32px; padding-right: 32px; } .wl-cta { display: flex; flex-wrap: wrap; } .ob-plans { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .wl { padding: 22px 48px 40px; } .wl-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: auto auto; align-content: center; column-gap: 56px; row-gap: 34px; min-height: calc(100dvh - 120px); padding-top: 0; } .wl-head { grid-column: 1; grid-row: 1; align-self: end; gap: 18px; } .wl-act { grid-column: 1; grid-row: 2; align-self: start; } .wl-grid > .dv { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .wl-login .wl-grid { align-items: center; grid-template-rows: auto 1fr; } .wl-login .wl-head { align-self: end; } .wl-login .login { grid-column: 1; grid-row: 2; align-self: start; } .dv.is-login { display: block; } } @media (min-width: 1400px) { .wl-grid { column-gap: 80px; } } /* ========== v1.9 : notes, fiches soignées (couverture, tons, définitions, tableaux, avancement) ========== */ /* Couvertures : couleurs pleines et hachures fines, dans l'esprit de la vue d'ensemble */ .cv-bleu { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 12px), linear-gradient(120deg, #6d8bff, #3d63f5); } .cv-lime { background: repeating-linear-gradient(135deg, rgba(31, 42, 16, .07) 0 2px, transparent 2px 12px), #d6f26a; } .cv-lavande { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 2px, transparent 2px 12px), linear-gradient(120deg, #c9ccf8, #a9aef0); } .cv-sable { background: repeating-linear-gradient(135deg, rgba(143, 100, 32, .07) 0 2px, transparent 2px 12px), #efe5d0; } .cv-nuit { background: radial-gradient(rgba(245, 241, 233, .16) 1px, transparent 1.4px) 0 0 / 16px 16px, linear-gradient(120deg, #22396b, #0f1e3d); } .cv-rose { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 12px), #ffd3d3; } .cv-none { background: var(--bg-2); } .note-cover { display: block; width: 100%; height: 132px; border-radius: 22px; margin: 2px 0 0; cursor: pointer; transition: filter .2s; } .note-cover:hover { filter: saturate(1.08) brightness(1.02); } @media (min-width: 960px) { .note-cover { height: 168px; } } .note.has-cover .note-icon { position: relative; margin: -30px 0 12px 22px; width: 60px; height: 60px; border-radius: 18px; background: var(--card); box-shadow: 0 10px 24px -8px rgba(15, 30, 61, .3), 0 0 0 4px var(--bg); } .cv-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; } .cv-sw { width: 44px; height: 30px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line); } .cv-sw.cv-none { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); position: relative; } .cv-sw.cv-none::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1.5px; background: var(--muted); transform: rotate(-24deg); } .cv-sw.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--blue); } /* Modèles : une bande de couleur en haut de la carte */ .tpl:has(> .tpl-cv) { position: relative; overflow: hidden; padding-top: 0; } .tpl-cv { display: block; height: 38px; margin: 0 -14px 0; } .tpl-cv.cv-none { background: var(--bg-2); } .tpl-cv + .tpl-ic { position: relative; margin-top: -17px; background: var(--card); box-shadow: 0 4px 12px -4px rgba(15, 30, 61, .25); } /* Textes d'aide des modèles, visibles tant que le bloc est vide */ .blk.has-ph div.blk-in:empty::before { color: color-mix(in srgb, var(--muted) 62%, transparent); } /* Encadrés : tons */ .blk-callout.tone-lime { background: color-mix(in srgb, #d6f26a 42%, var(--card)); } .blk-callout.tone-lime .blk-cic { color: #4d6b0f; } .blk-callout.tone-rose { background: color-mix(in srgb, #ffc9c9 50%, var(--card)); } .blk-callout.tone-rose .blk-cic { color: #c92a2a; } .blk-callout.tone-lav { background: color-mix(in srgb, #b9bdf5 40%, var(--card)); } .blk-callout.tone-lav .blk-cic { color: #4c55c9; } .blk-callout.tone-sand { background: color-mix(in srgb, #efe5d0 85%, var(--card)); } .blk-callout.tone-sand .blk-cic { color: #8f6420; } .blk-callout { border-radius: 14px; } :root[data-theme="dark"] .blk-callout.tone-lime { background: rgba(214, 242, 106, .12); } :root[data-theme="dark"] .blk-callout.tone-lime .blk-cic { color: #d6f26a; } :root[data-theme="dark"] .blk-callout.tone-rose { background: rgba(255, 168, 168, .12); } :root[data-theme="dark"] .blk-callout.tone-rose .blk-cic { color: #ffa8a8; } :root[data-theme="dark"] .blk-callout.tone-lav { background: rgba(185, 189, 245, .14); } :root[data-theme="dark"] .blk-callout.tone-lav .blk-cic { color: #b9bdf5; } :root[data-theme="dark"] .blk-callout.tone-sand { background: rgba(239, 229, 208, .1); } :root[data-theme="dark"] .blk-callout.tone-sand .blk-cic { color: #e3c891; } .tone-chip.tone-lime .ic { color: #4d6b0f; } .tone-chip.tone-rose .ic { color: #c92a2a; } .tone-chip.tone-lav .ic { color: #4c55c9; } .tone-chip.tone-sand .ic { color: #8f6420; } /* Définition : le terme à gauche, la définition à droite */ .def-w { grid-template-columns: minmax(110px, 32%) minmax(0, 1fr); gap: 4px 16px; align-items: start; border-left: 3px solid #b9bdf5; } .def-w .def-t { font-weight: 700; color: var(--ink); } .def-w .def-d { color: var(--ink-2); } @media (max-width: 520px) { .def-w { grid-template-columns: 1fr; } } .blk-def .blk-h { top: 10px; } /* Tableau */ .tbl-w { position: relative; flex: 1; min-width: 0; margin: 6px 0; } .tbl-s { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--card); } .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; } .tbl th, .tbl td { padding: 0 12px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; min-width: 90px; } .tbl tr > :last-child { border-right: 0; } .tbl tbody tr:last-child > * { border-bottom: 0; } .tbl th { background: var(--fx-soft, #eef0fb); text-align: left; } .tbl th .blk-in { font-weight: 700; font-size: 12.5px; letter-spacing: .02em; color: var(--ink-2); padding: 9px 0; } .tbl td .blk-in { font-size: 14.5px; line-height: 1.5; padding: 8px 0; } .tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg) 45%, var(--card)); } .tbl td.tbl-done { width: 64px; min-width: 64px; text-align: center; vertical-align: middle; } .tbl-ck { width: 22px; height: 22px; margin: 6px auto; } .tbl tr.is-done td:not(.tbl-done) .blk-in { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); } .tbl tr.is-done td { background: color-mix(in srgb, #d6f26a 16%, var(--card)) !important; } .tbl-acts { position: absolute; left: 10px; top: calc(100% - 6px); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 3px 6px; border-radius: 10px; background: var(--card); box-shadow: 0 6px 18px -6px rgba(15, 30, 61, .28), 0 0 0 1px var(--line); opacity: 0; pointer-events: none; transition: opacity .15s; } .blk-table:hover .tbl-acts, .blk-table:focus-within .tbl-acts { opacity: 1; pointer-events: auto; } @media (pointer: coarse) { .tbl-acts { position: static; margin-top: 6px; opacity: 1; pointer-events: auto; box-shadow: none; background: transparent; padding: 0; } } .tbl-a { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .tbl-a:hover { background: var(--bg-2); color: var(--ink); } .tbl-a .ic { width: 14px; height: 14px; } .tbl-tip { font-size: 12px; color: var(--muted); } .blk-table .blk-h { top: 12px; } /* Avancement */ .prog-w { flex: 1; display: grid; gap: 8px; margin: 8px 0; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); } .prog-h { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; } .prog-h b { font-weight: 700; } .prog-h span { flex: 1; color: var(--muted); } .prog-h em { font-style: normal; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #d6f26a; color: #1f2a10; font-size: 12.5px; } .prog-bar { position: relative; height: 12px; border-radius: 999px; overflow: hidden; background: repeating-linear-gradient(135deg, var(--fx-hatch, #dfe3f6) 0 2px, transparent 2px 8px); box-shadow: inset 0 0 0 1px var(--fx-hatch, #dfe3f6); } .prog-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #6d8bff, #3d63f5); transition: width .6s var(--ease); } .blk-prog .blk-h { top: 14px; } /* ========== v1.9 : examens façon tableau de bord ========== */ .xm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 22px; } @media (min-width: 760px) { .xm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xm-hero { grid-column: 1 / -1; } } @media (min-width: 1180px) { .xm-grid { grid-template-columns: 1.35fr 1fr 1fr; } .xm-hero { grid-column: auto; grid-row: span 1; } } .xm-hero { position: relative; overflow: hidden; display: grid; gap: 16px; align-content: start; padding: 22px; border-radius: 26px; color: #fff; background: radial-gradient(circle at 92% 112%, rgba(255, 255, 255, .16) 0 26%, transparent 26.5%), radial-gradient(circle at 108% 64%, rgba(255, 255, 255, .1) 0 30%, transparent 30.5%), linear-gradient(140deg, #22396b, #0f1e3d 70%); box-shadow: 0 18px 40px rgba(15, 30, 61, .28); } .xm-h { display: flex; align-items: center; justify-content: space-between; } .xm-kick { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .86); } .xm-kick .ic { width: 14px; height: 14px; } .xm-edit { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: rgba(255, 255, 255, .8); } .xm-edit:hover { background: rgba(255, 255, 255, .1); color: #fff; } .xm-edit .ic { width: 18px; height: 18px; } .xm-main { display: flex; align-items: center; gap: 18px; } .xm-cd { display: grid; justify-items: center; min-width: 108px; padding: 12px 14px 10px; border-radius: 22px; background: #d6f26a; color: #1f2a10; flex: none; } .xm-cd b { font: 600 56px/1 var(--display); letter-spacing: -.03em; } .xm-cd span { font-size: 12.5px; font-weight: 700; } .xm-cd.is-soon { background: #ffd3d3; color: #7a1717; } .xm-info { min-width: 0; } .xm-info h2 { margin: 0 0 8px; font: 600 clamp(22px, 3vw, 30px)/1.1 var(--display); letter-spacing: -.015em; color: #fff; text-wrap: balance; } .xm-info p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 14px; color: rgba(255, 255, 255, .75); } .xm-info .subj { background: rgba(255, 255, 255, .12); color: #fff; } .xm-chaps { display: flex; flex-wrap: wrap; gap: 6px; } .xm-chaps span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: rgba(255, 255, 255, .88); } .xm-chaps .ic { width: 13px; height: 13px; opacity: .35; } .xm-chaps span.is-done { background: #d6f26a; border-color: transparent; color: #1f2a10; } .xm-chaps span.is-done .ic { opacity: 1; } .xm-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .xm-b1, .xm-b2 { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 14px; transition: transform .15s, background .2s; } .xm-b1 { background: #fff; color: #1b2a6b; } .xm-b2 { color: #fff; border: 1px solid rgba(255, 255, 255, .24); } .xm-b2:hover { background: rgba(255, 255, 255, .08); } .xm-b1 .ic, .xm-b2 .ic { width: 16px; height: 16px; } .xm-b1:active, .xm-b2:active { transform: scale(.97); } .xm-gauge .fx-g svg path:last-child { transition: stroke-dasharray .8s var(--ease); } .xm-gauge .fx-gn span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xm-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .xm-day { position: relative; display: grid; justify-items: center; gap: 2px; padding: 7px 0 8px; border-radius: 14px; background: var(--fx-soft); color: var(--ink-2); } .xm-day em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--muted); } .xm-day b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .xm-day i { position: absolute; top: 4px; right: 5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--card); font: 700 10px/15px var(--sans); font-style: normal; text-align: center; color: var(--ink); } .xm-day.k-day { background: #d6f26a; color: #1f2a10; } .xm-day.k-day em { color: #4d6b0f; } .xm-day.k-team { background: var(--fx-lav); color: #1b2150; } .xm-day.k-team em { color: #3b4291; } .xm-day.k-imp { background: var(--fx-blue); color: #fff; box-shadow: 0 8px 18px rgba(61, 99, 245, .35); } .xm-day.k-imp em { color: rgba(255, 255, 255, .8); } .xm-day.is-today { box-shadow: inset 0 0 0 2px var(--ink); } .xm-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 22px; } @media (min-width: 760px) { .xm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1180px) { .xm-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .card.xm-card { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; border-radius: 22px; border-color: transparent; box-shadow: 0 1px 2px rgba(15, 30, 61, .04), 0 10px 26px rgba(61, 82, 180, .07); transition: transform .2s var(--ease); } .card.xm-card:hover { transform: translateY(-2px); } .xm-c-cd { display: grid; justify-items: center; min-width: 58px; padding: 8px 6px; border-radius: 16px; background: repeating-linear-gradient(135deg, var(--fx-hatch) 0 2px, transparent 2px 8px); box-shadow: inset 0 0 0 1px var(--fx-hatch); flex: none; } .xm-c-cd b { font: 600 26px/1 var(--display); } .xm-c-cd em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); } .xm-card.is-soon .xm-c-cd { background: #ffd3d3; box-shadow: none; color: #7a1717; } .xm-card.is-soon .xm-c-cd em { color: #7a1717; } .xm-c-b { flex: 1; min-width: 0; display: grid; gap: 4px; } .xm-c-b > b { font-size: 15.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xm-c-b > span { font-size: 13px; color: var(--muted); } .xm-c-b > em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-2); } .xm-c-bar { position: relative; height: 8px; border-radius: 999px; background: repeating-linear-gradient(135deg, var(--fx-hatch) 0 2px, transparent 2px 7px); box-shadow: inset 0 0 0 1px var(--fx-hatch); overflow: hidden; } .xm-c-bar i { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 999px; background: linear-gradient(90deg, #6d8bff, #3d63f5); } /* ========== v1.9 : concentration (modes, minuteur personnalisé, chronomètre, calculatrice) ========== */ .fo-top { display: grid; gap: 14px; } @media (min-width: 1100px) { .fo-top { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); align-items: start; } } .fo-top > .card { margin: 0; } .fo-modes { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--fx-soft); } .fo-modes button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; } .fo-modes button .ic { width: 16px; height: 16px; } .fo-modes button.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 30, 61, .12); } .fo-modes button.is-on .ic { color: var(--fx-blue); } @media (max-width: 420px) { .fo-modes button { padding: 8px 10px; font-size: 12.5px; } .fo-modes button .ic { display: none; } } .fo-custom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .fo-custom label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); } .fo-custom .inp { width: 74px; text-align: center; font-variant-numeric: tabular-nums; } .fo-laps { width: 100%; max-width: 420px; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; max-height: 180px; overflow-y: auto; border-radius: 14px; background: var(--fx-soft); } .fo-laps li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; padding: 8px 14px; font-size: 13.5px; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); } .fo-laps li:last-child { border-bottom: 0; } .fo-laps span { text-align: left; color: var(--muted); } .fo-laps em { font-style: normal; color: var(--muted); min-width: 64px; text-align: right; } .fo-acts .icon-btn[disabled] { opacity: .35; } /* Calculatrice */ .fo-calc { padding: 18px; } .calc { display: grid; gap: 10px; outline: none; border-radius: 18px; } .calc:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent); } .calc-hist { margin: 0; min-height: 20px; text-align: right; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calc-out { display: block; min-height: 52px; padding: 0 4px; text-align: right; font: 600 40px/1.25 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .calc-keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .ck { display: grid; place-items: center; min-height: 50px; border-radius: 16px; background: var(--fx-soft); color: var(--ink); font: 600 18px/1 var(--sans); transition: transform .1s, background .15s; } .ck:hover { background: color-mix(in srgb, var(--fx-blue) 10%, var(--fx-soft)); } .ck:active, .ck.is-hit { transform: scale(.94); } .ck-op { background: color-mix(in srgb, var(--fx-blue) 14%, var(--card)); color: var(--fx-blue); font-size: 21px; } .ck-fn { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 16px; } .ck-eq { background: var(--fx-blue); color: #fff; font-size: 22px; box-shadow: 0 10px 22px -8px rgba(61, 99, 245, .6); } .ck-eq:hover { background: #4a6ff8; } .ck[data-k="C"] { color: #c92a2a; } /* ========== v1.9 : quiz personnels sur Quizlet ========== */ .card.qz-ext { position: relative; overflow: hidden; display: grid; gap: 16px; padding: 22px; border-radius: 26px; border-color: transparent; color: #fff; background: radial-gradient(circle at 88% 115%, rgba(255, 255, 255, .2) 0 24%, transparent 24.5%), radial-gradient(circle at 106% 66%, rgba(255, 255, 255, .12) 0 30%, transparent 30.5%), linear-gradient(140deg, #6d8bff, #2f55f0 70%); box-shadow: 0 18px 40px rgba(47, 85, 240, .3); } .qz-ext .hero-k { color: rgba(255, 255, 255, .8); } .qz-ext h2 { margin: 0 0 6px; font: 500 clamp(24px, 3vw, 30px)/1.12 var(--display); color: #fff; } .qz-ext-t p:last-child { max-width: 52ch; margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .86); } .qz-ext-a { display: flex; flex-wrap: wrap; gap: 10px; } .qz-ext .btn-sky { background: #fff; color: #1b2a6b; } .qz-ext-b { color: #fff; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); } .qz-ext-b:hover { background: rgba(255, 255, 255, .16); } .qz-alt { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .78); } .qz-alt a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45); } @media (min-width: 900px) { .card.qz-ext { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .qz-alt { grid-column: 1 / -1; } .qz-ext-a { justify-content: flex-end; } } /* ========== v1.9 : tableau blanc, galerie de modèles avec aperçu ========== */ .bd-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .bd-tpl { display: grid; gap: 0; padding: 8px; border-radius: 20px; background: var(--card); text-align: left; box-shadow: 0 1px 2px rgba(15, 30, 61, .04), 0 10px 26px rgba(61, 82, 180, .07); transition: transform .2s var(--ease), box-shadow .2s; } .bd-tpl:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15, 30, 61, .05), 0 16px 34px rgba(61, 82, 180, .12); } .bd-tpl:active { transform: scale(.98); } .bd-tpl .bd-th { border-radius: 14px; aspect-ratio: 16 / 9; } .bd-tpl-b { display: flex; gap: 10px; align-items: flex-start; padding: 10px 6px 4px; } .bd-tpl-b .tpl-ic { flex: none; margin: 0; } .bd-tpl-b b { display: block; font-size: 14.5px; font-weight: 600; } .bd-tpl-b em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.35; color: var(--muted); }