/** * Scoliom Scolarité — JETONS DE L'IDENTITÉ VISUELLE * © 2026 Scoliom — une marque d'ABC IT SARL AU. Tous droits réservés. * * Charte v2 « LA JOURNÉE D'ÉCOLE » (28/07/2026) — alignée sur scoliom.com. * Cette charte REMPLACE la v1 verte « Sceau & Registre », abandonnée. * * Direction product-led : le site vitrine est bâti sur de VRAIES captures de * cette interface. Conséquence directe : chaque écran soigné devient un argument * de vente, chaque écran négligé se voit sur le site. L'interface EST le support * marketing. * * Le violet Majorelle reste la couleur d'identité, mais en APLAT : plus un seul * dégradé. Une seule recette d'ombre, réservée aux fenêtres. Bordures toujours * lilas, jamais gris neutre. Le registre administratif (heures, montants, * numéros de reçu, codes Massar) se compose en Spline Sans Mono — c'est la * signature de la marque. * * ─── FICHIER = SOURCE UNIQUE DE VÉRITÉ ──────────────────────────────────── * À charger AVANT toute autre feuille. Les pages autonomes (login, portail, * préinscription, paiement, vérification, reçus) doivent l'inclure aussi : * sinon le produit se présente avec deux identités, ce qui est pire qu'une * identité générique. * La PWA famille/ reste délibérément AUTONOME (contrainte hors-ligne du service * worker) : elle recopie ce même bloc en tête de famille/app.css. Toute * modification ici doit y être répercutée. * * ─── CE QUI EST BANNI, ET POURQUOI ──────────────────────────────────────── * Dégradé violet→pourpre, Inter, Plus Jakarta Sans, ombres floues empilées, * cartes qui « lévitent », chips-pilules 999px, glassmorphism, icônes duotone, * emojis dans l'interface, et toute la panoplie verte v1 (papier ivoire, vert * sceau, safran, khatam). Ce sont les marqueurs d'une interface générée * automatiquement ; ils ne distinguent aucun produit. */ /* ============================================================ 1. POLICES AUTO-HÉBERGÉES (aucun CDN — confidentialité + hors-ligne) Fichiers identiques à ceux servis par scoliom.com. ============================================================ */ @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/spectral-500-latin.woff2) format('woff2'); 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+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/spectral-600-latin.woff2) format('woff2'); 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+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Spectral'; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/spectral-italic-500-latin.woff2) format('woff2'); 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+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-var-latin.woff2) format('woff2'); 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+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/spline-sans-mono-var-latin.woff2) format('woff2'); 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+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plex-sans-arabic-400.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/plex-sans-arabic-700.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* ============================================================ 2. TOKENS CANONIQUES (repris tels quels de la charte v2) ============================================================ */ :root { --violet: #6050DC; /* identité, actions et liens */ --violet-deep: #4A3CB8; /* survol / appui / état actif */ --ink: #221C44; /* encre cartable — texte principal */ --ink-soft: #5A5478; /* texte secondaire */ --bg: #FBFAFF; /* craie violette — fond global (jamais blanc pur) */ --veil: #EEEBFB; /* voile lilas — surfaces 2ᵈᵉˢ, barres, survols */ --line: #DCD6F3; /* trait lilas — TOUTES les bordures */ --green: #1B8A5A; /* UNIQUEMENT confirmations : payé/présent/vérifié */ --green-bg: #E7F6EE; --error: #C0392B; /* même parcimonie que le vert */ --radius: 14px; /* surfaces */ --radius-btn: 10px; /* boutons */ /* Ombre UNIQUE autorisée — fenêtres et cartes principales seulement, JAMAIS sur un bouton. Toute autre ombre est une régression. */ --shadow: 0 24px 60px -28px rgba(96,80,220,.28), 0 4px 14px -8px rgba(34,28,68,.12); --font-display: 'Spectral', Georgia, serif; --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Spline Sans Mono', ui-monospace, Consolas, monospace; --font-arabic: 'IBM Plex Sans Arabic', 'Archivo', 'Segoe UI', Tahoma, sans-serif; /* ── Dérivés nécessaires, choisis dans l'esprit de la charte ────────── La charte ne nomme que trois couleurs sémantiques (violet, vert, rouge). Ce qui suit complète ce qu'une application de gestion exige, sans introduire de teinte étrangère à la palette. */ --pastille: #C7BFEC; /* 2ᵉ et 3ᵉ pastilles du chrome de fenêtre */ --zebre: #FDFCFF; /* zébrage de tableau (facultatif) */ --ink-faint: #6E6890; /* 3ᵉ niveau de texte, encore lisible */ --line-strong: #C7BFEC; /* encadrement appuyé (champs, en-têtes) */ --green-tx: #14663F; /* vert lisible SUR --green-bg */ --error-bg: #FBEDEB; --error-tx: #96271B; /* rouge lisible sur --error-bg */ } /* ============================================================ 2 bis. TEINTES DE DOMAINE — le repérage, jamais le sens Le produit avait déjà tranché « une couleur par domaine métier » : la palette « vives sur pastel » retenue par le fondateur vivait en dur dans app.css, au bloc des tuiles de modules. Elle est reprise ici TELLE QUELLE, pour qu'elle cesse d'être clandestine — pas redessinée. USAGE STRICT : repérer un module (tuile, icône de module, icône de carte d'indicateur). JAMAIS un état, un statut, une alerte : la sémantique appartient au violet, au vert et au rouge, et à eux seuls. Aucune feuille ne les consomme encore — c'est voulu : ce lot ne fait que poser le socle, la migration d'app.css vient après. */ :root { --dom-pilotage-bg: #E8EEFF; /* indigo */ --dom-pilotage-fg: #2445C9; --dom-scolarite-bg: #EDE9FE; /* violet */ --dom-scolarite-fg: #5B3FE0; /* Admissions & argent : le thème clair portait DEUX encres pour ce seul domaine — celle des dossiers d'admission et celle de la caisse. Elles ne diffèrent que d'un cran sur un canal, le thème sombre les avait déjà fondues en une, et seule la plus foncée tient le contraste AA sur son propre pastel. Une seule encre, donc : la plus foncée. C'est le seul endroit où ce lot s'écarte de la recopie, et il le fait pour fermer un défaut de lisibilité, pas pour redessiner. */ --dom-admissions-argent-bg: #DFF5EC; /* vert */ --dom-admissions-argent-fg: #00795F; --dom-communication-bg: #FFEFD9; /* ambre */ --dom-communication-fg: #A85A00; --dom-resultats-bg: #F6E4FE; /* prune */ --dom-resultats-fg: #8A28CC; --dom-vie-scolaire-bg: #DFF0FF; /* bleu */ --dom-vie-scolaire-fg: #0B62B8; --dom-documents-bg: #F6EAEF; /* grenat */ --dom-documents-fg: #8C4A63; --dom-outils-bg: #E8ECF3; /* ardoise */ --dom-outils-fg: #3D4E60; /* La MÊME famille, posée sur l'encre de la barre latérale. La barre est en encre pleine dans les deux thèmes : les encres claires ci-dessus y seraient illisibles. Ce sont les valeurs éclaircies que le thème sombre emploie déjà pour les tuiles — reprises telles quelles, et définies ici en plein jour parce que c'est là qu'on en a besoin. Elles n'ont pas de contrepartie sombre : la barre ne change pas. */ --dom-pilotage-sur-encre: #8FA8F5; --dom-scolarite-sur-encre: #A99BF5; --dom-admissions-argent-sur-encre: #6FCB9C; --dom-communication-sur-encre: #E8B368; --dom-resultats-sur-encre: #C79BE8; --dom-vie-scolaire-sur-encre: #74B8F0; --dom-documents-sur-encre: #D6A0B4; --dom-outils-sur-encre: #A9B6C6; } /* Direction RTL : IBM Plex Sans Arabic remplace Spectral ET Archivo. Les chiffres restent occidentaux et passent en Spline Sans Mono. */ [dir="rtl"] { --font-display: var(--font-arabic); --font-body: var(--font-arabic); } /* ============================================================ 3. COUCHE DE COMPATIBILITÉ Les feuilles existantes consomment des dizaines de noms héritées de deux identités successives (ancien jeu violet, puis v1 verte). Les traduire ici propage la charte v2 d'un seul coup, au lieu de réécrire des milliers d'appels — et évite les régressions silencieuses (modale à fond transparent, bouton de fermeture invisible, focus mort) qu'une suppression sèche provoquerait. Couche TRANSITOIRE : tout nouveau code emploie les tokens de la section 2. ============================================================ */ :root { /* ── Violets ─────────────────────────────────────────────────────── */ --violet-d: var(--violet-deep); --violet-l: var(--violet); --violet-xl: var(--veil); /* surfaces secondaires et survols */ --violet-xxl: var(--bg); --violet-card: var(--line); /* servait de bordure de champ */ --violet-pale: var(--veil); /* ligne survolée ou désignée */ /* ── Encre & texte ───────────────────────────────────────────────── */ --dark: var(--ink); --text: var(--ink); --text-muted: var(--ink-soft); --text-faint: var(--ink-faint); /* « Encre douce » : le nom d'une génération antérieure pour le troisième niveau de texte — sous-titres, détails de liste, pieds discrets. Il était consommé sans être défini, et se rabattait sur un gris neutre étranger à la palette ; il rejoint ici l'encre de la charte. */ --encre-doux: var(--ink-faint); --white: #ffffff; --off-white: var(--bg); --on-accent: #ffffff; /* ── Surfaces ────────────────────────────────────────────────────── */ --surface: #ffffff; --surface-alt: var(--zebre); --surface-2: var(--veil); /* bandes : en-têtes de tableau */ --surface-3: var(--veil); /* survol de ligne */ /* ── Filets : un bloc est DÉLIMITÉ, il ne flotte pas ─────────────── */ --border: var(--line); --border-str: var(--line-strong); --rule: var(--line); /* Séparateur le plus discret : entre deux lignes d'une même liste, là où le trait lilas plein découperait trop. Lui aussi était consommé sans être défini. */ --bord-doux: var(--veil); /* ── Sémantique ──────────────────────────────────────────────────── */ --success: var(--green); --success-bg: var(--green-bg); --success-tx: var(--green-tx); --danger: var(--error); --danger-bg: var(--error-bg); --danger-tx: var(--error-tx); /* « Brique » : le rouge d'une génération antérieure. Il était consommé sans être défini et se rabattait sur la valeur claire du rouge de la charte, recopiée en dur — donc aveugle au thème sombre. Il suit désormais la famille, et en suivra les évolutions. */ --brique: var(--error); /* La charte n'a PAS de couleur d'avertissement : safran et ocre appartenaient à la v1. Un avertissement n'est pas une faute — il est donc porté par l'accent d'identité, qui attire l'œil sans alarmer. Le rouge reste réservé à ce qui est réellement fautif. */ --warning: var(--violet-deep); --warning-bg: var(--veil); --warning-tx: var(--violet-deep); --info-bg: var(--veil); --info-tx: var(--violet-deep); --muted-bg: var(--veil); --muted-tx: var(--ink-soft); /* ── Navigation (bandeau sombre : encre pleine, aucun dégradé) ───── */ --nav: var(--ink); --nav-2: #2C2552; /* élément actif */ --nav-rule: #3A3263; --nav-tx: #C4BEDF; /* entrée inactive de la barre latérale */ --nav-tx-str: #ffffff; --nav-tx-mut: #A39CC6; /* ── Ombres : une seule recette, et rien d'autre ─────────────────── */ --sh-sm: none; --sh-md: none; --sh-nav: none; --sh-violet: none; --sh-lg: var(--shadow); --sh-xl: var(--shadow); /* ── Dégradés : aplatis (le violet est désormais un APLAT) ───────── */ --grad-deep: var(--violet); /* ── Rayons : 14px surfaces, 10px boutons, pas de pilule ────────── */ --r-sm: var(--radius-btn); --r: var(--radius-btn); --r-1: var(--radius-btn); --r-2: var(--radius); --r-md: var(--radius); --r-lg: var(--radius); --r-xl: var(--radius); /* ── Polices ─────────────────────────────────────────────────────── */ --font: var(--font-body); --font-ui: var(--font-body); --font-ttl: var(--font-display); --font-title: var(--font-display); --font-num: var(--font-mono); --font-ar: var(--font-arabic); /* ── Rythme (grille de 4 px) ─────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* Plancher de lisibilité à 11px : en dessous, un libellé porteur de sens composé en capitales espacées ne se lit plus sur l'écran très éclairé d'un bureau d'école. */ --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13.5px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 27px; /* Rembourrage vertical d'une cellule de tableau. Le jeton EXISTE, mais rien ne le consomme et rien ne l'écrit : aucune feuille ne s'y branche, aucun script ne le règle. Il n'y a donc, à ce jour, AUCUN réglage de densité — ni imposé, ni offert. Le branchement sur les cellules est le travail du lot de consolidation ; l'interrupteur « Compacte / Confort », lui, reste à faire et ne doit être promis nulle part avant d'exister. */ --td-y: 7px; --focus: var(--violet); } /* ══════════════════════════════════════════════════════════════════════════ 4. MODE SOMBRE — piloté par data-theme UNIQUEMENT. `prefers-color-scheme` n'est volontairement PAS branché côté back-office : tant que les modales et les pages autonomes n'ont pas toutes été traitées, un utilisateur dont le système est en sombre verrait une application à moitié sombre — pire que pas de mode sombre du tout. ═════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg: #14112A; --veil: #221C44; --line: #3A3263; --line-strong: #4E4681; --ink: #EFEDFA; --ink-soft: #B4AED2; --ink-faint: #9891BC; --violet: #A99BF5; /* éclairci pour tenir le contraste sur fond sombre */ --violet-deep: #C4BAFB; --green: #6FCB9C; --green-bg: #16301F; --green-tx: #9BDCBB; --error: #E98474; --error-bg: #331A16; --error-tx: #F3AFA3; --surface: #1B1739; --zebre: #1F1A3F; --pastille: #4E4681; --on-accent: #14112A; --nav: #100E22; --nav-2: #221C44; --nav-rule: #302956; --shadow: 0 24px 60px -28px rgba(0,0,0,.72), 0 4px 14px -8px rgba(0,0,0,.5); /* Teintes de domaine, versant nuit : fonds profonds et encres éclaircies. Les nuances pastel du plein jour seraient des taches lumineuses sur fond nuit. Valeurs reprises telles quelles du bloc des tuiles d'app.css. */ --dom-pilotage-bg: #1B2547; --dom-pilotage-fg: #8FA8F5; --dom-scolarite-bg: #221C44; --dom-scolarite-fg: #A99BF5; /* Le sombre ne distingue pas les admissions de la caisse : même encre. */ --dom-admissions-argent-bg: #16301F; --dom-admissions-argent-fg: #6FCB9C; --dom-communication-bg: #33260F; --dom-communication-fg: #E8B368; --dom-resultats-bg: #2C1A3B; --dom-resultats-fg: #C79BE8; --dom-vie-scolaire-bg: #14293D; --dom-vie-scolaire-fg: #74B8F0; --dom-documents-bg: #33202A; --dom-documents-fg: #D6A0B4; --dom-outils-bg: #232838; --dom-outils-fg: #A9B6C6; } /* Échappatoire : forcer le thème clair quelles que soient les préférences, utile pour une démonstration au vidéoprojecteur ou une impression. */ html.force-light { color-scheme: light; } /* ══════════════════════════════════════════════════════════════════════════ 5. PRIMITIVES qui découlent directement des jetons. Elles valent pour toutes les pages, y compris les pages autonomes. ═════════════════════════════════════════════════════════════════════════ */ body { font-family: var(--font-body); color: var(--ink); background: var(--bg); /* Les chiffres s'alignent verticalement : un solde se lit en colonne, pas en ligne. Indispensable dès qu'on affiche de l'argent. */ font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Titres : Spectral 600, et l'italique violet marque LE mot-clé. h3/h4 restent en Archivo — Spectral n'est pas fait pour l'UI dense. */ h1, h2 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--ink); letter-spacing: -.01em; } h3, h4, h5, h6 { font-family: var(--font-body); font-weight: 600; line-height: 1.3; color: var(--ink); letter-spacing: 0; } h1 em, h2 em, .mot-cle { font-style: italic; font-weight: 500; color: var(--violet); } a { color: var(--violet); } /* Montants et dates : monospace tabulaire, et isolés du sens d'écriture — sans quoi « 140 000 » s'affiche « 000 140 » dans une page arabe. */ .num, .mono, .montant, .heure, .matricule, .num-recu, .code-massar, table.data td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; direction: ltr; unicode-bidi: isolate; } .num, table.data td.num { white-space: nowrap; } /* Focus : un filet plein, jamais un halo diffus. */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* Surtitres (eyebrows) : le vernaculaire administratif en capitales espacées. */ .eyebrow, .surtitre { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--violet); } /* Chip de temps : LA signature de la charte. « 07:52 » dans une puce bordée, suivie d'un libellé en capitales mono espacées. Tout ce qui peut être raconté comme un moment de la journée doit l'être. */ .chip-temps { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-family: var(--font-mono); font-weight: 600; font-size: .82rem; color: var(--ink); font-variant-numeric: tabular-nums; } .chip-temps .libelle { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); } /* ══════════════════════════════════════════════════════════════════════════ 6. ARABE / RTL letter-spacing:0 partout, interlignage 1.8, jamais d'uppercase. Le sens d'écriture est porté par l'attribut dir, pas par des marges physiques : c'est ce qui rend le retournement possible. ═════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] { text-align: start; } [lang="ar"], [dir="rtl"] { font-family: var(--font-arabic); } [dir="rtl"] body { line-height: 1.8; } [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: var(--font-arabic); font-weight: 700; letter-spacing: 0; line-height: 1.5; text-transform: none; } /* Les mécanismes de capitalisation et d'interlettrage n'existent pas dans cette écriture : les y appliquer abîme le tracé. */ [dir="rtl"] .eyebrow, [dir="rtl"] .surtitre, [dir="rtl"] .chip-temps .libelle { font-family: var(--font-arabic); text-transform: none; letter-spacing: 0; } /* Les nombres gardent le mono même en arabe (chiffres occidentaux). */ [dir="rtl"] .num, [dir="rtl"] .mono, [dir="rtl"] .montant, [dir="rtl"] .heure, [dir="rtl"] .matricule, [dir="rtl"] .num-recu { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; } /* ══════════════════════════════════════════════════════════════════════════ 7. MOUVEMENT Une SEULE orchestration d'entrée par page (fondu + translateY ≤ 16px, durée ≤ .5s, cascade ≤ .12s), tout le reste statique. ═════════════════════════════════════════════════════════════════════════ */ @keyframes entree-scoliom { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .entree { animation: entree-scoliom .5s cubic-bezier(.16,.84,.44,1) both; } .entree-2 { animation-delay: .06s; } .entree-3 { animation-delay: .12s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }