/* ═══════════════════════════════════════════════════════════════════════════ Quotum — feuille du site. Direction « Registre froid » (01) + héros 03, tokens de DESIGN.md. Les hexadécimaux ne vivent que dans les blocs :root ci-dessous. ═══════════════════════════════════════════════════════════════════════════ */ /* IBM Plex Sans, servie depuis le site : aucune requête vers un tiers pour afficher du texte. Sous-ensembles « Latin1 » officiels de la release IBM/plex, inchangés — licence dans polices/OFL-IBM-Plex-Sans.txt. Les glyphes hors de cette plage (⚠, ⛔, ◉) n'existent pas dans Plex et retombent sur la police système, comme avant. */ @font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("polices/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; } @font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("polices/IBMPlexSans-Medium-Latin1.woff2") format("woff2"); unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; } @font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("polices/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; } :root { --fond-socle:#EEF1F4; --fond-page:#FFFFFF; --fond-surface:#F2F4F6; --fond-surface-haute:#E9ECEF; --encre-forte:#14181C; --encre-moyenne:#4A525C; --encre-faible:#5E6670; --filet-discret:#DFE3E8; --filet-action:#7C848E; --identite:#155FB0; --action-fond:#14181C; --action-encre:#FFFFFF; --mesure-confortable:#0D6E51; --mesure-tendue:#7A4F04; --mesure-critique:#A33418; --mesure-absente:#7C848E; --tuile-champ:#1C74D4; --tuile-encre:#FFFFFF; --police-texte:"IBM Plex Sans", system-ui, -apple-system, sans-serif; --police-donnee:ui-monospace, SFMono-Regular, Menlo, monospace; --lecture:720px; --tableau:880px; --gouttiere:24px; /* Largeur du cadre : la navigation, le corps et le pied s'alignent dessus. Une page de lecture la resserre en posant `class="etroite"` sur . */ --cadre:880px; } body.etroite { --cadre:720px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) { --fond-socle:#08090B; --fond-page:#0E1013; --fond-surface:#16191D; --fond-surface-haute:#1F2329; --encre-forte:#F2F4F6; --encre-moyenne:#9BA3AC; --encre-faible:#868F99; --filet-discret:#2A2F36; --filet-action:#5F666E; --identite:#4DA3FF; --action-fond:#FFFFFF; --action-encre:#0E1013; --mesure-confortable:#6FD9A6; --mesure-tendue:#F0B23E; --mesure-critique:#E2705A; --mesure-absente:#6B7480; } } :root[data-theme="sombre"] { --fond-socle:#08090B; --fond-page:#0E1013; --fond-surface:#16191D; --fond-surface-haute:#1F2329; --encre-forte:#F2F4F6; --encre-moyenne:#9BA3AC; --encre-faible:#868F99; --filet-discret:#2A2F36; --filet-action:#5F666E; --identite:#4DA3FF; --action-fond:#FFFFFF; --action-encre:#0E1013; --mesure-confortable:#6FD9A6; --mesure-tendue:#F0B23E; --mesure-critique:#E2705A; --mesure-absente:#6B7480; } /* ── Socle ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; background:var(--fond-page); color:var(--encre-forte); font-family:var(--police-texte); font-size:16px; font-weight:400; line-height:1.55; letter-spacing:0.01em; overflow-x:hidden; } img { max-width:100%; height:auto; display:block; } a { color:var(--identite); text-underline-offset:3px; text-decoration-thickness:2px; } a:hover { text-decoration-thickness:2px; } code, .mono, .donnee { font-family:var(--police-donnee); font-variant-numeric:tabular-nums; } code { font-size:0.92em; overflow-wrap:anywhere; } :focus-visible { outline:2px solid var(--identite); outline-offset:2px; } .saut-nav { position:absolute; left:-9999px; top:0; background:var(--fond-page); color:var(--encre-forte); padding:12px 16px; z-index:10; } .saut-nav:focus { left:0; } /* ── Navigation ─────────────────────────────────────────────────────────── */ .nav { background:var(--fond-socle); border-bottom:1px solid var(--filet-discret); } .nav-interne { max-width:var(--cadre); margin:0 auto; padding:12px var(--gouttiere); display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; } .nav-marque { font-size:16px; font-weight:600; letter-spacing:-0.015em; color:var(--encre-forte); text-decoration:none; display:flex; align-items:center; gap:8px; } .nav-marque svg { display:block; } .nav-liens { display:flex; flex-wrap:wrap; gap:8px 20px; margin-left:auto; font-size:13px; } .nav-liens a { color:var(--encre-moyenne); text-decoration:none; padding-bottom:2px; border-bottom:2px solid transparent; } .nav-liens a:hover { color:var(--encre-forte); border-bottom-color:var(--filet-action); } .nav-liens a[aria-current="page"] { color:var(--encre-forte); border-bottom-color:var(--identite); font-weight:500; } /* ── Gabarits ───────────────────────────────────────────────────────────── */ .page { max-width:var(--cadre); margin:0 auto; padding:48px var(--gouttiere) 96px; } .page-lecture { max-width:var(--lecture); } .surtitre { font-size:12px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--identite); margin:0 0 16px; } h1 { font-size:32px; font-weight:600; line-height:1.2; letter-spacing:-0.015em; margin:0 0 16px; color:var(--encre-forte); text-wrap:balance; } h2 { font-size:22px; font-weight:600; line-height:1.2; letter-spacing:-0.015em; margin:48px 0 16px; color:var(--encre-forte); } h3 { font-size:16px; font-weight:600; line-height:1.2; margin:32px 0 8px; color:var(--encre-forte); } p { margin:0 0 16px; text-wrap:pretty; } .chapo { font-size:18px; color:var(--encre-moyenne); margin-bottom:32px; } .secondaire { color:var(--encre-moyenne); } .tertiaire { color:var(--encre-faible); font-size:13px; } ul, ol { margin:0 0 16px; padding-left:24px; } li { margin-bottom:8px; } .num { font-family:var(--police-donnee); font-size:13px; color:var(--encre-faible); margin-right:12px; font-weight:400; } /* ── Tableaux de bordereau ──────────────────────────────────────────────── */ .enveloppe-tableau { overflow-x:auto; margin:0 0 24px; } table { width:100%; border-collapse:collapse; border-radius:0; font-size:15px; } caption { caption-side:top; text-align:left; font-size:13px; color:var(--encre-faible); padding-bottom:12px; } th, td { text-align:left; vertical-align:top; padding:12px; border-bottom:1px solid var(--filet-discret); } thead th { font-size:12px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--encre-faible); border-bottom:2px solid var(--filet-action); white-space:nowrap; } tbody tr:last-child td { border-bottom:1px solid var(--filet-action); } .col-cle { font-weight:500; color:var(--encre-forte); } td p { margin:0 0 8px; } td p:last-child { margin-bottom:0; } /* `break-word` et non `anywhere` : une adresse ne se coupe qu'à défaut de place, au lieu de se rompre systématiquement au milieu d'un identifiant. */ td.mono, td .mono { font-size:13px; color:var(--encre-moyenne); overflow-wrap:break-word; } /* Les trois tableaux de preuve de la page « Ce qu'il lit » : les colonnes de données reçoivent une largeur explicite, sinon l'auto-layout donne tout à la colonne de prose et casse « QuotaAnthropic.swift:63 » en deux. */ table.preuve { table-layout:fixed; } .sortie { font-family:var(--police-donnee); font-size:13px; color:var(--mesure-confortable); } /* ── La grille de notation ──────────────────────────────────────────────── */ .grille { display:inline-flex; gap:2px; vertical-align:middle; } .case { width:8px; height:18px; border-radius:2px; border:2px solid currentColor; background:transparent; } .case.pleine { background:currentColor; } .grille.confortable { color:var(--mesure-confortable); } .grille.tendue { color:var(--mesure-tendue); } .grille.critique { color:var(--mesure-critique); } .grille.absente { color:var(--mesure-absente); } /* ── Blocs de mise en garde et d'appui ──────────────────────────────────── */ .encadre { padding:16px; background:var(--fond-surface); border-left:2px solid var(--filet-action); margin:0 0 24px; font-size:15px; } .encadre :last-child { margin-bottom:0; } .avertissement { padding:16px; background:var(--fond-surface); border-left:2px solid var(--mesure-tendue); margin:0 0 24px; font-size:15px; color:var(--encre-moyenne); } .avertissement strong { color:var(--encre-forte); font-weight:500; } .avertissement :last-child { margin-bottom:0; } .avertissement h2, .avertissement h3 { margin-top:0; } .a-completer { display:inline-block; font-family:var(--police-donnee); font-size:13px; color:var(--mesure-critique); border:1px dashed var(--mesure-critique); padding:2px 8px; border-radius:2px; } /* ── Boutons ────────────────────────────────────────────────────────────── */ .boutons { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 16px; } .bouton { display:inline-block; padding:12px 24px; background:var(--action-fond); color:var(--action-encre); font-size:16px; font-weight:500; text-decoration:none; border:1px solid var(--action-fond); border-radius:10px; transition:opacity 120ms cubic-bezier(0.22, 0.9, 0.25, 1); } .bouton:hover { opacity:0.88; } .bouton-fantome { background:transparent; color:var(--encre-forte); border:1px solid var(--filet-action); } .bouton-fantome:hover { opacity:1; border-color:var(--encre-moyenne); } .commande { padding:12px; background:var(--fond-surface); border:1px solid var(--filet-discret); font-family:var(--police-donnee); font-size:13px; color:var(--encre-moyenne); margin:0 0 8px; overflow-wrap:anywhere; } .sous-commande { font-size:13px; color:var(--encre-faible); margin:0 0 24px; } .meta { font-size:13px; color:var(--encre-faible); line-height:1.8; margin:24px 0 0; } /* ── Héros de l'accueil : le vrai panneau, ouvert sous son icône ────────── */ /* Image composée par site/heros/composer_heros.py, 880 × 570 points : le panneau y est à sa taille réelle dès que le cadre fait 880 px. Tout ce qui l'entoure est dessiné par le script. */ .scene { background:var(--fond-surface); border-bottom:1px solid var(--filet-discret); padding:32px var(--gouttiere) 24px; } .scene picture { display:block; max-width:882px; margin:0 auto; } .heros { width:100%; border:1px solid var(--filet-discret); } .echelle { max-width:882px; margin:12px auto 0; font-family:var(--police-donnee); font-size:12px; color:var(--encre-faible); text-align:right; font-variant-numeric:tabular-nums; } .clair-seul { display:block; } .sombre-seul { display:none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .clair-seul { display:none; } :root:not([data-theme="clair"]) .sombre-seul { display:block; } } :root[data-theme="sombre"] .clair-seul { display:none; } :root[data-theme="sombre"] .sombre-seul { display:block; } .annonce { max-width:900px; margin:0 auto; padding:96px var(--gouttiere) 0; text-align:center; } .annonce h1 { font-size:clamp(44px, 7vw, 96px); line-height:1.04; letter-spacing:-0.025em; margin:0; } .annonce .phrase { font-size:18px; color:var(--encre-moyenne); max-width:640px; margin:24px auto 0; } .outils { max-width:900px; margin:48px auto 0; padding:0 var(--gouttiere); text-align:center; } .outils .liste { font-family:var(--police-donnee); font-size:13px; color:var(--encre-moyenne); line-height:1.8; word-spacing:0.2em; margin:0; } .outils .note { font-size:13px; color:var(--encre-faible); margin-top:12px; } .bloc-central { max-width:640px; margin:96px auto 0; padding:0 var(--gouttiere); text-align:center; } .bloc-central .boutons { justify-content:center; } .bloc-central .commande { text-align:left; } .bloc-central .sous-commande { text-align:left; } .prix { font-family:var(--police-donnee); font-size:32px; font-weight:600; letter-spacing:-0.015em; color:var(--encre-forte); margin:0; font-variant-numeric:tabular-nums; } .prix-detail { font-size:13px; color:var(--encre-faible); margin:8px 0 0; } /* ── Figure ─────────────────────────────────────────────────────────────── */ figure { margin:0 0 24px; } figure img { border:1px solid var(--filet-discret); width:320px; max-width:100%; } figcaption { font-family:var(--police-donnee); font-size:12px; color:var(--encre-faible); margin-top:8px; } .deux-colonnes { display:grid; grid-template-columns:1fr; gap:32px; align-items:start; } @media (min-width: 880px) { .deux-colonnes { grid-template-columns:1fr auto; } } /* ── Pied ───────────────────────────────────────────────────────────────── */ footer.pied { background:var(--fond-socle); border-top:1px solid var(--filet-discret); padding:32px var(--gouttiere); font-size:13px; color:var(--encre-faible); } footer.pied .pied-interne { max-width:var(--cadre); margin:0 auto; } footer.pied p { margin:0 0 12px; } footer.pied nav { display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:16px; } footer.pied nav a { color:var(--encre-moyenne); } /* ── Téléphone ──────────────────────────────────────────────────────────── */ @media (max-width: 720px) { /* Réduite à 390 px, l'image entière rendrait le panneau illisible : on garde sa moitié droite, le panneau et la fin de la barre, à peu près à taille réelle. */ .heros { aspect-ratio:420 / 570; object-fit:cover; object-position:100% 0; } .echelle { text-align:center; } .annonce { padding-top:48px; } .bloc-central { margin-top:48px; } .page { padding-top:32px; } h2 { margin-top:32px; } .nav-liens { margin-left:0; width:100%; } /* Les tableaux se déplient en fiches : un tableau à trois colonnes ne tient pas dans 390 px sans imposer un défilement latéral à la page entière. */ table.repliable, table.repliable tbody, table.repliable tr, table.repliable td { display:block; width:100%; } table.repliable thead { display:none; } table.repliable tr { border-bottom:1px solid var(--filet-action); padding:12px 0; } table.repliable td { border-bottom:0; padding:4px 0; } table.repliable td[data-col]::before { content:attr(data-col); display:block; font-size:12px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--encre-faible); margin-bottom:4px; } table.repliable .col-cle { font-size:16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } }