/* ============================================================= Système de design — couche « produit » Partagé par toutes les pages. Extrait du code réellement en place dans index.html, pas réinventé. À ne pas confondre avec la couche « imitation LinkedIn » (--bg, --card, --blue…), qui reste locale à la carte du post : elle doit ressembler à LinkedIn, pas à nous. ============================================================= */ /* ============================================================= THÈME Toutes les couleurs du produit passent par ces tokens : c'est ce qui rend le mode sombre possible sans réécrire les écrans. Une couleur en dur dans une page est un écran qui restera clair. Trois états, décidés dans Paramètres : auto (défaut) suit le réglage du système clair impose le clair sombre impose le sombre L'attribut data-theme est posé sur avant le premier rendu (script en tête de page) : sans ça, l'écran clignoterait en blanc avant de virer au sombre. ============================================================= */ :root{ /* --- encre --- */ --ink: #1a1a2e; /* texte principal, accents pleins */ --ink-2: #8a8a92; /* texte secondaire, libellés */ --ink-3: #b4b4bc; /* texte désactivé */ /* --- surfaces --- */ --page: #f0f0f3; /* fond de page */ --panel: #ffffff; /* cartes, modales */ --surface: #f2f2f5; /* champs, boutons neutres */ --surface-2: #e6e6ea; /* survol d'un bouton neutre */ --surface-3: #f8f8fa; /* champ posé sur le gris de la page */ --line: #00000014; /* filets de séparation */ /* Le squelette est sa propre matière, et non celle des champs : il se pose AUSSI BIEN sur une carte blanche que sur le gris de la page, ce qu'aucune des surfaces ci-dessus ne fait — --surface (#f2f2f5) et --page (#f0f0f3) sont à trois points l'un de l'autre, un squelette à même la page y était invisible. D'où une teinte franchement plus basse que les deux. */ --sk-base: #e2e2e8; --sk-lueur: #f1f1f4; /* la crête du balayage */ /* --- accents --- */ --red: #e0384f; /* week-ends, badges, suppression */ --blue-ios: #0a84ff; /* sélection (check « Utilisé ») */ --blue-link: #0a66c2; /* mentions, liens */ /* Le bleu DE MARQUE LinkedIn (#0a66c2, leur charte) — jamais réécrit en sombre, contrairement à --blue-link. Un badge ou un bouton qui montre LinkedIn doit porter SA couleur, pas la nôtre adaptée au thème : sinon le badge devient bleu pâle en sombre, où --blue-link s'éclaircit pour rester lisible en texte sur fond sombre — un besoin qui ne concerne pas un aplat plein. */ --linkedin: #0a66c2; /* --- surface inversée : boutons pleins, lien actif, jour choisi --- Ne PAS écrire background:var(--ink); color:#fff : en sombre --ink est clair, et le texte blanc disparaîtrait sur un bouton clair. */ --solid-bg: #1a1a2e; --solid-ink: #ffffff; --solid-bg-2: #2a2a44; /* survol */ /* --- pastilles d'état --- */ --tag-bg: var(--surface); --tag-ink: var(--ink-2); --tag-wait-ink: #6b6b73; --tag-action-bg: #fdecef; --tag-action-ink: var(--red); --tag-ok-bg: #e7f5ee; --tag-ok-ink: #0d7a4f; --tag-live-bg: #e8f0fb; --tag-live-ink: var(--blue-link); /* --- avertissement (données locales) --- */ --warn-bg: #fff9e6; --warn-ink: #7a5b00; /* --- action destructrice --- */ --danger-bg: #fdecef; --danger-bg-2: #fbdae0; /* --- double bordure : ce qui est POSÉ --- */ --edge: #d0d0d6; --edge-w: 2px; --edge-gap: 4px; /* --- rayons --- */ --r-panel: 32px; /* modales, grandes cartes */ --r-card: 28px; /* carte du post */ --r-field: 18px; /* champs de saisie */ --r-btn: 18px; /* boutons */ --r-pill: 999px; /* pastilles, toggles */ /* --- élévation : ce qui FLOTTE --- */ --lift: 0 18px 44px -12px #00000045; /* Le canevas de l'app posé dans sa gouttière. Beaucoup plus discret que --lift : il ne s'agit pas de faire flotter, seulement de marquer la jointure entre deux teintes très proches (--panel et --page). */ --canvas-lift: 0 1px 2px #0000000a, 0 4px 14px -6px #00000014; /* --- bascules (toggle) : valeurs du toggle des visuels --- */ --toggle-track: #e4e4e8; /* la piste */ --toggle-off: #6a6a72; /* option non choisie */ --toggle-lift: 0 1px 3px #0000001f; /* l'ombre courte de la pastille */ /* --- rythme --- */ --gap: 8px; /* écart intérieur des panneaux */ --edge-margin: 10px; /* marge aux bords d'écran */ } /* ============================================================= Barre de scroll — desktop uniquement Le trait fin par défaut du système est déjà discret sur mobile (survole le contenu, disparaît au repos) ; seul le desktop montre une piste et un pouce épais et opaques. On les allège : pas de fond de piste, un pouce fin qui reprend --ink-3 (déjà thématisé clair/sombre), visible seulement au survol. ============================================================= */ @media (min-width: 860px){ *{ scrollbar-width: thin; scrollbar-color: transparent transparent; } *:hover{ scrollbar-color: var(--ink-3) transparent; } ::-webkit-scrollbar{ width: 10px; height: 10px; } ::-webkit-scrollbar-track{ background: transparent; } ::-webkit-scrollbar-thumb{ background: transparent; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } *:hover::-webkit-scrollbar-thumb{ background: var(--ink-3); background-clip: content-box; } } /* ============================================================= Palette sombre Des gris neutres, jamais de noir pur : sur un écran OLED le noir absolu fait baver le texte clair et écrase la hiérarchie. On monte par paliers — page, panneau, champ — pour retrouver exactement les rapports du clair. Les accents sont éclaircis et désaturés : le rouge du clair (#e0384f) vibre sur fond sombre et devient illisible en petit. Le bloc est écrit deux fois — pour le réglage manuel et pour celui du système. CSS ne sait pas partager un bloc entre deux sélecteurs sans les lister tous les deux ; les valeurs, elles, restent au même endroit. ============================================================= */ :root[data-theme="sombre"]{ --ink: #ececec; --ink-2: #a0a0a5; --ink-3: #6e6e73; --page: #000000; /* le fond le plus bas */ --panel: #141414; /* la carte se détache d'un cran */ --surface: #1a1a1a; /* champ ou bouton neutre, un cran de plus */ --surface-2: #262626; /* survol */ --surface-3: #1c1c1c; /* champ creusé DANS une carte : plus bas qu'elle */ --line: #ffffff14; /* En sombre, le squelette monte au lieu de descendre : il reste plus clair que la carte (#212121) comme que le fond (#171717). */ --sk-base: #2e2e2e; --sk-lueur: #3c3c3c; --solid-bg: #ececec; --solid-ink: #171717; --solid-bg-2: #ffffff; --red: #ff6b73; --blue-ios: #4d9fff; --blue-link: #7cb9ff; --tag-wait-ink: #b9b9c0; --tag-action-bg: #3a2027; --tag-action-ink: #ff8a92; --tag-ok-bg: #142b21; --tag-ok-ink: #5fd39b; --tag-live-bg: #15293d; --tag-live-ink: #7cbaff; --warn-bg: #2b2412; --warn-ink: #e6c169; --danger-bg: #3a2027; --danger-bg-2: #4a2830; --edge: #3a3a3a; --lift: 0 18px 44px -12px #000000cc; /* En sombre la gouttière (--panel) est PLUS CLAIRE que le canevas : l'ombre se lit donc sur elle, et doit être un peu plus dense. */ --canvas-lift: 0 1px 2px #00000038, 0 4px 14px -6px #00000059; --toggle-track: #3a3a3a; --toggle-off: #a0a0a5; --toggle-lift: 0 1px 3px #00000073; } @media (prefers-color-scheme: dark){ :root:not([data-theme="clair"]):not([data-theme="sombre"]){ --ink: #ececec; --ink-2: #a0a0a5; --ink-3: #6e6e73; --page: #000000; --panel: #141414; --surface: #1a1a1a; --surface-2: #262626; --surface-3: #1c1c1c; --line: #ffffff14; --sk-base: #2e2e2e; --sk-lueur: #3c3c3c; --solid-bg: #ececec; --solid-ink: #000000; --solid-bg-2: #ffffff; --red: #ff6b73; --blue-ios: #4d9fff; --blue-link: #7cb9ff; --tag-wait-ink: #b9b9c0; --tag-action-bg: #3a2027; --tag-action-ink: #ff8a92; --tag-ok-bg: #142b21; --tag-ok-ink: #5fd39b; --tag-live-bg: #15293d; --tag-live-ink: #7cbaff; --warn-bg: #2b2412; --warn-ink: #e6c169; --danger-bg: #3a2027; --danger-bg-2: #4a2830; --edge: #3a3a3a; --lift: 0 18px 44px -12px #000000cc; --canvas-lift: 0 1px 2px #00000038, 0 4px 14px -6px #00000059; --toggle-track: #3a3a3a; --toggle-off: #a0a0a5; --toggle-lift: 0 1px 3px #00000073; } } *{ box-sizing:border-box; } /* `hidden` cache. Vraiment. Le navigateur porte bien un [hidden]{display:none}, mais il vit dans SA feuille de style, et la moindre règle d'auteur qui pose un display le bat — sans avertissement. Or presque tous nos composants en posent un : .u-btn est en inline-flex, .visual-toggle en flex, .modale en grid. Poser `el.hidden = true` sur l'un d'eux ne faisait donc RIEN, et le bouton restait à l'écran. Le symptôme a déjà été soigné huit fois, à huit endroits, à chaque fois qu'il mordait (.modale[hidden], .scrim[hidden], .visual-toggle[hidden]…). Celles-ci deviennent redondantes ; elles ne gênent pas. !important : c'est le seul moyen de passer devant les règles d'auteur qui posent un display, puisque c'est précisément contre elles qu'on lutte. Un élément marqué hidden n'a aucune raison d'être affiché — il n'y a pas de cas où cette règle-ci soit celle qu'on voudrait perdre. */ [hidden]{ display:none !important; } /* Les contrôles natifs (curseur de saisie, sélection, ascenseurs) suivent le thème : sans ça, un champ sombre garde un curseur pensé pour le blanc. */ :root[data-theme="sombre"]{ color-scheme:dark; } :root[data-theme="clair"]{ color-scheme:light; } :root:not([data-theme]){ color-scheme:light dark; } body{ margin:0; background:var(--page); color:var(--ink); font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased; } /* ============================================================= Le gris de l'app posé en CARTE (desktop) Le fond de page ne va plus jusqu'aux bords : il s'arrête à 15px, s'arrondit, et laisse voir le blanc derrière lui. C'est html qui porte ce blanc et body qui garde le gris — donc aucune page n'a de balise à ajouter, la règle vaut partout d'un coup. Les écrans hors app (login, inscription, mot de passe, rejoindre) sont déjà blancs : ils remettent margin à 0 dans leur propre