/* 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 la couleur de l'étape Express : une couleur de MARQUE 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 QUATRE couleurs d'étape à la fois, 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; /* 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 quatre bandes de voie ET ne pas se confondre avec le jaune de la chaîne : rose, cyan, blanc sont les trois teintes qu'aucune voie 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; --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 › voie › 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} /* LE COMMUTATEUR FR | EN — celui du site, recopié parce que la page ne charge plus le socle. ⚠️ L'ACTIF est un fond plein à texte sombre, pas « un peu plus clair » : c'est le CONTRASTE qui dit où l'on est, pas la teinte. Un pour la langue lue (un lien vers soi-même est un piège au clavier), un pour l'autre. */ .lang{flex:none;display:inline-flex;align-items:stretch;gap:2px;padding:2px;border-radius:99px; background:var(--bg3);border:1px solid var(--bd);white-space:nowrap;min-height:32px} .lang .lg-l{display:inline-flex;align-items:center;padding:0 10px;border-radius:99px;color:var(--tx2); font-size:.76rem;font-weight:700;letter-spacing:.04em;line-height:1;text-decoration:none} .lang .lg-l.on{background:var(--tx);color:var(--bg);cursor:default} .lang a.lg-l:hover{color:var(--ac);background:rgba(126,166,255,.14)} .lang a.lg-l:focus-visible{outline:2px solid var(--ac);outline-offset:-2px} /* LE ZOOM : deux boutons et le niveau, dans la barre. Le niveau est écrit — un « + » grisé sans chiffre ne dit pas OÙ l'on en est. Chasse fixe, sinon la largeur saute entre « 100 % » et « 125 % » et la barre tremble. */ .zm{display:flex;align-items:center;gap:2px;flex:none;background:var(--bg3); border:1px solid var(--bdi);border-radius:8px;padding:2px} .zb{width:26px;height:26px;background:none;border:0;border-radius:6px;color:var(--fg); font-size:1rem;line-height:1;cursor:pointer} .zb:hover:not(:disabled){background:var(--bg2)} .zb:disabled{opacity:.3;cursor:default} .zn{font-family:var(--mono);font-size:.7rem;color:var(--fg2);width:44px;text-align:center} .fil{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--fg2);min-width:0} .fil b{color:var(--fg);font-weight:600} .fil em{font-style:normal;opacity:.45} .champ{display:flex;align-items:center;background:var(--bg3);border:1px solid var(--bdi);border-radius:8px;padding:4px 10px} .champ input{background:none;border:0;outline:none;width:150px;font-size:.84rem} .champ input::placeholder{color:#67739180} /* ---- PLEIN ÉCRAN : celui de Bloc Draw et d'Agents Builder, à la lettre ---- La scène demande le plein écran natif et RETOMBE sur ce mode CSS quand le navigateur le refuse (page dans un cadre sans `allow="fullscreen"`) — sans ce repli le bouton ne ferait rien du tout. */ .fs{display:flex;align-items:center;gap:6px;flex:none;background:var(--bg3); border:1px solid var(--bdi);border-radius:8px;padding:5px 11px; font-size:.82rem;cursor:pointer;white-space:nowrap} .fs:hover{border-color:var(--fg)} .fs.on{border-color:var(--w-chaine);color:var(--w-chaine)} body.w-fullscreen{overflow:hidden} /* ⚠️ `dvh` en second : sur mobile la barre d'adresse rogne le `vh`, et un navigateur qui ne connaît pas l'unité garde simplement la ligne d'avant. */ body.w-fullscreen #w-scene{height:100vh !important;height:100dvh !important} #w-scene:fullscreen{background:var(--bg);width:100vw;height:100vh} #w-scene:-webkit-full-screen{background:var(--bg);width:100vw;height:100vh} /* ===================================================================== UNE SEULE COMMANDE : LA FRISE — ET AUCUN FILTRE ⛔ IL N'Y A QU'UNE CARTE. Toutes les couches et tous les composants y sont ensemble, et TOUTES les liaisons sont tracées, y compris celles qui traversent Ville → Nationale → Autoroute → Express. Découper le monde par niveau coupait la moitié des chaînes ; on ne le fait plus. ⛔ V / N / A / E N'ONT PLUS D'ORGANE DE NAVIGATION. Une colonne de repères a occupé 154 px à gauche pour ne rien faire que la molette ne fasse mieux : elle est partie, la carte a récupéré la place. Il reste d'eux le liseré de couleur au bord gauche de la carte — de l'information, pas une commande. ⛔ ET LA FRISE MONTRE UNE ANNÉE, PAS UNE PLAGE. Une large fenêtre disait « vous voyez de 1970 à 1995 » : personne ne cherche cette information. Ce qu'on veut savoir, c'est OÙ ON EST — un chiffre, écrit. ===================================================================== */ .frise{display:flex;align-items:stretch;gap:8px;padding:6px 10px;background:var(--bg2); border-bottom:1px solid var(--bd);position:relative;z-index:35;flex:none;height:46px} .frise .fl{width:40px;flex:none;background:var(--bg3);border:1px solid var(--bdi);border-radius:8px; font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center;color:var(--fg)} .frise .fl:hover{border-color:var(--fg);background:var(--bg3)} .frise .fl:disabled{opacity:.3;cursor:default;border-color:var(--bd)} .rail{position:relative;flex:1;min-width:0;background:var(--bg);border:1px solid var(--bd); border-radius:8px;overflow:hidden;touch-action:none;cursor:pointer} /* ⛔ La graduation est posée à l'abscisse RÉELLE de son année dans le monde : la frise et la carte montrent le même axe, sinon la fenêtre désignerait un endroit qui n'est pas celui qu'on voit. */ /* Un trait de graduation ne délimite aucun contrôle : il prend le bord DÉCORATIF (--bd), pas celui d'un composant qu'on manipule. */ .gr{position:absolute;top:0;bottom:0;width:1px;background:var(--bd);z-index:1} .gr span{position:absolute;top:50%;left:5px;transform:translateY(-50%);font-family:var(--mono); font-size:.58rem;color:var(--fg2);white-space:nowrap} /* le curseur d'année : une pastille posée sur l'année du centre de la vue */ /* ⛔ UN APLAT, PAS UN CONTOUR, ET UN SEUL ÉTAT. Le fond était --bg3 sur un rail --bg presque aussi sombre : la pastille ne se lisait plus que par son filet et se confondait avec les graduations. C'est un JETON qu'on attrape — il doit avoir le poids d'un objet posé sur la frise. ⛔ Il garde la MÊME couleur qu'on ait choisi un composant ou non. Deux teintes demandaient d'apprendre laquelle veut dire quoi, pour une nuance que le chiffre affiché dit déjà. Le glissement ne change pas la couleur non plus : le curseur qui devient une main suffit à dire qu'on tient l'objet. ⚠️ Encre SOMBRE sur l'aplat vif, jamais du blanc — règle de la charte, et c'est aussi ce qui donne le meilleur contraste. */ .cur{position:absolute;top:3px;bottom:3px;transform:translateX(-50%); display:flex;align-items:center;padding:0 11px;background:var(--ok); border:1px solid var(--ok);border-radius:6px;font-family:var(--mono); font-size:.7rem;font-weight:700;color:#0c1017;cursor:grab;z-index:3; white-space:nowrap;box-shadow:0 1px 6px rgba(0,0,0,.5)} .cur.tire{cursor:grabbing} /* ⚠️ LA FRISE EN MODE CHAÎNE : les chevrons prennent la place des graduations, dans le MÊME rail et à la même hauteur — c'est la barre qui change de métier, pas la page qui grandit. La pointe donne le sens ; l'ordre est chronologique. ⚠️ Pas de bordure : `clip-path` taille la boîte APRÈS le tracé du cadre, un filet ressortirait coupé sur la pointe. ⚠️ L'ascenseur est masqué : sur 44 px de haut il mangeait la moitié du texte. La chaîne se pousse à la molette ou au doigt. */ .rail .chaine{display:flex;align-items:stretch;gap:3px;height:100%;overflow-x:auto; scrollbar-width:none} .rail .chaine::-webkit-scrollbar{display:none} .pc{flex:none;display:flex;align-items:center;gap:7px;background:var(--bg3);border:0; color:var(--fg);cursor:pointer;padding:0 13px 0 20px;line-height:1.1; clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%)} .pc:hover{background:var(--bg2)} .pc b{font-size:.76rem;font-weight:600;white-space:nowrap} .pc i{font-family:var(--mono);font-size:.62rem;font-style:normal;color:var(--fg2)} /* Le bloc ouvert reprend la couleur du jeton d'année dont il prend la place : c'est le même « vous êtes ici », il n'y a pas deux codes à apprendre. */ .pc.ici{background:var(--ok);color:#0c1017} .pc.ici b{font-weight:700} .pc.ici i{color:#0c1017;opacity:.7} .corps{flex:1;min-height:0;display:flex} .scene{position:relative;flex:1;min-width:0;overflow:hidden} canvas#carte{display:block;width:100%;height:100%;touch-action:none;cursor:grab} canvas#carte.tire{cursor:grabbing} .pip{position:absolute;z-index:20;width:344px;background:rgba(18,24,35,.985);border:1px solid var(--bd); border-radius:12px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.6);pointer-events:none; opacity:0;transform:translateY(6px);transition:opacity .13s ease,transform .13s ease} .pip.on{opacity:1;transform:none} /* ⛔ LA BULLE NE PORTE QUE DEUX CHOSES (user, 2026-09-12) : le NOM du bloc et sa PORTÉE. La miniature, la ligne voie · couche · année, la définition et l'appel à cliquer sont partis : la fiche de droite les redit tous, et survoler puis ouvrir donnait deux fois le même texte. */ .pip .tx{padding:11px 13px 13px} .pip .ti{font-weight:700;font-size:1rem;line-height:1.3;margin:0 0 7px} /* L'année et la couche SITUENT, elles ne titrent pas — mais la ligne se lit d'un trait : MÊME taille et même police que le nom (user, 2026-09-12). Ce qui les distingue, c'est la graisse et la sourdine, pas la taille. */ .pip .ti .si{font-weight:400;color:var(--fg2)} .pip .re{font-size:.82rem;line-height:1.5;margin:0;color:var(--fg2); border-left:2px solid var(--bd);padding-left:9px} /* --- LE BANDEAU DU CONTRÔLE --- ⛔ Il NOMME, il ne corrige rien. Une donnée réparée en silence au chargement partirait en ligne fausse sans que personne l'ait relue — c'est la même loi que pour objectifs.json et la banque de QCM. */ .alerte{position:absolute;left:12px;right:12px;top:12px;z-index:25; background:color-mix(in srgb, var(--w-alerte) 16%, var(--bg2)); border:1px solid var(--w-alerte);border-radius:9px; padding:11px 38px 11px 13px;font-size:.8rem;line-height:1.5;color:var(--fg); max-height:44%;overflow-y:auto} .alerte[hidden]{display:none} .alerte b{color:var(--w-alerte)} .alerte ul{margin:6px 0 0;padding-left:18px} .alerte li{margin:0 0 3px} .alerte .x{position:absolute;top:5px;right:9px;background:none;border:0; color:var(--w-alerte);font-size:1.3rem;line-height:1;cursor:pointer} .pan{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--bg2); border-left:1px solid var(--bd);z-index:30;overflow-y:auto;padding:18px; transform:translateX(102%);transition:transform .22s ease} .pan.on{transform:none} .pan .x{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--fg2); font-size:1.5rem;line-height:1;cursor:pointer} .pan .cadre{position:relative;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#000;margin-bottom:14px} .pan .cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* Le Short rattaché au bloc : le même cadre, en 9:16 et centré. Largeur bornée, sinon il ferait près de 800 px de haut dans la colonne. */ .pan .cadre.v{aspect-ratio:9/16;width:min(260px,100%);margin-left:auto;margin-right:auto} .pan p{font-size:.92rem;line-height:1.6;margin:0 0 11px} .pan h3{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg2);margin:17px 0 8px} /* ⛔ Le bouton « Remonter toute la chaîne » et son chemin sont partis le 2026-09-12 : « Repose sur » mène déjà de proche en proche. `--w-chaine` reste, c'est la couleur de la chaîne DESSINÉE sur la carte. */ .pan .vide{border:1px dashed var(--bdi);border-radius:9px;padding:14px;color:var(--fg2); font-size:.85rem;line-height:1.55} /* --- CE QUI S'AJOUTE À LA FICHE : les lectures, la playlist, les verticaux --- Trois listes, un seul gabarit : une ligne cliquable à bord gauche coloré. ⛔ Pas de vignette ici — la fiche en porte déjà une, celle du lecteur ; en empiler quatre autres ferait de la colonne un mur d'images de 16:9 où la définition du composant ne se lit plus. */ .lst{display:flex;flex-direction:column;gap:6px} .lg{display:block;width:100%;text-align:left;background:var(--bg3);border:1px solid var(--bdi); border-left:3px solid var(--ac);border-radius:8px;padding:9px 11px;font-size:.83rem; line-height:1.4;cursor:pointer;color:var(--fg);text-decoration:none} .lg:hover{border-color:var(--fg);border-left-color:var(--ac)} .lg.en-cours{border-left-color:var(--w-chaine);color:var(--fg2);cursor:default} /* UNE LEÇON = DEUX COLONNES : | GPS | texte | (dessin du user, 2026-09-12). Le code tient une colonne à lui, de largeur FIXE : les codes s'alignent d'une ligne à l'autre et se lisent d'un coup d'œil, quelle que soit la longueur du titre — qui, lui, peut passer à la ligne sans déranger la colonne. ⚠️ LA DIFFICULTÉ EST UNE COULEUR DE FOND, pas une lettre de plus : ce sont les trois couleurs des MINIATURES de la chaîne (A débutant vert · B intermédiaire orange · C avancé rouge), que le visiteur a déjà vues sur les vignettes. Encre sombre sur le vert et l'orange, blanche sur le rouge : c'est le seul des trois où le noir ne tient pas le contraste. */ .lg.lec{display:flex;align-items:stretch;padding:0;overflow:hidden} .lg.lec .cd{flex:none;display:flex;align-items:center;justify-content:center;width:80px; font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.03em; color:#0b0f16;background:var(--bdi)} .lg.lec .tt{min-width:0;padding:9px 11px} .lg.lec .cd.dA{background:#22c55e} .lg.lec .cd.dB{background:#f97316} .lg.lec .cd.dC{background:#dc2626;color:#fff} /* ⛔ Plus de gabarit de format court ici : le Short du bloc EST le lecteur du haut (`.pan .cadre.v`), la fiche ne le répète plus sous la définition. */ @media (max-width:900px){ .fil,.champ{display:none} .bar{gap:10px;padding:6px 10px} .logo img{height:18px} .alpha{padding:2px 7px;letter-spacing:.06em} .alpha .al-l{display:none} /* Le bouton rend son mot et garde son icône — la rangée doit tenir sur une ligne, et ⛶ se lit seul. Cible tactile ≥ 44 px. */ .fs .fs-l{display:none} .fs{padding:0;width:44px;height:44px;justify-content:center;font-size:1.05rem} .frise{height:40px;padding:5px 7px;gap:6px} .frise .fl{width:34px;font-size:1.05rem} .pip{width:min(310px,calc(100vw - 24px))} }