/* =============================================================
OS25 — COUCHE D'IDENTITÉ
assets/css/os25.css — 7 septembre 2026
BORN. SPIDER. CERCLE. From Idea to Impact.
── CE FICHIER REMPLACE studio25.css, ET IL FAUT DIRE POURQUOI
Le 7 septembre au matin, la consigne était : « chouf site
kifach dayr, ghadi nraje3 OS b7alo » — mettre l'OS au langage
d'el25studio.ma. J'ai donc écrit une couche qui remplaçait l'or
par le pistache, Inter par Manrope, le bleu nuit par une nuit
neutre.
Le brief OS25 reçu l'après-midi dit l'inverse, et il est
explicite :
Background #05080D · Surface #0A1018 · Surface élevée #0E1621
Border rgba(120,150,190,.14) · Texte #F5F7FA · Muted #8C98AA
Gold #F2B940 · Purple #8B5CF6 · Blue #258BFF
Cyan #12D9FF · Green #24D981 · Orange #F7A928 · Red #FF4D55
C'est la palette que `neon-systeme.css` portait déjà. Autrement
dit : la couche pistache était une réponse juste à une question
qui a changé. Elle est retirée, pas corrigée — un demi-pistache
sur un système or aurait été le pire des deux.
⚠ CE QUI EST GARDÉ DE studio25.css : les trois corrections
qu'elle avait apportées et qui n'ont rien à voir avec la
couleur. Elles sont reprises telles quelles plus bas, avec leur
explication. Le reste est parti.
── CE QUE FAIT CE FICHIER
Il ne repeint pas : il pose l'IDENTITÉ que le brief demande et
que la palette seule ne donne pas.
1. les jetons du brief, à la valeur exacte ;
2. les deux moteurs — SPIDER violet, CERCLE cyan — visibles
dans le menu et sur Command Vision ;
3. l'échelle de Command Vision : un hero qui se lit debout,
à trois mètres de l'écran ;
4. le rail IDEA → IMPACT ;
5. les corrections d'écran héritées.
── ORDRE DE CHARGEMENT
tokens → base → shell → components → pages → neon →
neon-systeme → espace → perf → CE FICHIER
Retirer son dans app.html rend à l'OS son apparence
d'avant, à l'identique.
⚠ ON ÉCRIT `[data-theme="dark"]`, JAMAIS `:root`, pour une
couleur de thème. `[data-theme="light"]` a la même spécificité
que `:root` ; ce fichier étant chargé après, un `:root` ici
repeindrait le thème clair en noir, et le défaut n'apparaîtrait
qu'au premier clic sur le bouton soleil/lune.
============================================================= */
/* =============================================================
1. LES JETONS DU BRIEF, À LA VALEUR EXACTE
`neon-systeme.css` avait dérivé sur trois valeurs : la surface
à #0B1119 au lieu de #0A1018, la surface élevée à #0E1621
(juste), le muted à #8792A5 au lieu de #8C98AA. L'écart ne se
voit pas à l'œil — et c'est précisément le problème : deux
valeurs pour une même couleur, c'est deux vérités, et dans six
mois personne ne saura laquelle est la bonne. On aligne sur le
brief, qui fait foi.
============================================================= */
[data-theme="dark"] {
--n-fond: #05080D; /* Background */
--n-fond-2: #070B12; /* creux, en-têtes */
--n-surface: #0A1018; /* Surface */
--n-surface-h: #0E1621; /* Surface élevée */
--n-bord: rgba(120,150,190,.14);
--n-bord-fort: rgba(120,150,190,.28);
--n-tx: #F5F7FA;
--n-tx-2: #8C98AA;
--n-or: #F2B940; /* décision, CTA, priorité */
--n-violet: #8B5CF6; /* SPIDER, créatif, post-prod */
--n-bleu: #258BFF; /* production active */
--n-cyan: #12D9FF; /* progression, info active */
--n-vert: #24D981; /* succès, disponible, validé */
--n-orange: #F7A928; /* attente, risque */
--n-rouge: #FF4D55; /* retard, blocage, critique */
--n-or-lueur: rgba(242,185,64,.28);
/* Les deux moteurs. Ce ne sont pas de nouvelles couleurs : ce
sont des NOMS posés sur celles du brief, pour qu'une règle
qui parle de SPIDER se lise comme telle. */
--spider: var(--n-violet);
--cercle: var(--n-cyan);
--n-carte: linear-gradient(180deg, rgba(14,22,33,.96), rgba(7,11,18,.96));
--n-carte-h: linear-gradient(180deg, rgba(19,29,43,.97), rgba(10,16,24,.97));
/* Le pont vers components.css / pages.css / shell.css, qui ne
connaissent que les anciens noms. */
--line: var(--n-bord);
--line-soft: rgba(120,150,190,.08);
--tx-1: var(--n-tx);
--tx-2: var(--n-tx-2);
--tx-3: #6C7A8C;
--brand: var(--n-or);
--brand-tx: #0A0D12;
--brand-soft: rgba(242,185,64,.12);
--brand-line: rgba(242,185,64,.34);
--c-commercial: var(--n-or);
/* ── LE MOTION SYSTEM DU BRIEF, EN CHIFFRES
micro 150–220 · survol 180–260 · tiroir 250–400 ·
section 300–500 · hero 600–900. Une valeur par usage, une
seule, pour que deux écrans ne respirent jamais à des
vitesses différentes. */
--t-micro: 180ms;
--t-survol: 220ms;
--t-tiroir: 320ms;
--t-section: 400ms;
--t-hero: 720ms;
--courbe: cubic-bezier(.22, .61, .36, 1);
scrollbar-color: rgba(120,150,190,.24) transparent;
scrollbar-width: thin;
}
/* =============================================================
6. TROIS CORRECTIONS D'ÉCRAN, HÉRITÉES DE studio25.css
Elles ne concernent pas la couleur : elles corrigent des
défauts trouvés en ouvrant l'application. Elles survivent au
changement de direction visuelle.
============================================================= */
/* ── La pastille de phase s'étirait sur toute la hauteur.
`pages.css:849` pose `.gal-phase { position:absolute;
left:10px; bottom:10px }`. `neon-systeme.css:1102`, chargé
après, la redéclare en `top:10px; left:10px` — sans annuler le
`bottom`. Un élément absolu qui porte À LA FOIS `top` et
`bottom` ne se dimensionne plus par son contenu : il s'étire
d'un bord à l'autre. Sur chaque carte de l'écran Projets, un
libellé de deux mots occupait 98 × 185 px, mesuré. Ça datait du
5 septembre et l'analyse statique ne pouvait pas le voir. */
.gal-phase { bottom: auto; }
/* ── Le sigle du projet prioritaire écrasait son titre.
L'affiche composée est dessinée sur 320 × 200 puis étirée sur
toute la largeur de la scène : le sigle, prévu pour une
vignette, arrivait à plus de 300 px de haut derrière le titre.
On le garde — c'est la texture voulue — mais à la moitié. */
.scene-fond .affiche.affiche-generee { opacity: .5; }
/* ── Le pied de panneau creusait au noir.
`rgba(0,0,0,.16)` sur une carte déjà sombre donne un trou ;
une surface claire à 3 % donne une marche. */
[data-theme="dark"] .panel-foot { background: rgba(120,150,190,.05); }
/* =============================================================
7. MOUVEMENT RÉDUIT
============================================================= */
@media (prefers-reduced-motion: reduce) {
.affiche { transition: none !important; }
.voie-carte:hover .voie-visuel .affiche,
.gal-carte:hover .gal-visuel .affiche,
.affiche-carte:hover .affiche-visuel .affiche { transform: none; }
.nav-cat-btn::before { transition: none; }
}
/* =============================================================
9. LA PROVENANCE D'UN CLIENT
Quatre origines, quatre couleurs prises dans la palette du
brief — aucune nouvelle teinte :
Radar 25 cyan la prospection à froid du studio
Publicité violet ce que SPIDER a payé pour faire venir
Lead or un contact entrant qualifié
Direct neutre personne n'a noté d'où il venait
Le neutre pour « Direct » est délibéré : ce n'est pas une
provenance, c'est une absence de provenance, et lui donner une
couleur la ferait passer pour un canal.
============================================================= */
.badge.prov-radar { background: rgba(18,217,255,.12); color: var(--n-cyan); border-color: rgba(18,217,255,.30); }
.badge.prov-ads { background: rgba(139,92,246,.14); color: var(--n-violet); border-color: rgba(139,92,246,.32); }
.badge.prov-lead { background: rgba(242,185,64,.13); color: var(--n-or); border-color: rgba(242,185,64,.30); }
.badge.prov-direct { background: rgba(120,150,190,.10); color: var(--n-tx-2); border-color: var(--n-bord); }
/* Les puces de filtre reprennent la même couleur, mais seulement
une fois allumées : au repos elles restent grises, sinon la
rangée de filtres redevient un arc-en-ciel avant même qu'on ait
choisi quoi que ce soit. */
.chip.prov-radar.is-on { background: rgba(18,217,255,.14); border-color: rgba(18,217,255,.40); color: var(--n-cyan); box-shadow: none; }
.chip.prov-ads.is-on { background: rgba(139,92,246,.16); border-color: rgba(139,92,246,.42); color: var(--n-violet); box-shadow: none; }
.chip.prov-lead.is-on { background: rgba(242,185,64,.14); border-color: rgba(242,185,64,.40); color: var(--n-or); box-shadow: none; }
.chip.prov-direct.is-on { background: rgba(120,150,190,.14); border-color: var(--n-bord-fort); color: var(--n-tx); box-shadow: none; }
.chip b.mono { margin-left: 6px; opacity: .75; font-variant-numeric: tabular-nums; }
/* =============================================================
10. LIVE LOAD
Grille asymétrique, et ici elle est justifiée : la file est le
sujet de l'écran, l'équipe est la ressource qu'on lui applique.
Deux colonnes égales auraient dit qu'on regarde autant l'une
que l'autre — ce n'est pas vrai, on part toujours de ce qui
attend.
============================================================= */
.live-grid {
display: grid;
grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr);
gap: 12px;
align-items: start;
}
@media (max-width: 1100px) { .live-grid { grid-template-columns: 1fr; } }
/* Une ligne de file porte beaucoup : signal, titre, client, phase,
date, porteurs, action. Le sujet prend la place restante, tout
le reste garde sa largeur — sinon le titre d'un projet long
pousse la date hors de l'écran. */
.live-ligne { align-items: center; gap: 12px; }
.live-ligne > :not(.live-sujet) { flex: none; }
.live-sujet { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-decoration: none; }
.live-sujet .progress { margin-top: 2px; }
.live-porteurs .avatar { margin-left: -6px; border: 1px solid var(--n-fond); }
.live-porteurs .avatar:first-child { margin-left: 0; }
/* Le filet de département sur le bord gauche, comme les cartes. */
.live-ligne[class*="dep-"] { border-left: 2px solid color-mix(in srgb, var(--dep) 60%, transparent); }
.live-membre { align-items: center; gap: 12px; }
.live-membre > .grow { min-width: 0; display: flex; flex-direction: column; }
/* Le bandeau d'ETA manquante : il informe, il n'alarme pas. Pas de
rouge — rien n'est cassé, il manque une colonne. */
.eta-manquante {
border-left: 2px solid var(--n-cyan);
background: rgba(18,217,255,.05);
}
.eta-manquante .eyebrow { color: var(--n-cyan); }
/* =============================================================
11. BORN — L'ESPACE CLIENT
Le client n'a pas trente dossiers : il en a deux ou trois. On
peut donc lui donner ce qu'un écran interne ne peut pas se
permettre — une grande image par projet. C'est aussi ce que le
brief demande : « grandes images projet ».
Un format large plutôt que carré : une affiche de film se
regarde en paysage, et ça évite qu'un seul projet occupe tout
l'écran avant qu'on ait vu le deuxième.
============================================================= */
.born-projet { overflow: hidden; }
.born-visuel {
position: relative;
aspect-ratio: 21 / 9;
overflow: hidden;
background: var(--n-fond-2);
}
.born-visuel .affiche { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* Le voile : deux dégradés, comme partout ailleurs. */
.born-visuel::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(0deg, rgba(5,8,13,.92) 0%, transparent 58%),
linear-gradient(180deg, rgba(5,8,13,.45), transparent 30%);
}
/* Le sur-titre est un BLOC. En ligne, il se collait au titre —
« PRÉPARATIONAftermovie ». */
.born-projet .eyebrow { display: block; margin-bottom: 6px; }
.born-titre {
display: block;
font-size: 20px; font-weight: 700; letter-spacing: -.02em;
color: var(--n-tx);
margin-bottom: 6px;
}
.born-projet .progress { margin-top: 14px; }
/* La ligne qui dit ce qui manque. Elle informe, elle n'alarme
pas : pas de rouge, pas d'icône d'erreur. */
.born-attente { display: block; color: var(--n-tx-2); }
.born-avis { border-left: 2px solid var(--n-or); background: rgba(242,185,64,.05); }
.born-avis .eyebrow { color: var(--n-or); }
/* =============================================================
12. LA FILMOTHÈQUE — LE RAIL
Un rail qui s'arrête sur une affiche, pas sur un écran. Le
défilement et son inertie viennent du navigateur : on ne
réécrit pas une physique que le système fait mieux.
============================================================= */
.filmo-tete {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.filmo-piste {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* Le rail déborde volontairement de la page : une affiche coupée
au bord dit « ça continue », là où un rail qui s'arrête net
laisse croire qu'on a tout vu. */
padding: 2px 2px 14px;
scrollbar-width: thin;
}
.filmo-case {
flex: 0 0 clamp(280px, 27vw, 400px);
scroll-snap-align: start;
}
.filmo-case > * { height: 100%; }
.filmo-piste::-webkit-scrollbar { height: 8px; }
.filmo-piste::-webkit-scrollbar-thumb {
background: rgba(120,150,190,.20);
border-radius: 999px;
}
.filmo-piste::-webkit-scrollbar-track { background: transparent; }
/* Sur le rail, l'affiche prend plus de place que dans la grille :
c'est tout l'intérêt d'être passé en filmothèque. */
.filmo-case .gal-visuel { aspect-ratio: 3 / 2; }
/* =============================================================
13. UN REPLI QUI SE REPLIE AUSSI SUR ORDINATEUR
`.repliable` ne se ferme qu'en dessous de 1100 px (components.css
:357). C'est juste pour un panneau de lecture — on ne fait pas
cliquer quelqu'un pour voir ce qu'il y a la place d'afficher.
Ça ne l'est pas pour un formulaire facultatif : cinq champs
ouverts au-dessus d'un bouton d'enregistrement se lisent comme
cinq champs à remplir, sur n'importe quel écran. `repli-toujours`
applique la même mécanique à toutes les largeurs.
On répète les règles au lieu de les sortir de la media query :
components.css n'est pas à nous, et une couche qui déplace des
règles d'une feuille qu'elle ne possède pas finit par les casser
le jour où cette feuille change.
============================================================= */
.repliable.repli-toujours .repliable-tete { cursor: pointer; }
.repliable.repli-toujours .repliable-tete:hover h3 { color: var(--n-or); }
.repliable.repli-toujours .repliable-chevron { display: flex; }
.repliable.repli-toujours[data-open="false"] .repliable-chevron { transform: rotate(-90deg); }
.repliable.repli-toujours .repliable-corps {
display: grid; grid-template-rows: 1fr;
transition: grid-template-rows var(--t-survol) var(--courbe);
}
.repliable.repli-toujours[data-open="false"] .repliable-corps { grid-template-rows: 0fr; }
.repliable.repli-toujours .repliable-corps > * { overflow: hidden; min-height: 0; }
/* Le repli d'un formulaire facultatif n'est pas une carte : il ne
doit pas peser autant qu'un panneau de contenu. */
.repliable.repli-toujours { background: none; border: 1px dashed var(--n-bord); box-shadow: none; }
.repliable.repli-toujours .repliable-tete { padding: 10px 14px; }
.repliable.repli-toujours .repliable-tete h3 {
font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--n-tx-2);
}
/* =============================================================
14. CE QUI VIENT APRÈS, DANS LA MISSION
La ligne qui compte les entreprises à venir n'est pas une
entreprise : elle ne doit pas se lire comme une ligne de plus
dans la liste. Un filet pointillé et une teinte plus basse
suffisent — on comprend que c'est un compte, pas un contact.
============================================================= */
.a-venir-bloc {
border-top: 1px dashed var(--n-bord-fort);
background: rgba(120,150,190,.04);
}
.a-venir-bloc .strong { color: var(--n-tx-2); }
/* =============================================================
16. LIVE LOAD — LA FORME DE LA RÉFÉRENCE
`OS25_NEW_SCREENS/05-responsable-production.png`
Deux colonnes de cartes. À gauche la queue : une carte par
dossier, filet de couleur de phase, temps à droite. À droite le
Live Load : nom en capitales, pastille d'état, barre de charge.
Le filet coloré est sur le BORD, jamais en fond : quatre cartes
teintées l'une sous l'autre redonnent l'arc-en-ciel que tout le
reste de l'OS évite.
============================================================= */
.queue-col { display: flex; flex-direction: column; gap: 10px; }
.queue-carte {
padding: 14px 16px;
border: 1px solid var(--n-bord);
border-left: 2px solid color-mix(in srgb, var(--dep, var(--n-bleu)) 75%, transparent);
border-radius: var(--n-r-m);
background: rgba(120,150,190,.04);
transition: border-color var(--t-survol) var(--courbe), background var(--t-survol) var(--courbe);
}
.queue-carte:hover { background: rgba(120,150,190,.07); border-color: var(--n-bord-fort); }
.queue-carte.brule { border-left-color: var(--n-rouge); }
.queue-titre {
font-size: 14.5px; font-weight: 700; color: var(--n-tx);
text-decoration: none; min-width: 0;
}
.queue-titre:hover { color: var(--n-or); }
.queue-temps {
font-family: var(--f-mono); font-size: 13px; font-weight: 700;
color: color-mix(in srgb, var(--dep, var(--n-bleu)) 85%, white);
white-space: nowrap; flex: none;
}
.queue-temps.rouge { color: var(--n-rouge); }
.queue-carte .progress { margin-top: 10px; }
/* ── LIVE LOAD : une carte par personne. */
.load-carte {
padding: 14px 16px;
border: 1px solid var(--n-bord);
border-radius: var(--n-r-m);
background: rgba(120,150,190,.04);
margin-bottom: 10px;
}
.load-carte:last-child { margin-bottom: 0; }
.load-point { width: 9px; height: 9px; border-radius: 50%; background: var(--etat, var(--n-vert)); flex: none; }
.load-nom { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--n-tx); }
.load-etat {
font-size: 10px; font-weight: 700; letter-spacing: .12em;
padding: 5px 12px; border-radius: 999px;
color: var(--etat, var(--n-vert));
border: 1px solid color-mix(in srgb, var(--etat, var(--n-vert)) 55%, transparent);
white-space: nowrap; flex: none;
}
.load-temps {
font-size: 12px; font-weight: 600;
color: var(--etat, var(--n-vert));
white-space: nowrap; flex: none;
}
.load-barre {
height: 6px; border-radius: 999px; overflow: hidden;
background: rgba(120,150,190,.14); margin-top: 10px;
}
.load-barre i {
display: block; height: 100%; width: var(--h, 0%);
border-radius: 999px; background: var(--etat, var(--n-vert));
transition: width var(--t-grande, 640ms) var(--courbe);
}
/* Les cinq états de la référence, chacun sa couleur. */
.load-carte.etat-dispo { --etat: var(--n-vert); }
.load-carte.etat-light { --etat: var(--n-vert); }
.load-carte.etat-charge { --etat: var(--n-bleu); }
.load-carte.etat-sature { --etat: var(--n-rouge); }
.load-carte.etat-retard { --etat: var(--n-orange); }
.min0 { min-width: 0; }
/* =============================================================
LA MISSION ACTIVE — l'écran du technicien
Composition du build V12, captures du 7 septembre 2026.
Une image plein cadre, la consigne en grand par-dessus,
l'échéance dans le coin haut droit, les objectifs en bas.
============================================================= */
.mission-active {
position: relative;
min-height: 430px;
margin-bottom: 16px;
border: 1px solid rgba(120,150,190,.16);
border-radius: 22px;
overflow: hidden;
background: #05080d;
box-shadow: 0 34px 90px -38px #000;
display: grid;
grid-template-rows: 1fr auto;
}
.ma-fond { position: absolute; inset: 0; }
.ma-fond .affiche { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) brightness(.72); }
/* Deux voiles superposés : l'un tient le texte à gauche, l'autre le
bas. Un seul obligerait à noircir toute l'image. */
.ma-voile {
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(90deg, rgba(4,7,11,.96) 0%, rgba(4,7,11,.74) 42%, rgba(4,7,11,.18) 78%),
linear-gradient(0deg, rgba(4,7,11,.94), transparent 58%);
}
.ma-corps { position: relative; z-index: 2; align-self: end; padding: 38px 42px 26px; max-width: 720px; }
.ma-pill {
display: inline-block; padding: 8px 15px; border-radius: 999px;
background: #f2b940; color: #080b10;
font: 800 10px/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
}
.ma-kicker {
display: block; margin: 22px 0 10px;
font: 800 10px/1 "JetBrains Mono", monospace; letter-spacing: .2em;
text-transform: uppercase; color: #12d9ff;
}
.ma-titre {
margin: 0; font-size: clamp(30px, 3.4vw, 52px); font-weight: 800;
line-height: .98; letter-spacing: -.045em; color: #fff;
text-shadow: 0 8px 30px rgba(0,0,0,.75); text-wrap: balance;
}
.ma-sous { margin: 14px 0 0; max-width: 560px; font-size: 14px; color: #cbd5e1; }
.ma-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.ma-lien { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #aab4c3; text-decoration: none; }
.ma-lien:hover { color: #fff; }
/* L'échéance : une carte posée dans le coin, comme la référence. */
.ma-echeance {
position: absolute; z-index: 3; right: 26px; top: 24px;
min-width: 210px; padding: 18px 20px;
border: 1px solid rgba(120,150,190,.18); border-radius: 14px;
background: rgba(5,8,13,.72); backdrop-filter: blur(14px);
}
.ma-echeance .eyebrow { color: #8c98aa; }
.ma-jour { display: block; margin-top: 10px; font: 800 12px/1 "JetBrains Mono", monospace; letter-spacing: .14em; color: #24d981; }
.ma-jour.rouge { color: #ff4d55; }
.ma-date { display: block; margin-top: 8px; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.ma-temps { display: block; margin-top: 10px; font-size: 11px; color: #8c98aa; }
/* Les objectifs, sur fond plein sous l'image. */
.ma-objectifs {
position: relative; z-index: 2;
padding: 22px 42px 26px;
border-top: 1px solid rgba(120,150,190,.14);
background: rgba(5,8,13,.92);
}
.ma-liste { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 30px; margin: 14px 0 18px; }
.ma-obj { display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: #dce3ed; }
.ma-num { font: 800 10px/1 "JetBrains Mono", monospace; color: #12d9ff; flex: none; }
.ma-lu {
display: flex; align-items: flex-start; gap: 14px;
padding: 16px 18px; border: 1px solid rgba(242,185,64,.3); border-radius: 12px;
background: rgba(242,185,64,.05); cursor: pointer;
}
.ma-lu input { width: 20px; height: 20px; accent-color: #f2b940; flex: none; margin-top: 2px; }
.ma-lu b { display: block; font-size: 14px; }
.ma-lu .hint { display: block; margin-top: 4px; }
@media (max-width: 900px) {
.mission-active { min-height: 0; }
.ma-echeance { position: static; margin: 18px 18px 0; }
.ma-corps { padding: 26px 20px 20px; }
.ma-objectifs { padding: 20px; }
.ma-liste { grid-template-columns: 1fr; }
}
/* =============================================================
18. LA COUVERTURE D'ACCUEIL — UNE SEULE, EN GRAND
7 septembre 2026
Direction : « la couverture doit être grande, comme ça, dans ce
style ; pas deux l'une à côté de l'autre, une seule et belle,
très grande. Rien ne doit l'encombrer visuellement — même le
"Bonjour Achraf" passe SOUS la photo. »
⚠ CES RÈGLES REPRENNENT LA MAIN SUR master-v2.css.
La feuille V12 fixe le hero en deux colonnes avec `!important`
(`.hero-grid{grid-template-columns:…3.35fr…1fr!important}`).
os25.css est chargée après elle : à spécificité et priorité
égales, la dernière déclarée gagne. D'où les `!important` qui
suivent — ils ne sont pas là par facilité, ils sont la seule
façon de reprendre une déclaration déjà marquée.
Le reste de la V12 est laissé intact : voile, cadran,
vignettes, boutons. On ne change que la mise à l'échelle.
============================================================= */
.hero-grid.hero-solo {
grid-template-columns: minmax(0, 1fr) !important;
min-height: 0 !important;
}
/* La hauteur suit l'écran plutôt qu'un chiffre fixe : sur un
portable la couverture reste lisible, sur un grand écran elle
ne devient pas une bannière de 2 000 px. Le plancher (460 px)
garantit que le titre, les badges et les deux boutons tiennent
sans se serrer. */
.hero-solo .hero-scene {
min-height: clamp(460px, 68vh, 780px) !important;
border-radius: 24px !important;
}
/* Le titre redescend d'un cran. La consigne est « image très
grande, écriture petite » : à 62 px sur toute la largeur, le
nom du projet mangeait la photo au lieu de la légender. */
.hero-solo .scene-titre {
font-size: clamp(34px, 3.2vw, 52px) !important;
line-height: 1.02 !important;
}
/* Le texte se pose en bas à gauche, sur le tiers dense du voile,
et s'arrête avant le cadran. */
.hero-solo .scene-corps {
max-width: min(640px, 52%) !important;
padding: 44px 48px 96px !important;
}
/* ⚠ LA COUVERTURE COMPOSÉE N'EST PLUS UN FANTÔME.
`.scene-fond .affiche.affiche-generee` était à 50 % d'opacité,
décidé quand la même image servait de vignette de 120 px et de
fond de hero : à demi effacée, le sigle ne concurrençait plus
le titre. Sur une couverture pleine largeur, le résultat est un
rectangle presque vide — ce que la Direction a vu à l'écran.
Le sigle a été rapetissé depuis (affiche.js : 46 px, en bas à
gauche, à 13 % d'opacité) : le voile n'a plus besoin d'aide.
On rend donc l'image, et on la traite comme une photo.
⚠ CE N'EST PAS UNE VRAIE PHOTO POUR AUTANT. Quand le dossier
n'a pas de couverture, c'est une affiche composée qui s'affiche
— pas une image trouvée ailleurs. Elle est simplement montrée
pour ce qu'elle est, au lieu d'être à moitié effacée. */
.hero-solo .scene-fond .affiche.affiche-generee { opacity: 1; }
.hero-solo .scene-fond .affiche {
filter: saturate(1.08) contrast(1.04) !important;
}
/* ⚠ LE VOILE COUVRAIT L'IMAGE, PAS SEULEMENT LE TEXTE.
Le voile V12 est réglé pour un hero de 440 px de large utile :
dense à gauche, il s'éclaircit à 76 % de la largeur. Sur une
couverture pleine largeur, ces 76 % font près de 900 px — la
quasi-totalité du cadre reste sous un noir à 78 %, et l'image
ne se voit plus nulle part.
Ici le voile suit le texte : il tient les 45 % de gauche, où le
titre et les boutons se posent, puis s'efface. Le bas garde un
fond léger pour les vignettes. Le contrat du 5 septembre disait
déjà « l'image doit rester visible, gradient uniquement sur la
zone du texte » — c'est cette phrase qu'on applique enfin à la
bonne largeur. */
.hero-solo .scene-voile {
background:
linear-gradient(90deg,
rgba(4,7,11,.94) 0%, rgba(4,7,11,.88) 24%,
rgba(4,7,11,.52) 46%, rgba(4,7,11,.08) 72%, rgba(4,7,11,.20) 100%),
linear-gradient(0deg, rgba(4,7,11,.76), transparent 42%) !important;
}
/* =============================================================
LA SALUTATION SE POSE SUR LA PHOTO — 7 septembre 2026, le soir
Direction : « Bonjour Achraf tji fou9 la photo […] tbadalha mn
hna ou dirha f had l blassa l khawya. »
⚠ REMPLACE `.hero-solo + .command-head`, qui posait la
salutation SOUS la couverture plus tôt dans la journée. Ce
sélecteur n'a plus de cible : `.command-head` est maintenant
DANS `.hero-coiffe`, plus après elle. Si vous le cherchez pour
comprendre pourquoi il ne s'applique plus, c'est ici.
Le coin haut-gauche est le seul des quatre que le hero laisse
libre — le cadran tient le haut-droit, le corps du projet le
bas-gauche, les vignettes le bas. La salutation s'y pose en
absolu, calée sur le même bord gauche que le titre du projet
(48 px), et s'arrête avant le cadran (200 px de garde).
Elle est posée sur le tiers dense du voile (.94 → .88 sur les
24 premiers pour cent) : le texte y tient sans ajouter de fond.
Les ombres portées ci-dessous couvrent le cas d'une couverture
claire, où le voile seul ne suffirait pas. */
.hero-grid.hero-coiffe { position: relative; }
.dashboard-home .hero-coiffe > .command-head {
position: absolute;
z-index: 4;
top: 30px;
left: 48px;
right: 200px;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
grid-template-columns: auto auto auto auto !important;
justify-content: start !important;
align-items: center !important;
gap: 16px !important;
background: transparent;
border: 0;
box-shadow: none;
}
.hero-coiffe > .command-head .command-identity h1 {
font-size: clamp(26px, 2.2vw, 36px) !important;
text-shadow: 0 2px 24px rgba(4, 7, 11, .9), 0 1px 3px rgba(4, 7, 11, .8);
}
.hero-coiffe > .command-head .command-kicker,
.hero-coiffe > .command-head .command-identity p,
.hero-coiffe > .command-head .db-date {
text-shadow: 0 1px 16px rgba(4, 7, 11, .95), 0 1px 2px rgba(4, 7, 11, .85);
}
.hero-coiffe > .command-head > .avatar {
box-shadow: 0 0 0 1px rgba(242, 185, 64, .45), 0 10px 30px rgba(4, 7, 11, .7) !important;
}
/* ⚠ LE PLANCHER DE LA COUVERTURE MONTE AVEC LA SALUTATION.
Le corps du projet est calé en bas (`align-self:end`) et grandit
vers le HAUT : titre sur trois lignes, type, phrase, badges,
deux boutons. À 500 px de plancher, son sur-titre « Projet
prioritaire » venait mordre le « En direct depuis » de la
salutation — mesuré à 12 px de chevauchement sur un écran de
720 px de haut.
⚠ N'ESSAYEZ PAS DE RÉGLER CELA AVEC `padding-top` SUR LE CORPS :
sur une boîte alignée en bas, augmenter le rembourrage haut
pousse le haut de la boîte d'autant — le texte ne descend pas
d'un pixel. Le seul levier est la hauteur de la scène.
580 px de plancher laissent 67 px entre la salutation et le
sur-titre : de la place pour un titre d'une ligne de plus. */
.hero-solo .hero-scene { min-height: clamp(580px, 74vh, 820px) !important; }
@media (max-width: 1100px) {
.hero-solo .scene-corps { max-width: 100% !important; padding: 32px 24px 96px !important; }
.dashboard-home .hero-coiffe > .command-head {
top: 24px; left: 24px; right: 170px;
grid-template-columns: auto auto auto !important;
gap: 13px !important;
}
}
@media (max-width: 760px) {
.hero-solo .hero-scene { min-height: clamp(560px, 74vh, 680px) !important; }
.hero-solo .scene-titre { font-size: 38px !important; }
.dashboard-home .hero-coiffe > .command-head {
top: 16px; left: 18px; right: 96px;
grid-template-columns: auto minmax(0, 1fr) !important;
gap: 11px !important;
}
.hero-coiffe > .command-head .command-identity h1 { font-size: 22px !important; }
.hero-coiffe > .command-head > .avatar { width: 40px !important; height: 40px !important; }
}
/* =============================================================
19. LA MATIÈRE — RELIEF, LUMIÈRE ET MOUVEMENT
7 septembre 2026
Direction : « ziiid Talaa3 lia l quality kaamla dial l'OS, ybaan
high quality kter mn haka — les pop up, les animation, hadok
les cercle kolhom ykono kidoro, les slides lfou9 kidozo, les
boton kikhorjo, kolchi fih les effects. »
── CE QUE CETTE SECTION AJOUTE, ET CE QU'ELLE NE TOUCHE PAS
Elle n'ajoute AUCUNE structure : pas un bloc, pas une colonne,
pas un mot. Elle donne de la matière à ce qui existe déjà —
comment une surface accroche la lumière, comment un bouton
répond au doigt, comment une fenêtre arrive.
── LES TROIS RÈGLES QUI TIENNENT TOUT
1. On n'anime que `transform`, `opacity` et `filter`. Ce sont
les trois propriétés que le navigateur traite sur le
compositeur, sans refaire la mise en page. Animer une
hauteur ou une marge sur cinquante cartes fait tomber
l'écran à quinze images par seconde ; animer une
transformation n'en coûte aucune.
2. Le relief se fait à l'ombre, pas au trait. Une bordure qui
s'épaissit au survol déplace le contenu d'un pixel et fait
sauter la ligne. Une ombre portée ne déplace rien.
3. Rien ne bouge tout seul en permanence, sauf quatre objets :
les anneaux, l'orbite des deux univers, les six points de la
courbe, et la couverture. Un écran où douze choses respirent
en même temps n'est pas vivant, il est nerveux. Tout le
reste ne bouge qu'en réponse à un geste.
── ET LE MOUVEMENT RÉDUIT
Tout ce qui suit s'éteint sous `prefers-reduced-motion` — voir
la fin de la section. Ce n'est pas une politesse : pour
certaines personnes une image qui dérive en continu donne la
nausée. L'écran doit rester utilisable sans une seule
animation, et il l'est.
============================================================= */
/* ── 19.1 Les courbes et les durées, nommées une fois.
`--m-ressort` dépasse légèrement sa cible puis revient : c'est
ce qui donne l'impression qu'un objet a une masse. On le
réserve à ce qui apparaît. `--m-doux` ne dépasse pas : c'est
pour ce qui suit le doigt, où un dépassement se lirait comme
une imprécision. */
:root {
--m-ressort: cubic-bezier(.22, 1, .36, 1);
--m-doux: cubic-bezier(.4, 0, .2, 1);
--m-vif: cubic-bezier(.16, 1, .3, 1);
--m-court: 160ms;
--m-moyen: 280ms;
--m-long: 520ms;
/* L'ombre en trois plans. Une ombre unique et large fait un
halo gris ; trois ombres — contact, portée, ambiante —
donnent une vraie hauteur. La dernière est teintée or : c'est
la couleur de la marque qui éclaire la scène, pas un gris. */
--o-pose: 0 1px 2px rgba(0,0,0,.5);
--o-leve: 0 2px 4px rgba(0,0,0,.45), 0 12px 28px -12px rgba(0,0,0,.75),
0 0 40px -22px rgba(242,185,64,.35);
--o-haute: 0 4px 8px rgba(0,0,0,.45), 0 28px 60px -22px rgba(0,0,0,.85),
0 0 70px -30px rgba(242,185,64,.45);
}
/* ── 19.2 LE GRAIN
Un aplat numérique parfaitement lisse se lit comme du plastique.
Quatre pour cent de bruit sur toute la page, et les grands fonds
sombres prennent la texture d'une image argentique. C'est le
détail qui fait le plus de différence pour le moins de travail.
⚠ `pointer-events: none` EST INDISPENSABLE : sans lui, ce voile
plein écran intercepterait tous les clics de l'application. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: .035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* =============================================================
19.3 LES BOUTONS QUI SORTENT DE L'ÉCRAN
Trois états, et chacun dit quelque chose :
au repos — posé, une ombre de contact ;
au survol — soulevé de 2 px, l'ombre s'ouvre, un reflet
traverse la surface de gauche à droite ;
au clic — enfoncé sous sa position de repos, l'ombre se
referme. C'est ce dernier état qu'on oublie
toujours, et c'est lui qui donne la sensation
d'avoir appuyé sur quelque chose de réel.
⚠ LE REFLET EST UN PSEUDO-ÉLÉMENT, PAS UN DÉGRADÉ DE FOND.
Beaucoup de boutons de l'OS portent déjà un fond — plein, en
verre, en dégradé. Le remplacer au survol les ferait tous
changer de couleur. Le reflet passe par-dessus et n'efface
rien.
============================================================= */
.btn,
.icon-btn,
.universe-link,
.scene-fleche,
.chip {
position: relative;
transition: transform var(--m-court) var(--m-doux),
box-shadow var(--m-court) var(--m-doux),
filter var(--m-court) var(--m-doux);
}
.btn { box-shadow: var(--o-pose); }
.btn:hover:not(:disabled),
.universe-link:hover,
.chip:hover {
transform: translateY(-2px);
box-shadow: var(--o-leve);
filter: brightness(1.06);
}
.btn:active:not(:disabled) {
transform: translateY(1px) scale(.985);
box-shadow: var(--o-pose);
filter: brightness(.96);
transition-duration: 60ms;
}
.btn:disabled { box-shadow: none; }
/* Le reflet. Une bande claire, inclinée, qui traverse en 620 ms.
Elle est hors cadre au repos et n'existe donc pas tant que
personne ne survole.
⚠ TROIS BOUTONS SONT EXCLUS, ET C'EST VOLONTAIRE.
btn-primary, btn-hero et btn-gate ont DÉJÀ leur reflet, écrit
dans neon.css puis repris dans neon-systeme.css. Le leur est
fait d'une translation ; le nôtre, d'un fond qui défile. Comme
os25.css est chargée en dernier, la nôtre gagnerait sur le
fond — mais pas sur la translation, qui resterait et pousserait
notre bande hors du cadre. Deux reflets qui se marchent dessus
ne font pas un reflet plus brillant : ils n'en font aucun.
On laisse donc le leur en place et on n'éclaire que les boutons
qui n'avaient rien. */
.btn:not(.btn-primary):not(.btn-hero):not(.btn-gate)::after,
.universe-link::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(105deg,
transparent 38%, rgba(255,255,255,.20) 50%, transparent 62%);
background-size: 280% 100%;
background-position: 180% 0;
opacity: 0;
}
.btn:not(.btn-primary):not(.btn-hero):not(.btn-gate):hover:not(:disabled)::after,
.universe-link:hover::after {
opacity: 1;
animation: os25-reflet 620ms var(--m-doux) 1;
}
@keyframes os25-reflet {
from { background-position: 180% 0; }
to { background-position: -80% 0; }
}
/* Le bouton principal du hero mérite plus : il est le seul geste
attendu sur l'écran d'accueil. Au survol, sa lueur or s'ouvre. */
.btn-hero:hover,
.scene-actions .btn-hero:hover {
box-shadow: 0 4px 10px rgba(0,0,0,.4),
0 18px 44px -14px rgba(242,185,64,.55),
0 0 0 1px rgba(242,185,64,.35) !important;
}
/* Les boutons ronds d'icône tournent d'un rien : un mouvement
minuscule, mais c'est celui qui fait qu'une croix de fermeture
a l'air cliquable. */
.icon-btn:hover { transform: translateY(-1px) rotate(6deg); box-shadow: var(--o-leve); }
.icon-btn:active { transform: scale(.9); }
/* Les flèches du carrousel glissent dans leur sens. */
.scene-fleche:hover { transform: translateX(-3px) scale(1.12); }
.scene-fleche.retourne:hover { transform: translateX(3px) scale(1.12); }
/* =============================================================
19.4 LES CARTES QUI SE SOULÈVENT
Même grammaire que les boutons, à une échelle plus lente : une
carte est plus lourde qu'un bouton, elle met plus de temps à
monter. 280 ms au lieu de 160.
⚠ LE LISERÉ LUMINEUX EST UNE OMBRE INTÉRIEURE, PAS UNE BORDURE.
`border` change la taille de la boîte ; `inset` ne déplace rien.
============================================================= */
.universe-card,
.projet-carte,
.kpi,
.voie-carte,
.gal-carte,
.eq-carte,
.ll-carte,
.filmo-carte {
transition: transform var(--m-moyen) var(--m-ressort),
box-shadow var(--m-moyen) var(--m-doux);
}
.universe-card:hover,
.voie-carte:hover,
.gal-carte:hover,
.eq-carte:hover,
.ll-carte:hover,
.filmo-carte:hover,
.kpi:hover {
transform: translateY(-6px);
box-shadow: var(--o-haute), inset 0 0 0 1px rgba(255,255,255,.09);
}
/* Les deux univers portent leur couleur : SPIDER en violet,
CERCLE en cyan. Au survol, c'est cette couleur qui s'allume —
pas un blanc générique. */
.universe-card.universe-spider:hover {
box-shadow: 0 28px 60px -22px rgba(0,0,0,.85),
0 0 70px -26px rgba(139,92,246,.55),
inset 0 0 0 1px rgba(139,92,246,.35);
}
.universe-card.universe-cercle:hover {
box-shadow: 0 28px 60px -22px rgba(0,0,0,.85),
0 0 70px -26px rgba(18,217,255,.5),
inset 0 0 0 1px rgba(18,217,255,.32);
}
.universe-card.universe-trame:hover {
box-shadow: 0 28px 60px -22px rgba(0,0,0,.85),
0 0 70px -26px rgba(242,185,64,.5),
inset 0 0 0 1px rgba(242,185,64,.32);
}
/* Le lien d'une carte avance quand on survole la carte entière :
la flèche part avant que la souris ne l'atteigne, et on
comprend où cliquer. */
.universe-link .ico { transition: transform var(--m-court) var(--m-doux); }
.universe-card:hover .universe-link .ico { transform: translateX(4px); }
/* =============================================================
19.5 LES CERCLES QUI TOURNENT
Quatre couronnes tournent en continu, et pas au même rythme —
des vitesses différentes évitent l'effet d'horloge où tout se
synchronise et devient mécanique.
⚠ AUCUN DE CES MOUVEMENTS NE PORTE D'INFORMATION. L'arc de
progression, lui, ne tourne pas : il se remplit une fois, à la
valeur réelle, et s'arrête. Ce qui tourne est le décor autour.
Un chiffre qui tourne serait un chiffre qu'on ne peut pas lire.
============================================================= */
@keyframes os25-orbite { to { transform: rotate(360deg); } }
/* L'anneau d'avancement : une couronne pointillée derrière lui,
qui fait un tour en 22 secondes. */
.anneau-boite { position: relative; }
.anneau-boite::before {
content: "";
position: absolute;
inset: -7px;
border-radius: 50%;
border: 1px dashed rgba(242,185,64,.28);
animation: os25-orbite 22s linear infinite;
pointer-events: none;
}
/* Le cadran du hero : sa monture tourne, lentement — et lui seul
reçoit le halo coloré qui tourne à l'envers. C'est le
croisement des deux sens qui donne la profondeur.
⚠ POURQUOI PAS SUR TOUS LES ANNEAUX. L'accueil en porte dix. Un
dégradé conique flouté à 10 px et mis en rotation, multiplié
par dix, oblige la carte graphique à refaire dix flous à chaque
image : c'est le genre de détail qui fait passer un écran de 60
à 25 images par seconde sur un portable. La couronne
pointillée, qui ne coûte qu'une rotation de trait, reste sur
tous les anneaux. */
.scene-cadran { position: relative; }
.scene-cadran::after {
content: "";
position: absolute;
inset: -18px;
border-radius: 50%;
background: conic-gradient(from 0deg,
transparent 0deg, rgba(18,217,255,.22) 40deg, transparent 120deg,
transparent 240deg, rgba(242,185,64,.18) 290deg, transparent 340deg);
filter: blur(10px);
animation: os25-orbite 44s linear infinite reverse;
pointer-events: none;
}
.scene-cadran::before {
content: "";
position: absolute;
inset: -10px;
border-radius: 50%;
border: 1px solid rgba(18,217,255,.18);
border-top-color: rgba(18,217,255,.55);
border-right-color: rgba(242,185,64,.4);
animation: os25-orbite 14s linear infinite;
pointer-events: none;
}
/* L'étape en cours du CERCLE 25 : elle seule reçoit une couronne.
Les étapes franchies et celles à venir restent immobiles — la
rotation dit « c'est ici que ça se passe maintenant ». */
.c25-jalon.ici .c25-rond { position: relative; }
.c25-jalon.ici .c25-rond::after {
content: "";
position: absolute;
inset: -8px;
border-radius: 50%;
border: 1.5px dashed currentColor;
opacity: .5;
animation: os25-orbite 9s linear infinite;
pointer-events: none;
}
/* L'orbite des deux univers : elle existait déjà comme élément
vide, sans mouvement. On la fait tourner, et on l'accélère
quand la carte est survolée. */
.universe-orbit {
transform-origin: center;
animation: os25-orbite 30s linear infinite;
}
.universe-card:hover .universe-orbit { animation-duration: 9s; }
/* =============================================================
19.6 LES SLIDES QUI PASSENT
La couverture change toutes les huit secondes. Jusqu'ici
l'ancienne s'effaçait et la nouvelle apparaissait — un fondu,
correct mais plat.
Maintenant : l'image entre en glissant depuis la droite et en
se refermant (une caméra qui finit son travelling), pendant
qu'une lame de lumière traverse le cadre une fois. Le texte,
lui, monte depuis la gauche — il n'accompagne pas l'image, il
arrive par un autre bord, et c'est ce décalage qui se lit comme
un montage plutôt qu'un fondu.
============================================================= */
.hero-scene .scene-fond .affiche {
animation: os25-entree-fond 900ms var(--m-vif) 1,
pano 40s ease-in-out infinite !important;
}
@keyframes os25-entree-fond {
from { opacity: 0; transform: translateX(26px) scale(1.07); }
to { opacity: 1; transform: none; }
}
/* La lame de lumière. Elle ne passe qu'une fois par changement,
parce que l'élément est recréé à chaque rendu de la scène. */
.hero-scene .scene-voile::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(100deg,
transparent 40%, rgba(255,255,255,.09) 50%, transparent 60%);
background-size: 300% 100%;
animation: os25-lame 1400ms var(--m-doux) 1;
}
@keyframes os25-lame {
from { background-position: 200% 0; }
to { background-position: -100% 0; }
}
/* Les vignettes : celle qui est active se soulève déjà. Les
autres répondent au survol, et l'image dedans avance. */
.scene-vignette {
transition: transform var(--m-court) var(--m-ressort),
box-shadow var(--m-court) var(--m-doux);
}
.scene-vignette:hover { transform: translateY(-5px) scale(1.06); box-shadow: var(--o-leve); }
.scene-vignette .affiche { transition: transform var(--m-moyen) var(--m-doux); }
.scene-vignette:hover .affiche { transform: scale(1.12); }
/* La couverture elle-même : sa lueur s'ouvre au survol. Assez
pour qu'on sente qu'elle est vivante, trop peu pour distraire. */
.hero-solo .hero-scene { transition: box-shadow var(--m-long) var(--m-doux); }
.hero-solo .hero-scene:hover {
box-shadow: 0 40px 100px -34px #000,
0 0 90px -40px rgba(18,217,255,.7) !important;
}
/* =============================================================
19.7 LES FENÊTRES QUI S'OUVRENT
Une fenêtre qui apparaît d'un coup ne dit pas d'où elle vient.
Celle-ci monte de 18 px en se dépliant, pendant que le fond
derrière se floute et s'assombrit. Les deux mouvements sont
décalés de 60 ms : le fond part en premier, la fenêtre le suit.
C'est l'ordre naturel — on éteint la salle avant que l'écran
s'allume.
⚠ `backdrop-filter` EST RÉSERVÉ À CE VOILE. C'est un effet
coûteux : le navigateur doit relire le rendu sous l'élément à
chaque image. Sur un voile plein écran qui ne bouge pas, il est
composité une fois. Sur trente cartes qui défilent, il ferait
ramer l'écran.
============================================================= */
.modal-scrim {
animation: os25-voile 260ms var(--m-doux) both;
backdrop-filter: blur(10px) saturate(.85);
}
@keyframes os25-voile {
from { opacity: 0; }
to { opacity: 1; }
}
.modal {
animation: os25-fenetre 420ms var(--m-ressort) 60ms both;
box-shadow: 0 40px 110px -30px #000,
0 0 0 1px rgba(255,255,255,.07),
0 0 120px -50px rgba(242,185,64,.4);
}
@keyframes os25-fenetre {
from { opacity: 0; transform: translateY(18px) scale(.965); }
to { opacity: 1; transform: none; }
}
/* L'en-tête de la fenêtre porte un filet de lumière : c'est ce
qui sépare le titre du contenu sans tracer une ligne grise. */
.modal-head {
position: relative;
background: linear-gradient(180deg, rgba(255,255,255,.045), transparent);
}
.modal-head::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent,
rgba(242,185,64,.5) 22%, rgba(18,217,255,.45) 62%, transparent);
}
/* Le pied : ses boutons entrent l'un après l'autre. */
@keyframes os25-monte {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.modal-foot .btn { opacity: 1; transform: none; animation: os25-monte 320ms var(--m-ressort); }
.modal-foot .btn:nth-child(1) { animation-delay: 180ms; }
.modal-foot .btn:nth-child(2) { animation-delay: 240ms; }
.modal-foot .btn:nth-child(3) { animation-delay: 300ms; }
/* =============================================================
19.8 LES MESSAGES
Un message arrive par la droite en dépassant sa place de 6 px,
puis se pose. Un liseré coloré à gauche dit lequel des quatre
états on lit, avant même de lire.
============================================================= */
@keyframes os25-toast {
from { opacity: 0; transform: translateX(38px) scale(.96); }
60% { transform: translateX(-6px); }
to { opacity: 1; transform: none; }
}
@keyframes os25-toast-sort {
to { opacity: 0; transform: translateX(38px) scale(.96); }
}
.toast {
animation: os25-toast 380ms var(--m-ressort) both;
box-shadow: var(--o-haute);
border-left: 3px solid rgba(255,255,255,.25);
}
.toast.ok { border-left-color: #34D399; }
.toast.warn { border-left-color: #F2B940; }
.toast.err { border-left-color: #F87171; }
.toast.out { animation: os25-toast-sort 200ms var(--m-doux) both; }
/* =============================================================
19.9 LE MENU
Sept blocs, sept couleurs. Au survol, la pastille grossit et sa
couleur déborde en lueur ; la ligne glisse de 3 px vers la
droite.
============================================================= */
.nav-cat-btn,
.nav-lien {
transition: transform var(--m-court) var(--m-doux),
background-color var(--m-court) var(--m-doux);
}
.nav-cat-btn:hover,
.nav-lien:hover { transform: translateX(3px); }
.nav-cat-btn::before {
transition: transform var(--m-moyen) var(--m-ressort),
box-shadow var(--m-moyen) var(--m-doux);
}
.nav-cat-btn:hover::before {
transform: scale(1.45);
box-shadow: 0 0 14px currentColor;
}
/* Le sigle du studio répond au survol, et lui seul : c'est la
marque, elle a le droit d'être la seule chose qui bouge dans
une colonne par ailleurs immobile. */
.brand-marque { transition: transform var(--m-long) var(--m-ressort); }
.brand:hover .brand-marque { transform: scale(1.06) rotate(-2deg); }
/* =============================================================
19.10 L'ENTRÉE D'ÉCRAN
⚠ LA CASCADE EXISTE DÉJÀ dans neon.css. On ne la redéclare pas —
on lui donne seulement la courbe à ressort, pour que les blocs
ne fassent pas que monter mais s'ouvrent aussi.
============================================================= */
.db-cascade > * { animation-timing-function: var(--m-ressort) !important; }
/* Les compteurs des univers : ils entrent en se dépliant. */
@keyframes os25-kpi {
from { opacity: 0; transform: translateY(12px) scale(.94); }
to { opacity: 1; transform: none; }
}
.universe-kpi { opacity: 1; transform: none; animation: os25-kpi 420ms var(--m-ressort); }
.universe-kpi:nth-child(1) { animation-delay: 120ms; }
.universe-kpi:nth-child(2) { animation-delay: 180ms; }
.universe-kpi:nth-child(3) { animation-delay: 240ms; }
.universe-kpi:nth-child(4) { animation-delay: 300ms; }
/* La courbe IDEA vers IMPACT : ses six points pulsent, chacun à
son propre rythme, pour que la ligne ait l'air de circuler. */
@keyframes os25-point {
0%, 100% { opacity: .45; transform: scale(1); }
50% { opacity: 1; transform: scale(1.35); }
}
.c25-wave i { animation: os25-point 2600ms var(--m-doux) infinite; }
.c25-wave i:nth-child(1) { animation-delay: 0ms; }
.c25-wave i:nth-child(2) { animation-delay: 220ms; }
.c25-wave i:nth-child(3) { animation-delay: 440ms; }
.c25-wave i:nth-child(4) { animation-delay: 660ms; }
.c25-wave i:nth-child(5) { animation-delay: 880ms; }
.c25-wave i:nth-child(6) { animation-delay: 1100ms; }
/* Les lignes de tableau : un survol qui se voit sans repeindre. */
tbody tr {
transition: background-color var(--m-court) var(--m-doux),
transform var(--m-court) var(--m-doux);
}
tbody tr:hover { transform: translateX(2px); }
/* =============================================================
19.10 bis L'ORBE 25 AI — 7 septembre 2026, le soir
Direction : « l'icône AI t7al chat l studio wla t7al question l
AI ; dirha bleu avec bleu canard, fiha dou, tji futuriste kter,
circulaire futuriste. »
⚠ REPREND `.assistant-bulle` DE components.css, QUI EST DORÉE.
La pastille or se confondait avec le bouton primaire du hero
(`.btn-hero`, #f2b940) : deux ronds dorés à l'écran, un seul
ouvre l'assistant. Le froid la distingue d'un geste.
Les trois bleus sortent de la palette déjà en place — le cyan
est celui de CERCLE (#12d9ff), le bleu celui du liseré du hero
(#258bff) ; seul le canard (#0e7c86) est nouveau, et c'est lui
qui porte le halo. On n'invente pas une quatrième couleur.
Deux mouvements permanents, pas trois : la couronne qui tourne
(elle dit « ça écoute ») et le halo qui s'ouvre (il dit « c'est
là »). Le noyau ne pulse pas en plus — ce serait le nerveux
dont parle la règle 3 de la section 19.
⚠ LES DEUX PSEUDO-ÉLÉMENTS SONT EN ABSOLU. `.assistant-bulle`
est `display:grid` : posés en flux, la couronne et le halo
deviendraient des cases de la grille et pousseraient l'icône
hors du rond. */
.assistant-bulle {
width: 58px !important;
height: 58px !important;
border: 0 !important;
color: #9FEAF4 !important;
background: radial-gradient(circle at 34% 28%, #0E3E4E 0%, #061620 74%) !important;
box-shadow:
0 0 0 1px rgba(127, 227, 238, .32),
0 0 30px rgba(14, 124, 134, .55),
0 12px 30px -12px rgba(0, 0, 0, .9) !important;
isolation: isolate;
}
/* La couronne. Un dégradé conique masqué en anneau : un seul
élément, aucune image, et la rotation ne coûte qu'un
compositeur. */
.assistant-bulle::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
z-index: -1;
background: conic-gradient(from 0deg,
transparent 0deg, #0e7c86 70deg, #258bff 150deg,
#12d9ff 205deg, transparent 262deg, transparent 360deg);
-webkit-mask: radial-gradient(circle, transparent 0 64%, #000 65%);
mask: radial-gradient(circle, transparent 0 64%, #000 65%);
animation: orbe-couronne 4.5s linear infinite;
}
@keyframes orbe-couronne { to { transform: rotate(360deg); } }
/* Le halo. Il part du bord et s'efface : c'est un signal de
présence, pas un clignotant. */
.assistant-bulle::after {
content: "";
position: absolute;
inset: -12px;
border-radius: 50%;
z-index: -1;
border: 1px solid rgba(18, 217, 255, .38);
animation: orbe-halo 2.9s ease-out infinite;
pointer-events: none;
}
@keyframes orbe-halo {
0% { transform: scale(.86); opacity: .85; }
100% { transform: scale(1.24); opacity: 0; }
}
.assistant-bulle:hover {
transform: translateY(-2px) scale(1.05) !important;
box-shadow:
0 0 0 1px rgba(127, 227, 238, .5),
0 0 44px rgba(37, 139, 255, .6),
0 14px 34px -12px rgba(0, 0, 0, .9) !important;
}
/* Ouvert, la couronne s'arrête : le panneau est la réponse, le
bouton n'a plus rien à signaler. */
.assistant-bulle.est-ouvert { transform: scale(.92) !important; opacity: 1 !important; }
.assistant-bulle.est-ouvert::before { animation-play-state: paused; }
.assistant-bulle.est-ouvert::after { display: none; }
/* Le panneau prend le même froid, sinon le bouton bleu ouvre une
fenêtre grise et le lien entre les deux se perd. */
.assistant-panneau {
border-color: rgba(127, 227, 238, .22) !important;
background: linear-gradient(180deg, #0B1B25 0%, #071119 100%) !important;
box-shadow: 0 0 44px rgba(14, 124, 134, .26), 0 24px 60px -24px rgba(0, 0, 0, .9) !important;
}
.assistant-tete { border-bottom-color: rgba(127, 227, 238, .16) !important; }
.assistant-titre { color: #9FEAF4; }
/* =============================================================
19.11 MOUVEMENT RÉDUIT
⚠ TOUT CE QUI PRÉCÈDE S'ÉTEINT ICI, Y COMPRIS LES ROTATIONS
PERMANENTES. Une couronne qui tourne sans fin est exactement ce
que ce réglage existe pour supprimer. Les états au survol
restent — ils répondent à un geste, ils ne surprennent
personne — mais sans transition.
============================================================= */
@media (prefers-reduced-motion: reduce) {
.anneau-boite::before,
.scene-cadran::before,
.scene-cadran::after,
.c25-jalon.ici .c25-rond::after,
.universe-orbit,
.assistant-bulle::before,
.assistant-bulle::after,
.c25-wave i,
.hero-scene .scene-voile::after,
.hero-scene .scene-fond .affiche,
.universe-kpi,
.modal,
.modal-scrim,
.toast,
.modal-foot .btn {
animation: none !important;
}
.btn::after,
.universe-link::after { display: none; }
.btn-primary::after, .btn-hero::after, .btn-gate::after { transition: none !important; }
.btn, .icon-btn, .universe-card, .projet-carte, .kpi, .voie-carte,
.gal-carte, .eq-carte, .ll-carte, .filmo-carte, .scene-vignette,
.nav-cat-btn, .nav-lien, tbody tr {
transition: none !important;
}
.btn:hover, .icon-btn:hover, .universe-card:hover, .scene-vignette:hover,
.nav-cat-btn:hover, .nav-lien:hover, tbody tr:hover { transform: none !important; }
body::after { display: none; }
}
/* =============================================================
20. LA CONSOLE DU STUDIO — LE PIED DU MENU
7 septembre 2026
Direction : « dik le studio / fermer l'OS / accès et horaires
mam9adach mzian, dir liha bouton temma bleu futuriste. »
── CE QUI N'ALLAIT PAS
Les deux commandes portaient la classe des liens de menu. Elles
ressemblaient donc à deux entrées de navigation de plus, collées
sous les sept blocs — alors que l'une d'elles FERME L'OS POUR
TOUTE L'ÉQUIPE. Le geste le plus lourd de l'application avait
l'apparence d'un lien vers une page.
── CE QUE FAIT CE BLOC
Il se détache du menu : un panneau de verre sombre, un liseré
cyan, et un interrupteur qui a la forme de ce qu'il fait — une
piste, une pastille qui glisse, une lueur qui s'allume quand le
studio est ouvert et s'éteint en rouge quand il est fermé.
⚠ DEUX LIGNES DE TEXTE, ET ELLES NE DISENT PAS LA MÊME CHOSE.
La première dit L'ÉTAT (« Studio ouvert »), la seconde
L'ACTION (« Fermer l'accès »). C'est le piège classique des
interrupteurs : un bouton marqué « Fermer l'OS » ne dit pas si
l'OS est ouvert. Ici les deux sont écrits, l'un sous l'autre.
============================================================= */
.studio-console {
display: flex;
flex-direction: column;
gap: 9px;
margin: 14px 12px 10px;
padding: 13px 13px 11px;
border-radius: 15px;
background:
linear-gradient(160deg, rgba(18,217,255,.07), rgba(5,8,13,.5) 55%),
rgba(8,13,21,.72);
border: 1px solid rgba(18,217,255,.20);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
0 14px 34px -22px #000;
}
/* Le liseré du haut : la seule ligne de couleur pleine du menu.
Elle sépare la console des sept blocs sans tracer un trait
gris de plus. */
.studio-console {
position: relative;
overflow: hidden;
}
.studio-console::before {
content: "";
position: absolute;
top: 0;
left: 12px;
right: 12px;
height: 1px;
background: linear-gradient(90deg, transparent,
rgba(18,217,255,.75) 30%, rgba(242,185,64,.45) 75%, transparent);
}
.sc-titre {
font-size: 10px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(148,180,214,.72);
}
/* ── L'INTERRUPTEUR */
.sc-bascule {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
align-items: center;
gap: 11px;
width: 100%;
padding: 9px 10px;
border-radius: 11px;
border: 1px solid rgba(18,217,255,.22);
background: rgba(5,8,13,.55);
color: #E8F1FA;
text-align: left;
cursor: pointer;
transition: transform var(--m-court) var(--m-doux),
box-shadow var(--m-court) var(--m-doux),
border-color var(--m-court) var(--m-doux);
}
.sc-bascule:hover {
transform: translateY(-2px);
border-color: rgba(18,217,255,.5);
box-shadow: 0 10px 26px -14px #000, 0 0 26px -14px rgba(18,217,255,.8);
}
.sc-bascule:active { transform: translateY(1px) scale(.99); }
/* La piste et la pastille. La pastille glisse de gauche à droite
selon l'état — c'est le seul endroit de l'OS où une position
dans l'espace porte une information. */
.sc-piste {
position: relative;
display: block;
height: 21px;
border-radius: 999px;
background: rgba(255,255,255,.09);
box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
transition: background-color var(--m-moyen) var(--m-doux);
}
.sc-pastille {
position: absolute;
top: 3px;
left: 3px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #7C8DA3;
transition: transform var(--m-moyen) var(--m-ressort),
background-color var(--m-moyen) var(--m-doux),
box-shadow var(--m-moyen) var(--m-doux);
}
/* Ouvert : la piste s'allume en cyan, la pastille passe à droite
et respire. Fermé : elle revient à gauche, en rouge, immobile —
un studio fermé ne doit pas avoir l'air vivant. */
.studio-console.on .sc-piste { background: rgba(18,217,255,.30); }
.studio-console.on .sc-pastille {
transform: translateX(19px);
background: #12D9FF;
box-shadow: 0 0 12px rgba(18,217,255,.9), 0 0 22px rgba(18,217,255,.4);
}
.studio-console.off .sc-piste { background: rgba(248,113,113,.22); }
.studio-console.off .sc-pastille {
background: #F87171;
box-shadow: 0 0 10px rgba(248,113,113,.75);
}
.sc-texte { display: block; min-width: 0; }
.sc-texte b {
display: block;
font-size: 13px;
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.2;
}
.studio-console.off .sc-texte b { color: #FCA5A5; }
.sc-action {
display: block;
margin-top: 2px;
font-size: 11px;
color: rgba(148,180,214,.78);
}
/* ── LE LIEN SECONDAIRE
Il reste un lien, et il doit le rester : ouvrir un écran de
réglages n'a rien de commun avec fermer le studio. Il est donc
plus petit, sans fond, et ne se soulève pas — il glisse. */
.sc-lien {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 4px 2px;
font-size: 12px;
color: rgba(148,180,214,.8);
text-decoration: none;
transition: color var(--m-court) var(--m-doux),
transform var(--m-court) var(--m-doux);
}
.sc-lien .ico { display: inline-flex; color: rgba(18,217,255,.75); }
.sc-lien:hover { color: #E8F1FA; transform: translateX(3px); }
/* Menu réduit : la console se réduit à son interrupteur. Le
titre et le lien disparaissent — dans une colonne de 68 px,
« Accès et horaires » ne tiendrait pas, et le tronquer en
« Accè… » ne rend service à personne. */
.app[data-nav="reduit"] .studio-console { margin-inline: 8px; padding: 10px 8px; }
.app[data-nav="reduit"] .sc-titre,
.app[data-nav="reduit"] .sc-texte,
.app[data-nav="reduit"] .sc-lien span:not(.ico) { display: none; }
.app[data-nav="reduit"] .sc-bascule { grid-template-columns: 1fr; gap: 0; padding: 8px; }
.app[data-nav="reduit"] .sc-lien { justify-content: center; padding: 6px 0 2px; }
@media (prefers-reduced-motion: reduce) {
.sc-bascule, .sc-piste, .sc-pastille, .sc-lien { transition: none !important; }
.sc-bascule:hover, .sc-lien:hover { transform: none !important; }
}
/* =============================================================
21. LA DENSITÉ ET LA LUMIÈRE
7 septembre 2026, tard
Direction : « dartiha kbira bzffff, machi ghir hia, ch7al mn
haja. 7awl tsaghar chwiya lktaba f system ou les elements. Ou
zidni plus de light et plus de pop up ou plus d'energie
positive f OS. »
── CE QUI ÉTAIT TROP GRAND, MESURÉ AVANT DE TOUCHER
couverture 703 px de haut
titre du projet 48 px
salutation 33 px
titre de page 33 px
titre d'univers 29 px
compteurs 21 px
cartes 26 / 28 px de rembourrage
texte courant 14 px
Ce n'est pas une impression : sur un écran de 950 px de haut,
la couverture seule en mangeait les trois quarts. Il fallait
défiler pour voir le premier projet.
── LE PRINCIPE DU RÉGLAGE
On ne rapetisse pas tout du même pourcentage. Plus un élément
est gros, plus il descend :
−21 % la couverture 703 → 555
−27 % le titre projet 48 → 35
−21 % le titre de page 33 → 26
−24 % le titre univers 29 → 22
−19 % les compteurs 21 → 17
−30 % le rembourrage 26 → 18
−7 % le texte courant 14 → 13
Le texte courant bouge le moins, et c'est volontaire : c'est
lui qu'on lit vraiment. Ce qui prenait de la place sans rien
dire — les grands titres, les marges — cède la sienne.
⚠ CE N'EST PAS UNE RÈGLE DE GOÛT, C'EST UNE RÈGLE DE TRAVAIL.
Un outil qu'on ouvre trente fois par jour n'est pas une page
d'accueil de site : chaque pixel donné à un titre est un pixel
pris à une information. La grandeur, on la garde pour la
couverture — c'est la seule image de l'écran.
============================================================= */
/* ── 21.1 LA COUVERTURE REDESCEND
Elle reste la plus grande chose de l'écran, mais elle laisse
voir ce qui vient après. 56 % de la hauteur au lieu de 74 %,
et le premier projet apparaît sans défiler. */
.hero-solo .hero-scene { min-height: clamp(440px, 56vh, 620px) !important; }
.hero-solo .scene-titre { font-size: clamp(26px, 2.4vw, 35px) !important; }
.hero-solo .scene-corps { padding: 34px 38px 82px !important; }
.hero-coiffe > .command-head .command-identity h1 {
font-size: clamp(19px, 1.5vw, 25px) !important;
}
.hero-coiffe > .command-head { top: 22px; left: 38px; }
.hero-coiffe > .command-head > .avatar { width: 40px !important; height: 40px !important; }
/* ── 21.2 LES TITRES DE PAGE
33 px pour « Clients » sur un écran de tableau, c'est une
affiche. 26 px reste un titre. */
.page h1,
.page-head h1,
.page-title { font-size: clamp(21px, 1.7vw, 26px) !important; letter-spacing: -.02em; }
.page-head p,
.page-head .muted { font-size: 12.5px; }
/* ── 21.3 LES DEUX UNIVERS */
.universe-card { padding: 18px 20px 16px !important; }
.universe-card h2 { font-size: clamp(18px, 1.5vw, 22px) !important; }
.universe-copy { font-size: 12.5px !important; }
.universe-kpi b { font-size: 17px !important; }
.universe-kpi span { font-size: 10.5px; }
.universe-link { font-size: 12px; }
/* ── 21.4 LE TEXTE COURANT ET LES ESPACES
Un point de moins sur le corps, et l'écran gagne une ligne par
panneau sans que rien devienne illisible. Les écarts entre
blocs se resserrent d'un tiers. */
body { font-size: 13px; }
.dashboard-home { gap: 13px !important; }
.dashboard-home .panel-head { padding: 10px 14px 6px !important; }
.dashboard-home .panel-body { padding: 6px 14px 12px !important; }
.panel-head h3 { font-size: 12px !important; }
.eyebrow { font-size: 10px !important; }
/* Les tableaux respirent moins, et c'est ce qu'on leur demande :
voir dix lignes d'un coup plutôt que six. */
tbody td, thead th { padding-block: 8px !important; }
/* ── 21.5 LES ANNEAUX ET LES JALONS
Le cadran de la couverture est dessiné à 118 px par le code
(anneau.js). On ne touche pas au code pour une question de
taille : la mise à l'échelle est l'affaire de la feuille. */
.scene-cadran .anneau-boite { transform: scale(.82); transform-origin: top right; }
.c25-jalon .c25-rond { width: 32px !important; height: 32px !important; }
.c25-titre { font-size: 11.5px !important; }
.c25-compte { font-size: 10.5px !important; }
/* =============================================================
21.6 LA LUMIÈRE
Direction : « plus de light ».
Un OS de production tourne dans une pièce sombre, sur des
fonds à #05080D. Sans source, tout est plat : les panneaux se
confondent avec le fond, et l'œil ne sait pas où regarder.
On pose donc trois lumières, comme sur un plateau :
1. une lueur d'ambiance, très large, en haut de l'écran ;
2. un filet clair sur l'arête haute de chaque panneau —
c'est ce qui donne l'impression que la surface est
éclairée par le dessus ;
3. une lueur qui suit l'élément actif du menu.
⚠ AUCUNE N'EST ANIMÉE. Trois sources fixes donnent du relief ;
trois sources qui respirent donnent le mal de mer.
============================================================= */
/* 1. L'ambiance. Elle ne teinte rien, elle éclaire.
⚠ ELLE EST POSÉE SUR `body`, PAS SUR `.app`, ET EN z-index
NÉGATIF.
La première version la posait sur `.app::before` en
`z-index: 0`, ce qui obligeait à écrire
`.app > * { z-index: 1 }` pour repasser le contenu devant.
Cette ligne aurait écrasé le z-index du voile du menu
mobile — même spécificité, feuille chargée plus tard — et
le menu serait passé DERRIÈRE son propre voile.
Sur `body::before` en `z-index: -1`, la lueur se glisse
entre le fond de la page et son contenu. Rien d'autre à
déclarer, et aucun empilement existant n'est touché. */
body::before {
content: "";
position: fixed;
top: -20vh;
left: 18%;
right: 0;
height: 72vh;
z-index: -1;
pointer-events: none;
background:
radial-gradient(60% 55% at 30% 0%, rgba(18,217,255,.11), transparent 70%),
radial-gradient(45% 50% at 78% 8%, rgba(242,185,64,.08), transparent 72%),
radial-gradient(38% 44% at 55% 4%, rgba(139,92,246,.065), transparent 70%);
}
/* 2. L'arête haute. Un pixel de blanc à 7 % sur le bord
supérieur : c'est le geste le moins cher et le plus
efficace de toute cette feuille. */
⚠ `box-shadow` NE S'AJOUTE PAS À CELUI D'AVANT, IL LE
REMPLACE. Écrire ici le seul filet intérieur effacerait
l'ombre portée que ces surfaces avaient déjà, et les cartes
se retrouveraient à plat sur le fond — l'inverse de ce
qu'on cherche. On redéclare donc les deux : le filet ET une
ombre de contact. */
.panel,
.universe-card,
.kpi,
.eq-carte,
.ll-carte,
.projet-carte {
box-shadow: inset 0 1px 0 rgba(255,255,255,.07),
0 10px 26px -20px rgba(0,0,0,.85);
}
/* 3. Le menu. L'écran ouvert porte une lueur dans la couleur de
son bloc — on sait où l'on est sans lire. */
.nav-item.is-actif,
.nav-item.is-active,
.nav-lien.is-actif {
box-shadow: inset 2px 0 0 currentColor, 0 0 22px -12px currentColor;
}
/* =============================================================
21.7 LE POP — CE QUI RÉPOND QUAND ON FAIT QUELQUE CHOSE
Direction : « plus de pop up ou plus d'énergie positive ».
⚠ ON N'AJOUTE PAS DE FENÊTRES. Une fenêtre de plus, c'est un
clic de plus pour tout le monde, toute la journée — l'inverse
exact de « clean, simple, saheel ». Ce qui manquait n'était
pas des fenêtres : c'était la RÉPONSE. L'OS encaissait les
gestes sans rien dire.
Maintenant il répond : le message qui arrive rebondit et
compte son temps, le message de réussite s'allume en vert, les
panneaux se posent au lieu d'apparaître, et ce qu'on touche
s'éclaire.
============================================================= */
/* Le message porte une barre de temps : on voit combien il reste
avant qu'il parte, au lieu de le voir disparaître d'un coup. */
.toast { position: relative; overflow: hidden; padding-right: 18px; }
.toast::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
transform-origin: left;
background: currentColor;
opacity: .5;
animation: os25-minuteur 3600ms linear forwards;
}
.toast.err::after { animation-duration: 9000ms; }
@keyframes os25-minuteur { to { transform: scaleX(0); } }
/* La réussite s'allume : une pulsation verte, une seule fois.
C'est la seule récompense de l'OS, et elle dure 900 ms. */
.toast.ok {
animation: os25-toast 380ms var(--m-ressort) both,
os25-reussite 900ms var(--m-doux) 380ms 1;
}
@keyframes os25-reussite {
0%, 100% { box-shadow: var(--o-haute); }
40% { box-shadow: var(--o-haute), 0 0 34px -6px rgba(52,211,153,.75); }
}
/* Les panneaux se posent. Trois paliers suffisent : au-delà,
l'attente se voit. */
@keyframes os25-pose {
from { opacity: 0; transform: translateY(9px) scale(.995); }
to { opacity: 1; transform: none; }
}
/* ⚠ PAS DE `both`. MÊME RAISON QUE POUR .revele, ET ELLE A ÉTÉ
MESURÉE ICI AVANT D'ÊTRE COMPRISE LÀ-BAS.
Une animation d'entrée avec `animation-fill-mode: both` fait
porter à l'élément son état de DÉPART tant que l'animation n'a
pas joué — soit `opacity: 0`. Or une animation ne joue pas
dans un onglet en arrière-plan : elle est suspendue à sa
première image. Les panneaux y étaient donc parfaitement
invisibles, et le sont restés jusqu'au retour sur l'onglet.
En pratique ils réapparaissaient dès qu'on revenait — les
animations reprennent — mais la règle est mauvaise : elle fait
dépendre la VISIBILITÉ d'un contenu du bon déroulement d'une
décoration.
Sans `both`, les valeurs ci-dessous sont l'état normal du
panneau. L'animation ne fait que le mettre en scène quand elle
peut. */
.page > .panel {
opacity: 1;
transform: none;
animation: os25-pose 340ms var(--m-ressort);
}
.page > .panel:nth-of-type(2) { animation-delay: 55ms; }
.page > .panel:nth-of-type(3) { animation-delay: 110ms; }
/* Ce qu'on touche s'éclaire — les pastilles, les puces, les
filtres. Ce sont les gestes les plus fréquents de la journée
et ils ne renvoyaient rien. */
.chip, .pill, .filtre, .scene-badge {
transition: transform var(--m-court) var(--m-doux),
box-shadow var(--m-court) var(--m-doux),
filter var(--m-court) var(--m-doux);
}
.chip:hover, .pill:hover, .filtre:hover {
transform: translateY(-1px);
filter: brightness(1.12);
box-shadow: 0 0 18px -8px currentColor;
}
/* Le bouton enfoncé pousse un anneau vers l'extérieur. C'est le
« pop » d'un vrai bouton : quelque chose part de sous le
doigt. */
.btn:active:not(:disabled)::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
animation: os25-onde 420ms var(--m-doux) 1;
}
@keyframes os25-onde {
from { box-shadow: 0 0 0 0 rgba(242,185,64,.45); }
to { box-shadow: 0 0 0 12px rgba(242,185,64,0); }
}
@media (prefers-reduced-motion: reduce) {
.toast::after, .toast.ok, .page > .panel,
.btn:active:not(:disabled)::before { animation: none !important; }
.chip, .pill, .filtre, .scene-badge { transition: none !important; }
.chip:hover, .pill:hover, .filtre:hover { transform: none !important; }
body::before { display: none; }
}
@media (max-width: 760px) {
.hero-solo .hero-scene { min-height: clamp(400px, 54vh, 520px) !important; }
.hero-solo .scene-titre { font-size: 30px !important; }
.hero-solo .scene-corps { padding: 24px 18px 92px !important; }
body::before { display: none; }
}
/* =============================================================
22. DEUXIÈME PASSE DE DENSITÉ — ET LE SIGLE DU STUDIO
7 septembre 2026, tard
Direction : « zid saghar chwiya, ou zid sghar l'econe dial
studio. »
── LE SIGLE, MESURÉ
Le « 25 » du menu fait 41 × 56 px, dans un bandeau de 92 px de
haut — soit 10 % de la colonne, avant même le premier lien du
menu. C'est une enseigne, pas un repère. Un logo dans un outil
de travail sert à savoir où l'on est en un coup d'œil ; il n'a
pas à se faire regarder.
le sigle 56 → 38 px (−32 %)
le mot 34 → 23 px (−32 %)
le bandeau 92 → 66 px (−28 %)
Vingt-six pixels rendus à la colonne : un lien de menu entier.
── ET LE RESTE, ENCORE UN CRAN
La première passe (section 21) avait ramené la couverture de
703 à 532 px et les titres de 48 à 35. Ce second cran est plus
court — de 8 à 12 % — parce qu'on approche du plancher : en
dessous, on ne gagne plus de la densité, on perd de la
lisibilité.
couverture 532 → 470 px
titre projet 35 → 31 px
titre de page 22,5 → 20 px
titre univers 22 → 19 px
ligne de menu 40 → 35 px
colonne 278 → 256 px
bandeau haut 72 → 62 px
⚠ LE TEXTE COURANT NE BOUGE PLUS. Il est à 13 px depuis la
première passe et il y reste. Douze pixels sur un écran qu'on
lit huit heures par jour, ce n'est plus de la densité, c'est
de la fatigue.
============================================================= */
/* ── 22.1 LE SIGLE DU STUDIO */
.brand {
height: 66px !important;
min-height: 0 !important;
padding: 8px 14px 12px !important;
}
.brand-logo { height: 38px !important; }
.brand-marque { height: 23px !important; max-width: 72px !important; }
.build-mark { font-size: 6.5px !important; }
/* ── 22.2 LA COLONNE ET LE BANDEAU
Les deux jetons sont posés par master-v2.css. On les redéfinit
au lieu de réécrire les règles qui s'en servent : une valeur
changée à un seul endroit, et la grille suit. */
:root,
.app {
--sidebar-w: 256px !important;
--header-h: 62px !important;
}
/* ── 22.3 LE MENU */
.nav-item {
padding: 7px 10px !important;
font-size: 12.5px !important;
}
.nav-cat-btn {
padding: 7px 12px !important;
font-size: 9.5px !important;
}
/* ── 22.4 LA COUVERTURE ET LES TITRES */
.hero-solo .hero-scene { min-height: clamp(400px, 50vh, 560px) !important; }
.hero-solo .scene-titre { font-size: clamp(24px, 2.1vw, 31px) !important; }
.hero-solo .scene-corps { padding: 28px 32px 74px !important; }
.hero-coiffe > .command-head .command-identity h1 {
font-size: clamp(17px, 1.35vw, 21px) !important;
}
.hero-coiffe > .command-head { top: 18px; left: 32px; }
.hero-coiffe > .command-head > .avatar { width: 34px !important; height: 34px !important; }
.page h1,
.page-head h1,
.page-title { font-size: clamp(18px, 1.45vw, 21px) !important; }
.universe-card { padding: 15px 17px 14px !important; }
.universe-card h2 { font-size: clamp(16px, 1.3vw, 19px) !important; }
.universe-kpi b { font-size: 15.5px !important; }
/* Le cadran suit la couverture. */
.scene-cadran .anneau-boite { transform: scale(.72); }
@media (max-width: 760px) {
.hero-solo .hero-scene { min-height: clamp(370px, 50vh, 480px) !important; }
.hero-solo .scene-titre { font-size: 27px !important; }
.brand { height: 58px !important; padding: 6px 12px 10px !important; }
.brand-logo { height: 32px !important; }
}
/* ⚠ LE JETON NE SUFFISAIT PAS POUR LE BANDEAU.
`--header-h` est bien redéfini plus haut, et `shell.css` s'en
sert à quatre endroits — mais `master-v2.css` écrit la hauteur
du bandeau en dur : `.header{height:72px!important}`. Le jeton
n'y passe pas.
On redéclare donc la hauteur à la même spécificité. os25.css
étant chargée après, c'est la dernière qui parle. Les deux
valeurs restent d'accord : le jeton à 62 px pour les décalages
calculés dans shell.css, et la hauteur à 62 px ici. Les
désaccorder ferait flotter le contenu sous un bandeau qui n'a
plus la taille qu'on lui prête. */
.header { height: 62px !important; }
/* =============================================================
23. L'ÉCLAT — LA LUMIÈRE QUI RÉPOND
7 septembre 2026, nuit
Direction : « zidni plus les animations et la dynamique avec
les effects et les pop up et les lights, je veux plus de
quality f OS. »
── LA DIFFÉRENCE ENTRE « PLUS D'ANIMATIONS » ET « PLUS DE
QUALITÉ »
Ce ne sont pas la même demande, et c'est la seconde qui
compte. On peut faire clignoter trente choses et obtenir un
écran fatigant ; la qualité vient d'ailleurs — de ce qui
RÉPOND. Une surface qui s'éclaire sous la main, un chiffre qui
se pose au lieu d'apparaître, un bord qui suit le regard :
trois signes que la machine est vivante, sans qu'aucun d'eux
ne bouge tout seul dans le vide.
Cette section n'ajoute donc presque aucun mouvement autonome.
Elle ajoute des RÉPONSES.
⚠ TROIS EFFETS ONT BESOIN DE assets/js/core/eclat.js. Ils sont
marqués ci-dessous. Si ce fichier ne se charge pas, aucune
règle d'ici ne casse quoi que ce soit : les classes qu'il pose
n'existent simplement jamais, et les surfaces restent telles
qu'elles étaient.
============================================================= */
/* ── 23.1 LA LUMIÈRE QUI SUIT LE DOIGT [eclat.js]
Une tache douce sous le curseur, à l'intérieur de la carte.
`--mx` et `--my` sont écrits par le JS en pourcentage ; la
feuille n'a pas besoin de connaître la taille de la carte.
⚠ AU REPOS, ELLE N'EXISTE PAS : `opacity: 0`. Elle n'apparaît
qu'avec la classe `.a-lueur`, posée à l'entrée du curseur et
retirée à la sortie. Rien ne tourne quand personne ne
regarde. */
/* ⚠ ON NE POSE PAS `overflow: hidden` SUR CES CARTES.
Ce serait la façon évidente d'empêcher la tache de dépasser
des coins arrondis — et elle rognerait du même coup tout ce
qui déborde déjà de ces cadres : l'orbite des deux univers,
une pastille posée sur un bord, une ombre interne. Le rayon
hérité par la tache elle-même fait le même travail sans rien
couper. */
.universe-card, .kpi, .eq-carte, .ll-carte,
.projet-carte, .voie-carte, .gal-carte, .filmo-carte {
position: relative;
}
.universe-card::after, .kpi::after, .eq-carte::after, .ll-carte::after,
.projet-carte::after, .voie-carte::after, .gal-carte::after, .filmo-carte::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity 280ms var(--m-doux);
background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
rgba(255,255,255,.09), transparent 62%);
}
.a-lueur::after { opacity: 1 !important; }
/* Les deux univers prennent leur propre couleur plutôt que du
blanc : SPIDER en violet, CERCLE en cyan. */
.universe-card.universe-spider::after {
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
rgba(139,92,246,.20), transparent 62%);
}
.universe-card.universe-cercle::after {
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
rgba(18,217,255,.18), transparent 62%);
}
.universe-card.universe-trame::after {
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
rgba(242,185,64,.18), transparent 62%);
}
/* ⚠ LE CONTENU DOIT RESTER AU-DESSUS DE LA TACHE. Sans cette
ligne, la lueur passerait par-dessus le texte des cartes. */
.universe-card > *, .kpi > *, .eq-carte > *, .ll-carte > *,
.projet-carte > *, .voie-carte > *, .gal-carte > *, .filmo-carte > * {
position: relative;
z-index: 1;
}
/* ── 23.2 LE BORD QUI TOURNE
Un filet lumineux fait le tour de la couverture, très
lentement — un tour en cinquante secondes. C'est la seule
chose de l'écran qui bouge sans qu'on l'ait touchée, et elle
est assez lente pour ne jamais attirer l'œil : on la remarque
quand on la cherche, pas quand on travaille.
⚠ IL EST DESSINÉ SUR UN CADRE, PAS SUR LA CARTE. Un dégradé
conique posé en fond de la couverture passerait sous l'image ;
ici il est peint dans un cadre de 1 px découpé au masque, donc
uniquement sur le bord. */
.hero-solo .hero-scene::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: conic-gradient(from 0deg,
transparent 0deg, rgba(18,217,255,.55) 30deg, transparent 90deg,
transparent 200deg, rgba(242,185,64,.45) 240deg, transparent 300deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: os25-orbite 50s linear infinite;
}
/* ── 23.3 LES BLOCS QUI SE RÉVÈLENT [eclat.js]
⚠ LA CLASSE `.a-reveler` N'EST POSÉE QUE SUR CE QUI EST HORS
DE L'ÉCRAN. Un bloc déjà visible n'est jamais masqué — voir le
commentaire de eclat.js. Si le script ne tourne pas, ces deux
règles ne s'appliquent à rien. */
.a-reveler {
opacity: 0;
transform: translateY(16px);
}
/* ⚠ PAS DE `both` ICI, ET C'EST TOUT LE SUJET.
Avec `animation-fill-mode: both`, un élément dont l'animation
n'a pas encore démarré porte l'état de DÉPART — donc
`opacity: 0`. Et une animation ne démarre pas dans un onglet
caché : les animations y sont suspendues. Un bloc révélé
pendant que l'onglet dort restait donc invisible, et le
redevenait à chaque retour.
Mesuré : opacité 0 après révélation, dans un onglet en
arrière-plan.
Sans `both`, les valeurs écrites ci-dessous s'appliquent
toujours — avant l'animation, pendant qu'elle est suspendue, et
après. L'animation ne fait plus que décorer le passage. C'est
la règle de toute cette couche : un effet qui tombe en panne
perd son brillant, il ne cache jamais le contenu. */
.revele {
opacity: 1;
transform: none;
animation: os25-revele 520ms var(--m-ressort);
}
@keyframes os25-revele {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
/* ── 23.4 LE NOM DU PROJET SOUS LA VIGNETTE
Survoler une vignette de la couverture disait jusqu'ici le nom
du projet dans l'infobulle du navigateur — après une seconde,
dans la police du système, en bas du curseur. Autant dire
nulle part.
⚠ LE TEXTE VIENT DE `data-nom`, PAS DE `title`. eclat.js
déplace l'attribut : sinon l'infobulle native s'ajouterait à
la nôtre et on en verrait deux. Le bouton garde son
`aria-label`, donc rien n'est perdu pour la lecture d'écran. */
.scene-vignette { position: relative; }
.scene-vignette::after {
content: attr(data-nom);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
z-index: 6;
padding: 5px 9px;
border-radius: 7px;
white-space: nowrap;
font-size: 11px;
font-weight: 600;
color: #EAF2FB;
background: rgba(5,8,13,.94);
border: 1px solid rgba(18,217,255,.28);
box-shadow: 0 10px 26px -12px #000;
opacity: 0;
transform: translate(-50%, 6px);
pointer-events: none;
transition: opacity 160ms var(--m-doux), transform 160ms var(--m-ressort);
}
.scene-vignette:hover::after,
.scene-vignette:focus-visible::after {
opacity: 1;
transform: translate(-50%, 0);
}
/* ── 23.5 LES DÉTAILS QUI SE VOIENT SANS QU'ON LES REGARDE
Ce bloc ne contient aucune animation. C'est pourtant lui qui
fait le plus pour la qualité perçue : ce sont les endroits où
un logiciel soigné se distingue d'un logiciel monté vite. */
/* La barre de défilement. Celle du système, sur un fond sombre,
est une barre grise de Windows au milieu d'un écran de studio. */
* { scrollbar-width: thin; scrollbar-color: rgba(120,150,190,.32) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
border-radius: 999px;
border: 3px solid transparent;
background-clip: content-box;
background-color: rgba(120,150,190,.28);
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(18,217,255,.45); }
/* Le texte sélectionné prend la couleur de la marque. */
::selection { background: rgba(242,185,64,.32); color: #fff; }
/* Le clavier. Un contour de focus qui a été dessiné, et non
celui que le navigateur invente. Il ne s'affiche qu'au clavier
— `:focus-visible`, pas `:focus` — donc jamais après un clic. */
:focus-visible {
outline: 2px solid rgba(18,217,255,.75);
outline-offset: 2px;
border-radius: 6px;
}
/* Les chiffres s'alignent en colonne. Sans cela, un « 1 » est
plus étroit qu'un « 8 » et une colonne de montants ondule. */
.kpi b, .kpi .v, .universe-kpi b, td, .mono, .c25-compte {
font-variant-numeric: tabular-nums;
}
/* L'attente. Un reflet traverse les blocs de chargement au lieu
de les laisser gris : on voit que ça travaille. */
.skeleton, .sk-ligne {
background: linear-gradient(90deg,
rgba(120,150,190,.07) 25%, rgba(120,150,190,.16) 37%, rgba(120,150,190,.07) 63%);
background-size: 400% 100%;
animation: os25-attente 1400ms ease-in-out infinite;
}
@keyframes os25-attente {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
/* Les images arrivent en fondu plutôt qu'en claquant. */
.affiche { transition: opacity 320ms var(--m-doux); }
/* ── 23.6 MOUVEMENT RÉDUIT
⚠ eclat.js NE DÉMARRE MÊME PAS sous ce réglage : la lumière,
les chiffres et les révélations n'existent pas. Ce qui reste à
éteindre ici, c'est ce que la feuille fait seule. */
@media (prefers-reduced-motion: reduce) {
.hero-solo .hero-scene::after,
.skeleton, .sk-ligne { animation: none !important; }
.a-reveler { opacity: 1 !important; transform: none !important; }
.scene-vignette::after,
.universe-card::after, .kpi::after, .eq-carte::after, .ll-carte::after,
.projet-carte::after, .voie-carte::after, .gal-carte::after, .filmo-carte::after {
transition: none !important;
}
.affiche { transition: none !important; }
}
/* =============================================================
24. LA LUMIÈRE VIVANTE
7 septembre 2026, nuit
Direction : « zidni plus de light et plus des effects, les pop
up khfaf kicha3lo ou ytfaw, les animation khfifa b light, les
background et les pop up et les cercle kidiro b light
futuriste. »
── CE QUE VEUT DIRE « KHFIF »
Léger. C'est la consigne, et c'est aussi la seule façon que
ça marche : une lumière qu'on remarque en travaillant est une
lumière ratée. Tout ce qui suit reste sous 12 % d'opacité et
au-dessus de 6 secondes de cycle. On doit sentir que l'écran
est allumé sans jamais pouvoir dire ce qui bouge.
── ⚠ LA RÈGLE DE COÛT, APPRISE À LA SECTION 19
Dix anneaux avec un dégradé conique FLOUTÉ mis en rotation
faisaient tomber l'écran de 60 à 25 images par seconde : le
flou doit être recalculé à chaque image, pour chacun.
Ici, aucun `filter: blur()` n'est animé. Les balayages sont
des dégradés coniques NETS découpés au masque, mis en rotation
par `transform` — le navigateur les compose sur la carte
graphique sans rien redessiner. Même effet à l'œil, coût
quasi nul.
── CE QUI TOURNE EN PERMANENCE, ET C'EST TOUT
la dérive du fond 1 élément
le balayage des anneaux n anneaux, transform seul
la pastille du menu actif 1 élément
le souffle d'une fenêtre seulement quand elle est ouverte
Tout le reste ne s'allume qu'au passage : les fenêtres et les
messages s'allument en arrivant puis s'éteignent, comme
demandé.
============================================================= */
/* ── 24.1 LE FOND QUI DÉRIVE
La lueur d'ambiance posée à la section 21 était fixe. Elle
respire maintenant et se déplace très lentement — 80 secondes
pour un aller-retour de quelques pour cent. C'est en dessous
du seuil où l'œil suit un mouvement : on ne voit pas la lueur
bouger, on voit l'écran vivre.
⚠ C'EST UN `transform`, PAS UNE POSITION. Animer `left` ou
`background-position` sur un calque plein écran force un
nouveau rendu à chaque image. Une transformation est composée
par la carte graphique, sans redessiner un pixel. */
body::before {
animation: os25-derive 80s ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes os25-derive {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
33% { transform: translate3d(-3%, 2%, 0) scale(1.08); opacity: .82; }
66% { transform: translate3d(3%, -1.5%, 0) scale(1.04); opacity: .93; }
}
/* Une seconde nappe, plus basse et plus lente encore, dans les
couleurs des deux univers. Elle croise la première : c'est le
croisement qui empêche de repérer un cycle. */
.app::after {
content: "";
position: fixed;
left: 12%;
right: -10%;
bottom: -30vh;
height: 60vh;
z-index: -1;
pointer-events: none;
background:
radial-gradient(50% 60% at 25% 100%, rgba(139,92,246,.07), transparent 72%),
radial-gradient(45% 55% at 80% 92%, rgba(18,217,255,.055), transparent 74%);
animation: os25-derive-basse 110s ease-in-out infinite;
}
@keyframes os25-derive-basse {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(4%, -3%, 0) scale(1.12); }
}
/* ── 24.2 LES CERCLES, EN LUMIÈRE FUTURISTE
Un balayage fait le tour de chaque anneau, comme l'aiguille
d'un radar : un arc clair sur trente degrés, le reste
transparent, le tout découpé en couronne par un masque.
⚠ LE MASQUE EST CE QUI REND LA CHOSE GRATUITE. Sans lui, il
faudrait un flou pour adoucir un disque plein. Avec lui, on
découpe une couronne de 2 px dans un dégradé net : le
navigateur ne fait plus que la tourner.
Trois vitesses différentes selon l'objet — un anneau de
panneau, le cadran de la couverture, une étape du CERCLE — pour
qu'ils ne se synchronisent jamais entre eux. */
.anneau-boite::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
pointer-events: none;
background: conic-gradient(from 0deg,
transparent 0deg 296deg,
rgba(18,217,255,.65) 338deg,
rgba(18,217,255,0) 360deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
animation: os25-orbite 7s linear infinite;
}
/* Le cadran de la couverture : plus grand, plus lent, et en or —
c'est la couleur de la marque, et c'est le seul anneau de
l'écran qui la porte. */
.scene-cadran .anneau-boite::after {
inset: -5px;
background: conic-gradient(from 0deg,
transparent 0deg 288deg,
rgba(242,185,64,.7) 336deg,
rgba(242,185,64,0) 360deg);
animation-duration: 11s;
}
/* L'étape en cours du CERCLE 25 : un halo qui s'allume et
s'éteint, sur six secondes. Elle en a déjà une couronne
pointillée qui tourne ; le halo dit « c'est ici », la couronne
dit « ça avance ». */
/* ⚠ ON PASSE OUTRE UNE PROTECTION DE PERFORMANCE. IL FAUT DIRE
POURQUOI, ET DIRE JUSTE.
perf.css, ligne 116, écrit exactement ceci :
.c25-jalon.ici .c25-rond { animation: none !important }
Elle vise donc le jalon ACTIF, et lui seul — pas les cinq. Elle
éteignait `c25-battement` de neon.css, un battement de quatre
secondes hérité de l'ancien CERCLE.
Ce qu'on rallume n'est pas ce battement : c'est un souffle de
six secondes sur l'ombre portée, sur UN élément. Les quatre
autres jalons ne portent rien et n'en porteront pas — c'est le
contraste avec eux qui rend celui-ci lisible. Cinq ronds qui
battent ensemble ne disent rien ; un seul dit « c'est ici ».
Le `!important` est nécessaire pour repasser devant celui de
perf.css. Il ne va pas plus loin que le sélecteur le plus
étroit possible. */
.c25-jalon.ici .c25-rond {
animation: os25-souffle 6s ease-in-out infinite !important;
}
@keyframes os25-souffle {
0%, 100% { box-shadow: 0 0 0 0 rgba(18,217,255,.34), 0 0 14px -6px rgba(18,217,255,.5); }
50% { box-shadow: 0 0 0 5px rgba(18,217,255,0), 0 0 28px -4px rgba(18,217,255,.85); }
}
/* ── 24.3 LES FENÊTRES QUI S'ALLUMENT PUIS S'ÉTEIGNENT
Direction : « les pop up khfaf kicha3lo ou ytfaw ».
Une fenêtre qui s'ouvre allume un anneau de lumière qui
s'écarte et disparaît en 900 ms — l'ampoule qu'on vient
d'allumer. Puis elle respire, très lentement, tant qu'elle
est ouverte. Quand elle se ferme, il ne reste rien : aucune
des deux ne tourne quand aucune fenêtre n'est ouverte. */
/* ⚠ `position: relative` N'EST PAS DÉCORATIF ICI.
Un pseudo-élément en `inset: 0` se cale sur le plus proche
ancêtre POSITIONNÉ. Si la fenêtre est en position statique,
l'anneau de lumière ne se pose pas sur elle : il s'étale sur
tout le voile, et on allume l'écran entier au lieu d'allumer
la fenêtre. */
.modal { position: relative; }
.modal::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
pointer-events: none;
animation: os25-allumage 900ms var(--m-doux) 1;
}
@keyframes os25-allumage {
from { box-shadow: 0 0 0 0 rgba(18,217,255,.55), 0 0 60px 0 rgba(242,185,64,.4) inset; }
to { box-shadow: 0 0 0 26px rgba(18,217,255,0), 0 0 0 0 rgba(242,185,64,0) inset; }
}
/* Le souffle, tant qu'elle est là. Sur un liseré, pas sur une
ombre portée : une ombre qui respire fait respirer toute la
page derrière. */
/* ⚠ CETTE DÉCLARATION RETIRE AUSSI LE `both` DE L'OUVERTURE, ET
C'EST VOULU.
La règle de la section 19.7 écrivait
`os25-fenetre … both` : la fenêtre portait donc son état de
départ — invisible — tant que l'animation n'avait pas joué.
Dans un onglet en arrière-plan, les animations sont
suspendues : la fenêtre restait vide. C'est le même défaut que
celui corrigé sur les panneaux, au même endroit du
raisonnement. Ici il disparaît en passant. */
.modal {
animation: os25-fenetre 420ms var(--m-ressort) 60ms,
os25-veille 7s ease-in-out 1s infinite !important;
}
@keyframes os25-veille {
0%, 100% { border-color: rgba(255,255,255,.09); }
50% { border-color: rgba(18,217,255,.34); }
}
/* Le voile derrière prend lui aussi une lueur, très basse, qui
vient du centre — là où est la fenêtre. */
.modal-scrim {
background-image: radial-gradient(60% 55% at 50% 45%, rgba(18,217,255,.07), transparent 70%);
}
/* ── 24.4 LES MESSAGES QUI S'ALLUMENT
Même geste, en plus court : le message s'allume en arrivant,
380 ms, puis plus rien. Il porte déjà sa barre de temps et,
s'il annonce une réussite, sa pulsation verte. */
.toast::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
animation: os25-allumage-court 620ms var(--m-doux) 1;
}
@keyframes os25-allumage-court {
from { box-shadow: inset 0 0 30px 0 rgba(255,255,255,.16); }
to { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); }
}
/* ── 24.5 LE MENU
La pastille du bloc ouvert respire, sur huit secondes. Une
seule à la fois — c'est ce qui la rend lisible. */
.nav-cat[data-open="true"] > .nav-cat-btn::before {
animation: os25-pastille 8s ease-in-out infinite;
}
@keyframes os25-pastille {
0%, 100% { box-shadow: 0 0 0 0 currentColor; }
50% { box-shadow: 0 0 12px 0 currentColor; }
}
/* ── 24.6 LES PANNEAUX QUI S'ALLUMENT EN ARRIVANT
Une lame de lumière traverse le panneau une fois, à son
apparition. Elle ne se rejoue pas : l'élément n'est créé
qu'une fois par écran. */
/* Même raison que pour la fenêtre : sans ancêtre positionné, la
lame de lumière balaierait la page au lieu du panneau. */
.page > .panel { position: relative; }
.page > .panel::before,
.universe-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(100deg,
transparent 42%, rgba(255,255,255,.055) 50%, transparent 58%);
background-size: 300% 100%;
animation: os25-lame-panneau 1600ms var(--m-doux) 1;
}
@keyframes os25-lame-panneau {
from { background-position: 200% 0; }
to { background-position: -120% 0; }
}
/* ── 24.7 MOUVEMENT RÉDUIT
⚠ TOUT S'ARRÊTE. Une lueur qui dérive en permanence est
exactement ce que ce réglage existe pour supprimer — et les
éléments gardent leur état visible, puisque aucune de ces
animations ne porte de remplissage.
============================================================= */
@media (prefers-reduced-motion: reduce) {
body::before,
.app::after,
.anneau-boite::after,
.scene-cadran .anneau-boite::after,
.c25-jalon.ici .c25-rond,
.modal::before,
.toast::before,
.nav-cat[data-open="true"] > .nav-cat-btn::before,
.page > .panel::before,
.universe-card::before {
animation: none !important;
}
.modal { animation: none !important; }
.app::after { display: none; }
}
/* =============================================================
25. LA FINITION — LE RESTE DE L'ÉCRAN
7 septembre 2026, nuit
Direction : « zidni plus de lights ou plus des effects ou les
animations. »
Les sections 19 à 24 ont éclairé la couverture, les cartes, les
anneaux, les fenêtres et le fond. Restaient les endroits où la
main passe le plus souvent et où il ne se passait encore rien :
la barre du haut, les champs, les tableaux, les filtres, les
jauges, les avatars.
⚠ AUCUNE DE CES RÈGLES N'ANIME QUOI QUE CE SOIT EN PERMANENCE,
sauf deux — la pastille de présence et le reflet des jauges —
et les deux ne tournent que là où il y a une information à
porter : quelqu'un est en ligne, une barre est en train de se
remplir. Le reste répond au doigt et se rendort.
============================================================= */
/* ── 25.1 LA BARRE DE NAVIGATION QUI PASSE
Une ligne de lumière traverse le haut du contenu à chaque
changement d'écran, une fois, en 700 ms.
⚠ ELLE NE COÛTE PAS UNE LIGNE DE JAVASCRIPT. L'élément `.page`
est reconstruit à chaque navigation ; une animation posée sur
son pseudo-élément se rejoue donc toute seule, à chaque fois,
sans qu'on ait rien à déclencher. C'est le genre d'effet qu'on
code d'habitude avec un état, un minuteur et trois bogues.
⚠ CORRECTION DU 8 SEPTEMBRE — ELLE NE PASSAIT PAS, ELLE
RESTAIT.
Signalé depuis l'écran : « had light statique makit7arakch ».
Vérifié en l'éteignant en direct — le trait a disparu, c'était
bien celui-ci.
La cause tient en un mot : `animation-fill-mode`. Sans lui, une
animation ne laisse RIEN derrière elle. Les 700 ms passées, le
pseudo-élément revient à son état de repos — et cet état de
repos, faute d'`opacity` déclarée, valait 1. Le dégradé restait
donc peint en travers de l'écran, immobile, jusqu'au prochain
changement d'écran. La ligne de lumière était devenue une
barre.
Le repos est donc écrit noir sur blanc : `opacity: 0`. Pendant
l'animation, les images-clés imposent 1 puis 0 ; après, on
retombe sur 0. Et si les animations sont coupées — mouvement
réduit, onglet en arrière-plan — le repos vaut 0 aussi, donc
rien ne s'affiche. C'est l'inverse exact du piège de la section
23.3 : ici on décore, on ne porte aucun contenu, donc l'état
invisible est le bon état par défaut. */
.page::before {
content: "";
position: fixed;
top: var(--header-h, 62px);
left: var(--sidebar-w, 256px);
right: 0;
height: 2px;
z-index: 20;
pointer-events: none;
opacity: 0;
background: linear-gradient(90deg,
transparent, rgba(18,217,255,.85), rgba(242,185,64,.7), transparent);
background-size: 45% 100%;
background-repeat: no-repeat;
animation: os25-passage 700ms var(--m-doux) 1;
}
@keyframes os25-passage {
from { background-position: -50% 0; opacity: 1; }
70% { opacity: 1; }
to { background-position: 150% 0; opacity: 0; }
}
.app[data-nav="reduit"] .page::before { left: 76px; }
@media (max-width: 1000px) { .page::before { left: 0; } }
/* ── 25.2 LES CHAMPS
Un champ qui reçoit le curseur s'allume : le contour prend la
couleur du studio et une lueur basse s'ouvre autour. C'est le
geste le plus fréquent de la journée, et il ne renvoyait rien
d'autre qu'un contour bleu de navigateur. */
input, textarea, select {
transition: border-color var(--m-court) var(--m-doux),
box-shadow var(--m-court) var(--m-doux),
background-color var(--m-court) var(--m-doux);
}
input:focus, textarea:focus, select:focus {
border-color: rgba(18,217,255,.55) !important;
box-shadow: 0 0 0 3px rgba(18,217,255,.10), 0 0 22px -10px rgba(18,217,255,.8) !important;
outline: none;
}
/* La barre de recherche du bandeau : plus large quand on écrit
dedans. Elle prend la place qu'il faut au moment où il la
faut, et la rend ensuite. */
.searchbox { transition: box-shadow var(--m-moyen) var(--m-doux); }
.searchbox:focus-within {
box-shadow: 0 0 0 1px rgba(18,217,255,.4), 0 0 30px -12px rgba(18,217,255,.9);
}
/* ── 25.3 LES TABLEAUX
Une ligne survolée reçoit un filet lumineux à gauche, dans la
couleur du studio. Pas un fond : un fond change la couleur du
texte qu'on est en train de lire. */
tbody tr {
box-shadow: inset 0 0 0 0 rgba(18,217,255,0);
transition: background-color var(--m-court) var(--m-doux),
transform var(--m-court) var(--m-doux),
box-shadow var(--m-court) var(--m-doux);
}
tbody tr:hover {
box-shadow: inset 2px 0 0 0 rgba(18,217,255,.75);
}
/* ── 25.4 LES FILTRES ET LES ONGLETS
Le filtre actif porte un trait de lumière sous lui. Il glisse
d'un filtre à l'autre parce qu'il grandit depuis le centre —
pas parce qu'on a calculé une position. */
.chip.on, .chip.actif, .chip[aria-pressed="true"],
.pill.on, .pill.actif { position: relative; }
.chip.on::after, .chip.actif::after, .chip[aria-pressed="true"]::after,
.pill.on::after, .pill.actif::after {
content: "";
position: absolute;
left: 12%;
right: 12%;
bottom: -1px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, currentColor, transparent);
animation: os25-trait 320ms var(--m-ressort);
}
@keyframes os25-trait {
from { transform: scaleX(0); opacity: 0; }
to { transform: scaleX(1); opacity: 1; }
}
/* ── 25.5 LES JAUGES
Un reflet parcourt la partie remplie d'une barre de
progression. Il ne parcourt QUE le rempli : c'est ce qui fait
qu'on lit la barre au lieu de la regarder. */
.barre > i, .jauge i, .eq-jauge i, .ll-charge i {
position: relative;
overflow: hidden;
}
.barre > i::after, .jauge i::after, .eq-jauge i::after, .ll-charge i::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg,
transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
background-size: 250% 100%;
animation: os25-reflet-jauge 2600ms ease-in-out infinite;
}
@keyframes os25-reflet-jauge {
from { background-position: 180% 0; }
to { background-position: -80% 0; }
}
/* ── 25.6 LA PRÉSENCE — RÈGLE RETIRÉE, ET IL FAUT DIRE POURQUOI
J'avais écrit ici une pulsation verte sur
`.point-sig.sig-termine`, en croyant viser « quelqu'un est en
ligne ». Vérification faite dans le code, cette classe veut
dire quatre choses différentes :
shell.js « l'OS est ouvert »
dashboard.js « en ligne »
horaires.js « le studio est ouvert »
ma-mission.js « cette étape est faite »
La faire battre aurait donc fait clignoter en vert toutes les
cases cochées de l'écran « Ma mission ». Une pastille qui bat
ne veut plus rien dire quand tout bat.
Et deux décisions existantes disaient déjà non :
perf.css:246 .point-sig { animation: none !important }
neon-systeme.css:629 .point-sig.sig-termine { animation: none }
La première parce qu'un écran en porte des dizaines. La
seconde parce qu'un état terminé est un état au repos.
Enfin, le vrai voyant de présence existe déjà et respire déjà :
`.eq-lampe.vivant { animation: breathe 2s }`, dans neon.css.
Il n'y avait rien à ajouter — seulement à ne pas casser ce qui
marchait. */
/* ── 25.7 LES ÉTATS VIDES
Un écran vide n'est pas une panne, et il ne doit pas en avoir
l'air. Son icône reçoit une lueur lente : la page est allumée,
il n'y a simplement rien dedans. */
.empty .ico {
animation: os25-vide 5s ease-in-out infinite;
}
@keyframes os25-vide {
0%, 100% { opacity: .55; filter: drop-shadow(0 0 0 transparent); }
50% { opacity: .85; filter: drop-shadow(0 0 14px rgba(18,217,255,.45)); }
}
/* ── 25.8 LA CLOCHE
Quand il y a du non-lu, la pastille bat. Quand il n'y en a
pas, rien ne bouge — sinon la pastille ne veut plus rien dire.
⚠ CORRECTION DU 8 SEPTEMBRE — CETTE RÈGLE NE S'APPLIQUAIT PAS.
Elle visait `.notif-btn .badge`. Ces deux classes n'existent
nulle part : le bouton s'écrit `.icon-btn#notif-btn` et sa
pastille `.compteur` (shell.css:301). La règle était donc
valide, silencieuse, et sans effet depuis le jour où je l'ai
écrite. Une feuille de style ne prévient jamais qu'elle vise
du vide — c'est pour cela qu'on relit les sélecteurs contre le
code qui produit le HTML, pas contre le souvenir qu'on en a.
⚠ ET LA PULSATION D'ARRIVÉE EST RECONDUITE EXPRÈS.
`#notif-btn .compteur` (1,0,1) bat `.icon-btn .compteur.arrive`
(0,3,0), et os25.css se charge après shell.css : poser le
battement seul aurait supprimé le sursaut du moment où le
nombre augmente. La seconde règle redonne les deux ensemble. */
#notif-btn .compteur {
animation: os25-cloche 2400ms ease-in-out infinite;
}
#notif-btn .compteur.arrive {
animation: arrivee 900ms var(--e-out) 1,
os25-cloche 2400ms ease-in-out infinite;
}
@keyframes os25-cloche {
0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,.55); }
50% { box-shadow: 0 0 0 6px rgba(248,113,113,0); }
}
/* ── 25.9 MOUVEMENT RÉDUIT */
@media (prefers-reduced-motion: reduce) {
.page::before,
.chip.on::after, .chip.actif::after, .chip[aria-pressed="true"]::after,
.pill.on::after, .pill.actif::after,
.barre > i::after, .jauge i::after, .eq-jauge i::after, .ll-charge i::after,
.empty .ico,
#notif-btn .compteur, #notif-btn .compteur.arrive {
animation: none !important;
}
input, textarea, select, .searchbox, tbody tr { transition: none !important; }
}
/* =============================================================
26. LE NOM DE L'ASSISTANT, À CÔTÉ DE SON ORBE
7 septembre 2026
⚠ CE N'EST PAS UN NOUVEL ASSISTANT. Celui de l'OS existe
depuis le 4 septembre, il est monté sur la coque
(shell.js → monterAssistant), il est présent sur les 44 écrans
et il répond — vérifié en production le 7 septembre : ouvert
depuis « Projets », il a répondu « Vous êtes sur l'écran : la
liste des projets. »
Ce qu'il lui manquait, c'était son nom. Un orbe de 58 px avec
une icône de terminal ne dit pas « intelligence
artificielle », et la capture de référence portait, elle, un
bouton écrit « 25 ASSISTANT » en toutes lettres.
⚠ ON N'ÉLARGIT PAS L'ORBE POUR AUTANT.
Première version : en faire une pastille allongée. Mauvaise
idée, et la raison est dans la section juste au-dessus —
l'orbe porte une couronne conique et un halo, tous deux
découpés par des masques CIRCULAIRES : un dégradé radial en
cercle, et un rayon de 50 %. Étirer le bouton aurait tordu
les deux en ellipses décentrées.
L'étiquette se pose donc À CÔTÉ, en absolu, sans toucher au
bouton. L'orbe garde sa forme, sa couronne et son halo. */
.assistant-bulle { overflow: visible !important; }
.assistant-bulle .bulle-nom {
position: absolute;
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
padding: 6px 11px;
border-radius: 999px;
white-space: nowrap;
font: 700 9.5px/1 "JetBrains Mono", ui-monospace, monospace;
letter-spacing: .16em;
color: #CFE6F6;
background: rgba(6, 22, 32, .92);
border: 1px solid rgba(18, 217, 255, .3);
box-shadow: 0 10px 26px -14px #000;
pointer-events: none;
}
/* Ouvert, le nom s'efface : le panneau le porte déjà, et
l'écrire deux fois à trente centimètres est du bruit. */
.assistant-bulle.est-ouvert .bulle-nom { display: none; }
/* Sous 1100 px, il ne reste que l'orbe : l'étiquette mordrait
sur le contenu. */
@media (max-width: 1100px) {
.assistant-bulle .bulle-nom { display: none; }
}
/* =============================================================
27. L'OS EST SOMBRE, ET LE BOUTON DE THÈME LE DIT MAINTENANT
7 septembre 2026 — trouvé pendant l'audit général
⚠ LE BOUTON « CHANGER LE THÈME » RENDAIT L'OS ILLISIBLE.
Mesuré en thème clair, dans l'aperçu :
titre de page texte #101720 sur fond #05080D = 1,11:1
titre de panneau idem = 1,11:1
corps du texte idem = 1,11:1
titre d'univers #0E1116 sur #05080D = 1,06:1
Le minimum lisible est 4,5:1. À 1,1, c'est du noir sur noir :
l'écran entier devenait vide à l'œil.
── LA CAUSE
tokens.css contient un thème clair complet et soigné — chaque
couleur y porte en commentaire son contraste mesuré, plusieurs
ont été assombries exprès pour passer le seuil. Ce travail est
juste, et il fonctionnait.
master-v2.css — la feuille du build V12, adoptée le
7 septembre — est un OS SOMBRE. Elle ne contient pas une seule
règle de thème clair, et elle repeint les fonds. Chargée en
avant-dernier, elle gagne partout où elle parle.
Les textes passaient donc au sombre pendant que les fonds
restaient sombres.
── POURQUOI ON NE « RÉPARE » PAS LE THÈME CLAIR ICI
J'ai essayé : re-déclarer les quatorze jetons écrasés sous
`:root[data-theme="light"]`. Les jetons changent bien — vérifié,
`--bg-0` passe à #F4F5F7 — et les fonds restent noirs quand
même. master-v2 ne se contente pas de poser des jetons, elle
peint. Rendre cette feuille bi-thème, c'est réécrire ses
28 000 caractères de décisions sombres, une par une. C'est un
chantier, pas une correction d'audit.
── CE QU'ON FAIT
On retire le bouton. Un OS sombre assumé vaut mieux qu'un
bouton qui mène à un écran vide — et personne ne perd rien
qu'il avait : le thème clair ne marchait plus depuis l'adoption
de master-v2.
⚠ RIEN N'EST SUPPRIMÉ DU CODE. `appliquerTheme` reste, le
jeton reste, tokens.css garde son thème clair intact. Le jour
où l'on voudra un vrai thème clair, il n'y aura qu'à retirer
ces quatre lignes et faire le chantier de master-v2.
============================================================= */
#theme-btn { display: none !important; }
/* =============================================================
28. LES PROPOSITIONS DE L'ASSISTANT
7 septembre 2026
L'assistant ne modifie rien tout seul : il prépare, et la carte
ci-dessous attend un clic. Elle doit donc se lire SANS effort
et sans confiance — le tableau visé en haut, chaque champ avec
sa valeur en dessous, deux boutons en bas.
⚠ ELLE NE RESSEMBLE PAS À UNE BULLE DE CONVERSATION. Une
proposition qui va écrire dans la base ne doit pas avoir
l'apparence d'un message qu'on survole : liseré or à gauche,
fond légèrement plus clair, coins moins arrondis. On doit voir
qu'elle demande une décision.
============================================================= */
.as-action {
margin: 2px 0 4px;
padding: 12px 13px 11px;
border-radius: 10px;
border: 1px solid rgba(242,185,64,.28);
border-left: 3px solid #F2B940;
background: linear-gradient(160deg, rgba(242,185,64,.07), rgba(9,14,22,.6));
animation: os25-as-bulle 320ms var(--m-ressort);
}
.as-action-tete { display: flex; align-items: flex-start; gap: 9px; }
.as-action-pastille {
display: inline-flex;
flex: none;
width: 22px;
height: 22px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(242,185,64,.16);
color: #F2B940;
}
.as-action-tete b { display: block; font-size: 12.5px; color: #F0E4C8; }
.as-action-ou { display: block; margin-top: 1px; font-size: 11px; color: rgba(148,180,214,.8); }
/* Les champs. `dl` plutôt qu'un tableau : c'est une liste de
couples, et un lecteur d'écran l'annonce comme telle. */
.as-action-champs {
margin: 10px 0 0;
display: grid;
grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
gap: 5px 10px;
font-size: 12px;
}
.as-action-champs dt { color: rgba(148,180,214,.85); }
.as-action-champs dd {
margin: 0;
color: #E4ECF5;
word-break: break-word;
white-space: pre-wrap;
}
.as-action-pied {
display: flex;
align-items: center;
gap: 8px;
margin-top: 11px;
padding-top: 9px;
border-top: 1px solid rgba(242,185,64,.16);
}
/* Une fois écrit, la carte se calme : le vert dit que c'est
fait, et le liseré or n'a plus de décision à réclamer. */
.as-action-faite {
border-color: rgba(52,211,153,.3);
border-left-color: #34D399;
background: linear-gradient(160deg, rgba(52,211,153,.07), rgba(9,14,22,.6));
}
.as-action-ok { font-size: 12px; font-weight: 700; color: #34D399; }
/* =============================================================
29. « CERCLE » DÉCALÉ DANS LA CHAÎNE DU HAUT
8 septembre 2026
Signalé depuis l'écran : « mdarag lktaba » — le mot CERCLE ne
s'alignait pas sur BORN et SPIDER, il flottait au-dessus.
── CE N'ÉTAIT PAS UN PROBLÈME D'ALIGNEMENT
Mesuré dans la page : BORN et SPIDER font 8 px de haut,
CERCLE en faisait 38. La chaîne est en `align-items: center`,
donc une étiquette trois fois plus haute que ses voisines
déborde en haut et en bas. Le décalage n'était que le symptôme.
── DEUX CHOSES DIFFÉRENTES PORTENT LE MÊME NOM
`pages.css:6` définit `.cercle` comme un COMPOSANT : l'anneau
de progression de 38 × 38 px, avec son `svg`, ses `.arc` et son
`.core`. Le dashboard, lui, écrit
`el("span", { class: "cercle", text: "CERCLE" })` — une simple
étiquette de couleur (dashboard.js:476). Le sélecteur `.cercle`
ne fait pas la différence : il imposait 38 × 38 à un mot.
⚠ ET C'EST BIEN UNE COLLISION DE NOM, PAS UNE ERREUR DE STYLE.
Tant que les deux partagent le nom, n'importe quelle étiquette
`.cercle` ajoutée ailleurs se fera écraser pareil. Le vrai
remède serait de renommer l'un des deux — mais la couleur cyan
de l'étiquette vient de `master-v2.css`, un fichier minifié
qu'on ne touche pas pour un mot. On rend donc ici sa taille
naturelle à l'étiquette, sans approcher le composant : le
sélecteur est limité à la chaîne du haut, et à elle seule.
Les vrais anneaux — `.cercle` avec un `svg` dedans, et
`.cercle.lg` — gardent leurs dimensions : aucun n'est dans
`.command-chain`. */
.command-chain .cercle {
width: auto;
height: auto;
}
/* =============================================================
30. LE BORD DE LA COUVERTURE : IL NE TOURNAIT PAS AUTOUR,
IL TRAVERSAIT
8 septembre 2026
Signalé depuis l'écran : « had light statique makit7arakch ».
Vérifié en l'éteignant en direct — le trait a disparu, c'était
bien la règle 23.2.
── CE QUE JE CROYAIS AVOIR ÉCRIT, ET CE QUI TOURNAIT VRAIMENT
23.2 promet « un filet lumineux qui fait le tour de la
couverture ». Le mécanisme, lui, faisait autre chose :
@keyframes os25-orbite { to { transform: rotate(360deg); } }
On ne faisait pas tourner la LUMIÈRE le long du bord : on
faisait tourner LE CADRE ENTIER sur lui-même. Sur un cercle,
les deux reviennent au même — c'est pourquoi les six autres
usages d'`os25-orbite` sont corrects, ils sont tous en
`border-radius: 50%` (vérifié un par un). Sur un rectangle,
non : un cadre de 1 px penché de soixante-treize degrés coupe
la couverture en travers. Le « filet du bord » était devenu une
barre au milieu de l'image.
⚠ ET C'EST BIEN POUR ÇA QU'IL PARAISSAIT IMMOBILE. Il tournait
— un tour en cinquante secondes. À cette vitesse, une aiguille
qui traverse l'écran ne se lit pas comme un mouvement : elle se
lit comme un trait oublié là.
── LA CORRECTION
On ne bouge plus l'élément, on bouge l'angle du dégradé. Le
cadre reste collé au bord, et c'est la lumière qui en fait le
tour — ce que la section 23.2 décrivait depuis le début.
`os25-orbite` n'est pas touché : les six cercles qui s'en
servent continuent de tourner comme avant. Cette règle-ci a son
propre nom, et ne vise que la couverture.
Le repli `var(--os25-tour, 0deg)` couvre le navigateur qui ne
connaîtrait pas `@property` : il verra un bord coloré fixe,
au bon endroit, plutôt que rien. */
@property --os25-tour {
syntax: "";
initial-value: 0deg;
inherits: false;
}
.hero-solo .hero-scene::after {
background: conic-gradient(from var(--os25-tour, 0deg),
transparent 0deg, rgba(18,217,255,.55) 30deg, transparent 90deg,
transparent 200deg, rgba(242,185,64,.45) 240deg, transparent 300deg);
animation: os25-tour-bord 50s linear infinite;
}
@keyframes os25-tour-bord { to { --os25-tour: 360deg; } }
/* =============================================================
31. SPIDER 25 — L'ÉCRAN UNIQUE
8 septembre 2026
Huit entrées de menu deviennent une. Les styles vivent ici
plutôt que dans la page : la politique de sécurité de l'OS
interdit les styles en ligne, et une classe se relit.
⚠ LES COULEURS D'ÉTAPE NE SONT PAS DÉCORATIVES. Elles
remplacent le surlignage manuel du Google Sheet — sauf qu'ici
personne ne les choisit à la main : elles viennent de l'étape,
qui vient elle-même de la dernière trace.
============================================================= */
.spider { --sp-r: 13px; }
/* ── 31.1 LES CINQ VUES */
.sp-vues {
display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 14px;
padding: 5px; border: 1px solid var(--n-bord); border-radius: 12px;
background: rgba(12,19,28,.8);
}
.sp-vue {
flex: 1 1 auto; min-width: 118px; padding: 10px 14px;
border: 0; border-radius: 8px; background: transparent; color: var(--n-tx-2);
font: 600 13px/1.3 inherit; letter-spacing: -.01em; cursor: pointer;
transition: background var(--m-court) var(--m-doux), color var(--m-court) var(--m-doux);
}
.sp-vue:hover { color: var(--n-tx); background: rgba(255,255,255,.03); }
.sp-vue.on {
background: linear-gradient(160deg, #2A1D4D, #151C29); color: #fff;
box-shadow: inset 0 0 0 1px rgba(139,92,246,.36);
}
.sp-panneau { margin-bottom: 12px; }
.sp-panneau .panel-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.sp-note { margin-left: auto; color: var(--n-tx-3); font-size: 12px; }
.sp-vide { padding: 6px 2px; }
.sp-defile { overflow-x: auto; }
.sp-num { font-variant-numeric: tabular-nums; }
.sp-muet { color: var(--n-tx-3); }
.sp-ok { color: var(--n-vert); }
.sp-mal { color: var(--n-rouge); }
/* ── 31.2 LES TUILES DU MATIN */
.sp-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.sp-tuile {
position: relative; overflow: hidden;
padding: 15px 16px; border: 1px solid var(--n-bord); border-radius: 12px;
background: rgba(17,26,37,.7);
}
.sp-tuile::after {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: var(--sp-tn, var(--n-bord));
}
.sp-tuile b {
display: block; font-size: 29px; line-height: 1; letter-spacing: -.04em;
font-variant-numeric: tabular-nums; color: var(--sp-tn, var(--n-tx));
}
.sp-tuile span { display: block; margin-top: 8px; color: var(--n-tx-2); font-size: 12.5px; line-height: 1.35; }
.sp-tuile small { display: block; margin-top: 5px; color: var(--n-tx-3); font-size: 11px; }
.sp-t-urgent { --sp-tn: var(--n-rouge); }
.sp-t-jour { --sp-tn: var(--n-or); }
.sp-t-ok { --sp-tn: var(--n-vert); }
.sp-t-info { --sp-tn: var(--n-cyan); }
/* ── 31.3 LES HUIT ÉTAPES */
.sp-rail { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 1100px) { .sp-rail { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .sp-rail { grid-template-columns: repeat(2, 1fr); } }
.sp-etape {
padding: 12px 10px; text-align: left; cursor: pointer;
border: 1px solid var(--n-bord); border-radius: 10px;
background: rgba(17,26,37,.7); color: inherit; font: inherit;
transition: border-color var(--m-court) var(--m-doux), transform var(--m-court) var(--m-doux);
}
.sp-etape:hover { border-color: rgba(120,150,190,.34); transform: translateY(-2px); }
.sp-etape.on { border-color: rgba(139,92,246,.55); background: rgba(139,92,246,.10); }
.sp-etape b {
display: block; font-size: 21px; line-height: 1; letter-spacing: -.03em;
font-variant-numeric: tabular-nums; color: var(--sp-c, var(--n-tx));
}
.sp-etape span { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600; }
.sp-etape small { display: block; margin-top: 2px; font-size: 10px; color: var(--n-tx-3); line-height: 1.25; }
/* Une couleur par étape, partagée par la pastille et le rail. */
.sp-e-nouveau { --sp-c: var(--n-cyan); }
.sp-e-tentative { --sp-c: var(--n-tx-2); }
.sp-e-discussion { --sp-c: var(--n-violet); }
.sp-e-rdv { --sp-c: var(--n-or); }
.sp-e-presentation { --sp-c: #FF9F6B; }
.sp-e-devis { --sp-c: #7EEAFF; }
.sp-e-signe { --sp-c: var(--n-vert); }
.sp-e-ecarte { --sp-c: var(--n-tx-3); }
.sp-puce {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
padding: 4px 10px; border-radius: var(--r-full); font-size: 11px; font-weight: 600;
color: var(--sp-c, var(--n-tx-2));
border: 1px solid color-mix(in srgb, var(--sp-c, var(--n-bord)) 36%, transparent);
background: color-mix(in srgb, var(--sp-c, transparent) 10%, transparent);
}
.sp-puce i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* ── 31.4 LA PROVENANCE — comment ouvrir la conversation */
.sp-prov {
display: inline-block; padding: 3px 9px; border-radius: 6px;
font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
color: var(--sp-vc); border: 1px solid color-mix(in srgb, var(--sp-vc) 38%, transparent);
background: color-mix(in srgb, var(--sp-vc) 11%, transparent);
}
.sp-v-pub { --sp-vc: #C9B4FF; }
.sp-v-radar { --sp-vc: #7EEAFF; }
.sp-v-ancien { --sp-vc: #F7D89A; }
.sp-source { color: var(--n-tx-3); font-size: 12px; }
/* ── 31.5 LES LISTES */
.sp-table tbody tr { cursor: pointer; }
.sp-table tbody tr.sp-fixe { cursor: default; }
.sp-ent { font-weight: 600; letter-spacing: -.01em; }
.sp-sous { display: block; color: var(--n-tx-3); font-size: 11.5px; margin-top: 2px; }
.sp-dort { color: var(--n-rouge); font-weight: 700; }
.sp-dort-doux { color: var(--n-or); font-weight: 600; }
/* ── 31.6 LES CARTES — les trois piles, puis l'équipe */
.sp-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 11px; }
.sp-carte {
border: 1px solid var(--n-bord); border-radius: 12px;
background: rgba(17,26,37,.7); padding: 16px 17px;
}
.sp-carte-tete { margin-bottom: 8px; }
.sp-carte h3 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.025em; }
.sp-quoi { margin: 0 0 13px; color: var(--n-tx-3); font-size: 12.5px; line-height: 1.45; }
.sp-entonnoir { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.sp-mesures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-mini, .sp-entonnoir > div {
padding: 9px 10px; border-radius: 9px;
background: rgba(255,255,255,.022); border: 1px solid rgba(120,150,190,.10);
}
.sp-mini b, .sp-entonnoir b {
display: block; font-size: 18px; line-height: 1;
font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.sp-mini span, .sp-entonnoir span {
display: block; margin-top: 5px; font-size: 10px; color: var(--n-tx-3); line-height: 1.2;
}
.sp-verdict { margin: 12px 0 0; font-size: 12.5px; color: var(--n-tx-2); }
.sp-gen-tete { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.sp-rond {
width: 38px; height: 38px; border-radius: 50%; flex: none;
display: grid; place-items: center;
font-family: var(--f-mono); font-weight: 700; font-size: 13px; color: #C9B4FF;
background: linear-gradient(150deg, #241a44, #10151f);
border: 1px solid rgba(139,92,246,.35);
}
.sp-gen-tete b { display: block; font-size: 15px; letter-spacing: -.02em; }
.sp-role {
display: block; color: var(--n-tx-3); font-family: var(--f-mono);
font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.sp-alerte {
margin: 11px 0 0; padding: 9px 11px; border-radius: 9px; font-size: 12px; color: #FFB3B7;
border: 1px solid rgba(255,77,85,.26); background: rgba(255,77,85,.06);
}
.sp-calme {
margin: 11px 0 0; padding: 9px 11px; border-radius: 9px; font-size: 12px; color: #8FE9BC;
border: 1px solid rgba(36,217,129,.22); background: rgba(36,217,129,.05);
}
/* ── 31.7 LA FICHE — le journal des tentatives */
.sp-fond {
position: fixed; inset: 0; z-index: 60;
background: rgba(3,6,10,.72); display: grid; place-items: end center;
}
.sp-fiche {
width: min(720px, 100%); max-height: 88vh; overflow-y: auto;
padding: 22px 24px 30px; border-radius: 16px 16px 0 0;
border: 1px solid rgba(120,150,190,.3); background: #0C131C;
box-shadow: 0 -30px 90px rgba(0,0,0,.8);
}
.sp-fiche-tete { display: flex; align-items: flex-start; gap: 12px; }
.sp-fiche-tete h3 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.sp-fermer {
margin-left: auto; flex: none; width: 32px; height: 32px; cursor: pointer;
border: 1px solid var(--n-bord); border-radius: 9px;
background: transparent; color: var(--n-tx-2); font-size: 17px; line-height: 1;
}
.sp-fermer:hover { color: var(--n-tx); border-color: rgba(120,150,190,.34); }
.sp-fiche-meta { margin: 4px 0 14px; color: var(--n-tx-3); font-size: 12.5px; }
.sp-fiche-puces { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.sp-titre-fil {
margin: 20px 0 8px; font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
letter-spacing: .15em; text-transform: uppercase; color: var(--n-tx-3);
}
.sp-fil { list-style: none; margin: 0; padding: 0 0 0 20px; position: relative; }
.sp-fil::before {
content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
width: 1px; background: var(--n-bord);
}
.sp-fil li { position: relative; padding: 8px 0; }
.sp-fil li::before {
content: ""; position: absolute; left: -19px; top: 15px;
width: 9px; height: 9px; border-radius: 50%;
background: #0C131C; border: 2px solid var(--sp-fc, var(--n-bord));
}
.sp-f-appel { --sp-fc: var(--n-cyan); }
.sp-f-rdv { --sp-fc: var(--n-or); }
.sp-f-doc { --sp-fc: #7EEAFF; }
.sp-f-vide { --sp-fc: var(--n-tx-3); }
.sp-quand { font-family: var(--f-mono); font-size: 10.5px; color: var(--n-tx-3); letter-spacing: .04em; }
.sp-quoi { display: block; margin-top: 2px; }
.sp-qui { color: var(--n-tx-3); font-size: 12px; }
.sp-prochaine {
margin: 18px 0 0; padding: 14px 16px; border-radius: 11px;
border: 1px solid rgba(242,185,64,.3); border-left: 2px solid var(--n-or);
background: rgba(242,185,64,.06);
}
.sp-prochaine b {
display: block; margin-bottom: 5px; font-family: var(--f-mono);
font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--n-or);
}
.sp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
/* ── 31.8 L'ATELIER — trois champs, un document */
.sp-atelier { display: grid; grid-template-columns: 300px 1fr; gap: 14px; }
@media (max-width: 900px) { .sp-atelier { grid-template-columns: 1fr; } }
.sp-champ { display: block; margin-bottom: 12px; }
.sp-champ > span {
display: block; margin-bottom: 6px; font-family: var(--f-mono);
font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--n-tx-3);
}
.sp-champ textarea { min-height: 74px; resize: vertical; }
.sp-avis {
margin: 4px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 12.5px; color: #9FE8FA;
border: 1px solid rgba(18,217,255,.24); background: rgba(18,217,255,.055);
}
/* ⚠ LA FEUILLE EST LE SEUL ENDROIT CLAIR DE L'OS, ET C'EST VOULU.
C'est un document destiné à sortir — un PDF sur fond noir ne
s'imprime pas, et un client ne reçoit pas une page d'interface. */
.sp-feuille {
min-height: 400px; padding: 34px 36px; border-radius: 11px;
background: #FBFAF7; color: #14161A;
box-shadow: 0 26px 70px rgba(0,0,0,.55);
}
.sp-marque {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 14px; margin-bottom: 22px; border-bottom: 2px solid #14161A;
}
.sp-marque b { font-size: 17px; letter-spacing: -.02em; }
.sp-marque span {
font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em;
text-transform: uppercase; color: #6B7280;
}
.sp-feuille h4 { margin: 0 0 5px; font-size: 27px; letter-spacing: -.035em; line-height: 1.1; }
.sp-destinataire { margin: 0 0 24px; color: #6B7280; font-size: 13px; }
.sp-feuille h5 {
margin: 22px 0 7px; font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: #7C3AED;
}
.sp-feuille p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: #2A2F38; }
.sp-manque { color: #9CA3AF; font-style: italic; }
.sp-pied {
margin-top: 26px; padding-top: 12px; border-top: 1px solid #D8D5CE;
color: #6B7280; font-size: 11.5px;
}
/* ── 31.9 LA CHAÎNE ENTIÈRE — ajoutée le 8 septembre 2026
La Direction : « kayn vu global ou dakchi lié ou organisé ? »
SPIDER s'arrêtait au contrat, CERCLE 25 commençait au projet, et
personne ne voyait le passage entre les deux. Les maillons se
lisent de gauche à droite ; la flèche est dessinée en CSS parce
qu'elle relie sans rien ajouter à lire. */
.sp-chaine {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 1100px) { .sp-chaine { grid-template-columns: repeat(3, 1fr); gap: 20px 18px; } }
@media (max-width: 620px) { .sp-chaine { grid-template-columns: repeat(2, 1fr); } }
.sp-maillon {
position: relative;
padding: 14px 14px; border: 1px solid var(--n-bord); border-radius: 11px;
background: rgba(17,26,37,.7);
}
/* La flèche entre deux maillons. Elle ne s'affiche pas après le
dernier, ni en bout de ligne quand la grille se replie. */
.sp-maillon::after {
content: ""; position: absolute; right: -13px; top: 50%;
width: 8px; height: 8px; margin-top: -4px;
border-top: 1px solid var(--n-bord); border-right: 1px solid var(--n-bord);
transform: rotate(45deg);
}
.sp-maillon:last-child::after { display: none; }
@media (max-width: 1100px) { .sp-maillon:nth-child(3n)::after { display: none; } }
@media (max-width: 620px) { .sp-maillon:nth-child(2n)::after { display: none; } }
.sp-maillon b {
display: block; font-size: 25px; line-height: 1; letter-spacing: -.04em;
font-variant-numeric: tabular-nums; color: var(--sp-tn, var(--n-tx));
}
.sp-maillon span { display: block; margin-top: 7px; font-size: 12px; color: var(--n-tx-2); line-height: 1.3; }
.sp-maillon small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--n-tx-3); }
/* ── 31.10 CE QUI SE PASSE APRÈS LA SIGNATURE */
.sp-apres { margin-top: 20px; padding-top: 4px; }
.sp-projets { list-style: none; margin: 11px 0 0; padding: 0; }
.sp-projets li {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 9px 0; border-bottom: 1px solid rgba(120,150,190,.09);
}
.sp-projets li:last-child { border-bottom: 0; }
.sp-lien {
padding: 0; border: 0; background: none; cursor: pointer;
color: var(--n-cyan); font: 600 13.5px/1.4 inherit; letter-spacing: -.01em;
text-align: left;
}
.sp-lien:hover { text-decoration: underline; }
/* La colonne de saisie de l' atelier. Sans cette règle elle marche
quand même, mais une classe sans règle fait douter le prochain
lecteur : soit elle sert, soit elle part. */
.sp-atelier-gauche { min-width: 0; }
/* =============================================================
32. L'APPEL EN UN GESTE
8 septembre 2026
⚠ CES CINQ BOUTONS SONT LA PIÈCE DONT TOUT SPIDER DÉPEND.
Les cartes du matin, les leads qui dorment, les compteurs par
commercial, la conversion par campagne : tout se calcule à
partir de `prospect_interactions`. Si la trace n'est pas écrite,
l'écran est un joli vide.
Or enregistrer un appel demandait sept champs, quand le Google
Sheet de l'équipe en demande un seul. Sur trente appels dans une
journée, le formulaire perd — et il perdait, tous les jours,
depuis des mois.
D'où leur taille : ils sont volontairement plus gros que les
boutons ordinaires de l'OS. C'est le geste le plus fréquent de
la journée d'un commercial ; il doit être le plus facile à
viser, au doigt comme à la souris.
============================================================= */
.sp-appel {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
margin-bottom: 4px;
}
.sp-appel .btn {
flex: 1 1 auto; min-width: 128px; min-height: 46px;
font-size: 14px; font-weight: 600;
border-color: var(--sp-ab, var(--n-bord));
color: var(--sp-ac, var(--n-tx));
background: color-mix(in srgb, var(--sp-ac, transparent) 8%, rgba(22,32,44,.9));
transition: transform var(--m-court) var(--m-doux), border-color var(--m-court) var(--m-doux);
}
.sp-appel .btn:hover:not(:disabled) {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--sp-ac, var(--n-bord)) 70%, transparent);
}
.sp-appel .btn:disabled { opacity: .45; }
/* Une couleur par résultat, la même que celle de l'étape où il
mène. Le commercial apprend la correspondance sans qu'on la lui
explique : « Devis » est cyan ici et cyan dans le rail. */
.sp-b-injoignable { --sp-ac: var(--n-tx-2); --sp-ab: var(--n-bord); }
.sp-b-relance { --sp-ac: var(--n-violet); --sp-ab: rgba(139,92,246,.4); }
.sp-b-rdv { --sp-ac: var(--n-or); --sp-ab: rgba(242,185,64,.42); }
.sp-b-devis { --sp-ac: #7EEAFF; --sp-ab: rgba(126,234,255,.4); }
.sp-b-pasintress { --sp-ac: var(--n-tx-3); --sp-ab: var(--n-bord); }
/* Le chemin long n'a pas disparu : il a cessé d'être obligatoire.
Il reste à portée, en lien discret, pour les fois où la
conversation a vraiment donné quelque chose. */
.sp-detailler {
flex: 0 0 auto; padding: 0 6px;
color: var(--n-tx-3); font-size: 12.5px; text-decoration: none;
border-bottom: 1px solid transparent;
}
.sp-detailler:hover { color: var(--n-cyan); border-bottom-color: currentColor; }
@media (max-width: 560px) {
.sp-appel .btn { flex: 1 1 46%; min-width: 0; }
.sp-detailler { flex: 1 1 100%; padding-top: 4px; }
}
/* =============================================================
33. « À FAIRE » — LA FILE DE CE QUI EST DÉJÀ PRÉPARÉ
8 septembre 2026
⚠ CET ÉCRAN A REMPLACÉ UN TABLEAU DE BORD.
La première version affichait « 3 leads dorment », « rien
envoyé », « aucun projet ouvert ». La Direction : « 3awdty nafss
l'erreur li kan 3andi ana — khassni solution machi problem ».
Signaler un travail non fait ne le fait pas : ça le déplace sur
celui qui lit l'écran.
D'où la forme de ces cartes : le texte préparé occupe le centre,
pas un chiffre rouge. Ce qu'on lit, c'est la réparation — le
défaut n'est plus qu'une ligne de justification, en petit.
============================================================= */
.sp-intro-prep { margin: 0 0 16px; color: var(--n-tx-2); font-size: 13.5px; max-width: 76ch; }
.sp-intro-prep b { color: var(--n-tx); }
.sp-carte-action {
margin-bottom: 10px; padding: 15px 17px;
border: 1px solid var(--n-bord); border-left: 2px solid var(--sp-tn, var(--n-bord));
border-radius: 12px; background: rgba(17,26,37,.7);
}
.sp-ca-tete { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sp-ca-type {
flex: none; padding: 4px 10px; border-radius: 6px;
font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--sp-tn, var(--n-tx-2));
border: 1px solid color-mix(in srgb, var(--sp-tn, var(--n-bord)) 60%, transparent);
}
.sp-ca-titre { flex: 1 1 220px; }
.sp-ca-titre b { display: block; font-size: 15.5px; letter-spacing: -.02em; }
.sp-ca-raison { display: block; margin-top: 2px; color: var(--n-tx-3); font-size: 12px; }
.sp-ca-qui { color: var(--n-tx-3); font-size: 12px; font-family: var(--f-mono); }
/* Le texte préparé. C'est lui le sujet de la carte : il prend la
place, il se lit d'un coup, et il est modifiable sur place. */
.sp-ca-texte, .sp-ca-doc {
margin-top: 12px; padding: 13px 15px; border-radius: 10px;
font-size: 13px; line-height: 1.6; white-space: pre-wrap;
color: var(--n-tx-2);
background: rgba(255,255,255,.022); border: 1px solid rgba(120,150,190,.12);
}
.sp-ca-doc {
color: #D3C6F5;
background: rgba(139,92,246,.06); border-color: rgba(139,92,246,.22);
}
.sp-editable {
outline: none; color: var(--n-tx);
border-color: rgba(18,217,255,.5); background: rgba(18,217,255,.05);
}
.sp-ca-pied { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.sp-ca-plus { margin-left: auto; opacity: .7; }
/* ── CE QUI S'EST FAIT TOUT SEUL */
.sp-auto { list-style: none; margin: 0; padding: 0; }
.sp-auto li {
margin-bottom: 10px; padding: 12px 14px 12px 15px;
border-left: 2px solid rgba(36,217,129,.45); border-radius: 0 9px 9px 0;
background: rgba(36,217,129,.035);
}
.sp-auto b { display: block; font-size: 14px; letter-spacing: -.015em; }
.sp-af-quoi { display: block; margin-top: 4px; color: var(--n-tx-2); font-size: 12.5px; line-height: 1.55; }
/* ── LA RÈGLE DE L'ÉTAPE SÉLECTIONNÉE
Elle n'existe que pendant qu'on regarde cette étape. Une
explication affichée en permanence n'est plus lue au bout de
deux jours. */
.sp-regle-etape {
margin: 12px 0 0; padding: 11px 14px; border-radius: 10px;
border: 1px solid rgba(18,217,255,.24); border-left: 2px solid var(--n-cyan);
background: rgba(18,217,255,.05); color: #9FE8FA;
font-size: 12.5px; line-height: 1.55;
}
.sp-regle-etape::before {
content: "Se déclenche tout seul — "; color: var(--n-tx-3);
}
/* Le bouton « Il a signé » une fois armé : il ne demande plus, il
confirme. La couleur change pour que personne ne clique deux
fois sans le voir. */
.sp-arme {
border-color: rgba(36,217,129,.55) !important;
background: rgba(36,217,129,.12) !important;
color: #8FE9BC !important;
}
/* Ce qui reste derrière la file plafonnée. Discret, mais dit :
une file qui cache son reste ferait croire que tout est fait. */
.sp-reste {
margin: 14px 0 0; padding: 12px 15px; border-radius: 10px;
border: 1px solid var(--n-bord); background: rgba(255,255,255,.02);
color: var(--n-tx-3); font-size: 13px;
}
.sp-reste b { color: var(--n-tx); }
/* =============================================================
34. LA MATINÉE, LE CANAL, ET CE QUI RÉPOND AU SURVOL
8 septembre 2026
Quatre demandes de la Direction, dans le même message :
la répartition du matin, savoir où part le message, voir que
deux fiches portent le même nom — et « ila w9aft b souris
tkbar l'image bach tban l'info ou ay haja tkon clicable avec
les pop up ou lights ».
⚠ LE SURVOL AJOUTE, IL NE DÉPLACE PAS. Une carte qui grandit
au survol pousse ses voisines et fait sauter la file sous le
curseur. Tout ce qui grossit ici le fait dans son propre plan
— `transform`, jamais une largeur ni une marge — et rien ne
dépend du survol pour être lisible : le tactile n'en a pas.
============================================================= */
/* ── LA RÉPARTITION DU MATIN ──────────────────────────────── */
.sp-filtre-actif {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap; margin: 12px 0 0; padding: 10px 14px; border-radius: 10px;
border: 1px solid rgba(242,185,64,.28); border-left: 2px solid var(--n-or, #F2B940);
background: rgba(242,185,64,.05); color: #F4D89A; font-size: 12.5px;
}
.sp-reporte {
margin: 14px 0 0; padding: 11px 15px; border-radius: 10px;
border: 1px dashed var(--n-bord); color: var(--n-tx-3); font-size: 12.5px;
}
.sp-reporte b { color: var(--n-tx-2); }
/* ── OÙ PART LE MESSAGE ───────────────────────────────────
Le bouton disait « Envoyer » sans jamais nommer le canal. Cette
ligne le nomme, avec le numéro en clair, et se colore en rouge
quand WhatsApp ne pourra pas le joindre — l'échec se lit AVANT
le clic, pas après. */
.sp-ca-vers {
display: inline-flex; align-items: baseline; gap: 3px;
margin-right: auto; padding: 5px 10px; border-radius: 999px;
border: 1px solid rgba(36,217,129,.3); background: rgba(36,217,129,.06);
font-size: 11.5px; letter-spacing: .01em;
}
.sp-ca-vers b { color: #7BE3AE; font-weight: 700; }
.sp-ca-vers span { color: var(--n-tx-3); font-variant-numeric: tabular-nums; }
.sp-ca-vers-ko {
border-color: rgba(255,107,107,.34); background: rgba(255,107,107,.07);
}
.sp-ca-vers-ko b { color: #FFA79C; }
/* ── LES FICHES QUI PORTENT LE MÊME NOM ───────────────────── */
.sp-ca-jumelles {
margin: 0 0 10px; padding: 9px 13px; border-radius: 9px;
border: 1px solid rgba(139,92,246,.24); background: rgba(139,92,246,.05);
color: #CDBCF7; font-size: 12px; line-height: 1.55;
}
.sp-ca-jum-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sp-jum {
padding: 4px 10px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(139,92,246,.32); background: rgba(139,92,246,.08);
color: #DDD1FF; font: inherit; font-size: 11.5px;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.sp-jum:hover {
transform: translateY(-1px);
border-color: rgba(139,92,246,.6);
box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}
/* La carte reportée s'en va au lieu de disparaître : le geste se
voit, donc il se comprend. */
.sp-ca-part {
opacity: .25; transform: translateX(14px);
transition: opacity .18s ease, transform .18s ease;
}
/* ── CE QUI RÉPOND AU SURVOL ──────────────────────────────── */
.sp-carte-action,
.sp-carte,
.sp-tuile,
.sp-maillon {
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sp-carte-action:hover,
.sp-carte:hover {
transform: translateY(-2px);
border-color: rgba(120,150,190,.34);
box-shadow: 0 22px 46px -30px #000, 0 0 0 1px rgba(255,255,255,.03);
}
.sp-tuile:hover,
.sp-maillon:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px -26px #000;
}
/* L'initiale d'un commercial grossit sous le curseur et s'allume
à sa couleur : c'est la seule « image » de cet écran, et c'est
elle qu'on cherche des yeux quand on parcourt l'équipe. */
.sp-rond { transition: transform .2s ease, box-shadow .2s ease; }
.sp-carte:hover .sp-rond {
transform: scale(1.12);
box-shadow: 0 0 0 4px rgba(139,92,246,.14), 0 0 26px rgba(139,92,246,.22);
}
/* Les lignes du pipeline : le survol éclaire la ligne entière,
pour qu'on sache laquelle on va ouvrir avant de cliquer. */
.sp-table tbody tr { transition: background .15s ease, box-shadow .15s ease; }
.sp-table tbody tr:hover {
background: rgba(255,255,255,.035);
box-shadow: inset 2px 0 0 var(--n-cyan, #12D9FF);
}
/* ⚠ ET RIEN DE TOUT CELA POUR QUI A DEMANDÉ LE CALME.
`prefers-reduced-motion` n'est pas une préférence esthétique :
c'est une consigne médicale pour une partie des gens. */
@media (prefers-reduced-motion: reduce) {
.sp-carte-action, .sp-carte, .sp-tuile, .sp-maillon,
.sp-rond, .sp-jum, .sp-ca-part, .sp-table tbody tr {
transition: none !important; transform: none !important;
}
}
/* ── LA CARTE DU TABLEAU DE BORD S'OUVRE EN ENTIER ─────────
« spider makadkholch lia mn deashbord » : les deux liens de la
carte pointaient vers des écrans retirés du menu. Ils sont
corrigés, et la carte elle-même devient une porte.
⚠ LE LIEN DE FOND PASSE SOUS LES LIENS D'ACTION. `.universe-card
> *` pose z-index 2 sur tous les enfants ; sans les deux règles
qui suivent, le fond recouvrirait les boutons et les trois
destinations n'en feraient plus qu'une. */
.universe-fond {
position: absolute; inset: 0; z-index: 1;
border-radius: inherit; text-decoration: none;
}
.universe-card .universe-actions { z-index: 3; }
.universe-ouvrable { cursor: pointer; }
.universe-fond:focus-visible {
outline: 2px solid var(--n-cyan, #12D9FF); outline-offset: -3px;
}
/* ── LA FICHE : DEUX CANAUX ET UN RESPONSABLE ─────────────── */
.sp-fiche-canaux { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.sp-canal {
display: flex; flex-direction: column; gap: 2px;
padding: 9px 14px; border-radius: 10px; text-decoration: none;
border: 1px solid var(--n-bord); background: rgba(255,255,255,.022);
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.sp-canal b { font-size: 13px; letter-spacing: -.01em; color: var(--n-tx); }
.sp-canal span { font-size: 11.5px; color: var(--n-tx-3); font-variant-numeric: tabular-nums; }
.sp-canal-tel:hover {
transform: translateY(-2px); border-color: rgba(18,217,255,.5);
box-shadow: 0 0 0 3px rgba(18,217,255,.1);
}
.sp-canal-wa b { color: #7BE3AE; }
.sp-canal-wa:hover {
transform: translateY(-2px); border-color: rgba(36,217,129,.5);
box-shadow: 0 0 0 3px rgba(36,217,129,.1);
}
/* Un canal impossible n'est pas un bouton : il ne réagit pas au
survol, parce qu'il n'y a rien à cliquer. */
.sp-canal-ko { border-style: dashed; opacity: .72; cursor: default; }
.sp-canal-ko b { color: #FFA79C; }
.sp-fiche-confie {
display: flex; align-items: center; gap: 10px; margin: 12px 0 2px;
font-size: 12.5px; color: var(--n-tx-3);
}
.sp-confie {
flex: 1; min-width: 0; padding: 8px 11px; border-radius: 9px;
border: 1px solid var(--n-bord); background: #0B141E; color: var(--n-tx);
font: inherit; font-size: 12.5px;
}
.sp-confie:focus-visible { outline: 2px solid var(--n-cyan, #12D9FF); outline-offset: 1px; }
.sp-confie:disabled { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
.sp-canal { transition: none !important; transform: none !important; }
}
/* =============================================================
35. FAIRE SORTIR LE DOCUMENT
8 septembre 2026
La douleur d'origine, dite par la Direction : « les mini
présentations li kanw3edhom bihom makanssiftomch » — les
présentations promises ne partent jamais.
Une feuille qui se dessine à l'écran et s'arrête là ne règle
rien : Word le faisait déjà. Ce qui manquait, ce sont les deux
gestes d'après — l'avoir en fichier, et l'envoyer en laissant
une trace sur la fiche.
⚠ AUCUNE BIBLIOTHÈQUE PDF. La feuille EXISTE DÉJÀ, mise en
page, dans `.sp-feuille`. Embarquer un générateur PDF
reviendrait à la redessiner une seconde fois, dans un langage
qui ne connaît ni le catalogue ni la marque. L'impression du
navigateur sait fabriquer le fichier ; il suffit de lui donner
la feuille SEULE.
============================================================= */
.sp-sortie { margin-top: 16px; align-items: center; }
.sp-sortie-vers {
margin-left: auto; color: var(--n-tx-3); font-size: 11.5px;
font-variant-numeric: tabular-nums;
}
.sp-sortie-manque { margin: 14px 0 0; }
/* ── LA FEUILLE SEULE, À L'IMPRESSION
`visibility` plutôt que `display` : masquer par `display` ferait
s'effondrer la mise en page autour de la feuille, et elle
sortirait décalée. `visibility: hidden` garde la place, et la
feuille remonte en haut de la page imprimée.
⚠ RIEN N'EST MASQUÉ À L'INTÉRIEUR DE LA FEUILLE, y compris les
mentions « le besoin n'est pas encore écrit ». Cacher un manque
à l'impression laisserait partir un document troué sans que
personne ne le voie — c'est le bouton qui refuse d'imprimer
tant qu'il manque quelque chose, pas la feuille qui triche. */
@media print {
@page { margin: 14mm; }
html, body { background: #FFF !important; }
body * { visibility: hidden !important; }
.sp-feuille, .sp-feuille * { visibility: visible !important; }
.sp-feuille {
position: absolute; left: 0; top: 0; width: 100%;
padding: 0; border-radius: 0; box-shadow: none;
background: #FFF; color: #000;
}
.sp-feuille h5 { color: #4C1D95; }
.sp-pied { color: #4B5563; }
}
/* Les deux portes du document, depuis n'importe quelle fiche.
Retaper un nom déjà présent dans la fiche est exactement le
travail que cet écran existe pour supprimer. */
.sp-fiche-doc { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 2px; }
/* =============================================================
36. CERCLE 25 — LE MÊME ÉCRAN, L'AUTRE MOITIÉ DU STUDIO
9 septembre 2026
La Direction : « aji bach nçado cercle b7al spider ».
⚠ CET ÉCRAN RÉUTILISE LES CLASSES `.sp-*`, ET C'EST VOULU.
Elles ne sont plus le vocabulaire de SPIDER : ce sont celles de
la file d'actions de l'OS — tuiles, cartes, chaîne, tableau,
panneaux. Les recopier sous un préfixe `c25-` aurait donné
soixante règles jumelles qui divergent au premier ajustement,
et deux écrans qui se ressemblent de moins en moins alors qu'on
les a demandés identiques.
Ne sont définies ici que les DEUX choses qui diffèrent
réellement : cinq étapes au lieu de huit, et les couleurs du
circuit de production.
============================================================= */
.c25-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 1100px) { .c25-rail { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .c25-rail { grid-template-columns: repeat(2, 1fr); } }
/* ⚠ LES VARIANTES `-tx`, PAS LES COULEURS BRUTES.
`--c-preprod` (#8B5CF6) et `--c-production` (#3B82F6) tombent
sous 4,5:1 sur le fond sombre : lisibles en aplat, pas en
texte. Les jetons `-tx` existent pour ça, avec le contraste
déjà corrigé dans tokens.css. Prendre la couleur brute ici
aurait rendu deux étapes sur cinq difficiles à lire — celles
du milieu du circuit, justement là où les projets s'arrêtent. */
.c25-e-commercial { --sp-c: var(--c-commercial-tx); }
.c25-e-preproduction { --sp-c: var(--c-preprod-tx); }
.c25-e-production { --sp-c: var(--c-production-tx); }
.c25-e-postproduction { --sp-c: var(--c-postprod-tx); }
.c25-e-livraison { --sp-c: var(--c-livraison-tx); }
/* Le rang de liens vers les listes par étape. Discret : on ne
remet pas neuf entrées de menu en bas de l'écran. */
.c25-listes {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
margin: 14px 0 0; color: var(--n-tx-3); font-size: 12px;
}
/* =============================================================
37. LA MISSION DU JOUR — UNE FICHE À LA FOIS
9 septembre 2026
Direction : « ma3andoch l7a9 ydouz l next client ila makamlach
m3ah ». L'écran ne montre donc qu'une carte, et la file entière
se lit d'un coup d'œil sur une jauge : on doit voir la fin,
sinon on n'entre pas dedans.
============================================================= */
.sp-mission-jauge {
display: flex; gap: 3px; flex-wrap: wrap; margin: 0 0 14px;
}
.sp-mission-jauge i {
flex: 1 1 6px; min-width: 5px; height: 6px; border-radius: 3px;
background: rgba(120,150,190,.16);
}
.sp-mission-jauge i.fait { background: var(--n-vert); }
.sp-mission-jauge i.ici { background: var(--n-or); box-shadow: 0 0 10px rgba(242,185,64,.5); }
/* La carte de mission est seule à l'écran : elle peut respirer. */
.sp-mission { margin-top: 0; }
/* Ce qui s'est déjà dit avec lui. Trois lignes, en une seule
rangée : c'est un rappel avant de décrocher, pas un dossier. */
.sp-mission-hist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sp-mission-trace {
padding: 4px 10px; border-radius: 999px; font-size: 11.5px;
border: 1px solid var(--n-bord); background: rgba(255,255,255,.02);
color: var(--n-tx-2);
}
/* ── PASSER COÛTE UNE PHRASE
Le champ est large et le bouton discret : l'ordre de lecture
dit ce qu'on attend. Écrire d'abord, passer ensuite. */
.sp-mission-passer {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--n-bord);
}
.sp-mission-motif {
flex: 1 1 320px; min-width: 0; padding: 9px 12px; border-radius: 9px;
border: 1px solid var(--n-bord); background: #0B141E; color: var(--n-tx);
font: inherit; font-size: 12.5px;
}
.sp-mission-motif::placeholder { color: var(--n-tx-3); }
.sp-mission-motif:focus-visible { outline: 2px solid var(--n-cyan, #12D9FF); outline-offset: 1px; }
/* =============================================================
38. CERCLE 25 — LE DOSSIER, ET SON ESPACE
9 septembre 2026
La Direction : « badel lia had cercle 25 b hada li darty », et
« mhm ykon zwin ou wa3r bzaf, y3tina experience f khedma ou f
visuel ».
⚠ LES COUVERTURES SONT DE VRAIES IMAGES. `affiche()` rend la
couverture du projet si elle existe, et en dessine une sinon —
l'OS savait déjà le faire, on ne le refait pas. Ce qui est
ajouté ici, c'est le TRAITEMENT : un cadre qui recadre en 16:9
ou en 9:16, un voile bas pour que le texte tienne sur n'importe
quelle image, et un agrandissement au survol.
============================================================= */
/* ── LE CADRE CINÉMA ──────────────────────────────────────── */
.c25-cadre {
position: relative; display: block; overflow: hidden;
border-radius: 12px; aspect-ratio: 16 / 9; isolation: isolate;
background: linear-gradient(160deg, #16202C, #070C12);
}
.c25-cadre-9 { aspect-ratio: 9 / 16; }
.c25-cadre-43 { aspect-ratio: 4 / 3; }
.c25-cadre-mini { width: 132px; flex: none; }
.c25-cadre img,
.c25-cadre .affiche {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 420ms var(--m-doux, cubic-bezier(.22,.61,.36,1)),
filter 420ms var(--m-doux, cubic-bezier(.22,.61,.36,1));
}
/* Le voile bas : sans lui, le texte se pose sur n'importe quoi. */
.c25-voile {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(to top, rgba(4,7,11,.94) 0%, rgba(4,7,11,.5) 34%, transparent 66%),
radial-gradient(120% 100% at 50% 45%, transparent 42%, rgba(0,0,0,.42));
}
.c25-etape-puce, .c25-code {
position: absolute; z-index: 3; top: 10px; left: 11px;
padding: 4px 9px; border-radius: 7px;
font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.94);
background: rgba(5,8,13,.55); backdrop-filter: blur(7px);
border: 1px solid rgba(255,255,255,.14);
}
.c25-retard {
position: absolute; z-index: 3; top: 10px; right: 11px;
padding: 4px 9px; border-radius: 7px;
font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
color: #FFC9C4; background: rgba(255,77,85,.22); backdrop-filter: blur(7px);
border: 1px solid rgba(255,77,85,.45);
}
.c25-bande {
position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px;
background: var(--dep, var(--n-bord));
}
/* ── LE MUR DES DOSSIERS ──────────────────────────────────── */
.c25-mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 14px; }
.c25-mur-petit { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 11px; }
.c25-carte {
display: block; width: 100%; padding: 0; text-align: left; color: inherit; font: inherit;
cursor: pointer; overflow: hidden; border-radius: 14px;
border: 1px solid var(--n-bord); background: rgba(17,26,37,.7);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
transition: transform .22s var(--m-doux), border-color .22s var(--m-doux), box-shadow .22s var(--m-doux);
}
.c25-carte:hover { transform: translateY(-4px); border-color: var(--n-bord-fort); box-shadow: 0 30px 56px -32px #000; }
/* ⚠ L'IMAGE GRANDIT, LA CARTE NE BOUGE PAS. Un `scale` sur la
carte ferait sauter la grille entière au survol ; sur l'image,
il ne déborde pas du cadre, qui est en `overflow:hidden`. */
.c25-carte:hover .c25-cadre img { transform: scale(1.07); filter: saturate(1.12) brightness(1.06); }
.c25-carte:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 2px; }
.c25-carte-bas { display: block; padding: 12px 14px; }
.c25-carte-bas b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; }
.c25-carte-cli { display: block; margin-top: 3px; font-size: 12.5px; color: var(--n-tx-2); }
.c25-carte-qui { display: block; margin-top: 7px; font-family: var(--f-mono); font-size: 10.5px; color: var(--n-tx-3); }
/* ── LE FIL, L'EN-TÊTE, LES REPÈRES ───────────────────────── */
.c25-fil {
display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px;
font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--n-tx-3);
}
.c25-fil-l {
padding: 5px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit;
border: 1px solid var(--n-bord); background: rgba(255,255,255,.02);
transition: color var(--m-court) var(--m-doux), border-color var(--m-court) var(--m-doux);
}
.c25-fil-l:hover { color: var(--n-tx); border-color: var(--n-bord-fort); }
.c25-fil i { font-style: normal; opacity: .5; }
.c25-fil b { color: var(--n-or); }
.c25-dossier { position: relative; padding-bottom: 22px; margin-bottom: 16px; }
.c25-dossier::after {
content: ""; position: absolute; left: 0; bottom: 0; width: 132px; height: 2px;
background: linear-gradient(90deg, var(--n-or), transparent);
}
.c25-kick {
margin: 0 0 6px; font-family: var(--f-mono); font-size: 11px; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--n-or);
}
.c25-dossier h1 {
margin: 0 0 12px; font-size: clamp(30px, 4.6vw, 42px); font-weight: 800;
letter-spacing: -.04em; line-height: 1.03;
}
.c25-faits { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; font-size: 13.5px; color: var(--n-tx-2); }
.c25-faits b { color: var(--n-tx); font-weight: 600; }
.c25-faits i { font-style: normal; }
.c25-selecteur { margin-left: auto; }
.c25-select {
padding: 9px 13px; border-radius: 10px; border: 1px solid var(--n-bord);
background: #070C13; color: var(--n-tx); font: 600 13px var(--f-body); max-width: 320px;
}
.c25-select:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 1px; }
.c25-reperes { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.c25-repere {
display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 11px;
border: 1px solid var(--n-bord); border-left: 2px solid var(--tn, var(--n-bord));
background: rgba(255,255,255,.022);
}
.c25-repere s {
text-decoration: none; font-family: var(--f-mono); font-size: 9px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: var(--n-tx-3);
}
.c25-repere b { font-size: 13.5px; font-weight: 600; letter-spacing: -.015em; color: var(--tn, var(--n-tx)); }
.c25-r-cyan { --tn: var(--n-cyan); } .c25-r-rouge { --tn: var(--n-rouge); }
.c25-r-or { --tn: var(--n-or); } .c25-r-vert { --tn: var(--n-vert); }
/* ── LA CHAÎNE ────────────────────────────────────────────── */
.c25-chaine { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 14px; }
@media (max-width: 860px) { .c25-chaine { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.c25-maillon {
position: relative; text-align: left; cursor: pointer; font: inherit; color: inherit;
padding: 15px 15px 15px 19px; border: 1px solid var(--n-bord); background: rgba(13,20,29,.7);
transition: background var(--m-court) var(--m-doux);
}
.c25-maillon + .c25-maillon { border-left: 0; }
.c25-chaine .c25-maillon:first-child { border-radius: 14px 0 0 14px; }
.c25-chaine .c25-maillon:last-child { border-radius: 0 14px 14px 0; }
@media (max-width: 860px) {
.c25-maillon,
.c25-chaine .c25-maillon:first-child,
.c25-chaine .c25-maillon:last-child { border-radius: 12px; border-left: 1px solid var(--n-bord); }
}
.c25-maillon:hover { background: rgba(20,30,43,.8); }
.c25-maillon:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: -2px; z-index: 3; }
.c25-maillon::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--dep, rgba(120,150,190,.18));
}
.c25-maillon .c25-num { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--n-tx-3); }
.c25-maillon .c25-mnom { display: block; margin-top: 7px; font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; }
.c25-maillon .c25-etat { display: block; margin-top: 5px; font-size: 11.5px; color: var(--n-tx-3); }
.c25-m-fait .c25-num, .c25-m-fait .c25-etat { color: var(--n-vert); }
.c25-m-ici { background: rgba(242,185,64,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.c25-m-ici .c25-num, .c25-m-ici .c25-etat { color: var(--n-or); }
.c25-m-ici .c25-mnom { color: #fff; }
/* Un seul élément respire à l'écran : celui qui dit « c'est ici ». */
.c25-m-ici::before { animation: os25-souffle 6s ease-in-out infinite; }
.c25-m-suite { opacity: .5; }
.c25-maillon[aria-selected="true"] {
box-shadow: inset 0 0 0 1px rgba(139,92,246,.4);
background: linear-gradient(180deg, rgba(42,29,77,.5), rgba(21,28,41,.5)); z-index: 2;
}
/* ── LA PORTE ─────────────────────────────────────────────── */
.c25-porte {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 17px 20px;
border-radius: 14px; border: 1px solid var(--n-bord); background: rgba(13,20,29,.7); margin-bottom: 12px;
}
.c25-porte.prete { border-color: rgba(36,217,129,.34); background: rgba(36,217,129,.05); }
.c25-porte-txt { flex: 1; min-width: 240px; font-size: 13.5px; line-height: 1.6; color: var(--n-tx-2); }
.c25-porte-txt b { color: var(--n-tx); }
.c25-porte.prete .c25-porte-txt b { color: #8FE9BC; }
/* ── LES CHAMPS D'UNE ÉTAPE ───────────────────────────────── */
.c25-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.c25-champ {
margin: 0; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--n-bord);
border-left: 2px solid rgba(36,217,129,.4); background: rgba(255,255,255,.022);
}
.c25-champ.c25-vide { border-left-color: var(--n-rouge); background: rgba(255,77,85,.04); }
.c25-champ dt {
font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--n-tx-3);
}
.c25-champ dd { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.c25-champ.c25-vide dd { color: #FFA9AE; font-style: italic; }
/* ── LE TABLEAU DE PRÉ-PRODUCTION ─────────────────────────── */
.c25-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(244px, 1fr)); gap: 13px; align-items: start; }
.c25-colonne { border: 1px solid var(--n-bord); border-radius: 14px; background: rgba(9,14,21,.55); padding: 12px; }
.c25-col-tete { display: flex; align-items: center; gap: 9px; padding: 4px 6px 12px; }
.c25-col-tete b { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--n-tx-2); }
.c25-col-pt { width: 7px; height: 7px; border-radius: 50%; background: var(--tn, var(--n-tx-3)); flex: none; }
.c25-col-n { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--n-tx-3); }
.c25-c-violet { --tn: var(--n-violet); } .c25-c-cyan { --tn: var(--n-cyan); }
.c25-c-or { --tn: var(--n-or); } .c25-c-vert { --tn: var(--n-vert); }
.c25-fiche {
display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
border: 1px solid var(--n-bord); border-left: 2px solid var(--tn, var(--n-bord)); border-radius: 12px;
background: rgba(17,26,37,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
padding: 13px 14px; margin-bottom: 9px;
transition: transform .22s var(--m-doux), border-color .22s var(--m-doux), box-shadow .22s var(--m-doux);
}
.c25-fiche:hover { transform: translateY(-2px); border-color: var(--n-bord-fort); box-shadow: 0 20px 40px -30px #000; }
.c25-fiche:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 2px; }
.c25-fiche-vide { border-left-color: var(--n-rouge); }
.c25-fiche-tete { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.c25-fiche-tete b { font-size: 14px; font-weight: 600; letter-spacing: -.015em; flex: 1; }
.c25-p-ok { --sp-c: var(--n-vert); } .c25-p-vide { --sp-c: var(--n-rouge); }
.c25-doc { border-radius: 9px; padding: 11px 12px; background: rgba(255,255,255,.022); border: 1px solid rgba(120,150,190,.1); }
.c25-doc i { display: block; height: 5px; border-radius: 3px; background: rgba(135,146,165,.26); margin-bottom: 6px; }
.c25-doc i:nth-child(2) { width: 92%; }
.c25-doc i:nth-child(3) { width: 78%; }
.c25-doc i:last-child { margin-bottom: 0; width: 54%; }
.c25-doc-vide i { background: rgba(255,77,85,.16); }
.c25-doc-txt { margin: 9px 0 0; font-size: 12.5px; color: var(--n-tx-2); line-height: 1.55; }
/* ── LES VIDÉOS ───────────────────────────────────────────── */
.c25-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 13px; }
.c25-video {
display: block; width: 100%; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer;
border: 1px solid var(--n-bord); border-radius: 13px; overflow: hidden; background: rgba(17,26,37,.7);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
transition: transform .22s var(--m-doux), border-color .22s var(--m-doux), box-shadow .22s var(--m-doux);
}
.c25-video:hover { transform: translateY(-4px); border-color: var(--n-bord-fort); box-shadow: 0 28px 52px -30px #000; }
.c25-video:hover .c25-cadre img { transform: scale(1.07); filter: saturate(1.12) brightness(1.06); }
.c25-video:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 2px; }
.c25-video-bas { display: block; padding: 11px 13px; }
.c25-video-bas b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.015em; }
.c25-video-meta { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 10.5px; color: var(--n-tx-3); }
.c25-valider {
display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start;
border: 1px solid var(--n-bord); border-left: 2px solid var(--n-or); border-radius: 13px;
background: rgba(17,26,37,.7); padding: 15px; margin-bottom: 11px;
}
@media (max-width: 620px) { .c25-valider { grid-template-columns: 1fr; } }
.c25-valider h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.025em; }
.c25-valider-meta { margin: 5px 0 12px; font-family: var(--f-mono); font-size: 10.5px; color: var(--n-tx-3); }
.c25-mot {
padding: 12px 15px; border-radius: 11px; margin-bottom: 12px; border: 1px solid rgba(120,150,190,.12);
background: rgba(255,255,255,.022); font-size: 13.5px; color: var(--n-tx-2); line-height: 1.6;
}
.c25-motifs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.c25-motifs[hidden] { display: none; }
.c25-motif {
padding: 7px 13px; border-radius: 999px; cursor: pointer; border: 1px solid var(--n-bord);
background: transparent; color: var(--n-tx-2); font: 500 12.5px/1 var(--f-body);
transition: border-color var(--m-court) var(--m-doux), color var(--m-court) var(--m-doux),
background var(--m-court) var(--m-doux);
}
.c25-motif:hover { border-color: var(--n-bord-fort); color: var(--n-tx); }
.c25-motif[aria-pressed="true"] { border-color: rgba(255,77,85,.5); background: rgba(255,77,85,.12); color: #FFA9AE; }
/* ══════════ L'ESPACE ══════════ */
.c25-outils {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px;
border: 1px solid var(--n-bord); border-radius: 14px; background: rgba(12,19,28,.8); margin-bottom: 12px;
}
.c25-outil {
display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px;
cursor: pointer; border: 1px solid var(--n-bord); background: var(--n-surface-h); color: var(--n-tx-2);
font: 600 12.5px/1 var(--f-body);
transition: border-color var(--m-court) var(--m-doux), color var(--m-court) var(--m-doux),
background var(--m-court) var(--m-doux);
}
.c25-outil:hover { border-color: var(--n-bord-fort); color: var(--n-tx); background: rgba(255,255,255,.045); }
.c25-outil:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 2px; }
.c25-outil s { width: 9px; height: 9px; border-radius: 2px; background: var(--tn, var(--n-tx-3)); flex: none; text-decoration: none; }
.c25-o-or { --tn: var(--n-or); } .c25-o-cyan { --tn: var(--n-cyan); }
.c25-o-violet { --tn: var(--n-violet); } .c25-o-vert { --tn: var(--n-vert); }
.c25-outils-qui { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--n-tx-3); }
.c25-legende { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; font-size: 12px; color: var(--n-tx-3); }
.c25-legende span { display: inline-flex; align-items: center; gap: 7px; }
.c25-legende s { width: 9px; height: 9px; border-radius: 3px; text-decoration: none; flex: none; }
.c25-lg-os { background: rgba(18,217,255,.55); }
.c25-lg-main { background: rgba(242,185,64,.55); }
/* ⚠ LE MUR VIT DANS UNE FENÊTRE, ET C'EST CE QUI LE REND
UTILISABLE SUR UN TÉLÉPHONE. Des objets posés à des
coordonnées fixes dans une boîte en `overflow:hidden` sont hors
de portée dès que l'écran est plus étroit qu'eux. Ici on
déplace le mur au doigt et on le met à l'échelle : rien n'est
inatteignable. */
.c25-toile {
position: relative; height: min(70vh, 700px); overflow: hidden; touch-action: none; cursor: grab;
border: 1px solid var(--n-bord); border-radius: 16px;
background-color: #070C12;
background-image: radial-gradient(rgba(120,150,190,.16) 1px, transparent 1px);
background-size: calc(26px * var(--z, 1)) calc(26px * var(--z, 1));
background-position: var(--px, 0px) var(--py, 0px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.c25-toile.pan { cursor: grabbing; }
.c25-monde {
position: absolute; left: 0; top: 0; width: 1120px; height: 760px; transform-origin: 0 0;
transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--z, 1));
}
.c25-liens { position: absolute; left: 0; top: 0; width: 1120px; height: 760px; z-index: 1; pointer-events: none; }
.c25-lien { fill: none; stroke: rgba(120,150,190,.4); stroke-width: 1.5; stroke-dasharray: 6 7; }
.c25-zoom {
position: absolute; right: 12px; bottom: 12px; z-index: 20; display: flex; gap: 6px;
padding: 6px; border-radius: 12px; border: 1px solid var(--n-bord);
background: rgba(8,13,20,.9); backdrop-filter: blur(8px);
}
.c25-zoom button {
width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--n-bord);
background: var(--n-surface-h); color: var(--n-tx); font: 700 15px/1 var(--f-body);
cursor: pointer; display: grid; place-items: center;
}
.c25-zoom button.large { width: auto; padding: 0 12px; font-size: 11.5px; font-weight: 600; }
.c25-zoom button:hover { border-color: var(--n-bord-fort); background: rgba(255,255,255,.05); }
.c25-zoom button:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 2px; }
.c25-objet {
position: absolute; left: 0; top: 0; z-index: 2; cursor: grab; touch-action: none;
border-radius: 12px; transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
transition: box-shadow var(--m-court) var(--m-doux);
}
.c25-objet:active { cursor: grabbing; }
.c25-objet.tenu { z-index: 9; box-shadow: 0 30px 60px -24px #000, 0 0 0 1px rgba(242,185,64,.45); }
.c25-objet:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 3px; }
/* La note : elle est de quelqu'un, et elle le dit. */
.c25-t-note {
width: 190px; padding: 14px 15px 12px;
background: linear-gradient(165deg, rgba(242,185,64,.22), rgba(242,185,64,.09));
border: 1px solid rgba(242,185,64,.34); box-shadow: 0 18px 34px -22px #000;
}
.c25-t-note p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #FBE7B8; }
.c25-t-photo { width: 178px; overflow: hidden; border: 1px solid var(--n-bord-fort); box-shadow: 0 20px 38px -24px #000; background: #070C12; }
.c25-t-doc {
width: 200px; padding: 13px 14px; background: rgba(17,26,37,.94);
border: 1px solid var(--n-bord); border-left: 2px solid var(--n-violet); box-shadow: 0 20px 38px -24px #000;
}
.c25-t-doc b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 9px; }
.c25-t-croquis { width: 230px; padding: 12px; background: rgba(9,14,21,.94); border: 1px solid var(--n-bord); box-shadow: 0 20px 38px -24px #000; }
.c25-t-croquis svg { display: block; width: 100%; height: auto; }
.c25-sig { display: block; margin-top: 9px; font-family: var(--f-mono); font-size: 9.5px; color: var(--n-tx-3); }
.c25-t-note .c25-sig { color: rgba(242,185,64,.75); }
.c25-lg { display: block; padding: 8px 10px; font-family: var(--f-mono); font-size: 9.5px; color: var(--n-tx-3); }
.c25-t-croquis .c25-lg { padding: 9px 0 0; font-size: 11.5px; color: #9FE8B8; }
/* D'où vient cet objet — la question qu'on se pose devant un mur
partagé, et à laquelle plus personne ne peut répondre après
coup si on ne l'écrit pas au moment où on le pose. */
.c25-src {
position: absolute; top: -7px; left: 10px; z-index: 5; padding: 2px 7px; border-radius: 6px;
font-family: var(--f-mono); font-size: 8px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; background: #0B1119; border: 1px solid var(--tn); color: var(--tn);
}
.c25-src-os { --tn: #7EEAFF; }
.c25-src-main { --tn: #F4D89A; }
.c25-aide { margin: 12px 0 0; font-size: 12.5px; color: var(--n-tx-3); line-height: 1.65; max-width: 82ch; }
.c25-aide b { color: var(--n-tx-2); }
@media (prefers-reduced-motion: reduce) {
.c25-carte, .c25-video, .c25-fiche, .c25-cadre img, .c25-objet, .c25-maillon {
transition: none !important; animation: none !important;
}
.c25-carte:hover, .c25-video:hover, .c25-fiche:hover { transform: none; }
.c25-carte:hover .c25-cadre img, .c25-video:hover .c25-cadre img { transform: none; }
}
/* =============================================================
39. CERCLE 25 — LA LUMIÈRE ET LE MOUVEMENT
9 septembre 2026
La Direction : « design ou l UIX ou animation ou les pop up ou
les effects light ou les flou ou les minuature cinematique mhm
ykooon zwin ou waaa3r bzfff. Y3tina experience f khedma ou f
visuel. »
── LA RÈGLE QUI TIENT TOUTE CETTE SECTION
Une animation coûte de l'attention. Trois éléments qui bougent
en même temps ne se lisent plus : ils se concurrencent, et la
personne ne sait plus où regarder. Donc UNE SEULE chose bouge
à la fois dans un même champ de vision, et chaque mouvement
dit quelque chose de vrai :
· l'ARRIVÉE en cascade dit l'ordre — les dossiers urgents
sont en tête de grille, ils entrent en premier ;
· le FLOU qui se lève dit que l'image finit d'arriver ;
· le BALAYAGE de lumière au survol dit « celle-ci, tu la
regardes » ;
· le SOUFFLE sur l'étape en cours dit « c'est ici », et rien
d'autre ne respire à l'écran.
Ce qui n'est PAS ici : pas de rebond sur les cartes (une grille
qui rebondit se lit comme une erreur), pas de rotation, pas de
dégradé animé en fond. Ces effets-là se remarquent la première
fois et fatiguent la centième.
── ⚠ LE COÛT, ET POURQUOI ON NE L'OUBLIE PAS ICI
Le mur porte jusqu'à vingt-trois couvertures, chacune une vraie
image. Animer un flou sur vingt-trois images en même temps fait
tomber un téléphone à dix images par seconde.
Deux garde-fous : le décalage est PLAFONNÉ — au-delà de la
quinzième carte tout le monde entre ensemble, sinon la dernière
arriverait une seconde et demie après la première — et le flou
ne dure que le temps de l'entrée, après quoi la propriété
revient à sa valeur par défaut et ne coûte plus rien. On
n'anime jamais un flou en boucle.
============================================================= */
/* ── L'ARRIVÉE ────────────────────────────────────────────────
Monte, se met au net, s'installe.
⚠ `backwards`, ET SURTOUT PAS `both`. La différence a l'air
d'un détail ; elle casse deux choses.
Une animation gagne contre une règle ordinaire dans la cascade.
Avec `both`, l'image finale de la séquence — `transform: none`
— reste appliquée POUR TOUJOURS après la fin. Donc :
· `.c25-carte:hover { transform: translateY(-4px) }` ne
ferait plus rien : la carte ne se soulèverait plus jamais
au survol, une fois son entrée terminée ;
· pire, un objet de l'Espace est POSITIONNÉ par son
`transform: translate3d(var(--x), var(--y), 0)`. Un
`transform: none` figé dessus empilerait les sept objets
dans le coin haut-gauche du mur.
`backwards` applique la première image pendant le délai — ce
qui évite le clignotement que `both` était censé régler — puis
rend l'élément à ses propres règles dès la fin. Et c'est pour
la même raison que les objets de l'Espace ont leur propre
séquence, `c25-poser`, qui ne touche PAS au `transform`. */
@keyframes c25-lever {
from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.984); filter: blur(7px); }
60% { opacity: 1; }
to { opacity: 1; transform: none; filter: blur(0); }
}
/* Pour l'Espace : opacité et netteté seulement. Le placement
des objets passe par `transform`, on n'y touche pas. */
@keyframes c25-poser {
from { opacity: 0; filter: blur(6px); }
to { opacity: 1; filter: blur(0); }
}
@keyframes c25-fondu {
from { opacity: 0; transform: translate3d(0, 10px, 0); }
to { opacity: 1; transform: none; }
}
/* La barre d'étape se tire sous la couverture, de gauche à
droite : le geste dit « voilà où en est ce dossier ». */
@keyframes c25-tirer {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes c25-tirer-h {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
/* Le balayage : une bande de lumière traverse la couverture une
fois, au survol. Une seule passe — en boucle, ça devient une
enseigne de magasin. */
@keyframes c25-balayage {
from { transform: translate3d(-130%, 0, 0) rotate(14deg); }
to { transform: translate3d(230%, 0, 0) rotate(14deg); }
}
@keyframes c25-pop {
from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.94); }
to { opacity: 1; transform: none; }
}
.c25-carte, .c25-video {
animation: c25-lever 560ms var(--m-ressort) backwards;
animation-delay: var(--d, 0ms);
}
.c25-carte .c25-bande, .c25-video .c25-bande {
transform-origin: 0 50%;
animation: c25-tirer 640ms var(--m-vif) backwards;
animation-delay: calc(var(--d, 0ms) + 220ms);
}
/* ── LE BALAYAGE DE LUMIÈRE ───────────────────────────────────
Il vit sur la couverture, au-dessus de l'image et sous les
étiquettes, et il ne part QUE si la carte est survolée ou
atteinte au clavier. Une carte au repos ne consomme rien. */
.c25-cadre::after {
content: ""; position: absolute; z-index: 2; top: -40%; bottom: -40%; left: 0; width: 42%;
pointer-events: none; opacity: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 46%, rgba(255,255,255,.03) 72%, transparent);
transform: translate3d(-130%, 0, 0) rotate(14deg);
}
.c25-carte:hover .c25-cadre::after,
.c25-video:hover .c25-cadre::after,
.c25-carte:focus-visible .c25-cadre::after,
.c25-video:focus-visible .c25-cadre::after {
opacity: 1; animation: c25-balayage 880ms var(--m-doux) 1;
}
/* La couverture prend un peu de profondeur au survol : l'image
avance, le voile s'ouvre légèrement pour la laisser respirer. */
.c25-voile { transition: opacity 420ms var(--m-doux); }
.c25-carte:hover .c25-voile, .c25-video:hover .c25-voile { opacity: .86; }
/* L'étiquette d'étape et le retard remontent d'un cheveu — assez
pour qu'on sente que la vignette est vivante, pas assez pour
qu'on le remarque consciemment. */
.c25-etape-puce, .c25-code, .c25-retard {
transition: transform 320ms var(--m-ressort), border-color 320ms var(--m-doux);
}
.c25-carte:hover .c25-etape-puce, .c25-video:hover .c25-code { transform: translate3d(0, -2px, 0); }
.c25-carte:hover .c25-retard { transform: translate3d(0, -2px, 0); border-color: rgba(255,77,85,.7); }
/* ── LA CHAÎNE QUI SE CONSTRUIT ───────────────────────────────
Les maillons franchis se remplissent l'un après l'autre, dans
l'ordre où le studio les a réellement franchis. C'est la seule
animation de l'écran qui raconte une chronologie. */
.c25-maillon { animation: c25-fondu 420ms var(--m-vif) backwards; animation-delay: var(--d, 0ms); }
.c25-maillon::before { transform-origin: 50% 0; }
.c25-m-fait::before {
animation: c25-tirer-h 520ms var(--m-vif) backwards;
animation-delay: calc(var(--d, 0ms) + 160ms);
}
/* ── LE CORPS QUI CHANGE ──────────────────────────────────────
Passer de « L'Espace » à « La chaîne » reconstruit tout le bas
de la page. Sans transition le contenu saute, et on perd une
demi-seconde à retrouver où on en était. */
.c25-corps { animation: c25-fondu 340ms var(--m-vif) backwards; }
/* ── L'ESPACE ─────────────────────────────────────────────────
Les objets se posent, puis les fils qui les relient
apparaissent — dans cet ordre, parce qu'un fil qui arrive avant
ses deux extrémités ne relie rien. */
.c25-objet {
animation: c25-poser 500ms var(--m-doux) backwards; animation-delay: var(--d, 0ms);
transition: box-shadow var(--m-court) var(--m-doux);
}
.c25-liens { animation: c25-fondu 600ms var(--m-doux) 520ms backwards; }
.c25-objet:hover { box-shadow: 0 22px 44px -26px #000, 0 0 0 1px rgba(120,150,190,.28); }
/* ── LA FENÊTRE D'APERÇU ────────────────────────
Direction : « les pop up ». Elle sert à une chose précise :
regarder un livrable sans quitter le dossier. Ouvrir la page du
dossier pour lire une échéance et revenir, c'est deux
chargements pour une ligne de texte.
⚠ ON NE RÉÉCRIT PAS UNE MODALE. L'OS en a déjà une — `modal()`
dans `core/ui.js` — avec son voile, sa fermeture à Échap, son
clic à côté et son animation d'entrée. Une seconde
implémentation, c'est un second endroit où la touche Échap
finit par ne plus marcher. On lui donne juste un contenu.
⚠ ET ELLE NE REMPLACE PAS LA PAGE DU DOSSIER. Tout ce qui
ENGAGE — franchir une porte, valider, demander une correction —
reste là où sont les contrôles et le journal. Cette fenêtre
montre, et propose d'aller là-bas. Elle n'écrit rien. */
.c25-apercu { animation: c25-pop 380ms var(--m-ressort) backwards; }
.c25-apercu .c25-cadre { margin-bottom: 15px; }
.c25-ap-kick {
margin: 0 0 5px; font-family: var(--f-mono); font-size: 10px; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--n-or);
}
.c25-ap-titre { margin: 0 0 13px; font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.c25-ap-faits {
display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: 9px; margin: 0 0 14px;
}
.c25-ap-fait {
padding: 10px 12px; border-radius: 10px; border: 1px solid var(--n-bord);
border-left: 2px solid var(--tn, var(--n-bord)); background: rgba(255,255,255,.022);
}
.c25-ap-fait s {
display: block; text-decoration: none; font-family: var(--f-mono); font-size: 9px;
font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--n-tx-3);
}
.c25-ap-fait b { display: block; margin-top: 5px; font-size: 13.5px; font-weight: 600; letter-spacing: -.015em; }
.c25-ap-cyan { --tn: var(--n-cyan); } .c25-ap-or { --tn: var(--n-or); }
.c25-ap-vert { --tn: var(--n-vert); } .c25-ap-rouge { --tn: var(--n-rouge); }
.c25-ap-note {
margin: 0; padding: 12px 14px; border-radius: 11px;
border: 1px solid rgba(120,150,190,.12); background: rgba(255,255,255,.022);
font-size: 12.5px; line-height: 1.6; color: var(--n-tx-3);
}
/* ── ET TOUT S'ARRÊTE SI LA PERSONNE L'A DEMANDÉ ──────────────
Ce réglage n'est pas un confort : pour une partie des gens, une
image qui glisse déclenche une nausée. On coupe le mouvement et
on garde l'état final — jamais l'inverse, sinon la page reste
invisible. */
@media (prefers-reduced-motion: reduce) {
.c25-carte, .c25-video, .c25-objet, .c25-maillon, .c25-corps, .c25-liens,
.c25-carte .c25-bande, .c25-video .c25-bande, .c25-m-fait::before,
.c25-apercu {
animation: none !important; transition: none !important;
}
.c25-cadre::after { display: none; }
}
/* =============================================================
40. CERCLE 25 EST L'ÉCRAN DES PROJETS
9 septembre 2026
La Direction, devant l'écran « Projets » : « had projet haka rah
hia cercle. Khass normalement haka tkon, machi dik cercle li
drty. Khass haka tkon b commercial / pré-prod / prod / post-prod
/ livraison ta7t mn cercle. Ou 9ad fiha la pré-prod, mab9awch
m9adin, tal3in bzaf hda ba3diathom. Ou ykon hadchi animé kter ou
effects light kter ou quality kter. »
Trois choses dans ce message, et la première est la plus
importante : l'écran qu'il voulait EXISTAIT DÉJÀ. Le mur de
couvertures écrit la veille était un deuxième écran pour le même
besoin — donc un endroit de plus à tenir à jour, et deux
réponses différentes à « où en est le studio ». `#/cercle` mène
maintenant à cet écran-là ; le mur ne survit que comme filet, si
l'on arrive sur une fiche sans identifiant.
── LA PRÉ-PRODUCTION ÉTAIT ILLISIBLE, ET C'EST UNE HISTOIRE DE
LARGEUR
Douze dossiers en pré-production, dans une grille dont la
colonne minimale valait 280 px : sur un écran de bureau, six
cartes par rangée. Une couverture 16:9 dans 280 px fait 157 px
de haut — une vignette de contact, pas une affiche. Et le titre,
le client, le responsable, l'échéance et ce qui bloque
s'empilaient dessous dans la même largeur.
La colonne passe à 336 px : quatre par rangée au lieu de six,
l'affiche reprend un tiers de surface, et les trois lignes de
texte cessent de se casser au milieu d'un mot. On perd deux
dossiers par rangée ; on gagne de pouvoir les lire.
============================================================= */
.galerie {
grid-template-columns: repeat(auto-fill, minmax(336px, 1fr));
gap: 18px;
}
@media (max-width: 760px) {
.galerie { grid-template-columns: 1fr; gap: 14px; }
}
/* ⚠ `backwards`, PAS `both` — ET CE N'EST PAS COSMÉTIQUE.
`sys-carte-entre` finit sur `transform: none`. Avec un
remplissage `both`, cette dernière image reste appliquée POUR
TOUJOURS, et une animation gagne contre une règle ordinaire dans
la cascade. Résultat : `.gal-carte:hover { transform:
translateY(-6px) }` ne pouvait plus rien, et la carte ne se
soulevait jamais — le survol changeait l'ombre et la bordure,
mais la carte restait collée. Personne ne l'avait vu parce que
le reste du survol, lui, marchait.
`backwards` tient la première image pendant le délai — c'est
tout ce dont la cascade d'entrée a besoin — puis rend la carte à
ses propres règles dès la fin. */
.gal-carte { animation-fill-mode: backwards; }
/* ── LA LUMIÈRE QUI PASSE SUR L'AFFICHE ───────────────────────
Une bande claire traverse la couverture, une fois, quand on
survole. Elle est au-dessus du voile (`.gal-visuel::after`) mais
sous le badge de phase, et elle ne coûte rien tant que personne
ne survole : sans `:hover`, aucune animation ne tourne. */
.gal-visuel::before {
content: ""; position: absolute; z-index: 2; top: -40%; bottom: -40%; left: 0; width: 40%;
pointer-events: none; opacity: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 46%, rgba(255,255,255,.04) 72%, transparent);
transform: translate3d(-130%, 0, 0) rotate(14deg);
}
.gal-carte:hover .gal-visuel::before,
.gal-carte:focus-visible .gal-visuel::before {
opacity: 1; animation: c25-balayage 900ms var(--m-doux) 1;
}
/* ── LA COULEUR DU DÉPARTEMENT S'ALLUME ───────────────────────
Chaque carte porte déjà `--dep`, la couleur de son département.
Au survol, c'est cette couleur qui monte — un halo, pas un
blanc générique : on reconnaît une carte de post-production à sa
lumière avant d'avoir lu son étiquette. */
.gal-carte {
position: relative;
transition: transform var(--m-moyen) var(--m-ressort),
border-color var(--m-moyen) var(--m-doux),
box-shadow var(--m-moyen) var(--m-doux);
}
.gal-carte:hover {
border-color: color-mix(in srgb, var(--dep, var(--n-cyan)) 46%, transparent);
box-shadow: 0 34px 64px -34px #000,
0 0 0 1px color-mix(in srgb, var(--dep, var(--n-cyan)) 26%, transparent),
0 12px 46px -26px color-mix(in srgb, var(--dep, var(--n-cyan)) 55%, transparent);
}
/* Un filet de couleur en haut de la carte, qui se tire au survol.
Il dit le département sans prendre une ligne de texte. */
.gal-carte::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4;
background: linear-gradient(90deg, var(--dep, var(--n-cyan)), transparent 78%);
transform: scaleX(0); transform-origin: 0 50%; opacity: .9;
transition: transform 520ms var(--m-vif);
}
.gal-carte:hover::before, .gal-carte:focus-visible::before { transform: scaleX(1); }
.gal-phase, .gal-alerte {
transition: transform 320ms var(--m-ressort), border-color 320ms var(--m-doux);
}
.gal-carte:hover .gal-phase, .gal-carte:hover .gal-alerte { transform: translate3d(0, -2px, 0); }
/* ── LES FILTRES D'ÉTAPE ──────────────────────────────────────
Ce sont eux que la Direction a nommés : commercial, pré-prod,
prod, post-prod, livraison. Celui qui est actif s'allume de la
couleur de son département — c'est le seul repère qui dit dans
quelle moitié du studio on regarde. */
/* Le survol des puces est déjà réglé plus haut (section 21) ;
on n'ajoute ici que la couleur de l'étape retenue. */
.chip.is-on {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--dep, var(--n-or)) 34%, transparent),
0 8px 24px -14px color-mix(in srgb, var(--dep, var(--n-or)) 70%, transparent);
}
/* ── LA FILMOTHÈQUE ───────────────────────────────────────────
Le rail garde son inertie native ; on ne lui ajoute qu'un
arrêt plus franc sur l'affiche survolée. */
.filmo-case { transition: transform var(--m-moyen) var(--m-ressort), opacity var(--m-moyen) var(--m-doux); }
.filmo-piste:hover .filmo-case:not(:hover) { opacity: .82; }
@media (prefers-reduced-motion: reduce) {
.gal-carte, .gal-carte::before, .gal-phase, .gal-alerte, .filmo-case {
animation: none !important; transition: none !important;
}
.gal-visuel::before { display: none; }
.gal-carte::before { transform: scaleX(1); }
.filmo-piste:hover .filmo-case:not(:hover) { opacity: 1; }
}
/* =============================================================
41. LA LUMIÈRE DES DEUX MOTEURS
9 septembre 2026
Direction : « zid quality dial cercle ou spider, zid f
l'animation ou effects ou lights ».
── CE QUI SÉPARE UN EFFET D'UNE DÉCORATION
SPIDER et CERCLE ne se regardent pas pareil. CERCLE est fait
d'affiches : on y cherche une image, donc la lumière sert à
faire ressortir une couverture. SPIDER est fait de chiffres :
on y cherche un nombre, donc la lumière doit servir à faire
ressortir LE nombre, pas la boîte autour.
D'où la règle tenue partout dans cette section : **la lumière
prend la couleur de ce qu'elle éclaire.** Une tuile en retard
s'allume en rouge, une tuile du jour en or, une carte de
post-production dans le cyan de son département. Un halo blanc
générique aurait été plus facile à écrire et n'aurait rien
appris à personne.
── ET CE QUI RESTE INTERDIT
Rien ne tourne en boucle, sauf UNE chose à l'écran : le repère
qui dit « c'est ici ». Deux respirations simultanées, et
l'œil ne sait plus laquelle compte. Aucune animation ne dure
plus de 900 ms. Aucun flou n'est animé en permanence — il ne
sert qu'à l'entrée, puis la propriété est rendue.
⚠ LES CASCADES SONT ÉCRITES EN `nth-child`, PAS EN JAVASCRIPT.
C'est le procédé que la feuille utilise déjà pour la galerie
(neon-systeme, ligne 1066) : le décalage appartient à la
présentation, et le rendre à JavaScript obligerait à toucher
`spider.js` — 102 Ko de logique commerciale — pour une question
de millisecondes.
============================================================= */
/* ⚠ MESURÉ EN LIGNE : SEPT TUILES SUR NEUF N'ONT PAS DE COULEUR.
`--sp-tn` n'est posé que par `.sp-t-urgent`, `.sp-t-jour`,
`.sp-t-ok` et `.sp-t-info`. Les autres tuiles — « 396 traités »,
« 7 aujourd'hui » — n'en ont aucune, et une lumière tirée de
`--sp-tn` y valait donc `transparent` : rien du tout. Sur
l'écran réel, l'effet ne se voyait que deux fois sur neuf.
On sépare donc LA COULEUR DU CHIFFRE de LA COULEUR DE SA
LUMIÈRE. `--sp-tn` continue de teindre le nombre — et une tuile
sans ton garde son nombre en blanc, ce qui est juste : il n'a
rien d'urgent à dire. `--sp-lum` prend le relais pour l'éclat,
avec le violet de SPIDER par défaut. Résultat : tout l'écran
porte une lumière, et celles qui ont un ton portent LE LEUR. */
.sp-tuile, .sp-maillon, .sp-carte-action { --sp-lum: var(--sp-tn, rgba(139,92,246,.62)); }
@keyframes os25-arrive {
from { opacity: 0; transform: translate3d(0, 12px, 0); }
to { opacity: 1; transform: none; }
}
/* ⚠ UNE RESPIRATION DORÉE, ET PAS CELLE QUI EXISTE DÉJÀ.
`os25-souffle` bat en cyan — c'est la couleur de CERCLE. La
pastille « ici » de la mission est en or depuis toujours ; lui
coller le souffle cyan aurait changé sa couleur au milieu de
son battement, deux fois par seconde. */
@keyframes os25-souffle-or {
0%, 100% { box-shadow: 0 0 0 0 rgba(242,185,64,.34), 0 0 10px -2px rgba(242,185,64,.55); }
50% { box-shadow: 0 0 0 5px rgba(242,185,64,0), 0 0 22px -2px rgba(242,185,64,.95); }
}
/* La glissade d'une feuille qui monte du bas de l'écran. */
@keyframes os25-feuille {
from { opacity: 0; transform: translate3d(0, 34px, 0); }
to { opacity: 1; transform: none; }
}
/* =============================================================
41.1 SPIDER — LES CHIFFRES PORTENT LEUR LUMIÈRE
============================================================= */
/* ── LES TUILES DU MATIN ──────────────────────────────────────
Six tuiles, six retards de 55 ms : la dernière entre un tiers
de seconde après la première, ce qui se lit comme un ordre et
non comme une lenteur. */
.sp-tuiles > .sp-tuile { animation: os25-arrive 420ms var(--m-vif) backwards; }
.sp-tuiles > .sp-tuile:nth-child(1) { animation-delay: 0ms; }
.sp-tuiles > .sp-tuile:nth-child(2) { animation-delay: 55ms; }
.sp-tuiles > .sp-tuile:nth-child(3) { animation-delay: 110ms; }
.sp-tuiles > .sp-tuile:nth-child(4) { animation-delay: 165ms; }
.sp-tuiles > .sp-tuile:nth-child(5) { animation-delay: 220ms; }
.sp-tuiles > .sp-tuile:nth-child(n+6) { animation-delay: 275ms; }
/* Le rail de couleur se tire du haut vers le bas, juste après
que la tuile soit posée. */
.sp-tuile::after {
transform-origin: 50% 0;
animation: c25-tirer-h 480ms var(--m-vif) 180ms backwards;
transition: width var(--m-court) var(--m-doux), box-shadow var(--m-court) var(--m-doux);
}
/* ⚠ LE HALO EST SUR LE CHIFFRE, PAS SUR LA TUILE. C'est le
nombre qu'on vient lire — « 10 en retard » — et c'est donc lui
qui doit être la chose la plus lumineuse de la boîte. Un halo
sur la bordure aurait éclairé le contenant. */
.sp-tuile b {
text-shadow: 0 0 26px color-mix(in srgb, var(--sp-lum) 42%, transparent);
transition: text-shadow var(--m-moyen) var(--m-doux);
}
.sp-tuile:hover b { text-shadow: 0 0 34px color-mix(in srgb, var(--sp-lum) 72%, transparent); }
.sp-tuile:hover {
border-color: color-mix(in srgb, var(--sp-tn, var(--n-bord)) 38%, transparent);
box-shadow: 0 18px 38px -26px #000,
0 0 34px -20px color-mix(in srgb, var(--sp-lum) 82%, transparent);
}
/* Le rail d'une tuile sans ton reste gris au repos — il ne
prétend pas dire quelque chose. C'est au survol qu'il s'allume,
parce qu'à ce moment-là c'est la tuile qu'on regarde. */
.sp-tuile:hover::after {
width: 3px;
background: var(--sp-tn, rgba(139,92,246,.55));
box-shadow: 0 0 14px color-mix(in srgb, var(--sp-lum) 78%, transparent);
}
/* Une bande de lumière traverse la tuile au survol — une passe,
et seulement tant que le curseur est dessus. */
.sp-tuile::before {
content: ""; position: absolute; z-index: 0; top: -40%; bottom: -40%; left: 0; width: 44%;
pointer-events: none; opacity: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.10) 48%, transparent);
transform: translate3d(-130%, 0, 0) rotate(14deg);
}
.sp-tuile:hover::before { opacity: 1; animation: c25-balayage 820ms var(--m-doux) 1; }
.sp-tuile b, .sp-tuile span, .sp-tuile small { position: relative; z-index: 1; }
/* ── LA CHAÎNE COMMERCIALE ────────────────────────────────────
Six maillons qui se posent de gauche à droite : c'est l'ordre
du parcours, du signal à la signature. */
.sp-chaine > .sp-maillon { animation: os25-arrive 400ms var(--m-vif) backwards; }
.sp-chaine > .sp-maillon:nth-child(1) { animation-delay: 0ms; }
.sp-chaine > .sp-maillon:nth-child(2) { animation-delay: 62ms; }
.sp-chaine > .sp-maillon:nth-child(3) { animation-delay: 124ms; }
.sp-chaine > .sp-maillon:nth-child(4) { animation-delay: 186ms; }
.sp-chaine > .sp-maillon:nth-child(5) { animation-delay: 248ms; }
.sp-chaine > .sp-maillon:nth-child(n+6) { animation-delay: 310ms; }
.sp-maillon b {
text-shadow: 0 0 24px color-mix(in srgb, var(--sp-lum) 38%, transparent);
transition: text-shadow var(--m-moyen) var(--m-doux);
}
.sp-maillon:hover b { text-shadow: 0 0 32px color-mix(in srgb, var(--sp-lum) 70%, transparent); }
/* La flèche qui relie deux maillons avance d'un cheveu quand on
survole celui de gauche : le lien devient un mouvement. */
.sp-maillon::after {
transition: border-color var(--m-court) var(--m-doux), transform var(--m-court) var(--m-doux);
}
.sp-maillon:hover::after {
border-color: rgba(139,92,246,.75);
transform: rotate(45deg) translate3d(2px, -2px, 0);
}
.sp-maillon:hover {
border-color: color-mix(in srgb, var(--sp-tn, var(--n-bord)) 34%, transparent);
box-shadow: 0 16px 34px -26px #000,
0 0 30px -20px color-mix(in srgb, var(--sp-lum) 72%, transparent);
}
/* ── LES CARTES, ET LEUR FILET VIOLET ─────────────────────────
SPIDER est violet comme CERCLE est cyan : c'est le repère qui
dit dans lequel des deux moteurs on se trouve. */
.sp-cartes > .sp-carte { animation: os25-arrive 420ms var(--m-vif) backwards; }
.sp-cartes > .sp-carte:nth-child(1) { animation-delay: 0ms; }
.sp-cartes > .sp-carte:nth-child(2) { animation-delay: 70ms; }
.sp-cartes > .sp-carte:nth-child(3) { animation-delay: 140ms; }
.sp-cartes > .sp-carte:nth-child(n+4) { animation-delay: 210ms; }
.sp-carte { position: relative; overflow: hidden; }
.sp-carte::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
background: linear-gradient(90deg, var(--n-violet, #8B5CF6), transparent 78%);
transform: scaleX(0); transform-origin: 0 50%;
transition: transform 520ms var(--m-vif);
}
.sp-carte:hover::before, .sp-carte:focus-within::before { transform: scaleX(1); }
.sp-carte:hover {
box-shadow: 0 24px 48px -30px #000, 0 0 34px -22px rgba(139,92,246,.7);
}
/* La carte d'action porte déjà la couleur de son urgence sur son
bord gauche ; au survol, ce bord s'allume au lieu de rester un
trait mat. */
.sp-carte-action { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease,
border-left-color .18s ease; }
.sp-carte-action:hover {
border-left-color: var(--sp-tn, rgba(139,92,246,.5));
box-shadow: 0 22px 46px -30px #000,
-3px 0 22px -12px color-mix(in srgb, var(--sp-lum) 85%, transparent);
}
/* ── LES ONGLETS ──────────────────────────────────────────────
L'onglet retenu s'allume en violet et pose un trait sous lui.
Le trait grandit depuis le centre : il désigne, il ne glisse
pas d'un onglet à l'autre — le contenu, lui, a déjà changé. */
.sp-vue { position: relative; }
.sp-vue::after {
content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
border-radius: 2px; background: linear-gradient(90deg, transparent, #A78BFA, transparent);
transform: scaleX(0); transform-origin: 50% 50%;
transition: transform 380ms var(--m-ressort);
}
.sp-vue.on::after { transform: scaleX(1); }
.sp-vue.on { box-shadow: inset 0 0 0 1px rgba(139,92,246,.36), 0 8px 26px -16px rgba(139,92,246,.8); }
/* ── LA FEUILLE QUI MONTE DU BAS ──────────────────────────────
La fiche d'un prospect arrive par le bas de l'écran, comme une
feuille qu'on tire. Le fond derrière elle se floute : ce qui
n'est plus le sujet cesse d'être lisible, et l'attention n'a
qu'un endroit où aller. */
.sp-fond {
backdrop-filter: blur(8px);
animation: c25-fondu 220ms var(--m-doux) backwards;
}
.sp-fiche { animation: os25-feuille 440ms var(--m-ressort) backwards; }
/* ── LES CANAUX ───────────────────────────────────────────────
WhatsApp en vert, le téléphone en cyan : la couleur du canal,
pas une couleur d'interface. */
.sp-canal { transition: transform var(--m-court) var(--m-doux), box-shadow var(--m-court) var(--m-doux),
border-color var(--m-court) var(--m-doux); }
.sp-canal-wa:hover, .sp-canal-tel:hover { transform: translate3d(0, -2px, 0); }
.sp-canal-wa:hover { box-shadow: 0 10px 26px -16px rgba(36,217,129,.9); }
.sp-canal-tel:hover { box-shadow: 0 10px 26px -16px rgba(18,217,255,.85); }
/* ── LA MISSION DU JOUR ───────────────────────────────────────
⚠ C'EST LA SEULE CHOSE QUI RESPIRE EN CONTINU DANS SPIDER.
La pastille « ici » de la jauge dit où la personne en est dans
sa liste du matin. Si autre chose respirait à côté, elle ne
serait plus le point qu'on cherche. */
.sp-mission-jauge i { transition: background var(--m-court) var(--m-doux), box-shadow var(--m-court) var(--m-doux); }
.sp-mission-jauge i.ici { animation: os25-souffle-or 6s ease-in-out infinite; }
/* =============================================================
41.2 CERCLE — L'AFFICHE PREND LA LUMIÈRE
============================================================= */
/* ── LE RAIL DE LA FILMOTHÈQUE S'EFFACE À SES BORDS ───────────
Le rail déborde volontairement de la page pour dire « ça
continue ». Une affiche coupée net au pixel près dit plutôt
« c'est cassé ». Le masque la fait fondre sur les vingt
derniers pixels : la coupure devient un fondu de cinéma. */
.filmo-piste {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 34px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 34px), transparent 100%);
}
@media (max-width: 760px) {
.filmo-piste {
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}
}
/* ── LES REPÈRES DE LA FICHE ──────────────────────────────────
Étape, échéance, ce qui bloque, avancement : quatre repères qui
se posent dans cet ordre, celui dans lequel on les lit. */
.c25-reperes > .c25-repere { animation: os25-arrive 380ms var(--m-vif) backwards; }
.c25-reperes > .c25-repere:nth-child(1) { animation-delay: 60ms; }
.c25-reperes > .c25-repere:nth-child(2) { animation-delay: 120ms; }
.c25-reperes > .c25-repere:nth-child(3) { animation-delay: 180ms; }
.c25-reperes > .c25-repere:nth-child(n+4) { animation-delay: 240ms; }
.c25-repere { transition: border-color var(--m-court) var(--m-doux), box-shadow var(--m-court) var(--m-doux); }
.c25-repere:hover {
border-left-color: var(--tn, var(--n-bord));
box-shadow: -3px 0 20px -12px color-mix(in srgb, var(--tn, transparent) 85%, transparent);
}
/* Le titre du dossier et son filet d'or arrivent avant le reste. */
.c25-dossier h1 { animation: os25-arrive 460ms var(--m-ressort) backwards; }
.c25-dossier::after {
transform-origin: 0 50%;
animation: c25-tirer 620ms var(--m-vif) 200ms backwards;
}
/* ── LE TABLEAU PAR DÉPARTEMENT ───────────────────────────────
Une colonne par étape. L'en-tête porte la pastille de son
département ; on lui donne la lumière qui va avec, pour qu'on
repère une colonne à sa couleur avant d'avoir lu son nom. */
.board-col-head .sw {
box-shadow: 0 0 12px color-mix(in srgb, var(--dep, transparent) 85%, transparent);
}
.board-card { transition: transform var(--m-court) var(--m-doux), border-color var(--m-court) var(--m-doux),
box-shadow var(--m-court) var(--m-doux); }
.board-card:hover {
transform: translate3d(0, -2px, 0);
box-shadow: -3px 0 22px -12px color-mix(in srgb, var(--dep, transparent) 85%, transparent),
0 16px 32px -24px #000;
}
/* =============================================================
41.3 ET RIEN DE TOUT CELA POUR QUI A DEMANDÉ LE CALME
`prefers-reduced-motion` n'est pas un goût : c'est une consigne
médicale pour une partie des gens. On coupe le mouvement et on
garde l'état final — jamais l'inverse, sinon la page reste
vide.
============================================================= */
@media (prefers-reduced-motion: reduce) {
.sp-tuiles > .sp-tuile, .sp-chaine > .sp-maillon, .sp-cartes > .sp-carte,
.sp-tuile::after, .sp-carte::before, .sp-vue::after, .sp-fond, .sp-fiche,
.sp-mission-jauge i.ici, .sp-canal, .sp-carte-action,
.c25-reperes > .c25-repere, .c25-dossier h1, .c25-dossier::after {
animation: none !important; transition: none !important;
}
.sp-tuile::before { display: none; }
.sp-tuile::after, .c25-dossier::after { transform: none; }
.sp-vue.on::after { transform: scaleX(1); }
}
/* =============================================================
42. LA VUE CERCLE ÉTAIT CASSÉE, ET LE RESTE N'AVAIT PAS LE
TRAITEMENT DU TABLEAU DE BORD
9 septembre 2026
Direction, capture d'écran à l'appui : « 9ad had l pré-production
db », et « zid f quality, rado premium b light ou les effects
b7al deashbord, avec les animations ou les flou ».
── ⚠ LE DÉFAUT : DOUZE CARTES ÉCRASÉES À DIX-HUIT PIXELS
Mesuré en direct sur la colonne Pré-production :
.voie-carte → hauteur 18 px, overflow: hidden
.voie-visuel → hauteur 188 px
.voie-info → hauteur 136 px
Une carte de 18 px de haut contenant 324 px de contenu. À
l'écran : douze bandes d'image de la hauteur d'un trait, sans
titre, sans client, sans échéance. Illisibles, et pour cause —
il n'y avait rien à lire.
La cause est une règle par défaut de flexbox que personne
n'écrit et que tout le monde subit. `.board-col-body` est une
colonne flex avec une hauteur bornée (`max-height: calc(100dvh
- 320px)`). Un enfant flex vaut `flex-shrink: 1` par défaut :
quand la somme des enfants dépasse le conteneur, ils RÉTRÉCISSENT
au lieu de le faire défiler. Une carte, ça tient : la colonne
Production, qui n'en avait qu'une, s'affichait parfaitement.
Douze cartes, et chacune reçoit un douzième de la place.
C'est aussi pour ça que le défaut était invisible en
développement : il faut douze dossiers dans la même étape pour
le déclencher, et il n'apparaît que dans la vue Cercle.
`flex: 0 0 auto` rend à chaque carte sa hauteur naturelle. Le
`overflow-y: auto` déjà posé sur la colonne fait alors son
travail : ça défile, comme prévu depuis le début.
============================================================= */
.board-col-body > * { flex: 0 0 auto; }
/* La colonne s'élargit : à 260 px, une couverture forcée à 188 px
de haut par la feuille du tableau de bord était étirée hors de
ses proportions. On rend le 16/9 à l'image et de la place au
texte. */
.board-col { flex: 0 0 300px; }
@media (max-width: 700px) { .board-col { flex: 0 0 82%; } }
.board-col-body .voie-visuel {
height: auto !important;
aspect-ratio: 16 / 9;
border-radius: 10px; overflow: hidden;
}
/* ⚠ ET LA COLONNE DIT QU'ELLE CONTINUE. Douze cartes dans une
colonne qui défile, coupées net en bas, se lisent comme « il y
en a douze ». Le fondu dit « il y en a plus » — la même raison
que le rail de la filmothèque. */
.board-col-body {
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
scrollbar-width: thin;
}
/* ── LE VERRE DU TABLEAU DE BORD ──────────────────────────────
Direction : « b7al deashbord ». Ce qui donne au tableau de bord
son air premium n'est pas une couleur : c'est un empilement —
un fond translucide, un flou derrière, un liseré clair en haut
qui imite un bord biseauté, et une ombre portée large et très
diffuse. On prend le même empilement, on ne l'invente pas une
deuxième fois. */
.board-col {
background: linear-gradient(168deg, rgba(18,27,39,.86), rgba(8,13,20,.92));
backdrop-filter: blur(14px);
box-shadow: 0 30px 60px -40px #000, inset 0 1px 0 rgba(255,255,255,.05);
}
/* Le halo du département derrière l'en-tête de colonne : on
reconnaît la post-production à sa couleur avant d'avoir lu son
nom. */
.board-col-head {
position: relative;
background: linear-gradient(180deg,
color-mix(in srgb, var(--dep) 14%, transparent), transparent);
}
.board-col-head::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
background: linear-gradient(90deg, color-mix(in srgb, var(--dep) 70%, transparent), transparent 70%);
}
/* Les cartes de la colonne prennent le traitement des cartes de
l'accueil : le même relief, la même levée au survol, la couleur
de leur département dans l'ombre. */
.board-col-body .voie-carte {
border-radius: 14px !important;
padding: 8px !important;
background: linear-gradient(168deg, rgba(16,25,36,.94), rgba(9,14,21,.96)) !important;
border: 1px solid rgba(120,150,190,.15) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
transition: transform var(--m-moyen) var(--m-ressort),
border-color var(--m-moyen) var(--m-doux),
box-shadow var(--m-moyen) var(--m-doux);
animation: os25-arrive 420ms var(--m-vif) backwards;
}
.board-col-body > *:nth-child(1) { animation-delay: 0ms; }
.board-col-body > *:nth-child(2) { animation-delay: 50ms; }
.board-col-body > *:nth-child(3) { animation-delay: 100ms; }
.board-col-body > *:nth-child(4) { animation-delay: 150ms; }
.board-col-body > *:nth-child(n+5) { animation-delay: 200ms; }
.board-col-body .voie-carte:hover {
transform: translate3d(0, -6px, 0);
border-color: color-mix(in srgb, var(--dep, var(--n-cyan)) 46%, transparent) !important;
box-shadow: 0 30px 56px -30px #000,
0 0 34px -20px color-mix(in srgb, var(--dep, var(--n-cyan)) 75%, transparent);
}
/* La couverture avance dans son cadre, elle ne pousse pas la
carte : la colonne ne doit pas sauter au survol. */
.board-col-body .voie-visuel .affiche {
transition: transform 460ms var(--m-doux), filter 460ms var(--m-doux);
}
.board-col-body .voie-carte:hover .voie-visuel .affiche {
transform: scale(1.06); filter: saturate(1.1) brightness(1.06);
}
/* Le balayage de lumière, comme sur les affiches de la galerie. */
.board-col-body .voie-visuel::before {
content: ""; position: absolute; z-index: 2; top: -40%; bottom: -40%; left: 0; width: 42%;
pointer-events: none; opacity: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 46%, transparent);
transform: translate3d(-130%, 0, 0) rotate(14deg);
}
.board-col-body .voie-carte:hover .voie-visuel::before {
opacity: 1; animation: c25-balayage 880ms var(--m-doux) 1;
}
/* ⚠ SCOPÉ À LA COLONNE. `.voie-info` sert aussi aux cartes de
l'accueil, que la Direction ne veut pas voir bouger. */
.board-col-body .voie-info { padding: 10px 6px 6px; gap: 3px; }
.board-col-body .voie-info > b { font-size: 14px; letter-spacing: -.015em; }
/* ── LE VERRE, AUSSI SUR LA GALERIE ET SPIDER ─────────────────
Le même empilement, appliqué là où l'on passe la journée. */
.gal-carte {
background: linear-gradient(168deg, rgba(18,27,39,.9), rgba(8,13,20,.95));
backdrop-filter: blur(12px);
box-shadow: 0 26px 52px -34px #000, inset 0 1px 0 rgba(255,255,255,.045);
}
.sp-tuile, .sp-carte, .sp-maillon, .sp-carte-action {
background: linear-gradient(168deg, rgba(19,28,41,.86), rgba(9,14,21,.92));
backdrop-filter: blur(12px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.sp-vues { backdrop-filter: blur(12px); }
@media (prefers-reduced-motion: reduce) {
.board-col-body .voie-carte { animation: none !important; transition: none !important; }
.board-col-body .voie-visuel::before { display: none; }
}
/* ── LE NOM DU CLIENT DEVIENT LA PORTE VERS LE COMMERCIAL ─────
Il garde la graisse et la couleur du sur-titre : ce n'est pas
un bouton de plus, c'est le même mot qui conduit ailleurs. Le
soulignement n'apparaît qu'au survol — sinon la ligne de
sur-titre se met à ressembler à un menu. */
.c25-kick-lien {
color: inherit; text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--n-or) 34%, transparent);
transition: color var(--m-court) var(--m-doux), border-color var(--m-court) var(--m-doux),
text-shadow var(--m-court) var(--m-doux);
}
.c25-kick-lien:hover {
color: #FFD98A;
border-bottom-color: var(--n-or);
text-shadow: 0 0 18px color-mix(in srgb, var(--n-or) 60%, transparent);
}
.c25-kick-lien:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 3px; border-radius: 3px; }
/* =============================================================
43. UN CRAN PLUS PETIT, ET UN ÉCRAN DE TÉLÉPHONE QUI TIENT
9 septembre 2026
Direction : « sagher l ktaba chwiya f OS kamel, sgharha. Ou
katbaan f telephone mchaarji bzaf ou mkharbe9. L OS khasso
ysghar ou y recadra mzian ou yt9ad. »
Deux demandes, et la seconde est la vraie.
── 1. LE TEXTE D'UN CRAN PLUS PETIT
La section 21 avait déjà descendu le corps à 13 px. On descend
d'un cran de plus, mais PAR LES JETONS, pas écran par écran :
`--fs-11` à `--fs-36` sont définis une fois et lus partout, donc
les redéfinir ici descend tout l'OS d'un coup — les tableaux,
les boutons, les panneaux, les formulaires.
⚠ ON NE DESCEND PAS LE CORPS SOUS 12 PX. En dessous, un texte
courant cesse d'être lu et commence à être déchiffré. Ce qui
fait gagner de la place ici, ce ne sont pas les 12 px du corps :
ce sont les TITRES, qui étaient à 48 px.
── 2. LE TÉLÉPHONE — CE QUI ÉTAIT VRAIMENT CASSÉ
Relevé dans la feuille, pas deviné :
· `master-v2.css` impose au titre de page
`clamp(30px, 3vw, 48px) !important`. Sur un écran de 390 px,
3 vw ne vaut que 11,7 px, donc la borne basse gagne : le
titre reste à 30 PX SUR UN TÉLÉPHONE. Un mot par ligne.
· Sept grilles à nombre de colonnes FIXE n'avaient aucune
règle sous 760 px : `.dash` (12 colonnes), `.mini-grille` et
`.mois-grille` (7), `.universe-kpis` et `.sp-entonnoir` (4),
`.etat-grille` et `.sp-mesures` (3). Douze colonnes dans
390 px, ce sont des colonnes de 32 px.
· Les jetons de texte descendent `--fs-16` sous 16 px. Sur
iOS, un champ de saisie sous 16 px fait ZOOMER la page à la
mise au point — l'écran part de travers dès qu'on touche un
champ, et il faut le repincer pour revenir. C'est
exactement « mkharbe9 », et ça n'a rien à voir avec le
design : c'est une règle du navigateur.
Les cinq onglets de SPIDER, les rails et le mur du Cercle sont
traités aussi — mais ce sont les trois points ci-dessus qui
font la différence entre un écran serré et un écran cassé.
============================================================= */
/* ── 43.1 LES JETONS DE TEXTE, D'UN CRAN ─────────────────────── */
:root {
--fs-11: 10.5px; --fs-12: 11px; --fs-13: 12px; --fs-14: 13px;
--fs-16: 14.5px; --fs-18: 16.5px; --fs-22: 18.5px; --fs-28: 22px; --fs-36: 28px;
}
body { font-size: 12px; }
/* ⚠ LE TITRE DE PAGE ÉTAIT LE PLUS GROS POSTE. `master-v2.css` le
pose en `!important` ; on ne peut le corriger qu'avec la même
arme, depuis une feuille chargée après. De 48 px à 34 px au
maximum : la page gagne une ligne et demie sans qu'on cesse de
voir où l'on est. */
.main > .page:not(.dashboard-home):not(.ps-root) > .page-head h1 {
font-size: clamp(23px, 2.1vw, 34px) !important;
}
.page-head h1, .page-head > b:first-child { font-size: 25px; }
.main > .page:not(.dashboard-home):not(.ps-root) .panel-head h3 { font-size: 12.5px !important; }
.main > .page:not(.dashboard-home):not(.ps-root) .panel-head { min-height: 50px; padding: 11px 15px !important; }
.main > .page:not(.dashboard-home):not(.ps-root) .panel-body { padding: 14px 15px !important; }
/* Les tableaux : deux lignes de plus par écran. */
.table th { height: 40px !important; }
.table td { padding-block: 10px !important; }
/* Les grands nombres des deux moteurs suivent le même cran. */
.sp-tuile b { font-size: 25px; }
.sp-maillon b { font-size: 22px; }
.gal-titre { font-size: 14.5px; }
.c25-dossier h1 { font-size: clamp(24px, 3.4vw, 34px); }
.c25-carte-bas b { font-size: 13.5px; }
/* =============================================================
43.2 LE TÉLÉPHONE
============================================================= */
@media (max-width: 560px) {
/* ⚠ D'ABORD : PLUS RIEN NE DÉBORDE EN LARGEUR. Une page qui
défile latéralement sur un téléphone donne l'impression que
tout est cassé, même quand une seule grille dépasse.
`clip` plutôt que `hidden` : `hidden` sur un ancêtre casse
`position: sticky` des en-têtes de tableau. */
.main { overflow-x: clip; }
.page, .panel, .panel-body { min-width: 0; }
/* ⚠ ET LE CHAMP DE SAISIE REPASSE À 16 PX. Ce n'est pas un
choix de taille : sous 16 px, iOS zoome la page dès qu'on
touche un champ. */
input, select, textarea, .input, .select, .textarea {
font-size: 16px !important;
}
/* Le titre de page tient sur deux lignes, pas sur cinq. */
.main > .page:not(.dashboard-home):not(.ps-root) > .page-head h1 {
font-size: clamp(20px, 6.4vw, 26px) !important;
}
.page-head h1, .page-head > b:first-child { font-size: 21px; }
.c25-dossier h1 { font-size: 24px; }
/* La page et les panneaux se resserrent : sur 390 px, chaque
pixel de marge est un mot qu'on ne lit pas. */
.main > .page:not(.dashboard-home):not(.ps-root) { padding: 12px 12px 96px !important; }
.main > .page:not(.dashboard-home):not(.ps-root) .panel-head { padding: 10px 12px !important; min-height: 44px; }
.main > .page:not(.dashboard-home):not(.ps-root) .panel-body { padding: 10px 12px 12px !important; }
/* ── LES GRILLES À NOMBRE DE COLONNES FIXE ──
Aucune de celles-ci n'avait de règle sous 760 px. */
.dash { grid-template-columns: 1fr !important; }
.etat-grille, .sp-mesures, .universe-kpis, .sp-entonnoir, .sp-tuiles {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c25-champs, .c25-board, .c25-videos, .galerie, .sp-cartes {
grid-template-columns: 1fr !important;
}
/* Les calendriers gardent leurs sept colonnes — une semaine en
a sept — mais leurs cases cessent d'imposer une largeur. */
.mois-grille, .mini-grille { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mois-grille > *, .mini-grille > * { min-width: 0; font-size: 10.5px; }
/* ── LES ONGLETS SPIDER ──
Cinq onglets sur une ligne de 390 px donnent 78 px chacun,
donc du texte coupé. Ils passent à deux par rangée. */
.sp-vue { flex: 1 1 44%; min-width: 0; padding: 9px 10px; font-size: 12px; }
/* ── LES RAILS ET LE MUR ── */
.filmo-case { flex: 0 0 82vw; }
.board-col { flex: 0 0 86%; }
.c25-toile { height: min(58vh, 480px); }
.c25-outils { padding: 10px; gap: 6px; }
.c25-outil { padding: 8px 11px; font-size: 12px; }
.c25-outils-qui { margin-left: 0; width: 100%; }
/* ── CE QU'ON TOUCHE AVEC UN DOIGT ──
Un bouton de 32 px se rate une fois sur trois. Quarante-quatre
pixels, c'est la hauteur d'un doigt, et c'est la seule chose
de cette section qui GRANDIT au lieu de rétrécir. */
.btn, .icon-btn, .chip, .sp-vue { min-height: 44px; }
.icon-btn { min-width: 44px; }
}
/* Les très petits écrans — un iPhone SE fait 375 px, un Android
d'entrée de gamme 360. */
@media (max-width: 380px) {
.etat-grille, .sp-mesures, .universe-kpis, .sp-entonnoir, .sp-tuiles {
grid-template-columns: 1fr !important;
}
.grid-3, .grid-4 { grid-template-columns: 1fr; }
.sp-vue { flex: 1 1 100%; }
.main > .page:not(.dashboard-home):not(.ps-root) { padding: 10px 9px 96px !important; }
}
/* =============================================================
44. LES FENÊTRES D'APERÇU, ET CE QUI LES REND PREMIUM
9 septembre 2026
Direction : « zid l quality ou les pop up f cercle ou spider ».
── À QUOI SERT UNE FENÊTRE D'APERÇU
Elle répond à une question qu'un écran de liste pose sans y
répondre : « lequel ? ». Devant vingt-trois couvertures ou
derrière un nombre — « 10 sans commercial » — la réponse
coûtait un changement d'écran, un retour, et la perte du filtre
et de la position. L'aperçu la pose PAR-DESSUS : on regarde, on
décide, Échap, et on est exactement là où on était.
⚠ ELLES NE MONTRENT RIEN DE CACHÉ, ET C'EST VOULU. Une fenêtre
qui révélerait des informations qu'on ne voit nulle part
ailleurs ferait de l'écran une devinette. Elles montrent en
GRAND ce qu'une carte de 330 px ne peut pas montrer.
⚠ ET ELLES N'ÉCRIVENT RIEN. Franchir une porte, valider,
appeler, noter : tout cela vit dans le dossier ou dans la fiche,
avec les contrôles et le journal. Une deuxième façon d'écrire,
c'est une deuxième règle qui finit par ne plus dire la même
chose que la première.
── LE VERRE DE LA FENÊTRE
La modale de l'OS était un bloc opaque posé sur un voile gris.
Elle prend ici l'empilement du tableau de bord — voile flouté,
fond en dégradé, liseré clair en haut, ombre large — plus un
filet d'or qui se tire au moment de l'ouverture. C'est le même
traitement partout : toutes les fenêtres de l'OS en profitent,
pas seulement les deux nouvelles.
============================================================= */
/* ── LE VOILE ET LA BOÎTE ─────────────────────────────────────── */
.modal-scrim {
background: rgba(3, 6, 10, .74);
backdrop-filter: blur(10px) saturate(.9);
}
.modal {
position: relative;
border-radius: 20px;
border: 1px solid var(--n-bord-fort);
background: linear-gradient(168deg, rgba(19, 28, 40, .97), rgba(8, 13, 20, .98));
box-shadow: 0 70px 130px -50px #000, inset 0 1px 0 rgba(255, 255, 255, .055);
overflow: hidden;
}
/* Le filet d'or se tire en haut de la fenêtre à l'ouverture : le
même geste que la barre d'étape sous une couverture. */
.modal::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 5;
background: linear-gradient(90deg, var(--n-or), transparent 72%);
transform-origin: 0 50%;
animation: c25-tirer 720ms var(--m-vif) 120ms backwards;
}
.modal-head { padding: 15px 18px 12px; }
.modal-head h3 { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.modal-foot { padding: 13px 18px; gap: 9px; }
/* ── L'ŒIL POSÉ SUR UNE AFFICHE ───────────────────────────────
Il ne se montre qu'au survol de la carte : au repos, le mur
reste un mur d'affiches, pas une planche de boutons. Au doigt,
il n'y a pas de survol — il reste donc visible sous 900 px,
sinon il serait inatteignable sur un téléphone. */
.gal-oeil {
position: absolute; z-index: 4; right: 9px; bottom: 9px;
width: 32px; height: 32px; display: grid; place-items: center;
border-radius: 9px; cursor: pointer;
border: 1px solid rgba(255, 255, 255, .18);
background: rgba(5, 8, 13, .6); backdrop-filter: blur(8px);
color: #fff; opacity: 0; transform: translate3d(0, 5px, 0);
transition: opacity 240ms var(--m-doux), transform 240ms var(--m-ressort),
background 240ms var(--m-doux), border-color 240ms var(--m-doux);
}
.gal-carte:hover .gal-oeil, .gal-carte:focus-within .gal-oeil,
.voie-carte:hover .gal-oeil, .voie-carte:focus-within .gal-oeil,
.gal-oeil:focus-visible { opacity: 1; transform: none; }
.gal-oeil:hover {
background: rgba(5, 8, 13, .9);
border-color: color-mix(in srgb, var(--dep, var(--n-cyan)) 60%, transparent);
box-shadow: 0 0 22px -6px color-mix(in srgb, var(--dep, var(--n-cyan)) 80%, transparent);
}
.gal-oeil:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 2px; }
@media (max-width: 900px), (hover: none) {
.gal-oeil { opacity: 1; transform: none; }
}
/* ── LE CONTENU D'UN APERÇU DE DOSSIER ────────────────────────── */
.ap-boite { animation: c25-pop 380ms var(--m-ressort) backwards; }
.ap-cadre {
position: relative; aspect-ratio: 16 / 9; overflow: hidden;
border-radius: 13px; margin-bottom: 14px; isolation: isolate;
background: linear-gradient(160deg, #16202C, #070C12);
}
.ap-cadre .affiche, .ap-cadre img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.ap-cadre::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(5,8,13,.5) 0%, transparent 40%,
transparent 60%, rgba(5,8,13,.72) 100%);
}
.ap-kick {
margin: 0 0 4px; font-family: var(--f-mono); font-size: 10px; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--n-or);
}
.ap-titre { margin: 0 0 13px; font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.ap-faits {
display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
gap: 9px; margin: 0 0 13px;
}
.ap-fait {
padding: 10px 12px; border-radius: 10px; border: 1px solid var(--n-bord);
border-left: 2px solid var(--tn, var(--n-bord)); background: rgba(255, 255, 255, .022);
}
.ap-fait s {
display: block; text-decoration: none; font-family: var(--f-mono); font-size: 9px;
font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--n-tx-3);
}
.ap-fait b { display: block; margin-top: 5px; font-size: 13px; font-weight: 600; letter-spacing: -.015em; }
.ap-cyan { --tn: var(--n-cyan); } .ap-or { --tn: var(--n-or); }
.ap-vert { --tn: var(--n-vert); } .ap-rouge { --tn: var(--n-rouge); }
.ap-barre { margin: 0 0 12px; }
.ap-note {
margin: 0; padding: 11px 13px; border-radius: 10px;
border: 1px solid rgba(120, 150, 190, .12); background: rgba(255, 255, 255, .022);
font-size: 12.5px; line-height: 1.55; color: var(--n-tx-2);
}
.ap-note:empty { display: none; }
/* ── LA LISTE DERRIÈRE UNE TUILE DE SPIDER ────────────────────── */
.ap-liste { display: flex; flex-direction: column; gap: 6px; }
.ap-ligne {
display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
grid-template-areas: "nom meta qui" "nom meta silence";
align-items: center; gap: 2px 12px;
width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
padding: 10px 12px; border-radius: 10px;
border: 1px solid var(--n-bord); border-left: 2px solid rgba(139, 92, 246, .45);
background: rgba(255, 255, 255, .022);
transition: transform var(--m-court) var(--m-doux), border-color var(--m-court) var(--m-doux),
box-shadow var(--m-court) var(--m-doux);
}
.ap-ligne:hover {
transform: translate3d(0, -1px, 0);
border-color: rgba(139, 92, 246, .5);
box-shadow: -3px 0 20px -12px rgba(139, 92, 246, .9);
}
.ap-ligne:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 2px; }
.ap-l-nom { grid-area: nom; font-size: 13.5px; font-weight: 600; letter-spacing: -.015em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-l-meta { grid-area: meta; font-size: 11.5px; color: var(--n-tx-3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-l-qui { grid-area: qui; justify-self: end; font-family: var(--f-mono); font-size: 10.5px; color: var(--n-tx-2); }
.ap-l-silence { grid-area: silence; justify-self: end; font-family: var(--f-mono); font-size: 10px; color: var(--n-tx-3); }
.ap-reste { margin: 12px 0 0; font-size: 12px; color: var(--n-tx-3); }
@media (max-width: 560px) {
.ap-ligne { grid-template-columns: 1fr auto; grid-template-areas: "nom qui" "meta silence"; }
}
/* ── LA TUILE QUI S'OUVRE ─────────────────────────────────────
Elle doit se distinguer d'une tuile ordinaire AVANT le clic,
sinon on ne l'essaie jamais. Une loupe discrète en haut à
droite, qui s'allume au survol — et le curseur qui change. */
.sp-tuile-ouvrable {
display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.sp-loupe {
position: absolute; top: 11px; right: 11px; z-index: 3;
display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
color: var(--n-tx-3); background: rgba(255, 255, 255, .03);
border: 1px solid rgba(120, 150, 190, .12);
transition: color var(--m-court) var(--m-doux), background var(--m-court) var(--m-doux),
border-color var(--m-court) var(--m-doux), transform var(--m-court) var(--m-ressort);
}
.sp-tuile-ouvrable:hover .sp-loupe,
.sp-tuile-ouvrable:focus-visible .sp-loupe {
color: var(--sp-tn, #C4B5FD);
background: rgba(255, 255, 255, .06);
border-color: color-mix(in srgb, var(--sp-lum) 45%, transparent);
transform: translate3d(0, -1px, 0);
}
.sp-tuile-ouvrable:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.modal::before, .ap-boite { animation: none !important; }
.modal::before { transform: none; }
.gal-oeil, .ap-ligne, .sp-loupe { transition: none !important; opacity: 1; transform: none; }
}
/* =============================================================
45. L'ÉNERGIE SUR TOUTE PAGE, ET UN CRAN DE TEXTE DE PLUS
9 septembre 2026
Direction : « zid kter f la quality ou zid saghaar les textes f
l'OS kaml bach yb9a ybaan premium. Ou zid mzl plus d'effects :
ay page dkhalty liha ykono fiha les effects ou les animations,
comme ça donne l'énergie l'équipe ykhadmo bih, maykonch
statique. »
── POURQUOI LES ÉCRANS RESTAIENT STATIQUES
Les sections 39 à 44 ont traité SPIDER et CERCLE — deux écrans
sur quarante-neuf. Congés, Factures, Salaires, Documents,
Collaborateurs, Présence : rien. Et c'est là que l'équipe passe
ses journées.
⚠ ET LE PREMIER DIAGNOSTIC ÉTAIT FAUX — LA MESURE L'A DIT.
J'ai d'abord écrit que ces pages n'avaient AUCUNE animation, et
j'ai posé une cascade d'entrée sur `.list-row` et sur
`.tbl tbody tr`. Mesuré en direct sur Collaborateurs, la ligne
répondait `animation-name: fondu` — pas la mienne.
`components.css` ligne 560 pose déjà la cascade des lignes de
tableau, et ligne 488 celle des lignes de liste. Elles étaient
là depuis le début. Ma règle sur `.tbl tbody tr` REMPLAÇAIT une
cascade de six paliers par une de quatorze, pour rien ; celle
sur `.list-row` ne s'appliquait même pas, `.stack-list >
.list-row` étant plus spécifique.
Les deux sont retirées. Ce qui manquait vraiment n'était pas
l'ARRIVÉE — elle existait — mais la LUMIÈRE : au survol, une
ligne ne recevait qu'un aplat gris, un badge ne rayonnait pas,
un chiffre clé n'avait pas de filet, un avatar ne s'allumait
pas, un écran vide restait mort. C'est cela, et cela seul, que
la suite ajoute.
Cette section ne vise donc AUCUN écran en particulier. Elle
traite les quatre briques — donc les quarante-neuf pages d'un
coup, y compris celles qui n'existent pas encore.
── ⚠ CE QU'ON NE FAIT PAS, ET POURQUOI
Une ligne de tableau n'est pas une affiche. Elle est lue par
dizaines, à la verticale, souvent en cherchant une valeur
précise. Donc : pas de zoom, pas de rebond, pas de déplacement
horizontal — un tableau dont les lignes bougent devient
impossible à parcourir du regard. Ce qu'elles reçoivent, c'est
une ARRIVÉE (une fois, à l'affichage) et une LUMIÈRE au survol
(le temps qu'on est dessus). Rien qui tourne en boucle.
La cascade est PLAFONNÉE À QUATORZE lignes : au-delà, tout
arrive ensemble. Sans ce plafond, la 120ᵉ ligne d'un pipeline
entrerait trois secondes après la première.
============================================================= */
/* =============================================================
45.1 LE TEXTE, UN CRAN DE PLUS
============================================================= */
:root {
--fs-11: 10px; --fs-12: 10.5px; --fs-13: 11.5px; --fs-14: 12.5px;
--fs-16: 13.5px; --fs-18: 15.5px; --fs-22: 17.5px; --fs-28: 21px; --fs-36: 26px;
}
/* ⚠ 11,5 PX EST LE PLANCHER, ET IL EST TENU EXPRÈS. En dessous,
un texte courant cesse d'être lu et commence à être déchiffré —
et une équipe qui déchiffre son OS huit heures par jour finit
par ne plus le lire du tout. La densité vient d'ailleurs : des
titres, des marges et des hauteurs de ligne. */
body { font-size: 11.5px; }
.main > .page:not(.dashboard-home):not(.ps-root) > .page-head h1 {
font-size: clamp(21px, 1.9vw, 30px) !important;
}
.page-head h1, .page-head > b:first-child { font-size: 22px; }
.main > .page:not(.dashboard-home):not(.ps-root) .panel-head h3 { font-size: 11.5px !important; }
.main > .page:not(.dashboard-home):not(.ps-root) .panel-head { min-height: 46px; padding: 10px 14px !important; }
.main > .page:not(.dashboard-home):not(.ps-root) .panel-body { padding: 12px 14px !important; }
.main > .page:not(.dashboard-home):not(.ps-root) { padding: 20px 24px 44px !important; }
.table th { height: 36px !important; font-size: 10px !important; }
.table td { padding-block: 9px !important; }
.tbl tbody td { font-size: 11.5px; }
.sp-tuile b { font-size: 23px; }
.sp-maillon b { font-size: 20px; }
.gal-titre { font-size: 13.5px; }
.c25-dossier h1 { font-size: clamp(22px, 3vw, 31px); }
/* =============================================================
45.2 LES QUATRE BRIQUES QUI PORTENT TOUT L'OS
============================================================= */
@keyframes os25-flotte {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -6px, 0); }
}
/* ── LA LIGNE DE LISTE ────────────────────────────────────────
Elle arrive, puis son bord gauche s'allume quand on passe
dessus. Le bord, pas le fond : sur une liste dense, un fond qui
change fait clignoter tout le bloc au moindre mouvement de
souris, tandis qu'un filet de deux pixels désigne sans crier. */
.list-row {
position: relative;
transition: background var(--m-court) var(--m-doux),
box-shadow var(--m-court) var(--m-doux),
border-color var(--m-court) var(--m-doux);
}
.list-row::before {
content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
border-radius: 2px; background: var(--dep, var(--n-cyan));
transform: scaleY(0); transform-origin: 50% 50%; opacity: .9;
transition: transform 260ms var(--m-ressort);
}
.list-row:hover::before, .list-row:focus-within::before { transform: scaleY(1); }
.list-row:hover {
box-shadow: -10px 0 26px -20px color-mix(in srgb, var(--dep, var(--n-cyan)) 90%, transparent);
}
/* ── LA LIGNE DE TABLEAU ──────────────────────────────────────
Même principe, en plus discret encore : un tableau se parcourt
à la verticale, et tout ce qui déborde de la ligne gêne cette
lecture. */
.tbl tbody tr:hover td:first-child {
box-shadow: inset 2px 0 0 var(--dep, var(--n-cyan));
}
.tbl tbody td { transition: color var(--m-court) var(--m-doux); }
.tbl tbody tr:hover td { color: var(--n-tx); }
/* ── L'ÉTIQUETTE ──────────────────────────────────────────────
Un badge porte déjà sa couleur. Au survol de la ligne qui le
contient, il la fait rayonner : c'est le repère qu'on cherche
quand on parcourt une colonne de statuts. */
.badge, .pill {
transition: box-shadow var(--m-court) var(--m-doux),
border-color var(--m-court) var(--m-doux),
transform var(--m-court) var(--m-ressort);
}
.list-row:hover .badge, .tbl tbody tr:hover .badge,
.badge:hover, .pill:hover {
box-shadow: 0 0 18px -6px currentColor;
}
/* ── LE CHIFFRE CLÉ ───────────────────────────────────────────
Les `.kpi` sont sur presque toutes les pages de direction. Ils
reçoivent le filet du haut, comme les cartes du Cercle, et un
halo sur le nombre lui-même — jamais sur la boîte. */
/* ⚠ PAS DE `overflow: hidden` SUR `.kpi` — LA SECTION 23 L'INTERDIT
NOMMÉMENT, et pour une bonne raison : ces cartes laissent
volontairement déborder une orbite, une pastille posée sur un
bord, une ombre interne. Le filet est donc RENTRÉ de dix pixels
à chaque extrémité : il ne touche jamais les angles arrondis, et
il n'y a rien à rogner. */
.kpi { position: relative; }
.kpi::before {
content: ""; position: absolute; top: 0; left: 10px; right: 10px; height: 2px; z-index: 3;
background: linear-gradient(90deg, var(--dep, var(--n-or)), transparent 76%);
transform: scaleX(0); transform-origin: 0 50%;
transition: transform 520ms var(--m-vif);
}
.kpi:hover::before { transform: scaleX(1); }
.kpi b, .kpi .v {
transition: text-shadow var(--m-moyen) var(--m-doux);
}
.kpi:hover b, .kpi:hover .v {
text-shadow: 0 0 26px color-mix(in srgb, var(--dep, var(--n-or)) 62%, transparent);
}
/* ⚠ PAS DE REFLET SUR `.btn-primary` : IL EXISTE DEPUIS LE DÉBUT.
J'allais en écrire un. `neon-systeme.css` ligne 546 et
`neon.css` ligne 763 en posent déjà un, sur `::after`, avec
`overflow: hidden` et `isolation: isolate`. Le mien aurait
REMPLACÉ le leur — un effet identique, en moins bon, et un
`z-index` en conflit avec l'isolation qui fait passer le reflet
sous le texte.
C'est la deuxième fois dans la même journée que je m'apprêtais à
rajouter à côté de ce qui marchait déjà, au lieu de le brancher
(l'autre : la lumière du curseur, qui existait et à laquelle il
manquait six sélecteurs). La règle qui en sort : avant d'écrire
un effet, chercher s'il est déjà là. */
/* ── LE CHAMP QUI PREND LE FOCUS ──────────────────────────────
L'anneau ne se pose pas : il s'ouvre. C'est le seul retour
qu'on a quand on tabule à l'aveugle dans un formulaire. */
.input, .select, .textarea {
transition: border-color 200ms var(--m-doux), box-shadow 260ms var(--m-ressort),
background 200ms var(--m-doux);
}
.input:focus, .select:focus, .textarea:focus,
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
box-shadow: 0 0 0 3px rgba(37, 139, 255, .16), 0 0 22px -8px rgba(37, 139, 255, .8);
}
/* ⚠ PAS DE REFLET SUR `.progress` : IL EXISTE DÉJÀ AILLEURS.
La section 25 en pose un sur `.barre > i`, `.jauge i`,
`.eq-jauge i` et `.ll-charge i`. En ajouter un second sur le
conteneur aurait demandé `overflow: hidden` — ce qui aurait
rogné la lueur que `.tech-cockpit .progress > i` projette hors
de sa barre. Un effet qui en casse un autre n'est pas un gain. */
/* ── L'AVATAR ─────────────────────────────────────────────────
Il s'allume quand on survole la ligne : sur les écrans
d'équipe, c'est le visage qu'on cherche, pas le nom. */
.avatar { transition: box-shadow var(--m-court) var(--m-doux), transform var(--m-court) var(--m-ressort); }
.list-row:hover .avatar, .tbl tbody tr:hover .avatar, .avatar:hover {
transform: scale(1.06);
box-shadow: 0 0 0 2px rgba(255,255,255,.09), 0 0 20px -6px var(--n-cyan);
}
/* ── L'ÉCRAN VIDE ─────────────────────────────────────────────
Un écran qui n'a rien à montrer n'est pas une panne. Son icône
flotte très lentement — six secondes par cycle — pour que le
vide ait l'air d'attendre plutôt que d'être cassé. */
.empty .ico { animation: os25-flotte 6s ease-in-out infinite; }
/* ── LE SUR-TITRE ─────────────────────────────────────────────
Un tiret de couleur devant, qui se tire à l'arrivée de la page.
Trois pixels de haut ; c'est tout ce qu'il faut pour qu'un
sur-titre cesse d'être une ligne grise. */
.eyebrow { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before {
content: ""; width: 14px; height: 2px; border-radius: 2px; flex: none;
background: var(--dep, var(--n-or));
transform: scaleX(0); transform-origin: 0 50%;
animation: c25-tirer 620ms var(--m-vif) 180ms backwards;
}
@media (prefers-reduced-motion: reduce) {
.list-row, .tbl tbody tr, .list-row::before, .badge, .pill, .kpi::before,
.avatar, .empty .ico, .eyebrow::before,
.input, .select, .textarea {
animation: none !important; transition: none !important;
}
.list-row::before { transform: scaleY(1); }
.kpi::before, .eyebrow::before { transform: scaleX(1); }
}
/* =============================================================
46. L'ONDE AU CONTACT, ET DEUX RESPIRATIONS
9 septembre 2026
Direction : « zid animer kter ».
⚠ AVANT D'ÉCRIRE, J'AI CHERCHÉ CE QUI EXISTAIT DÉJÀ — parce que
trois fois aujourd'hui j'ai failli remplacer du bon code par du
moins bon. Résultat de la recherche :
· le reflet du bouton principal → existe (neon-systeme 546)
· la cascade des lignes de tableau → existe (components 560)
· le trait de lumière au changement
de page → existe (section 25.1)
· l'anneau doré au clic d'un bouton → existe (section 23, mais
il pulse au CENTRE et ne sert qu'aux boutons)
· le repère doré du menu actif → existe (shell 79)
Ce qui manquait vraiment : l'onde qui part DU POINT TOUCHÉ. Et
c'est le retour le plus important qui restait, parce que c'est
le seul que le doigt reçoit. Au survol, une souris prépare le
clic ; un doigt n'a rien avant que l'écran ne change. S'il
change en 400 ms, ces 400 ms sont muettes, et on tape deux fois.
============================================================= */
.onde {
position: absolute; inset: 0; z-index: 0;
border-radius: inherit; overflow: hidden; pointer-events: none;
}
/* ⚠ LE DISQUE EST DANS UN CONTENEUR QUI LE ROGNE, ET NON L'INVERSE.
Poser `overflow: hidden` sur la carte elle-même aurait rogné son
orbite, ses pastilles de bord et ses ombres internes — la
section 23 l'interdit nommément. Le conteneur de l'onde hérite
du rayon et se rogne tout seul : la carte n'est pas touchée. */
.onde > i {
position: absolute; left: var(--rx, 50%); top: var(--ry, 50%);
width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.42), rgba(255,255,255,0) 70%);
transform: scale(0);
animation: os25-onde-clic 640ms var(--m-doux) forwards;
}
@keyframes os25-onde-clic {
from { transform: scale(0); opacity: .9; }
to { transform: scale(30); opacity: 0; }
}
/* ── LE SIGLE DU STUDIO ───────────────────────────────────────
Douze secondes par cycle. C'est assez lent pour qu'on ne le
remarque jamais en travaillant, et assez présent pour qu'un
écran laissé ouvert ne ressemble pas à une capture d'écran.
⚠ IL EST DANS LE MENU, PAS DANS LE CONTENU. La règle « une
seule chose respire » vaut par champ de vision : le repère
« c'est ici » respire dans le contenu, le sigle respire dans la
colonne de gauche. Les deux ne se disputent jamais l'œil. */
@keyframes os25-sigle {
0%, 100% { filter: drop-shadow(0 0 14px rgba(242,185,64,.16)); }
50% { filter: drop-shadow(0 0 26px rgba(242,185,64,.34)); }
}
.brand-logo { animation: os25-sigle 12s ease-in-out infinite; }
/* ── L'ICÔNE DU MENU ACTIF ────────────────────────────────────
Elle fait un pas en avant au moment où l'écran change. C'est ce
qui relie le clic dans la colonne au contenu qui arrive à
droite : sans lui, les deux moitiés de l'écran bougent sans
avoir l'air de se parler. */
@keyframes os25-icone-active {
0% { transform: scale(.82); }
55% { transform: scale(1.16); }
100% { transform: scale(1); }
}
.nav-item.is-active .ico { animation: os25-icone-active 480ms var(--m-ressort) 1; }
@media (prefers-reduced-motion: reduce) {
.onde { display: none; }
.brand-logo, .nav-item.is-active .ico { animation: none !important; }
}
/* =============================================================
47. LE TEXTE POSÉ SUR UNE COUVERTURE
9 septembre 2026
Direction : « zid saghar chwiya, ghi texte li f couverture ».
Seulement celui-là. Les titres sous les cartes, les tableaux et
le corps de texte ne bougent pas — ils sont au plancher de
11,5 px depuis la section 45.
── POURQUOI CES ÉTIQUETTES PARAISSAIENT GROSSES
Elles n'avaient pas suivi. Le corps du texte est passé de 13 à
12 puis à 11,5 px ; « Pré-production » et « 18 J DE RETARD »
sont restées à 11 px avec 5 px de rembourrage vertical et 10 px
de rembourrage latéral. Une pastille aussi haute que le titre
du dossier qu'elle qualifie, posée sur une affiche de 200 px,
finit par disputer l'image au lieu de la commenter.
⚠ ET ON NE DESCEND PAS PLUS BAS QUE 9,5 PX ICI. Ces étiquettes
sont en majuscules sur une image : l'œil les lit d'un coup ou
pas du tout. Sous ce seuil, « POST-PRODUCTION » sur une photo
claire cesse d'être lisible, et le voile derrière ne suffit
plus à la sauver.
============================================================= */
/* La pastille d'étape et l'alerte de retard, dans la galerie, la
filmothèque, le tableau et la fenêtre d'aperçu. */
.gal-phase {
padding: 3px 8px; gap: 5px;
font-size: 9.5px; letter-spacing: .04em;
}
.gal-phase .point-sig { transform: scale(.86); }
.gal-alerte {
padding: 3px 8px;
font-size: 9.5px; letter-spacing: .04em;
}
/* Les mêmes, côté CERCLE : le code du livrable, l'étape et le
retard posés sur la couverture d'un dossier. */
.c25-etape-puce, .c25-code {
padding: 3px 7px; border-radius: 6px;
font-size: 8.5px; letter-spacing: .1em;
}
.c25-retard {
padding: 3px 7px; border-radius: 6px;
font-size: 8.5px; letter-spacing: .09em;
}
/* Dans la fenêtre d'aperçu, la couverture fait le double : les
étiquettes peuvent y reprendre un demi-point sans écraser
l'image. */
.ap-cadre .gal-phase, .ap-cadre .gal-alerte { font-size: 10px; padding: 4px 9px; }
/* =============================================================
48. LA COUVERTURE D'ACCUEIL, ET LES ANNEAUX QUI VIVENT
9 septembre 2026
Direction, cinq captures à l'appui :
S1 · le rond « 02 » des étapes — qu'il tourne
S2 · le cadran « 5 % » — qu'il tourne, avec une lumière
douce au milieu, « b7ala life »
S3 · le titre du projet prioritaire — plus grand
S4 · le bloc en dessous — plus petit
S5 · « Bonsoir Achraf » — au milieu, et plus petit
── ⚠ CE QUE J'AI TROUVÉ AVANT D'ÉCRIRE (S1 ET S2)
Les anneaux TOURNENT DÉJÀ. `.anneau-boite::before` est une
couronne pointillée à 22 s, `::after` un arc conique à 7 s,
`.scene-cadran::before` un cercle à 14 s et `::after` un halo
coloré à 44 s en sens inverse. Rien n'était immobile.
Si la Direction demande « qu'ils tournent », c'est qu'à ces
vitesses-là le mouvement ne se LIT pas : 22 secondes par tour,
c'est un dixième de degré par image. On accélère donc la
couronne (22 s → 15 s) au lieu d'en ajouter une cinquième, et
surtout on ajoute ce qui manquait vraiment et qui était nommé
dans la demande : LA LUMIÈRE AU CENTRE. Le cadran avait des
anneaux autour et un trou noir au milieu.
Pour S1, la couronne existait aussi — mais seulement sur
l'étape en cours, et c'était voulu : « la rotation dit c'est
ici ». La Direction la veut sur toutes. On la met sur toutes,
en gardant la hiérarchie : l'étape en cours tourne vite et
nettement, les autres lentement et à peine. L'information « où
en est-on » survit, et tout bouge.
============================================================= */
/* ── S2 · LA LUMIÈRE AU CŒUR DU CADRAN ────────────────────────
Une respiration lente derrière le chiffre. Elle est POSÉE SOUS
le texte (`z-index: -1` sur un centre déjà positionné), sinon
elle laverait le « 5 % » qu'elle est censée mettre en valeur. */
@keyframes os25-coeur {
0%, 100% { opacity: .38; transform: scale(.94); }
50% { opacity: .72; transform: scale(1.04); }
}
.anneau-centre::before {
content: ""; position: absolute; inset: 14%; z-index: -1; border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle,
color-mix(in srgb, var(--dep, var(--n-cyan)) 34%, transparent) 0%,
transparent 68%);
animation: os25-coeur 5.5s ease-in-out infinite;
}
/* Le cadran du hero est le plus grand : sa lumière porte plus
loin et respire un peu plus lentement. */
.scene-cadran .anneau-centre::before {
inset: 6%;
animation-duration: 7s;
background: radial-gradient(circle, rgba(242,185,64,.3) 0%, rgba(18,217,255,.14) 42%, transparent 72%);
}
/* La couronne pointillée devient perceptible. */
.anneau-boite::before { animation-duration: 15s; }
.scene-cadran::before { animation-duration: 11s; }
/* ── S1 · TOUTES LES ÉTAPES TOURNENT ──────────────────────────
La couronne n'était que sur l'étape en cours. Elle passe sur
toutes — mais l'étape en cours garde l'avantage : deux fois
plus rapide, deux fois plus visible. */
.c25-rond { position: relative; }
.c25-rond::before {
content: ""; position: absolute; inset: -7px; border-radius: 50%;
border: 1px dashed currentColor; opacity: .22;
animation: os25-orbite 26s linear infinite;
pointer-events: none;
}
.c25-jalon.ici .c25-rond::before { opacity: .5; animation-duration: 12s; }
/* Et une lumière au creux du rond — pas un pseudo-élément de
plus : une ombre interne suffit, et elle n'ajoute aucun enfant
dans un conteneur centré en flex, où une boîte vide de plus
décalerait le chiffre. */
.c25-jalon .c25-rond {
box-shadow: inset 0 0 12px -4px color-mix(in srgb, currentColor 55%, transparent);
}
/* ── S3 · LE TITRE DU PROJET PRIORITAIRE ──────────────────────
« Le titre ykon kbir kter mn haka. » Il était retombé à 30 px
quand le corps de texte est passé à 11,5 px : le titre d'une
couverture pleine largeur ne suit pas le corps, il suit
l'image. */
.dashboard-home .scene-titre,
.hero-solo .scene-titre,
.hero-scene .scene-titre {
font-size: clamp(40px, 4.2vw, 68px) !important;
line-height: .98 !important;
letter-spacing: -.045em !important;
}
/* ── S4 · ET TOUT CE QUI EST DESSOUS SE RESSERRE ──────────────
Le type de projet, la phrase d'action, les pastilles, le
bouton et les vignettes : c'est la légende de l'image, pas son
sujet. */
.scene-type { font-size: 11px !important; letter-spacing: .12em !important; }
.scene-phrase { font-size: 15px !important; margin-top: 4px !important; }
.scene-eyebrow { font-size: 9.5px !important; }
.scene-badge {
font-size: 11px !important; padding: 6px 13px !important;
}
.scene-actions .btn-hero {
font-size: 13px !important; padding: 11px 20px !important; min-height: 44px !important;
}
.scene-vignette { width: 78px !important; }
.scene-suite { gap: 9px !important; }
/* ── S5 · « BONSOIR ACHRAF » AU MILIEU ────────────────────────
Elle était calée à gauche, sur `left: 48px; right: 200px` —
les 200 px de droite réservaient la place du cadran. En la
centrant sur toute la largeur, elle reste à distance du cadran
(elle mesure environ 600 px au milieu de 1 400) et la
couverture retrouve un axe. */
.dashboard-home .hero-coiffe > .command-head {
left: 0 !important;
right: 0 !important;
padding: 0 24px !important;
justify-content: center !important;
text-align: center;
}
/* ⚠ MESURÉ : MA PREMIÈRE VALEUR L'AGRANDISSAIT AU LIEU DE LA
RÉDUIRE. `clamp(20px, 1.7vw, 27px)` donnait 24,5 px sur un
écran de 1 440, alors que la salutation en faisait 19,4 avant
que j'y touche — la Direction demandait « tssghar chwiya ». La
borne intermédiaire est ce qui compte : c'est elle qui gagne à
cette largeur, pas les bornes. */
.hero-coiffe > .command-head .command-identity h1 {
font-size: clamp(15px, 1.15vw, 20px) !important;
}
/* Sous 1 100 px, le cadran et la salutation se disputeraient la
même bande : elle repasse à gauche, où elle a de la place. */
@media (max-width: 1100px) {
.dashboard-home .hero-coiffe > .command-head {
justify-content: start !important;
text-align: left;
padding: 0 20px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.anneau-centre::before, .c25-rond::before { animation: none !important; }
}
/* =============================================================
49. LE TRANSFERT EN LOT, ET LA COUVERTURE QUI RESPIRE
9 septembre 2026
Direction : « possible n selectionnes bzaf dial les clients
bach nbadel l commercial au cas de absence dial chi
commercial ? » — oui, et c'est la partie utile de ce lot.
Puis : « la couverture tros chargé, ziid saghar Bonjour Achraf
ou ziid saghar les elements li ta7t texte. Khasso ykon lfar9 :
tab9a tsswira twila, tal3a tal lfou9. »
Une seule idée pour la couverture : L'IMAGE EST LE SUJET, LE
TEXTE EST LA LÉGENDE. Elle gagne 100 px de haut, tout ce qui
n'est pas le titre du projet perd un cran, et la salutation
redescend encore — c'est un bonjour, pas un titre.
============================================================= */
/* ── LA BARRE DE TRANSFERT ────────────────────────────────────
Elle n'existe que lorsqu'au moins une ligne est cochée : une
barre d'actions affichée en permanence sur un tableau qu'on
consulte plus souvent qu'on ne le modifie devient du décor. */
.sp-transfert {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 0 0 11px; padding: 10px 13px;
border: 1px solid rgba(139, 92, 246, .34); border-radius: 12px;
background: linear-gradient(100deg, rgba(139, 92, 246, .12), rgba(12, 19, 28, .92) 46%);
box-shadow: 0 14px 34px -24px #000, inset 0 1px 0 rgba(255, 255, 255, .05);
animation: os25-arrive 320ms var(--m-ressort) backwards;
}
.sp-transfert[hidden] { display: none; }
.sp-tr-n { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; color: #DDD1FF; }
.sp-tr-choix {
padding: 8px 11px; border-radius: 9px; border: 1px solid var(--n-bord);
background: #09111A; color: var(--n-tx); font: 600 12px var(--f-body); min-width: 190px;
}
.sp-tr-choix:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 1px; }
/* La colonne des cases : étroite, et la case elle-même agrandie —
on la vise au doigt autant qu'à la souris. */
.sp-tr-case { width: 38px; text-align: center; }
.sp-table-sel input[type="checkbox"] {
width: 16px; height: 16px; cursor: pointer;
accent-color: var(--n-violet, #8B5CF6);
}
/* Une ligne cochée se voit sans avoir à chercher sa case. */
.sp-table-sel tbody tr:has(input:checked) {
background: rgba(139, 92, 246, .09);
}
.sp-table-sel tbody tr:has(input:checked) td:first-child {
box-shadow: inset 2px 0 0 var(--n-violet, #8B5CF6);
}
/* ── LA COUVERTURE : PLUS D'IMAGE, MOINS DE TEXTE ─────────────
Cent pixels de plus en hauteur. C'est la seule chose de cette
section qui grandit. */
.dashboard-home .hero-scene {
min-height: clamp(430px, 48vh, 580px) !important;
}
/* La salutation : c'est un bonjour, pas un titre. */
.hero-coiffe > .command-head .command-identity h1 {
font-size: clamp(14px, 1vw, 18px) !important;
}
.hero-coiffe > .command-head .command-identity p { font-size: 10.5px !important; }
.hero-coiffe > .command-head .command-kicker { font-size: 9px !important; }
.hero-coiffe > .command-head .db-date { font-size: 11px !important; padding: 7px 13px !important; }
.hero-coiffe > .command-head > .avatar { width: 38px !important; height: 38px !important; }
/* Tout ce qui est sous le titre descend d'un cran de plus. Le
titre du projet, lui, ne bouge pas : c'est lui le sujet. */
.scene-type { font-size: 10px !important; }
.scene-phrase { font-size: 13.5px !important; }
.scene-eyebrow { font-size: 9px !important; }
.scene-badge { font-size: 10.5px !important; padding: 5px 11px !important; }
.scene-actions .btn-hero,
.scene-actions .btn { font-size: 12.5px !important; padding: 10px 17px !important; min-height: 42px !important; }
.scene-vignette { width: 66px !important; }
.scene-suite { gap: 8px !important; }
.hero-solo .scene-corps { padding: 26px 34px 62px !important; }
/* =============================================================
50. LA COUVERTURE : LA PHOTO PREND TOUTE LA PLACE, ET PLUS
RIEN NE SE CHEVAUCHE
9 septembre 2026
Direction, trois captures : « chouf l Maalouma kifach mza7ma…
chouf l Coach Amal hta howa kifach mza7em. Ta9der tkabar blassa
dial tsswira, kabarha bach yb9a kolchi mzian. La photo tla3 tal
lfou9, ou lktaba tji fou9 la photo. Dir hadchi ma tb9ach
takhrba9 lia hna. Ou zid saghar kolchi ou kabar la photo. »
── ⚠ LE CHEVAUCHEMENT VIENT DE MOI, ET IL A DEUX CAUSES
1. J'ai centré la salutation (section 48). Elle est en position
absolue sur la couverture, à 30 px du haut. Tant qu'elle
était calée à GAUCHE avec `right: 200px`, elle occupait une
bande que le titre, plus bas, ne croisait pas. Centrée, elle
est venue se poser pile au-dessus du titre du projet.
2. Et surtout : `.dashboard-home .hero-scene { min-height:
430px }`, écrit à la section 49, a la même spécificité que
`.hero-solo .hero-scene { min-height: clamp(580px, 74vh,
820px) }` — mais il est écrit APRÈS. Il a donc RÉTRÉCI la
couverture pleine largeur de 580 à 430 px. Le titre s'est
retrouvé à l'étroit, « MAALOUMA OUALFA » est passé sur deux
lignes, et les deux lignes sont montées dans la salutation.
J'ai fabriqué le problème en croyant agrandir l'image. La
correction n'est donc pas un rustinage : la couverture pleine
largeur reprend sa hauteur — et davantage, comme demandé — et
le texte reçoit une BANDE RÉSERVÉE sous la salutation, qu'il ne
peut plus franchir.
============================================================= */
/* ── LA PHOTO ─────────────────────────────────────────────────
Pleine largeur, elle monte de 430 à 620 px minimum, jusqu'à
900 sur un grand écran. C'est le seul élément de cette section
qui grandit — tout le reste rétrécit. */
.hero-solo .hero-scene {
min-height: clamp(620px, 78vh, 900px) !important;
}
/* ── LA BANDE RÉSERVÉE ────────────────────────────────────────
124 px en haut : la salutation occupe de 26 à ~96 px, le titre
commence après. Ce n'est pas un réglage à l'œil — c'est la
hauteur mesurée du bloc salutation plus une marge de sécurité.
Et le texte s'élargit : à 52 % de la largeur, « MAALOUMA
OUALFA » ne tenait pas sur une ligne et passait à deux, ce qui
est précisément ce qui l'a fait monter. */
.hero-solo .scene-corps {
/* ⚠ MESURÉ : À 64 %, « MAALOUMA OUALFA » PASSAIT ENCORE SUR
DEUX LIGNES. La couverture pleine largeur fait environ
980 px ici, donc 64 % ne laissaient que 539 px de texte,
quand ce nom-là en demande 640. À 78 %, les six projets de
l'affiche tiennent sur une ligne — vérifié un par un. Le
paragraphe, lui, reste bridé à 54 caractères plus bas : une
ligne de texte courant longue de 700 px ne se lit plus. */
max-width: min(1020px, 78%) !important;
padding: 124px 44px 54px !important;
}
.dashboard-home .hero-coiffe > .command-head { top: 26px !important; }
/* ── ET TOUT LE RESTE RÉTRÉCIT ────────────────────────────────
« Ghi saghar dakchi. » Le titre du projet ne bouge pas : c'est
lui qu'on vient lire. Ce qui l'entoure devient une légende. */
.scene-eyebrow { font-size: 8.5px !important; letter-spacing: .18em !important; }
.scene-type { font-size: 9.5px !important; letter-spacing: .14em !important; }
.scene-phrase {
font-size: 12px !important; line-height: 1.45 !important;
max-width: 54ch !important; margin-top: 8px !important;
}
.scene-badge { font-size: 9.5px !important; padding: 4px 10px !important; }
.scene-actions { gap: 8px !important; }
.scene-actions .btn-hero,
.scene-actions .btn {
font-size: 11.5px !important; padding: 9px 15px !important; min-height: 38px !important;
}
.scene-vignette { width: 48px !important; }
.scene-suite { gap: 6px !important; }
/* ⚠ SAUF AU DOIGT. Un bouton de 38 px se rate sur un téléphone —
la règle des 44 px de la section 43 reprend la main ici, parce
que cette section-ci est écrite après elle. */
@media (max-width: 560px) {
.scene-actions .btn-hero,
.scene-actions .btn { min-height: 44px !important; font-size: 12.5px !important; }
/* Sur un écran étroit, la salutation est déjà repassée à gauche
(section 48) : la bande réservée n'a plus lieu d'être aussi
haute, et chaque pixel compte. */
.hero-solo .scene-corps { padding: 88px 18px 44px !important; max-width: 100% !important; }
.hero-solo .hero-scene { min-height: clamp(520px, 70vh, 680px) !important; }
}
/* =============================================================
51. LE BAS DE L'ACCUEIL — INDICATEURS, MOT DU JOUR, AGENDA
9 septembre 2026
Direction : « l'agenda diha a droite ou tla3 lina l'agenda
reel, machi ghir textes, nchofo agenda du mois… l'indicateur
yjiw a gauche ou y animaw chwiya… hadak l msg de "créer" ykon
ki3ti l kola wahd un msg du jour… fach kital3o les msgs
katwali flou, katrja3 m9ada, automatique, kola 5 s… ou hada
fach ykon 100 % khas tab9a t clignote bel lkhder. »
============================================================= */
/* ── LE CADRAN PLEIN CLIGNOTE ─────────────────────────────────
⚠ C'EST LA DEUXIÈME CHOSE QUI RESPIRE EN CONTINU DANS L'OS, ET
ELLE EST JUSTIFIÉE : un dossier à 100 % est un dossier qu'on
peut livrer AUJOURD'HUI. À côté d'un dossier à 97 %, il ne se
distinguait par rien. Le vert et le battement disent « celui-là
est prêt, prends-le ».
Il bat lentement — deux secondes et demie — pour appeler sans
harceler. */
@keyframes os25-plein {
0%, 100% { filter: drop-shadow(0 0 6px rgba(36, 217, 129, .45)); opacity: .95; }
50% { filter: drop-shadow(0 0 22px rgba(36, 217, 129, .95)); opacity: 1; }
}
.anneau.an-plein .an-arc { stroke: #24D981 !important; }
.anneau.an-plein { animation: os25-plein 2.5s ease-in-out infinite; }
.anneau-boite:has(.an-plein) .anneau-centre b { color: #8FE9BC; }
/* ── LES INDICATEURS, À GAUCHE, ET QUI ARRIVENT ───────────────
« y animaw chwiya » : les quatre tuiles se posent l'une après
l'autre. Le halo et le filet sont déjà là (section 45). */
.db-kpis > *, .kpi-grille > * { animation: os25-arrive 400ms var(--m-vif) backwards; }
.db-kpis > *:nth-child(2), .kpi-grille > *:nth-child(2) { animation-delay: 70ms; }
.db-kpis > *:nth-child(3), .kpi-grille > *:nth-child(3) { animation-delay: 140ms; }
.db-kpis > *:nth-child(4), .kpi-grille > *:nth-child(4) { animation-delay: 210ms; }
/* ── LE MOT DU JOUR ───────────────────────────────────────────
Le flou est court — 260 ms de sortie, 260 ms de retour — et il
ne porte que le texte, jamais le fond ni le sigle : flouter un
panneau entier toutes les cinq secondes ferait vibrer tout le
bas de l'écran. */
.mot-jour { position: relative; overflow: hidden; }
.mot-corps {
position: relative; z-index: 2;
display: flex; flex-direction: column; justify-content: center;
gap: 10px; padding: 30px 30px 54px; min-height: 210px;
transition: filter 260ms var(--m-doux), opacity 260ms var(--m-doux),
transform 260ms var(--m-doux);
}
.mot-corps.mot-flou { filter: blur(9px); opacity: .12; transform: translate3d(0, -5px, 0); }
.mot-kick {
margin: 0; font-family: var(--f-mono); font-size: 9px; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase; color: var(--n-or);
}
.mot-texte {
margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.45;
letter-spacing: -.02em; color: var(--n-tx); max-width: 34ch;
text-wrap: balance;
}
/* ── L'AGENDA DU MOIS ─────────────────────────────────────────
Sept colonnes, lundi en tête. Les cases n'ont pas de largeur
fixe : elles se partagent la place, donc la grille tient dans
la colonne comme sur un téléphone. */
.db-agenda .panel-body { padding-top: 8px; }
.ag-entete, .ag-grille {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
}
.ag-entete {
margin-bottom: 6px;
font-family: var(--f-mono); font-size: 9px; font-weight: 700;
letter-spacing: .12em; color: var(--n-tx-3); text-align: center;
}
.ag-case {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 6px 2px 5px; min-height: 40px; cursor: pointer;
border: 1px solid transparent; border-radius: 9px; background: transparent;
color: var(--n-tx-2); font: inherit;
transition: background var(--m-court) var(--m-doux), border-color var(--m-court) var(--m-doux),
color var(--m-court) var(--m-doux);
}
.ag-case.ag-hors { cursor: default; }
.ag-n { font-family: var(--f-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.ag-pts { display: flex; gap: 2px; }
.ag-pts i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.ag-case.ag-plein { color: var(--n-tx); }
.ag-case:hover { background: rgba(255, 255, 255, .04); border-color: var(--n-bord); }
.ag-case.ag-today { border-color: rgba(242, 185, 64, .45); color: var(--n-or); }
.ag-case.ag-on {
background: rgba(18, 217, 255, .1);
border-color: rgba(18, 217, 255, .45);
color: #fff;
box-shadow: 0 0 18px -8px rgba(18, 217, 255, .9);
}
.ag-case:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 1px; }
.ag-detail {
margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--n-bord);
display: flex; flex-direction: column; gap: 6px;
animation: os25-arrive 300ms var(--m-vif) backwards;
}
.ag-item { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.ag-h { flex: none; width: 38px; font-size: 10.5px; color: var(--n-tx-3); }
.ag-t { min-width: 0; }
.ag-vide { margin: 2px 0 0; font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
.anneau.an-plein, .db-kpis > *, .kpi-grille > *, .ag-detail { animation: none !important; }
.mot-corps { transition: none !important; }
.mot-corps.mot-flou { filter: none; opacity: 1; transform: none; }
}
/* =============================================================
52. LA COUVERTURE — REMISE D'APLOMB
9 septembre 2026
Direction : « ma9aditihach zwina… raja3 Achraf a gauche, ou
saghar la photo chwiya, ou dok les boutons dial la date li hda
Achraf dihom a gauche lfou9, ou douk les slides dial la photos
sagharhom chwiya ou dihom a droite lta7t. »
── ⚠ CE QUE J'AVAIS CASSÉ, ET C'EST LA MÊME ERREUR DEUX FOIS
J'ai centré la salutation à la section 48 parce qu'on me
demandait de la mettre « au milieu ». Elle s'est retrouvée
suspendue au-dessus du vide, au centre d'une image de 620 px,
sans rien pour l'accrocher — et le titre du projet est resté en
bas à gauche. Deux blocs de texte, deux coins opposés, aucun
axe commun : une composition n'a pas de centre parce qu'on a
centré un de ses éléments.
Et les vignettes : `master-v2.css` leur pose
`left: 42px; right: 30px`, donc elles s'étalaient sur toute la
largeur et leur contenu se rangeait à gauche, sous le texte.
Trois choses empilées dans le coin bas-gauche, et deux coins
vides à droite.
── LA COMPOSITION, MAINTENANT
┌──────────────────────────────────────────────┐
│ salutation · chaîne · date cadran % │
│ │
│ PROJET PRIORITAIRE │
│ D-CAP │
│ publicité · action · pastilles · boutons │
│ vignettes │
└──────────────────────────────────────────────┘
Quatre coins occupés, un seul axe de lecture à gauche, et
l'image respire au milieu. C'est tout ce qu'il fallait.
============================================================= */
/* ── LA SALUTATION REVIENT À GAUCHE, AVEC SES BOUTONS ─────────
La chaîne BORN—SPIDER—CERCLE et la date sont ses voisines dans
la même grille : elles la suivent sans qu'on ait à les
déplacer une par une. */
.dashboard-home .hero-coiffe > .command-head {
left: 40px !important;
right: auto !important;
top: 24px !important;
padding: 0 !important;
justify-content: start !important;
text-align: left;
}
/* ── LA PHOTO REDESCEND D'UN CRAN ────────────────────────────
620 px, c'était une affiche de cinéma pour un écran de
travail : il fallait faire défiler pour atteindre le Cercle.
520 px laissent l'image dominer sans avaler la page. */
.hero-solo .hero-scene {
min-height: clamp(480px, 58vh, 620px) !important;
}
/* Le bloc de texte n'a plus besoin de sa bande de sécurité : la
salutation n'est plus au-dessus de lui, elle est à côté, en
haut. Il retrouve un aplomb normal et l'image reprend l'espace
que la bande lui prenait. */
.hero-solo .scene-corps {
padding: 34px 44px 58px !important;
}
/* ── LES VIGNETTES : EN BAS À DROITE, ET PLUS PETITES ─────────
⚠ `left: auto` EST LA LIGNE QUI COMPTE. Tant que `left` et
`right` sont posés tous les deux, la boîte est ÉTIRÉE d'un
bord à l'autre et son contenu se range à gauche — la mettre
« à droite » en ne touchant qu'à `right` n'aurait rien changé
du tout. */
.scene-suite {
left: auto !important;
right: 26px !important;
bottom: 20px !important;
width: auto !important;
}
.scene-vignette { width: 48px !important; height: 32px !important; }
.scene-suite .scene-fleche { width: 30px !important; height: 30px !important; }
@media (max-width: 760px) {
/* Sur un téléphone, le coin bas-droit est déjà pris par le
bouton de l'assistant : les vignettes repassent en dessous du
texte, sur toute la largeur. */
.scene-suite {
left: 16px !important; right: 16px !important; bottom: 14px !important;
}
.hero-solo .scene-corps { padding: 26px 18px 74px !important; }
}
/* =============================================================
53. LA CITATION TIENT LA JOURNÉE, LE PLANNING DÉFILE,
ET LES LUMIÈRES NE SE COUPENT PLUS
9 septembre 2026
Direction : « le citation yb9aw, nhar kaml citation du jour
tkon 3and l'équipe kamla. Ou l'agenda hia li fiha les msgs dial
l planning, kidozo kola 5 s ou kimchiw. Ou lights li kidoz f
couverture makamlinch, fihom bugs, kit9at3o — khali light ydouz
hta f titre bohdo ou t'anime bchwiya. Ou dik 100 % majatch
zwina : dirha katch3al ou katfa bel vert. »
============================================================= */
/* ── ⚠ LA LAME DE LUMIÈRE NE PASSAIT QU'UNE FOIS ──────────────
Elle était écrite `animation: os25-lame 1400ms … 1` : UNE
passe, au chargement, puis plus rien. Le commentaire d'origine
disait « l'élément est recréé à chaque rendu de la scène » —
sauf que le carrousel ne remplace que le CORPS de la scène, pas
le voile. Donc au premier projet la lumière passait, et aux
cinq suivants elle ne repassait jamais. Vue une fois puis
disparue : c'est exactement ça, « kit9at3o ».
Elle boucle maintenant, lentement. La reprise est invisible
parce que les deux extrémités de la course placent la bande
claire HORS du cadre : à 55 % elle est déjà sortie à gauche, et
elle y reste jusqu'à la fin du cycle. Le saut de fin de boucle
se produit donc pendant que rien n'est visible. */
.hero-scene .scene-voile::after {
animation: os25-lame 9s var(--m-doux) infinite !important;
}
@keyframes os25-lame {
0% { background-position: 200% 0; }
55% { background-position: -100% 0; }
100% { background-position: -100% 0; }
}
/* ── UNE LUMIÈRE RIEN QUE POUR LE TITRE ───────────────────────
Sept secondes par passage, décalée de trois secondes sur celle
de la couverture : les deux ne se croisent jamais au même
endroit, sinon on verrait une seule grosse lueur au lieu de
deux gestes.
⚠ `plus-lighter` PLUTÔT QU'UN DÉGRADÉ SUR LE TEXTE. Découper la
lumière dans les lettres (`background-clip: text`) obligerait à
passer la couleur du titre en `transparent` — et le titre
perdrait son ombre portée, celle qui le rend lisible sur une
photo claire. Ici on AJOUTE de la lumière par-dessus, sans
toucher ni à la couleur ni à l'ombre.
Et pas de `overflow: hidden` : sur un titre de 60 px, il
rognerait les jambages des lettres. La bande est un dégradé
doux qui déborde sans bord visible. */
.scene-titre { position: relative; }
.scene-titre::after {
content: ""; position: absolute; inset: -10px -24px; z-index: 1;
pointer-events: none;
background: linear-gradient(100deg,
transparent 40%, rgba(255,255,255,.26) 50%, transparent 60%);
background-size: 280% 100%;
mix-blend-mode: plus-lighter;
animation: os25-lame-titre 7s var(--m-doux) 3s infinite;
}
@keyframes os25-lame-titre {
0% { background-position: 190% 0; }
48% { background-position: -90% 0; }
100% { background-position: -90% 0; }
}
/* ── LE 100 % S'ALLUME ET S'ÉTEINT ───────────────────────────
La version d'avant ne faisait varier qu'une ombre portée — de
loin, ça ne se voyait pas. C'est l'ARC lui-même qui s'allume et
s'éteint maintenant, en vert, pendant que la boîte garde une
lueur verte fixe pour qu'il reste quelque chose entre deux
battements. */
.anneau.an-plein { animation: none !important; }
.anneau.an-plein .an-arc {
stroke: #24D981 !important;
animation: os25-allume-eteint 1.9s ease-in-out infinite;
}
@keyframes os25-allume-eteint {
0%, 100% { opacity: .18; }
50% { opacity: 1; }
}
.anneau-boite:has(.an-plein) {
filter: drop-shadow(0 0 16px rgba(36, 217, 129, .45));
}
/* ── LE BANDEAU DU PLANNING, DANS L'AGENDA ───────────────────
Il sort par la gauche, la ligne change hors champ, il revient
par la droite. On ne voit jamais le remplacement — seulement un
défilement. */
.ag-fil {
display: flex; align-items: center; gap: 9px;
margin: 0 0 12px; padding: 9px 12px;
border: 1px solid var(--n-bord); border-left: 2px solid var(--n-cyan);
border-radius: 10px; background: rgba(18, 217, 255, .05);
font-size: 11.5px; overflow: hidden;
}
.ag-fil-t {
min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--n-tx);
transition: transform 300ms var(--m-doux), opacity 300ms var(--m-doux);
}
.ag-fil-sort .ag-fil-t { transform: translate3d(-22px, 0, 0); opacity: 0; }
.ag-fil-entre .ag-fil-t { transform: translate3d(22px, 0, 0); opacity: 0; transition: none; }
/* La citation ne tourne plus : elle n'a plus besoin d'un flou de
transition, seulement de place pour être lue. */
.mot-corps { min-height: 190px; }
.mot-texte { font-size: 17px; }
@media (prefers-reduced-motion: reduce) {
.hero-scene .scene-voile::after,
.scene-titre::after,
.anneau.an-plein .an-arc { animation: none !important; }
.scene-titre::after { display: none; }
.anneau.an-plein .an-arc { opacity: 1; }
.ag-fil-t { transition: none !important; }
}
/* Le repère qui conduit à SPIDER : même forme que ses voisins,
violet parce que c'est la couleur de l'autre moteur, et un
soulignement qui n'apparaît qu'au survol — un repère n'est pas
un bouton. */
.c25-r-violet { --tn: var(--n-violet); }
.c25-repere-lien { text-decoration: none; cursor: pointer; }
.c25-repere-lien b { border-bottom: 1px solid transparent; transition: border-color var(--m-court) var(--m-doux); }
.c25-repere-lien:hover b { border-bottom-color: currentColor; }
.c25-repere-lien:hover {
border-left-color: var(--n-violet);
box-shadow: -3px 0 22px -12px rgba(139, 92, 246, .95);
}
.c25-repere-lien:focus-visible { outline: 2px solid var(--n-cyan); outline-offset: 2px; }
/* =============================================================
54. MOINS DE GRAS, ET LA LUMIÈRE DANS LES LETTRES
9 septembre 2026
Direction : « kayn bzaf dial les textes f gras, visuellement
majawch zwinin — rja3hom normal ou light. Ou les effects light
li kidouz mn taht mn titre 7aydo, mazwinch : ana hdart 3la
titre nit ykon kiouz fih dou. »
============================================================= */
/* ── LE GRAS N'EST PLUS LE RÉGLAGE PAR DÉFAUT ────────────────
⚠ UN SEUL LEVIER, ET IL EST BIEN CHOISI. `` sert partout
dans cet OS à porter une VALEUR — un nom, un compte, une date.
Le navigateur lui donne 700 d'office, donc chaque valeur de
chaque ligne de chaque tableau criait aussi fort qu'un titre :
sur un écran dense, tout est gras, donc plus rien ne ressort.
La balise passe à 500. Ce n'est pas une perte de hiérarchie —
c'est elle qui revient : les quelques éléments qui DOIVENT
crier portent déjà un poids explicite dans leur propre règle
(`.kpi b`, `.sp-tuile b`, `.scene-titre`…), et un sélecteur de
classe bat un sélecteur de balise. Ils gardent donc leur gras,
et ils sont désormais les seuls à l'avoir. */
b, strong { font-weight: 500; }
/* Les libellés de structure descendent d'un cran : ils situent,
ils ne s'annoncent pas. */
.eyebrow { font-weight: 600; }
.panel-head h3 { font-weight: 600 !important; }
.badge, .pill, .chip { font-weight: 500; }
.gal-titre, .ap-l-nom, .sp-ent, .mot-texte { font-weight: 500; }
.tbl thead th { font-weight: 600; }
/* Ce qui doit rester fort le reste : les grands nombres et les
titres. On le redit ici pour que la règle soit lisible d'un
seul endroit plutôt que déduite de la cascade. */
.kpi b, .kpi .v, .sp-tuile b, .sp-maillon b, .universe-kpi b,
.scene-titre, .page-head h1, .c25-dossier h1, .porte-chiffre b { font-weight: 800; }
.ag-n, .mono, .sp-num { font-weight: 500; }
/* ── LA LUMIÈRE PASSE DANS LES LETTRES ───────────────────────
La bande qui tournait AUTOUR du titre est retirée : elle
éclairait le fond, pas le mot.
⚠ LE CALQUE EST UNE COPIE EXACTE DU TITRE, POSÉE DESSUS. Il
porte le même texte (`attr(data-titre)`), la même police et la
même graisse — donc il se superpose au pixel près. Sa couleur
est transparente et son fond est découpé dans le texte : seule
la bande claire se voit, et elle se voit DANS les lettres.
Le `h2` en dessous n'a pas bougé : couleur pleine, ombre
portée, lisible sur n'importe quelle photo. */
/* ⚠ TROIS VERROUS, PARCE QU'UN TITRE INVISIBLE EST PIRE QUE PAS
D'EFFET DU TOUT.
Direction, dans la foulée : « rad lbal, titre radom baydin dial
l couverture ». Le calque est transparent PARTOUT SAUF sous la
bande de lumière — mais il se pose sur le titre, et tout ce qui
se pose sur un titre peut le masquer si une seule des
conditions n'est pas réunie. Donc :
1. `[data-titre]` — pas d'attribut, pas de calque. Les
`.scene-titre` d'autres écrans ne sont jamais touchés.
2. `@supports` — si le navigateur ne sait pas découper un
fond dans du texte, le dégradé remplirait la boîte
ENTIÈRE par-dessus le titre. Sans le support, pas de
calque du tout.
3. Le calque n'a AUCUNE couleur de fond propre et son texte
est transparent : même mal placé, il ne peut rien cacher —
il ne peut qu'ajouter de la lumière.
Le `h2` en dessous garde sa couleur pleine et son ombre : c'est
lui qu'on lit, en toutes circonstances. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.scene-titre[data-titre]::after {
content: attr(data-titre);
position: absolute; inset: 0; z-index: 1;
pointer-events: none;
font: inherit; letter-spacing: inherit; line-height: inherit;
white-space: pre-wrap;
background-color: transparent;
background-image: linear-gradient(100deg,
transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%);
background-size: 260% 100%;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: os25-lame-titre 6s var(--m-doux) 2s infinite;
}
}
@keyframes os25-lame-titre {
0% { background-position: 180% 0; }
46% { background-position: -80% 0; }
100% { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
.scene-titre[data-titre]::after { display: none; }
}
/* =============================================================
55. L'ÉCRAN ÉQUIPE À QUATRE ONGLETS
9 septembre 2026
Quatre écrans rassemblés en un. La barre d'onglets est celle de
SPIDER — `.sp-vues` — et c'est voulu : un OS qui invente une
barre d'onglets par écran oblige à réapprendre le même geste
trois fois.
============================================================= */
.equipe-une .sp-vues { margin-bottom: 16px; }
.equipe-une .sp-vue { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.equipe-une .sp-vue .ico { opacity: .8; }
/* La vue chargée perd son statut de page : plus de marge de page,
plus d'animation d'entrée de page — elle est un contenu, pas un
écran. */
.eq-vue { padding: 0 !important; max-width: none !important; animation: none !important; }
.eq-vue > .page-head { display: none; }
.eq-corps { animation: c25-fondu 340ms var(--m-vif) backwards; }
.eq-attente { padding: 44px 0; opacity: .7; }
/* ============================================================================
56 — ÉCRIRE DEPUIS L'OS
10 septembre 2026
Trois habits pour un seul geste nouveau : le bouton « Écrire »
de la fiche SPIDER, celui du dossier CERCLE, et la fenêtre qui
s'ouvre derrière les deux.
⚠ CES DEUX BOUTONS SONT DES `