/* Baromètre des Unes — habillage des pages secondaires (/videos/, /methode/, * /mentions/). * * La page d'accueil garde son CSS en ligne : elle est autonome en un seul * fichier et c'est ce qui la rend rapide au premier affichage. Les pages * secondaires, elles, partagent cette feuille — trois copies du même CSS se * seraient désaccordées à la première retouche de couleur. * * Les jetons de couleur et les deux familles de caractères sont ceux de * index.html, à l'identique : palette validée pour le daltonisme (huit teintes, * voir CLAUDE.md). Toute correction de teinte doit être reportée aux deux * endroits. */ /* Les polices sont déclarées ici comme sur l'accueil, et servies du même domaine : voir le commentaire de index.html pour le détail. Les pages qui chargent cette feuille les préchargent dans leur . */ @font-face{ font-family:"Schibsted Grotesk"; src:url("/polices/schibsted-grotesk-latin.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Space Mono"; src:url("/polices/space-mono-400-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ color-scheme: light; --texte:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --plane:#f5f2ea; --surface:#ffffff; --ink:#0b0b0b; --ink-2:#4a4946; --ink-muted:#6f6d68; --grid:#e5e0d3; --axis:#c0bbaa; --ring:#e5e0d3; --lien:#1f68c2; --chaud:#b8481c; --ombre:0 1px 2px rgba(28,22,8,.05), 0 8px 24px rgba(28,22,8,.05); --ombre-forte:0 12px 34px rgba(28,22,8,.10); --r:14px; --r-s:9px; /* La seule couleur de série qui serve ici : le fond de l'affiche d'une vidéo qui n'a pas encore chargé. Les autres restent à l'accueil, seul à porter des graphiques. */ --q0:#eeede9; /* Fond du carré du logo : il suit le thème sans valoir `--ink`, dont le blanc pur ferait un trou de lumière en mode sombre. */ --logo-fond:#0b0b0b; } @media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])){ color-scheme: dark; --plane:#0d0d0d; --surface:#191917; --ink:#fff; --ink-2:#c3c2b7; --ink-muted:#9a9891; --grid:#2c2c2a; --axis:#4a4a46; --ring:#2e2e2b; --lien:#3987e5; --chaud:#f0865c; --ombre:0 1px 2px rgba(0,0,0,.4); --ombre-forte:0 12px 34px rgba(0,0,0,.5); --q0:#232322; --logo-fond:#f2f1ec; } } :root[data-theme="dark"]{ color-scheme: dark; --plane:#0d0d0d; --surface:#191917; --ink:#fff; --ink-2:#c3c2b7; --ink-muted:#9a9891; --grid:#2c2c2a; --axis:#4a4a46; --ring:#2e2e2b; --lien:#3987e5; --chaud:#f0865c; --ombre:0 1px 2px rgba(0,0,0,.4); --ombre-forte:0 12px 34px rgba(0,0,0,.5); --q0:#232322; --logo-fond:#f2f1ec; } *{box-sizing:border-box} body{ margin:0; background:var(--plane); color:var(--ink); font-family:var(--texte); font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased; } .enveloppe{max-width:1180px;margin:0 auto;padding:28px 20px 64px} /* Les pages qui ne sont que du texte (la méthode, les mentions) tiennent dans une colonne plus étroite : à 1180 px, une carte blanche gardait quatre cents pixels de vide à droite de chaque paragraphe, puisque le texte lui-même est borné à 74 caractères. La page des vidéos garde la pleine largeur, sa grille de films en a l'usage. */ .enveloppe--texte{max-width:880px} :target{scroll-margin-top:86px} /* Les deux motifs de l'accueil : la monospace annonce (surtitre) et mesure (`.chiffre`), la grotesque écrit tout le reste. */ .surtitre{ font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--chaud);margin:0 0 10px; } .chiffre{font-family:var(--mono);font-variant-numeric:tabular-nums} /* ---- barre de tête, reprise de l'accueil ---- */ header.tete{display:flex;justify-content:space-between;align-items:center;gap:16px; position:sticky;top:0;z-index:40;background:var(--plane); padding:14px 0 13px;margin-top:-28px;border-bottom:1px solid var(--grid)} .marque{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none} .marque .logo{width:36px;height:36px;flex:none;display:block} .marque .nom{display:flex;flex-direction:column;gap:2px} .marque .titre{font-size:18.5px;font-weight:800;letter-spacing:-.018em;line-height:1.05} .marque .devise{font-size:11.5px;color:var(--ink-muted);line-height:1.1} .marque:hover .titre{color:var(--lien)} .bouton-theme{ background:var(--surface);border:1px solid var(--ring);color:var(--ink-2); border-radius:999px;padding:7px 14px;cursor:pointer;font:inherit;font-size:13px; } .bouton-theme:hover{color:var(--ink);border-color:var(--axis)} /* ---- fil d'Ariane ---- Il est écrit dans la page, pas seulement dans le balisage : Google ne reprend un fil d'Ariane en résultat que s'il le retrouve à l'écran, et le lecteur arrivé par un moteur a besoin du chemin de retour vers l'accueil. En monospace : c'est une adresse, pas une phrase. */ .ariane{margin:20px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.04em; color:var(--ink-muted)} .ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0} .ariane li{display:flex;gap:7px;align-items:center} .ariane li + li::before{content:"›";color:var(--axis)} .ariane a{color:var(--ink-2)} .ariane [aria-current="page"]{color:var(--ink-muted)} h1{font-size:clamp(29px,4.2vw,46px);font-weight:800;line-height:1.05; letter-spacing:-.035em;margin:16px 0 0;max-width:22ch} .chapeau{font-size:clamp(16px,1.8vw,18.5px);line-height:1.48;margin:16px 0 30px; max-width:62ch;color:var(--ink-2)} /* ---- la chaîne de fabrication, en tête de la méthode ---- Quatre gestes, dans l'ordre, avant les sections qui les détaillent : la page répond ainsi à « comment ça marche ? » avant qu'on ait fait défiler. Le trait est porté par chaque étape et va de sa propre pastille jusqu'à la suivante, gouttière comprise (`right:-20px`) — d'où l'absence de trait sur la dernière, qui n'a personne à relier. Les pastilles sont opaques et le recouvrent à son départ. */ .chaine{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 30px; padding:0;list-style:none} .etape{position:relative;padding-top:44px} .etape::before{ content:"";position:absolute;top:17px;left:0;right:-20px;height:1px; background:var(--axis); } .etape:last-child::before{display:none} .etape .n{ position:absolute;top:0;left:0;width:34px;height:34px;border-radius:50%; background:var(--ink);color:var(--plane);display:flex;align-items:center; justify-content:center;font-family:var(--mono);font-size:14px; } .etape h3{font-size:15.5px;font-weight:700;letter-spacing:-.015em;margin:0 0 5px} .etape p{font-size:13.5px;color:var(--ink-2);margin:0} .carte{background:var(--surface);border:1px solid var(--ring);border-radius:var(--r); padding:22px 24px 24px;margin-bottom:22px;box-shadow:var(--ombre)} .carte h2{font-size:22px;font-weight:800;letter-spacing:-.025em;margin:0 0 6px;line-height:1.15} .carte h3{font-size:16px;font-weight:700;letter-spacing:-.015em;margin:22px 0 6px} .carte .sous{color:var(--ink-2);font-size:13.5px;margin:0 0 18px;max-width:74ch} .carte p{max-width:74ch} .carte p strong{font-weight:700} .carte ul{max-width:74ch;padding-left:20px} .carte li{margin-bottom:6px} .carte a{color:var(--lien)} /* Les noms de champs des fichiers de données, dans la section « Reprendre le baromètre » : assez marqués pour se distinguer d'un mot du texte, sans le cadre lourd d'un bloc de code. C'est la monospace du site, pas celle du système : deux dessins de chasse fixe dans la même page se remarquent. */ .carte code{font-family:var(--mono); font-size:.85em;background:var(--plane);border:1px solid var(--ring); border-radius:4px;padding:.5px 4px} /* ---- les films, mêmes règles que la section de l'accueil ---- */ .videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} .film{border:1px solid var(--ring);border-radius:var(--r-s);overflow:hidden;background:var(--plane)} .film video{display:block;width:100%;aspect-ratio:16/9;background:var(--q0)} .film .quoi{padding:12px 14px 13px} .film .nom{font-size:14px;font-weight:700;letter-spacing:-.01em} .film .mesure{font-family:var(--mono);font-size:10.5px;color:var(--ink-muted);margin-top:5px; font-variant-numeric:tabular-nums} .film .mesure a{color:var(--ink-2)} /* Le résumé du semestre tient la largeur : c'est la vidéo à regarder d'abord. */ .film.vedette{grid-column:1/-1} /* ---- le tableau des journaux suivis ---- */ .liste-journaux{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:6px 18px;margin:0;padding:0;list-style:none;font-size:13.5px} .liste-journaux li{color:var(--ink-2)} .liste-journaux .famille{color:var(--ink-muted);font-size:12px} .retour{display:inline-block;margin-top:6px;font-size:13.5px} footer{margin-top:38px;padding-top:20px;border-top:1px solid var(--grid); color:var(--ink-muted);font-size:12.5px;max-width:78ch} footer a{color:var(--ink-2)} footer strong{color:var(--ink-2);font-weight:700} .note{color:var(--ink-muted);font-size:12.5px;margin-top:12px} @media (max-width:900px){ /* Quatre colonnes deviennent deux : à moins de 200 px, un libellé d'étape se casse en quatre lignes. Le trait ne relie plus que les voisines de rangée. */ .chaine{grid-template-columns:repeat(2,1fr);gap:22px 20px} .etape:nth-child(2n)::before{display:none} } @media (max-width:640px){ .enveloppe{padding:20px 15px 48px} header.tete{margin-top:-20px;padding:11px 0 10px} .carte{padding:17px 16px 19px} /* Comme sur l'accueil : le logo maigrit, la devise s'efface plutôt que de casser le nom sur deux lignes. */ .marque .logo{width:30px;height:30px} .marque .titre{font-size:15.5px} .marque .devise{display:none} }