/* innovLia World — le style de la carte, COMMUN aux pages FR et EN. ⛔ Aucun texte ici : ce qui se lit est dans la page (FR ou EN). ⛔ UN PRODUIT À PART, AUTONOME (user, 2026-09-18) : la page ne charge PLUS le socle du site (assets/innovlia.css · innovlia.js) — ni menu de gauche, ni barre du haut d'innovlia.fr. Elle porte elle-même son logo, son commutateur FR | EN et ses couleurs. Celles-ci sont les valeurs de la CHARTE innovLia (reprises du socle le 2026-09-18) : ce sont des couleurs de marque, elles ne se changent pas ici sans que la charte change. */ :root{ color-scheme:dark; --bg:#0c1017; --bg2:#161c28; --bg3:#212936; --bd:#39435a; --bdi:#59698d; --tx:#f6f8fc; --tx2:#c3ccdc; --ac:#7ea6ff; --ok:#3ddba2; --ko:#ff5a5a; --fg:var(--tx); --fg2:var(--tx2); /* Le bandeau du contrôle de la donnée signale une ANOMALIE : il prend --ko. ⛔ Il portait #ffa967 en dur, c'est-à-dire une couleur de MARQUE (celle que portent des couches) réaffectée à un état, ce que la charte interdit. */ --w-alerte:var(--ko); /* La chaîne en amont, sur la carte comme sur son bouton. Elle doit se distinguer des couleurs de couche (les quatre teintes de la charte et leurs éclaircies), puisqu'elle les traverse toutes : c'est le seul jaune du site (celui des QCM, qui n'apparaît nulle part ici) qui reste lisible sur les bandes vertes, bleues, violettes et orange. ⚠️ Valeur reprise aussi dans le canevas (dessin en JS). */ --w-chaine:#ffd166; /* Le jaune de la pastille « version alpha » de la barre. MÊME valeur que la chaîne, et c'est voulu : un seul jaune dans le produit. Il a son propre nom pour que l'un puisse bouger sans l'autre. */ --w-alpha:#ffd166; /* LA PRÉPROD (user, 2026-09-24) : la même pastille passe en ROSE quand la page est celle de la préprod (, posé par DeployWorld.ps1 -Preprod). Pas le jaune : on doit voir d'un coup d'œil qu'on n'est PAS sur la prod. Même rose que le premier trait suivi — les deux ne se croisent jamais (barre / canevas). */ --w-preprod:#ff6ec7; /* LES TRAITS SUIVIS sur la carte (user, 2026-09-20) : on clique un trait, il prend une de ces couleurs et on suit sa course entière au milieu des autres. Chacune doit se lire par-dessus les bandes des couches ET ne pas se confondre avec le jaune de la chaîne : rose, cyan, blanc sont les trois teintes qu'aucune couche ne porte. TROIS suffisent — au-delà, deux traits partageraient une couleur et on les lirait comme un seul. ⚠️ Valeurs reprises dans le canevas (dessin en JS), comme --w-chaine. */ --w-trace-1:#ff6ec7; --w-trace-2:#22d3ee; --w-trace-3:#ffffff; /* LE BOUTON ▶ DE YOUTUBE (user, 2026-09-25 : « une petite flèche style YouTube ») : le bloc a son Short publié. Le rouge de YouTube, pour ce seul bouton : on y lit « une vidéo à regarder » avant d'avoir lu un mot. ⛔ Ce n'est ni --ko (une anomalie) ni une couleur de couche. ⚠️ Valeur reprise dans le canevas (dessin en JS). */ --w-yt:#ff0033; /* L'AVENIR (user, 2026-09-25 : « une couleur, nouvelle, pour l'avenir, comme ça on voit directement ») : ce que le bloc REND POSSIBLE, dans la fiche du téléphone. Le cyan : aucune couche ne le porte, et il tranche sur le jaune de l'amont. ⚠️ Même valeur que --w-trace-2 (les traits suivis de la carte), qui ne vivent pas dans la fiche : le jour où l'avenir passe sur la carte, l'une des deux change. */ --w-avenir:#22d3ee; --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace; } *{box-sizing:border-box} html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--sans)} /* La scène occupe TOUTE la fenêtre (plus de barre du site au-dessus). C'est une colonne : barre (logo, fil, recherche), frise, carte. Aucune hauteur en dur pour ses rangées — le jour où l'une passe à la ligne, tout se réajuste. */ #w-scene{display:flex;flex-direction:column;height:100%; min-height:0;overflow:hidden;overscroll-behavior:none} button,select,input{font:inherit;color:inherit} .bar{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--bg2); border-bottom:1px solid var(--bd);position:relative;z-index:40;flex:none;min-height:46px} /* Le seul

de la page : LU, pas vu. Il reste dans le flux pour les moteurs et les lecteurs d'écran, mais il ne prend plus de place dans la barre — `display:none` l'aurait retiré des deux, ce qui n'est pas la même chose. */ .ti1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} .creux{flex:1} /* LE LOGO, en tête de la barre, devant « innovLia World › couche ». Blanc et dégradé sur fond transparent : fait pour le fond sombre. Hauteur fixée, largeur déduite — il ne se déforme pas. Il reste sur téléphone, quand le fil disparaît. */ .logo{flex:none;display:flex;align-items:center;line-height:0} .logo img{height:22px;width:auto;display:block} /* LA PASTILLE « VERSION ALPHA » (user, 2026-09-20) : la carte est EN TEST, et le visiteur doit le savoir avant de juger ce qu'il voit. Elle se tient contre le logo, jamais ailleurs : c'est le produit qui est alpha, pas la page. FOND JAUNE PLEIN, demandé pour qu'elle se VOIE (user) : c'est la seule tache de couleur de la barre, donc l'œil y va. Texte sombre sur le jaune — un jaune pâle porte mal du blanc. ⚠️ Elle emprunte --w-alpha, le jaune de la chaîne : les deux ne se croisent jamais (l'une est dans la barre, l'autre sur le canevas), mais le jour où la pastille descend sur la carte, il lui faut sa propre couleur. Sur téléphone, le mot « version » tombe et « alpha » reste : c'est lui qui porte. */ .alpha{flex:none;display:inline-flex;align-items:center;gap:.34em;padding:3px 9px; border-radius:6px;background:var(--w-alpha);color:var(--bg); font-size:.68rem;font-weight:800;letter-spacing:.07em; text-transform:uppercase;line-height:1.35;white-space:nowrap;cursor:default} .alpha.preprod{background:var(--w-preprod)} /* LE SÉLECTEUR DE MONDE (user, 2026-09-24) : Informatique, Mathématiques, Physique… Un