/* Feuille de style unique, sans dépendance externe. * * Deux contraintes ont guidé les choix : la page doit rester lisible sur un * écran de portable en réunion comme sur un grand écran, et elle doit * fonctionner en thème clair comme sombre. Le thème par défaut est clair, * quel que soit le réglage du système d'exploitation du visiteur ; le bouton * du bandeau (js/theme.js) bascule vers le sombre et retient le choix * (localStorage), via l'attribut data-theme posé sur . Aucune police * n'est chargée depuis le réseau : la page ne doit émettre AUCUNE requête * vers l'extérieur, c'est le fond du contrat passé avec le visiteur. */ :root { --bg: #ffffff; --bg-soft: #f6f7f9; --bg-inset: #eef0f3; --text: #1a1d21; --text-muted: #5c6570; --border: #d8dce1; --accent: #1f5f8b; --accent-soft: #e8f1f7; --good: #1a7f4b; --good-soft: #e6f4ec; --mid: #8a6100; --mid-soft: #fdf3dc; --bad: #b02a24; --bad-soft: #fceceb; --radius: 10px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } :root[data-theme="dark"] { --bg: #14171a; --bg-soft: #1c2024; --bg-inset: #23282d; --text: #e8eaed; --text-muted: #a0a8b2; --border: #333a41; --accent: #7fb8dd; --accent-soft: #1b2b36; --good: #6ed49b; --good-soft: #142b1e; --mid: #e5bc5c; --mid-soft: #2e2716; --bad: #f08a83; --bad-soft: #2e1918; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; transition: background-color .15s, color .15s; } .wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; } /* ---- en-tête ---------------------------------------------------------- */ .site-header { background: var(--bg-soft); border-bottom: 1px solid var(--border); padding: 2.75rem 0 2rem; } .header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .header-controls { display: flex; align-items: center; gap: .5rem; } .header-link { display: inline-flex; align-items: center; padding: .4rem .75rem; border: 1px solid var(--border); border-radius: 100px; background: var(--bg); color: var(--text-muted); font-size: .82rem; font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s, color .15s; } .header-link:hover, .header-link:focus-visible { border-color: var(--accent); color: var(--text); outline: none; } .eyebrow { margin: 0 0 .35rem; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .theme-toggle { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; padding: .4rem .75rem; border: 1px solid var(--border); border-radius: 100px; background: var(--bg); color: var(--text-muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--accent); color: var(--text); outline: none; } .theme-toggle-icon { font-size: .95rem; line-height: 1; } h1 { margin: 0 0 .75rem; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.2; letter-spacing: -.01em; } .lead { margin: 0 0 1.25rem; max-width: 46rem; font-size: 1.05rem; color: var(--text-muted); } .lead strong { color: var(--text); } .model-badge { display: inline-block; margin: 0; padding: .45rem .8rem; border: 1px solid var(--border); border-radius: 100px; background: var(--bg); font-size: .85rem; font-family: var(--mono); color: var(--text-muted); } .model-badge.error { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); } /* ---- étapes ----------------------------------------------------------- */ main { padding: 2.5rem 1.25rem 3rem; } .step { padding: 2rem 0; border-bottom: 1px solid var(--border); } .step:last-child { border-bottom: 0; } .step > h2 { display: flex; align-items: center; gap: .65rem; margin: 0 0 .6rem; font-size: 1.3rem; } .num { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: 50%; background: var(--accent); color: #fff; font-size: .95rem; font-weight: 600; } :root[data-theme="dark"] .num { color: #10161b; } .optional { padding: .15rem .5rem; border-radius: 100px; background: var(--bg-inset); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .step > p { max-width: 46rem; color: var(--text-muted); } /* ---- dépôt de fichier ------------------------------------------------- */ .dropzone { margin: 1.25rem 0 .75rem; padding: 2.25rem 1.25rem; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--bg-soft); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; } .dropzone:hover, .dropzone:focus-visible, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); outline: none; } .drop-title { margin: 0 0 .3rem; font-weight: 600; } .drop-hint { margin: 0; font-size: .85rem; color: var(--text-muted); } .template-line { font-size: .9rem; } a { color: var(--accent); } /* ---- champs ----------------------------------------------------------- */ .mapping { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.25rem 0; } .field-row { margin: 0 0 1rem; } .field-row label { display: block; margin-bottom: .3rem; font-size: .9rem; font-weight: 600; } .unit { margin-left: .35rem; font-weight: 400; font-family: var(--mono); font-size: .8rem; color: var(--text-muted); } .hint { margin: .3rem 0 0; font-size: .82rem; font-weight: 400; color: var(--text-muted); } input, select, textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: .95rem; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; } textarea { resize: vertical; } button { padding: .6rem 1.15rem; border: 1px solid transparent; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; } button.primary { background: var(--accent); color: #fff; } :root[data-theme="dark"] button.primary { color: #10161b; } button.secondary { background: var(--bg); border-color: var(--border); color: var(--text); } button:disabled { opacity: .5; cursor: not-allowed; } button:not(:disabled):hover { filter: brightness(1.08); } /* ---- comptes rendus --------------------------------------------------- */ .report { margin: 1rem 0; padding: .85rem 1rem; border: 1px solid var(--border); border-left-width: 4px; border-radius: 6px; background: var(--bg-soft); font-size: .92rem; } .report p { margin: .3rem 0; } .report.info { border-left-color: var(--accent); } .report.ok { border-left-color: var(--good); background: var(--good-soft); } .report.error { border-left-color: var(--bad); background: var(--bad-soft); } .report pre { margin: .5rem 0 0; padding: .6rem; overflow-x: auto; border-radius: 4px; background: var(--bg-inset); font-family: var(--mono); font-size: .82rem; white-space: pre-wrap; } .ok { color: var(--good); font-weight: 600; } .warn { color: var(--mid); } .err { color: var(--bad); } .muted { color: var(--text-muted); font-size: .9rem; } /* ---- scores ----------------------------------------------------------- */ .score-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin: 1.5rem 0; } .score-card { padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); } .score-card h3 { margin: 0 0 .2rem; font-size: 1.05rem; } .card-sub { margin: 0 0 .9rem; font-size: .85rem; color: var(--text-muted); } .card-question { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--border); font-size: .85rem; font-style: italic; color: var(--text-muted); } .score-line { display: flex; align-items: baseline; gap: .6rem; padding: .35rem 0; font-family: var(--mono); font-size: .9rem; } .score-line .engine { min-width: 4.2rem; font-family: system-ui, sans-serif; font-weight: 600; } .r2 { padding: .1rem .45rem; border-radius: 4px; font-weight: 600; } .r2.good { background: var(--good-soft); color: var(--good); } .r2.mid { background: var(--mid-soft); color: var(--mid); } .r2.bad { background: var(--bad-soft); color: var(--bad); } .rmse { color: var(--text-muted); } .reading { max-width: 46rem; padding: .9rem 1.1rem; border-left: 4px solid var(--accent); border-radius: 6px; background: var(--accent-soft); font-size: .95rem; } /* ---- replis et tableaux ----------------------------------------------- */ .details { margin: 1.25rem 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); } .details > summary { padding: .75rem 1rem; font-weight: 600; font-size: .92rem; cursor: pointer; } .details > *:not(summary) { padding: 0 1rem 1rem; } .two-col { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } table { width: 100%; border-collapse: collapse; font-size: .88rem; } table caption { padding-bottom: .4rem; text-align: left; font-weight: 600; color: var(--text-muted); } th, td { padding: .35rem .5rem; border-bottom: 1px solid var(--border); text-align: left; } .coef td, .history td { font-family: var(--mono); } .tname { font-weight: 600; font-family: system-ui, sans-serif; } #history { overflow-x: auto; } /* ---- confidentialité et formulaire ------------------------------------ */ .privacy-box { margin: 1.25rem 0; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); } .privacy-box h3 { margin: 0 0 .4rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } .privacy-box h3 + ul { margin: 0 0 1.1rem; padding-left: 1.2rem; } .privacy-box li { margin: .25rem 0; font-size: .92rem; } .privacy-box code { padding: .05rem .3rem; border-radius: 3px; background: var(--bg-inset); font-family: var(--mono); font-size: .85em; } .caveat { margin: 0; padding-top: .8rem; border-top: 1px solid var(--border); font-size: .88rem; color: var(--text-muted); } .form-grid { display: grid; gap: 0 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 1.5rem; } .form-grid .full { grid-column: 1 / -1; } .payload { max-height: 22rem; margin: 0; padding: .8rem; overflow: auto; border-radius: 6px; background: var(--bg-inset); font-family: var(--mono); font-size: .78rem; line-height: 1.5; } .submit-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 0; } /* ---- pied de page ----------------------------------------------------- */ .site-footer { padding: 1.75rem 0; border-top: 1px solid var(--border); background: var(--bg-soft); font-size: .88rem; color: var(--text-muted); } .site-footer p { margin: 0; max-width: 46rem; } .site-footer code { font-family: var(--mono); font-size: .85em; }