/* ============================================================================ * منصة تشمشه — jetons de design * * NEUF PALETTES commutables par ``, toutes dans les * couleurs demandées au cahier des charges (أزرق · أخضر · ذهب · بنّي). * * ⚠️ AUCUN ROUGE nulle part — retiré à la demande du client. Le statut d'accès * passe par la FORME (trait tireté, cartouche), pas par une couleur d'alarme. * C'est plus juste : « accès restreint » n'est pas une alerte, c'est un statut. * * Les trois premières (A, B, C) sont une même idée déclinée : surface sombre, * fond clair chaud, or. D et E changent le PRINCIPE, pas la teinte — c'est ce * qui les rend réellement différentes. F à I sont venues après, à la demande * du client, pour élargir le choix de TEINTE une fois le principe admis : le * sable, l'olivier, la terre cuite et le gris froid. * * ── Les jetons, et ce qu'ils veulent dire ────────────────────────────────── * --profond surfaces sombres (hero, en-tête, pied) * --sur-profond ce qui s'écrit DESSUS. Distinct de --fond, sinon une * palette sombre rendrait le hero illisible. * --fond fond de page --encre texte courant * --or LE LIEN, uniquement --brun filets, structure * ========================================================================== */ /* ── A · « الحبر والذهب » — encre & or (par défaut) ──────────────────────── * Encre presque noire, ivoire chaud, or. Contraste élevé, très « musée ». * Celle qui tient le mieux les photos de folios : le papier des scans ne se * bat pas avec le fond. */ :root[data-palette="hibr"] { --profond: #101C22; --profond-2: #1C3038; --sur-profond: #F4F1E9; --vert: #2B5F52; --or: #C2A15B; --brun: #6B4A2F; --fond: #F4F1E9; --fond-2: #FBF9F4; --encre: #16130F; --glose: #6E5325; --mj-h0: 152; --mj-l: 44%; --mj-c: .078; } /* ── B · « النيلة » — l'indigo de la ملحفة ─────────────────────────────── * ★ PALETTE RETENUE avec le client le 01/08/2026. Elle est donc aussi celle * du `:root` nu — un navigateur qui perdrait l'attribut data-palette doit * afficher la charte validée, pas une des variantes d'étude. */ :root, :root[data-palette="nila"] { --profond: #16233F; --profond-2: #2C4470; --sur-profond: #F2EDE3; --vert: #1F5D4C; --or: #C09A4E; --brun: #6B4A2F; --fond: #F2EDE3; --fond-2: #FAF7F1; --encre: #1A1714; --glose: #6E5325; --mj-h0: 205; --mj-l: 44%; --mj-c: .078; } /* ── C · « الواحة » — l'oasis ─────────────────────────────────────────── */ :root[data-palette="waha"] { --profond: #0E2E2A; --profond-2: #1D4C42; --sur-profond: #F3F0E7; --vert: #3C7A5E; --or: #C8A24A; --brun: #6A4B31; --fond: #F3F0E7; --fond-2: #FBFAF5; --encre: #14201C; --glose: #5F5326; --mj-h0: 118; --mj-l: 44%; --mj-c: .078; } /* ══════════════════════════════════════════════════════════════════════════ * D · « السَّمَر » — LA VEILLÉE * * Le site entier bascule en sombre : ce n'est plus « un hero foncé sur une * page claire », c'est une salle éteinte. La vitrine des مجموعات y prend toute * sa force — 23 cartes de couleur dans le noir, c'est une veillée. * * Le nom n'est pas décoratif : السمر, c'est la veillée où l'on récite et où * l'on transmet. C'est le moment culturel exact que la plateforme documente. * * Contraintes que ça impose, et qui sont tenues ci-dessous : * · l'or doit MONTER en clarté, sinon il s'éteint sur le noir ; * · le brun des filets doit s'éclaircir, sinon les lignes disparaissent ; * · les 23 teintes doivent passer en clarté haute (--mj-l 62 %), sinon les * points de مجموعة deviennent des trous noirs. * ═══════════════════════════════════════════════════════════════════════ */ :root[data-palette="samar"] { --profond: #0A0908; --profond-2: #1E1A15; --sur-profond: #EFE6D5; --vert: #5E8A6B; --or: #D9B569; --brun: #8E6E48; --fond: #121010; --fond-2: #1D1A16; --encre: #EFE6D5; --glose: #B69C74; --mj-h0: 42; --mj-l: 62%; --mj-c: .085; } /* ══════════════════════════════════════════════════════════════════════════ * E · « النهار » — LE PLEIN JOUR * * L'inverse exact de D, et l'inverse du principe des trois premières : fond * BLANC franc, et la couleur ne sert plus d'arrière-plan mais d'aplat — le * hero devient un bloc de bleu pétrole saturé, pas un dégradé sombre. * L'or se réduit au filet. Registre galerie contemporaine, très institutionnel. * * C'est la seule des cinq où l'or n'a presque aucune surface : si la * commission trouve les autres « trop dorées », c'est celle-là qu'il faut lui * montrer. * ═══════════════════════════════════════════════════════════════════════ */ :root[data-palette="nahar"] { --profond: #0F5C63; --profond-2: #0A4046; --sur-profond: #FFFFFF; --vert: #2F7D5B; --or: #B08733; --brun: #55504A; --fond: #FFFFFF; --fond-2: #F3F6F6; --encre: #101819; --glose: #566566; --mj-h0: 186; --mj-l: 48%; --mj-c: .082; } /* ══════════════════════════════════════════════════════════════════════════ * F · « الرَّمْل » — LE SABLE * * La seule des palettes où le fond est FRANCHEMENT chaud : sable clair, pas * ivoire. Les surfaces sombres passent au brun de datte plutôt qu'au bleu, et * l'or y devient presque un cuivre. C'est la palette la plus « mauritanienne » * du lot — celle du reg et de la terre, quand les autres viennent de l'encre. * * Contrainte tenue : sur un fond chaud, un or jaune se noie. Il est donc * refroidi et foncé (#9A6B2F) pour rester lisible comme LIEN. * ═══════════════════════════════════════════════════════════════════════ */ :root[data-palette="raml"] { --profond: #3A2A1C; --profond-2: #574127; --sur-profond: #F7EEDF; --vert: #5A6B3A; --or: #9A6B2F; --brun: #7A5836; --fond: #F3E7D3; --fond-2: #FAF2E4; --encre: #24190F; --glose: #6E5325; --mj-h0: 62; --mj-l: 44%; --mj-c: .072; } /* ══════════════════════════════════════════════════════════════════════════ * G · « الزَّيْتُون » — L'OLIVIER * * Vert profond et laiton. Le registre des reliures anciennes et des salles de * lecture d'avant l'électricité — plus sourd que « الواحة », qui est un vert * vif de jardin. Ici le vert est presque noir et c'est le laiton qui éclaire. * ═══════════════════════════════════════════════════════════════════════ */ :root[data-palette="zaytun"] { --profond: #16261D; --profond-2: #294034; --sur-profond: #F0EDE0; --vert: #4A7A55; --or: #B79149; --brun: #5E5233; --fond: #F0EDE0; --fond-2: #F8F6EE; --encre: #131A15; --glose: #5A5A34; --mj-h0: 138; --mj-l: 44%; --mj-c: .075; } /* ══════════════════════════════════════════════════════════════════════════ * H · « العَقِيق » — LA CORNALINE * * ⚠️ La charte interdit le rouge, et cette palette ne l'introduit PAS : le * rouge reste absent de tout ce qui SIGNIFIE (accès, alerte, statut). Ce qui * change ici, c'est la teinte des SURFACES sombres, qui passe du bleu au brun * rouge de la pierre. C'est un ton de terre cuite, pas un signal. * * À écarter si la commission trouve la nuance trop proche du rouge : le * cahier des charges est plus important que cette palette. * ═══════════════════════════════════════════════════════════════════════ */ :root[data-palette="aqiq"] { --profond: #38201C; --profond-2: #55322A; --sur-profond: #F6EBE2; --vert: #4C6B52; --or: #C0913F; --brun: #7A4B36; --fond: #F6EDE6; --fond-2: #FCF6F1; --encre: #221510; --glose: #6B4630; --mj-h0: 28; --mj-l: 44%; --mj-c: .075; } /* ══════════════════════════════════════════════════════════════════════════ * I · « الفَجْر » — L'AUBE * * Ni sombre ni blanche : un gris-bleu FROID et clair, avec l'or en accent * chaud. C'est la seule qui ne cherche pas l'effet « ancien » — registre * archive contemporaine, proche de ce que ferait une bibliothèque * universitaire européenne. À montrer si « النهار » paraît trop nue et les * autres trop patinées. * ═══════════════════════════════════════════════════════════════════════ */ :root[data-palette="fajr"] { --profond: #2B3440; --profond-2: #3E4B5C; --sur-profond: #F4F6F8; --vert: #3E6B5C; --or: #B08A44; --brun: #5A6270; --fond: #EDF0F3; --fond-2: #F7F9FB; --encre: #171C22; --glose: #56606C; --mj-h0: 232; --mj-l: 46%; --mj-c: .07; } /* ============================================================================ * Jetons dérivés — communs aux cinq palettes * ========================================================================== */ :root { /* Le filet : toute ligne structurante. Jamais une ombre portée. */ --filet: 1px solid color-mix(in oklab, var(--brun) 32%, transparent); --filet-or: 1px solid var(--or); /* ── Les valeurs de surface sombre, échelonnées ──────────────────────── * L'en-tête et le haut du hero tiraient tous les deux sur `--profond`, et * le hero partait même PLUS SOMBRE que la barre de menu. Deux surfaces à la * même valeur n'ont pas de bord : la barre se noyait dans le hero, et on * compensait par une ombre interne — donc en assombrissant encore. * * On sépare par la VALEUR, ce qui est le vrai outil : * --profond-bas en-tête et déroulés — la surface la plus SOMBRE, celle * qui doit se lire comme un cadre posé par-dessus ; * --profond les surfaces sombres courantes (pied, cartouches) ; * --profond-haut le haut du hero — la plus CLAIRE. C'est elle qui * détache la barre de menu, sans une once d'ombre. * * On monte vers `--profond-2` et non vers le blanc : le blanc délaverait * l'indigo en gris, `--profond-2` est la même teinte en plus lumineux. * * L'écart est calibré, pas choisi à l'œil : ~1,45:1 de luminance entre la * barre et le haut du hero — assez pour que le bord se lise sans filet, et * pas plus, car l'or du surtitre s'écrit sur le hero et tombe sous le seuil * AA (4,5:1) si on éclaircit davantage. C'est cette contrainte-là qui fixe * la borne haute, pas le goût. */ --profond-bas: color-mix(in oklab, var(--profond) 74%, #000); --profond-haut: color-mix(in oklab, var(--profond) 34%, var(--profond-2)); /* ── Typographie ─────────────────────────────────────────────────────── * Display : Noto Kufi Arabic — le kufi géométrique, monumental. Il évoque * l'inscription, le pacte gravé. * Texte : Amiri — la seule libre qui tienne un paragraphe vocalisé sans * casser le تشكيل. * UI : Alexandria — géométrique ; sa graisse 300 donne aux méta une * voix nettement plus discrète que le texte courant. */ --f-display: "Noto Kufi Arabic", system-ui, sans-serif; --f-texte: "Amiri", Georgia, serif; --f-ui: "Alexandria", system-ui, sans-serif; --lh-texte: 1.9; /* prose arabe vocalisée : en dessous, ça se colle */ --mesure: 34em; /* 60–70 caractères */ } /* « النهار » est la seule des cinq où `--profond-2` est plus SOMBRE que `--profond` — son hero est un aplat, pas un dégradé. La formule commune y assombrirait le haut du hero au lieu de l'éclaircir. Faute d'une seconde teinte plus lumineuse, on éclaircit vers le blanc : sur un bleu pétrole déjà saturé, le délavage ne se voit pas. */ :root[data-palette="nahar"] { --profond-haut: color-mix(in oklab, var(--profond) 86%, #fff); } /* ============================================================================ * Les 23 teintes de مجموعة * * Rotation de teinte à CLARTÉ ET CHROMA CONSTANTS (oklch), 360°/23 ≈ 15,65°. * Aucun groupe n'a une couleur plus vive, plus claire ou plus visible qu'un * autre. Sur un sujet où l'égalité entre les مجموعات est politique, c'est une * décision technique qui compte, et elle doit rester vérifiable d'un coup * d'œil. NE PAS retoucher une teinte « parce qu'elle rend mieux ». * * Seuls l'ancrage (--mj-h0) et la clarté (--mj-l) changent d'une palette à * l'autre — jamais d'une مجموعة à l'autre. * ========================================================================== */ /* ⚠️ 360 / 24 depuis le 07/08/2026 — l'ajout de أهل المبارك. Le pas ÉTAIT 15.652174 (360/23). Le garder aurait posé la 24ᵉ teinte à 23 × 15.652 = 360°, c'est-à-dire EXACTEMENT la couleur du premier groupe : deux cartes jumelles dans la vitrine, sans la moindre erreur nulle part. Repartager le cercle décale légèrement les vingt-trois autres. C'est le prix, et il est juste : ce qui doit rester constant n'est pas telle teinte, c'est l'ÉGALITÉ — même clarté, même chroma, même écart pour tous. */ :root { --mj-pas: 15; } /* 360 / 24 */ :root { --mj-1: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 0 * var(--mj-pas))); --mj-2: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 1 * var(--mj-pas))); --mj-3: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 2 * var(--mj-pas))); --mj-4: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 3 * var(--mj-pas))); --mj-5: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 4 * var(--mj-pas))); --mj-6: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 5 * var(--mj-pas))); --mj-7: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 6 * var(--mj-pas))); --mj-8: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 7 * var(--mj-pas))); --mj-9: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 8 * var(--mj-pas))); --mj-10: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 9 * var(--mj-pas))); --mj-11: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 10 * var(--mj-pas))); --mj-12: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 11 * var(--mj-pas))); --mj-13: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 12 * var(--mj-pas))); --mj-14: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 13 * var(--mj-pas))); --mj-15: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 14 * var(--mj-pas))); --mj-16: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 15 * var(--mj-pas))); --mj-17: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 16 * var(--mj-pas))); --mj-18: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 17 * var(--mj-pas))); --mj-19: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 18 * var(--mj-pas))); --mj-20: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 19 * var(--mj-pas))); --mj-21: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 20 * var(--mj-pas))); --mj-22: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 21 * var(--mj-pas))); --mj-23: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 22 * var(--mj-pas))); --mj-24: oklch(var(--mj-l) var(--mj-c) calc(var(--mj-h0) + 23 * var(--mj-pas))); } /* Repli sans oklch() : une seule couleur neutre plutôt que 23 approximations * inégales. Mieux vaut pas de code couleur qu'un code couleur qui avantage * certains groupes. */ @supports not (color: oklch(50% 0.1 180)) { :root { --mj-1: var(--brun); } }