/* innovLia - feuille commune à TOUT le site (innovlia.fr) ⚠️ FICHIER GÉNÉRÉ par tools/build_site.py à partir du CSS de /learn. Ne pas l'éditer à la main : la prochaine génération l'écrase. Pour le modifier → tools/build_site.py, constante CSS ou CSS_MANUEL. */ /* Thème SOMBRE assumé (user 2026-08-12) : pas de bascule selon le réglage système, le site est dark, point. --ct = couleur du texte posé SUR la couleur de famille. */ :root{ --bg:#0c1017; --bg2:#161c28; --bg3:#212936; --tx:#f6f8fc; --tx2:#c3ccdc; --bd:#39435a; --ac:#7ea6ff; --om:0 1px 2px rgba(0,0,0,.45),0 14px 38px rgba(0,0,0,.45); --V:#3ddba2; --N:#7ea6ff; --A:#b49cff; --E:#ffa967; --NW:#ff7ba0; --QZ:#ffd166; --r:16px; /* --ko est ROUGE, pas rose (user 2026-08-16) : une erreur doit se lire comme une erreur. Le rose #ff7ba0 reste celui des nouveautés (--NW), c'est son seul emploi. ⚠️ --ko alimente aussi --accent-red du socle commun. */ --ok:#3ddba2; --ko:#ff5a5a; /* Largeur de la colonne de menu épinglée à gauche en desktop (voir « menu tiroir » → LE MENU ÉPINGLÉ). Une seule valeur : la colonne et le décalage du contenu ne peuvent pas se désaccorder. --hdh = la hauteur de la barre du haut, sous laquelle la colonne commence. Valeur de repli seulement : le JS la MESURE et la réécrit ici, parce qu'elle change avec la largeur et d'une page à l'autre. */ --sbw:350px; --hdh:56px; } /* LA COLONNE S'ÉLARGIT AVEC L'ÉCRAN (user 2026-08-19 : « je veux voir tout, il faut agrandir la largeur du panneau gauche »). À 300 px, « Maîtriser les IA conversationnelles » se coupait en « Maîtriser les IA conve… » : le menu nommait des routes sans les nommer. Les mêmes paliers que main{} - la colonne et le contenu grandissent ensemble, jamais l'un au détriment de l'autre. */ @media(min-width:1400px){:root{--sbw:390px}} @media(min-width:1700px){:root{--sbw:420px}} html{color-scheme:dark} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--tx); font:16px/1.62 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} :root{--pad:18px} main{max-width:1060px;margin:0 auto;padding:0 var(--pad) 72px} /* SUR GRAND ÉCRAN, ON OCCUPE LA PLACE (user 2026-08-19 : « agrandis pour occuper tout l'espace, le texte est trop petit sur PC »). Le menu épinglé prend déjà 300 px à gauche : à 1920, une colonne bloquée à 1060 laissait ~560 px de vide à droite. La colonne s'élargit par paliers, et la racine grossit avec elle - tout le site de /learn est en rem, donc TOUT suit (titres, cartes, menu). ⚠️ Palier haut volontairement plafonné : au-delà, les vignettes dépasseraient leurs 640 px natifs et deviendraient molles (cf. .nl-lecons). */ @media(min-width:1400px){html{font-size:17px} main{max-width:1240px}} @media(min-width:1700px){html{font-size:18px} main{max-width:1420px}} h1,h2,h3{line-height:1.2;margin:0 0 .45em;letter-spacing:-.02em} h1{font-size:clamp(1.7rem,5vw,2.7rem)} h2{font-size:clamp(1.2rem,2.8vw,1.6rem)} h3{font-size:1.05rem} /* f-T = innovTools. Ce n'est pas une famille de routes : c'est la couleur du produit innovTools sur l'accueil (le vert), reprise sur son catalogue pour qu'une page et son bloc d'accueil se répondent. */ .f-T{--c:var(--V);--ct:#04140e} .f-V{--c:var(--V);--ct:#04140e} .f-N{--c:var(--N);--ct:#050c1c} .f-A{--c:var(--A);--ct:#0c0620} .f-E{--c:var(--E);--ct:#1a0d02} /* ---------- en-tête ---------- */ .hd{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px; padding:10px 18px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px); border-bottom:1px solid var(--bd)} /* Le logo ramène à l'accueil du SITE (innovlia.fr). Il était suivi d'un lien « /learn » vers le départ de l'itinéraire : retiré le 2026-08-13 (user), le menu porte déjà la ligne « L'itinéraire », en toutes lettres. La MAISON, elle, est arrivée le même jour, à gauche du mot innovLia et DANS le même lien : la ligne « Accueil » a quitté le menu, il fallait que le retour à la maison se voie sans rien ouvrir. Un seul lien pour un seul but - deux cibles côte à côte vers la même page ne feraient qu'hésiter. aria-hidden sur l'émoji : le lien s'annonce déjà par l'alt de l'image, un lecteur d'écran n'a pas à entendre « maison » en plus. */ .hd-logo{display:flex;align-items:center;gap:9px;flex:none;padding:2px 0} .hd-home{font-size:1.2rem;line-height:1;flex:none} .hd-img{height:26px;width:auto;display:block} /* le logo EST le mot innovLia */ .hd-mark{font-size:1.15em} .hd-logo:hover{opacity:.82} /* Le libellé reste en texte CLAIR (lisible) ; la couleur de famille passe dans une pastille + un soulignement. Du texte coloré en 0.9rem ne se lit pas. ⚠️ La barre du haut GARDE ses couleurs de famille (user 2026-08-13) : c'est le tiroir de l'iPhone qui devait passer d'une seule couleur, pas elle. */ .hd-nav{display:flex;gap:2px;flex:none} .hd-nav a{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px; font-size:.9rem;font-weight:600;color:var(--tx);white-space:nowrap} .hd-nav a:hover{background:var(--bg3)} /* QCM se comporte comme un onglet de famille : pastille + texte clair, sa couleur à lui. (L'onglet News a disparu le 2026-08-13 - les nouveautés ont leur bouton rouge en haut à droite - d'où .nv-news retiré d'ici.) */ .hd-nav .nv-qcm{--c:var(--QZ)} .hd-nav .nv-f,.hd-nav .nv-qcm{border-bottom:2px solid transparent} .hd-nav .nv-f::before,.hd-nav .nv-qcm::before{content:"";width:9px; height:9px;border-radius:50%; background:var(--c);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)} .hd-nav .nv-f:hover,.hd-nav .nv-qcm:hover{ background:color-mix(in srgb,var(--c) 16%,transparent); border-bottom-color:var(--c)} /* rubrique en cours : la pastille s'allume */ .hd-nav .nv-f.on,.hd-nav .nv-qcm.on{ background:color-mix(in srgb,var(--c) 15%,transparent); border-bottom-color:var(--c)} .hd-nav .nv-f.on::before,.hd-nav .nv-qcm.on::before{ box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 40%,transparent), 0 0 10px 2px color-mix(in srgb,var(--c) 75%,transparent);animation:puls 2.4s ease-in-out infinite} @keyframes puls{ 0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 40%,transparent), 0 0 10px 2px color-mix(in srgb,var(--c) 70%,transparent)} 50% {box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 26%,transparent), 0 0 16px 4px color-mix(in srgb,var(--c) 45%,transparent)} } @media(prefers-reduced-motion:reduce){ .hd-nav .nv-f.on::before,.hd-nav .nv-qcm.on::before{animation:none} } .hd-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px; background:none;border:1px solid var(--bd);border-radius:11px;cursor:pointer;padding:0 10px;flex:none} .hd-burger span{display:block;height:2px;background:var(--tx);border-radius:2px} /* NEWS - l'aplat rouge YouTube, en haut à droite (user 2026-08-13). Ce bouton était volontairement discret le matin même (contour rouge, texte clair, présent sur la seule page d'accueil) : le user en a décidé autrement. Il est maintenant PLEIN, du vrai #ff0000, et il est sur TOUTES les pages - c'est devenu le seul chemin vers les nouveautés, puisque News a quitté et la barre d'onglets et le menu. Le libellé est reparti à « News » (user, le même jour) : « Nouveautés » n'aura tenu qu'un aller-retour. Texte blanc sur #ff0000 : c'est le bouton de YouTube, à l'identique. Le contraste y est juste (4:1), d'où le gras et le corps à .88rem, qui le tiennent du bon côté du seuil. Il vit dans la section « en-tête » et non dans « News », parce que c'est celle-ci qui part vers assets/innovlia.css - les pages écrites à la main ne lisent pas la feuille de /learn. */ .hd-news{flex:none;display:inline-flex;align-items:center;padding:7px 16px;border-radius:99px; background:#ff0000;border:1px solid #ff0000;color:#fff; font-size:.88rem;font-weight:700;white-space:nowrap;min-height:38px} .hd-news:hover{background:#e00000;border-color:#e00000;color:#fff} /* Sous 760 px il descend d'une ligne avec la recherche, qu'il suit (order:10). La hauteur repasse à 44 px : on le vise au pouce. */ @media(max-width:760px){.hd-news{min-height:44px}} /* barre de recherche dans l'en-tête 584 px de large au maximum (user 2026-08-13) : c'est la mesure du champ de la page d'accueil de Google. Elle prenait jusque-là TOUT l'espace laissé libre par le logo - près de 1000 px sur un grand écran, pour y taper trois mots. Le champ garde sa souplesse en dessous (il rétrécit avec la fenêtre), il ne s'étire simplement plus au-delà. margin-left:auto le tient contre le bouton News, à droite. */ .hd-q{position:relative;display:flex;align-items:center;flex:1 1 220px;min-width:180px; max-width:584px;margin-left:auto} .hd-qi{position:absolute;left:12px;font-size:.9rem;opacity:.6;pointer-events:none} .hd-q #q{width:100%;padding:9px 34px 9px 34px;font:inherit;font-size:.9rem;color:var(--tx); background:var(--bg2);border:1px solid var(--bd);border-radius:99px} .hd-q #q:focus{outline:2px solid var(--ac);outline-offset:1px} .hd-q #q-clear{position:absolute;right:10px;background:none;border:0;color:var(--tx2);cursor:pointer; font-size:.95rem;display:none} /* LA barre de recherche du site, dans le tiroir, sous « L'itinéraire » (user 2026-08-20). Il n'y en a plus qu'une : l'en-tête n'en porte plus. ⛔ ET PLUS DE VOLET FLOTTANT depuis le 2026-08-21 : le champ et son bouton emmènent sur learn/recherche.html, point. Les règles `.hq-drop`, `.hq-info` et `.hq-tous` sont parties avec lui - plus personne ne les portait. */ /* ⛔ ET PLUS DE BOUTON depuis le 2026-08-21 (user : « retire le bouton recherche, ça s'actualise direct lorsqu'on tape »). `.q-go` est partie avec. Il ne reste qu'un champ, pleine largeur : la loupe est décorative, c'est la frappe qui déclenche tout. */ .dr-q{position:relative;display:flex;align-items:center;margin:0 0 8px} .dr-q .hd-qi{position:absolute;left:12px;font-size:.9rem;opacity:.6;pointer-events:none} .dr-q #q{width:100%;min-width:0;padding:10px 12px 10px 34px;font:inherit;font-size:.9rem; color:var(--tx);background:var(--bg3);border:1px solid var(--bd);border-radius:11px} .dr-q #q:focus{outline:2px solid var(--ac);outline-offset:1px} @media(max-width:900px){ .hd-nav a{padding:7px 9px;font-size:.86rem} } @media(max-width:760px){ .hd-nav{display:none} .hd-burger{display:flex} /* cible tactile : le retour à l'accueil doit se toucher au pouce (44 px) */ .hd-logo{margin-right:auto;min-height:44px} /* DEUX lignes, pas trois (2026-08-13). Depuis que la maison accompagne le logo, la première ligne est pleine : burger + maison + logo. La recherche et le bouton Nouveautés se partagent donc la seconde, au lieu d'en prendre une chacun - sur un téléphone, trois lignes d'en-tête, c'est un quart de l'écran mangé avant d'avoir lu un mot. */ /* base 120 px, PAS auto : c'est la taille de base qui décide du passage à la ligne, avant tout étirement. En `auto`, le champ réclamait toute la largeur et rejetait le bouton sur une troisième ligne. */ .hd-q{flex:1 1 120px;order:9;margin-left:0;min-width:0} .hd-news{order:10;margin-left:0} } /* ---------- menu tiroir ---------- */ .dr{position:fixed;inset:0;z-index:60;display:flex} .dr[hidden]{display:none} /* sinon le display:flex ci-dessus bat l'attribut hidden */ .dr-fond{position:absolute;inset:0;background:rgba(4,7,14,.55);backdrop-filter:blur(2px)} /* scrollbar-gutter:stable → la place de l'ascenseur est réservée même quand il n'est pas là : déplier une étape ne décale plus tout le menu d'un cran. scrollbar-width:thin + couleurs sourdes → un ascenseur discret, qui ne redessine pas le trait vertical qu'on vient d'enlever. */ .dr-p{position:relative;width:min(340px,86vw);height:100%;overflow-y:auto;background:var(--bg2); border-right:1px solid var(--bd);padding:14px 14px 40px;animation:dr .22s ease; scrollbar-gutter:stable;scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--bd) 85%,transparent) transparent} @keyframes dr{from{transform:translateX(-100%)}to{transform:none}} /* .dr-ti (le titre « Naviguer ») a été retiré le 2026-08-13 (user) : il ne restait plus dans cette ligne que la croix de fermeture, calée à droite. */ .dr-hd{display:flex;align-items:center;margin:0 0 12px} .dr-x{margin-left:auto;background:none;border:1px solid var(--bd);border-radius:10px;width:36px; height:36px;color:var(--tx);cursor:pointer;font-size:1rem} .dr-l{display:flex;align-items:center;gap:10px;padding:12px;border-radius:11px;font-weight:650; font-size:.95rem} .dr-l:hover{background:var(--bg3)} /* L'accueil du site est TOUJOURS la première ligne du tiroir (user 2026-08-13) : d'où qu'on soit, on repart de la maison en un geste, sans dérouler le menu. */ .dr-accueil{background:var(--bg3);border:1px solid var(--bd);margin:0 0 10px;color:var(--tx)} .dr-accueil:hover{border-color:var(--ac)} /* ⚠️ LE TIROIR EST D'UNE SEULE COULEUR (user 2026-08-13) - c'est LE menu sur iPhone, et trois gros boutons pleins bleu / rose / jaune empilés, ça fait sapin de Noël. Ailleurs les couleurs restent : la barre du haut garde ses familles, les pages aussi. Ici la hiérarchie passe par le REMPLISSAGE : le bouton plein = le départ, les autres le même bleu en contour. */ .dr-depart{background:var(--ac);color:#050c1c;margin:6px 0 8px} .dr-depart:hover{background:var(--ac);filter:brightness(1.08)} .dr-bnews{background:var(--bg3);border:1px solid var(--ac);color:var(--tx);margin:0 0 10px} .dr-bnews:hover{background:color-mix(in srgb,var(--ac) 16%,var(--bg3))} /* LA LIGNE DE TÊTE DU MENU (user 2026-08-13) - pas d'intertitre au-dessus, 56 px de haut : on la vise au pouce. Elles étaient trois (Accueil, L'itinéraire, News) sur deux lignes de texte, avec une glose sous le nom. Il n'en reste qu'UNE, sur une seule ligne : Accueil est passé dans la maison de l'en-tête, News dans le bouton rouge, et « le départ guidé » a sauté - « L'itinéraire » se suffit. .dr-tt garde sa colonne et .dr-tt i son style : le jour où une ligne aura de nouveau besoin d'une glose, elle est prête. */ .dr-uni{background:var(--bg3);border:1px solid var(--bd);color:var(--tx);margin:0 0 8px; min-height:56px;align-items:center} .dr-uni:hover{border-color:var(--ac)} .dr-i{flex:none;width:26px;text-align:center;font-size:1.25rem;line-height:1} .dr-tt{display:flex;flex-direction:column;min-width:0} .dr-tt b{font-weight:650;line-height:1.25} .dr-tt i{font-style:normal;font-weight:400;font-size:.78rem;line-height:1.3;color:var(--tx2)} .dr-sec{margin:16px 0 6px;padding:0 12px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--tx2)} .dr-rap{display:grid;grid-template-columns:1fr 1fr;gap:8px} .dr-rap a{display:flex;flex-direction:column;gap:5px;padding:12px 10px;background:var(--bg3); border:1px solid var(--bd);border-radius:12px;font-size:.83rem;font-weight:650;line-height:1.2} .dr-rap a span{font-size:1.2rem} .dr-rap a:hover{border-color:var(--ac)} .mn-fam summary{list-style:none;cursor:pointer;padding:11px 12px;border-radius:11px;font-weight:650; display:flex;align-items:center;gap:10px;border-left:3px solid var(--c,var(--ac))} .mn-fam summary::-webkit-details-marker{display:none} .mn-fam summary:hover{background:var(--bg3)} /* Le titre du groupe est un lien (vers l'étape ou la section) ; il prend toute la largeur pour que la cible tactile aille jusqu'au chevron, qui lui garde son rôle de bouton « déplier ». */ .mn-fl{display:flex;align-items:center;gap:10px;flex:1;min-width:0; color:inherit;text-decoration:none} .mn-fn{font-size:.98rem} .mn-ch{margin-left:auto;color:var(--tx2);font-size:.8rem;transition:transform .15s} .mn-fam[open] .mn-ch{transform:rotate(180deg)} .mn-liens{padding:2px 0 8px 14px;display:grid;gap:1px} /* min-width:0 - SANS LUI LE MENU DÉBORDE. Ces lignes sont des éléments de grille, et une grille refuse par défaut de descendre sous la largeur de son contenu (min-width:auto) : les titres longs sortaient de la colonne par la droite au lieu d'être coupés, et venaient passer sous la barre de défilement (user 2026-08-13). Avec min-width:0 la ligne redevient compressible et l'ellipse de .mn-t fait enfin son travail. */ .mn-liens a{display:flex;gap:9px;align-items:flex-start;padding:7px 10px;border-radius:9px; font-size:.87rem;min-width:0} /* Le code de route et le compteur restent collés à la PREMIÈRE ligne du titre : centrés, ils flotteraient au milieu d'un titre replié sur deux lignes. */ .mn-liens .mn-c,.mn-liens .mn-ic{line-height:1.3} .mn-liens a:hover{background:var(--bg3)} .mn-c{font-size:.68rem;font-weight:700;color:var(--c,var(--ac));letter-spacing:.05em;flex:none;width:32px} /* PLUS D'ELLIPSE : le titre passe à la ligne (user 2026-08-19, « je veux voir tout »). La colonne élargie suffit pour la quasi-totalité des routes ; le retour à la ligne est le filet pour les deux ou trois plus longues, et il garantit qu'AUCUN titre n'est amputé, quelle que soit la largeur. ⚠️ `min-width:0` reste indispensable : sans lui, ces lignes de grille refusent de descendre sous la largeur de leur contenu et débordent par la droite au lieu de se replier (le bug du 2026-08-13). */ .mn-t{min-width:0;overflow-wrap:anywhere;line-height:1.3} /* La pastille ronde en tête de groupe. Jumelle de .ep-n, mais définie ICI : .ep-n vit dans la section « accueil », qui n'est PAS exportée vers assets/innovlia.css - le menu global, lui, doit s'afficher partout. */ .mn-ep{flex:none;width:30px;height:30px;border-radius:50%;background:var(--c,var(--ac)); color:var(--ct,#fff);display:inline-flex;align-items:center;justify-content:center; font-weight:700;font-size:.88rem} .mn-ic{flex:none;width:22px;text-align:center;font-size:.95rem} /* Les 3 sections hors /learn prennent la couleur de leur bloc sur l'accueil : violet pour les générateurs, vert pour les outils, ambre pour IA Worker. Le menu et la page d'accueil racontent ainsi la même chose. */ .g-gen{--c:var(--A);--ct:#0c0620} .g-out{--c:var(--V);--ct:#04140e} .g-wia{--c:var(--E);--ct:#1a0d02} /* Le reste du site, en bas du tiroir : depuis /learn on doit pouvoir repartir vers les générateurs ou les outils sans passer par l'accueil (user 2026-08-13). */ /* .dr-site (le bas de tiroir « Le reste du site ») a disparu le 2026-08-13 : le menu global n'a plus de bas de liste, tout est dans les groupes. */ /* ---- LE MENU ÉPINGLÉ À GAUCHE (user 2026-08-13) ---- « Le menu doit être comme le menu du mobile, mais il sera toujours ouvert à gauche, même principe que le mobile pour pas perdre les gens. » Donc surtout PAS un second menu taillé pour le desktop : le MÊME objet, le même contenu, le même ordre, les mêmes libellés. On lui retire seulement ce qui n'a de sens qu'en tiroir - le voile, la croix de fermeture, l'animation d'ouverture - et on le laisse en place. Ce qu'on a appris sur téléphone se retrouve à l'identique sur l'écran, et inversement. Conséquence assumée : au-dessus du seuil, la barre d'onglets du haut disparaît. Elle redirait mot pour mot ce que la colonne montre déjà, et deux menus qui disent la même chose, c'est exactement ce qui perd les gens. L'en-tête garde le logo, la recherche et le bouton News. En dessous du seuil : rien ne change, burger + tiroir, comme avant. Le seuil = la colonne (300 px) + de quoi lire le contenu (~760 px). */ @media(min-width:1060px){ body.dr-on{margin-left:var(--sbw)} /* LE MENU COMMENCE SOUS LE LOGO (user 2026-08-13) : « le menu doit être en dessous du logo, pas à gauche tout seul. » La barre du haut garde donc TOUTE la largeur - on la ressort de la gouttière que le body vient d'ouvrir - et la colonne démarre à --hdh, la hauteur mesurée de la barre. Sur les pages écrites à la main, innovlia.js pose le même décalage en style inline (il doit y ajouter leur propre gouttière de body). */ body.dr-on>.hd{margin-left:calc(-1 * var(--sbw));z-index:60} body.dr-on .dr{position:fixed;top:var(--hdh);bottom:0;left:0;width:var(--sbw); z-index:50;display:block} /* Filet : sans JS le tiroir garde son attribut hidden. La colonne DOIT s'afficher quand même - c'est toute la navigation de la page. */ body.dr-on .dr[hidden]{display:block} body.dr-on .dr-fond{display:none} /* IL FOND DANS LA PAGE (user 2026-08-13) : « enlève le cadre du menu, fais-le fondre dans l'interface. » Plus de panneau posé sur le fond, plus de trait vertical. Le cadre n'a de sens que pour le TIROIR, qui passe par-dessus le contenu et doit s'en détacher ; épinglé, le menu fait partie de la page. Le fond du traverse - y compris le dégradé des pages outils. */ /* Le titre des routes est coupé à la largeur disponible (…) : sans marge à droite, il venait toucher l'ascenseur (user 2026-08-13). D'où 20 px de ce côté contre 12 à gauche - l'écart se lit comme de l'air, pas comme un décalage, et le texte ne colle plus à la barre de défilement. */ body.dr-on .dr-p{width:100%;height:100%;animation:none; background:none;border-right:0;padding:14px 20px 40px 12px} /* Même raison pour les trois premières lignes : trois boîtes pleines empilées contre un fond nu redessinaient un cadre à elles seules. Il ne reste que l'icône et le texte ; le relief revient au survol et sur la page en cours. */ body.dr-on .dr-uni{background:none;border-color:transparent;min-height:48px} body.dr-on .dr-uni:hover{background:var(--bg2);border-color:transparent} body.dr-on .dr-uni.on{background:color-mix(in srgb,var(--ac) 14%,transparent); border-color:transparent} /* Épinglé, il n'y a rien à fermer : la ligne de la croix disparaît en entier, et le menu commence directement par « Accueil ». */ body.dr-on .dr-hd{display:none} /* ⛔ Ici vivait le volet de résultats, posé par-dessus le contenu à droite du menu épinglé. Retiré le 2026-08-21 : la recherche n'ouvre plus de fenêtre flottante, elle emmène sur sa page. */ body.dr-on .hd-burger{display:none} body.dr-on .hd-nav{display:none} } /* Où suis-je ? Dans un menu toujours ouvert, la page courante doit se voir, sinon la colonne n'est qu'un mur de liens. Posé par le JS (site.js et innovlia.js) sur le lien qui mène exactement ici, et son groupe s'ouvre. */ .mn-liens a.on{background:color-mix(in srgb,var(--c,var(--ac)) 20%,var(--bg3)); font-weight:650} .dr-uni.on{background:color-mix(in srgb,var(--ac) 20%,var(--bg3));border-color:var(--ac)} /* ---------- accueil ---------- */ .hero{padding:38px 0 4px;max-width:780px} .hero-kick{color:var(--tx2);font-size:.86rem;letter-spacing:.02em;margin:0 0 10px} .hero-h1{font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:650;margin:0} .bloc-1{margin-top:26px} .hero-mini{padding:44px 0 6px;max-width:70ch} .hero-mini p{color:var(--tx2)} /* UNE PORTE PAR LIGNE (user 2026-08-20 : « tu dois faire une ligne par bloc »). Avant : quatre colonnes côte à côte, donc quatre colonnes étroites où la phrase de profil se cassait en cinq lignes. En pleine largeur, chaque porte se lit d'un coup - c'est le même parti que les lignes de leçon (.nl-i). La grille nommée évite d'imbriquer un conteneur de plus : l'emoji tient la colonne de gauche sur toute la hauteur, l'étape celle de droite. */ .portes{display:grid;gap:12px;grid-template-columns:1fr} .porte{position:relative;display:grid;gap:4px 20px; grid-template-columns:auto 1fr auto; grid-template-areas:"e t f" "e d f" "e g f"; align-items:center;padding:20px 22px; background:var(--bg2);border:1px solid var(--bd); border-left:4px solid var(--c,var(--ac)); border-radius:var(--r);box-shadow:var(--om);transition:transform .13s,border-color .13s} .porte:hover{transform:translateX(3px);border-color:var(--c,var(--ac)); border-left-color:var(--c,var(--ac))} .po-e{grid-area:e;font-size:2rem;line-height:1} .po-t{grid-area:t;font-size:1.14rem;font-weight:650} .po-d{grid-area:d;color:var(--tx2);font-size:.92rem} .po-go{grid-area:g;font-size:.88rem;color:var(--c,var(--ac));font-weight:600} .po-f{grid-area:f;text-align:right;font-size:.72rem;color:var(--tx2); letter-spacing:.05em;text-transform:uppercase} /* Sur téléphone la ligne redevient une carte : à 375 px, trois colonnes ne laissent plus de place au texte, et l'étape à droite passerait à la ligne toute seule au milieu du reste. */ @media(max-width:700px){ .porte{grid-template-columns:1fr;grid-template-areas:"e" "t" "d" "g" "f"; align-items:start;gap:7px;padding:18px 18px 16px} .po-e{font-size:1.7rem} .po-t{font-size:1.05rem} .po-f{text-align:left} } .etapes-l{list-style:none;margin:0;padding:0;display:grid;gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .etapes-l li{display:flex;gap:14px;padding:18px;background:var(--bg2);border:1px solid var(--bd); border-radius:var(--r)} .etapes-l p{margin:4px 0 0;color:var(--tx2);font-size:.9rem} .et-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ac);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem} /* .chemin / .etape / .ep-b / .ep-t / .ep-p / .ep-o / .ep-c ont été retirés le 2026-08-13 avec la carte des 4 étapes de l'accueil de /learn. .ep-n RESTE : c'est la pastille du numéro d'étape, encore posée sur les pages famille, route, méthode et sur le hub des QCM. */ .ep-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--c,var(--ac)); color:var(--ct,#fff);display:inline-flex;align-items:center;justify-content:center; font-weight:700;font-size:.88rem} /* ---------- recherche ---------- */ /* La barre vit dans la page (page Recherche) : pleine largeur de la colonne, bord gauche calé sur le bloc qu'elle surplombe, comme sur l'accueil (user 2026-08-19). L'en-tête porte alors juste logo + News. */ .rech-q{position:relative;margin:30px 0 6px} .rech-q .hd-qi{left:15px;top:50%;transform:translateY(-50%);font-size:1rem} .rech-q #q{width:100%;padding:13px 42px;font:inherit;font-size:1rem;color:var(--tx); background:var(--bg2);border:1px solid var(--bd);border-radius:16px;box-shadow:var(--om)} .rech-q #q:focus{outline:2px solid var(--ac);outline-offset:1px} .rech-q #q-clear{position:absolute;right:13px;top:50%;transform:translateY(-50%); background:none;border:0;color:var(--tx2);cursor:pointer;font-size:1rem;display:none} /* Le champ de recherche a quitté l'en-tête (2026-08-20) : c'est lui qui, par son margin-left:auto, tenait le bouton News collé à droite. On le pose donc sur le bouton lui-même, pour toutes les pages. `.nq` reste posée sur le body par les deux scripts - elle ne sert plus qu'à dire « pas de champ ici ». */ .hd-news{margin-left:auto} .rech{margin:16px 0 0} .rech-info{color:var(--tx2);font-size:.88rem;margin:10px 2px;min-height:1.2em} /* « Ville — En route vers l'autonomie » : le nom de l'étape et le métier qu'elle vise, SUR LA MÊME LIGNE (user 2026-08-20). Ils ont remplacé la bulle numérotée - un chiffre dans un rond ne dit pas où l'on va. `align-items:baseline` pour que le petit texte s'aligne sur le pied du grand, et `flex-wrap` pour qu'il passe dessous sur un écran étroit plutôt que de comprimer le titre. */ /* ⚠️ SCOPÉ à la page « Toutes les routes ». `.h-fam` sert aussi au catalogue innovTools et au hub des QCM, où le titre porte encore une pastille : les passer en flex-baseline décalerait ces pastilles-là pour rien. */ .p-routes .h-fam{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px} .h-cap{color:var(--c,var(--ac));font-size:.92rem;font-weight:600;letter-spacing:.01em} /* La barre de filtres, sous le champ (user 2026-08-20). Un bouton pressé prend la COULEUR de son étape : on voit ce qu'on filtre sans relire l'étiquette. */ /* La barre de filtres vit maintenant DANS le tiroir, sous le champ : elle doit tenir dans une colonne de 350 px, donc chips serrées et texte plus petit. */ .rech-f{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px} .rf{padding:5px 11px;border:1px solid var(--bd);border-radius:99px;background:var(--bg2); color:var(--tx2);font:inherit;font-size:.79rem;font-weight:650;cursor:pointer} .rf:hover{color:var(--tx);border-color:var(--c,var(--ac))} .rf.on{background:var(--c,var(--ac));border-color:var(--c,var(--ac));color:var(--ct,#0c1017)} /* ⚠️ UN SEUL GABARIT DE RÉSULTAT : celui d'une page de route (user 2026-08-20, « ça doit être un standard d'affichage pour que l'utilisateur ne soit jamais perdu »). `.rr` n'est donc plus une carte - c'est l'enveloppe qui tient la ligne `.nl-i` et, dessous, les chapitres qui correspondent. Toute la mise en forme de la ligne vient de la section « listes en ligne », partagée par /learn, la recherche et l'accueil. ⛔ Les anciens `.rr-lien` / `.rr-b` / `.rr-t` / `.rr-m` / `.rr-yt` ont été retirés avec la carte : plus personne ne les produit. */ .rech-res{display:grid;gap:12px} .rr{display:grid;gap:4px} .rr-ch{margin:0 0 6px 14px;padding:0;list-style:none;display:grid;gap:3px} .rr-ch a{display:flex;gap:8px;font-size:.85rem;color:var(--tx2)} .rr-ch a:hover{color:var(--ac)} .rr-ch b{color:var(--ac);font-variant-numeric:tabular-nums} mark{background:color-mix(in srgb,var(--ac) 30%,transparent);color:inherit;border-radius:3px;padding:0 2px} /* Le repli téléphone d'un résultat est celui des lignes `.nl-i`, il n'y a plus rien à corriger ici : c'est tout l'intérêt d'un gabarit unique. */ /* ---------- blocs ---------- */ /* Plus de grille de cartes : tout s'affiche en LIGNES (voir « listes en ligne »). */ .bloc{margin:46px 0 0} /* la ligne qui explique ce que le bloc liste, juste sous son titre */ .bloc-s{color:var(--tx2);font-size:.92rem;margin:-6px 0 16px} .c-noimg{display:flex;align-items:center;justify-content:center;height:100%;color:var(--tx2); font-size:1.3rem;opacity:.55;background:var(--bg3);border-radius:inherit} /* ---------- badges, boutons ---------- */ .badge{font-size:.7rem;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:99px; border:1px solid var(--bd);color:var(--tx2);white-space:nowrap} .b-A{color:var(--V);border-color:color-mix(in srgb,var(--V) 42%,transparent)} .b-B{color:var(--N);border-color:color-mix(in srgb,var(--N) 42%,transparent)} .b-C{color:var(--E);border-color:color-mix(in srgb,var(--E) 42%,transparent)} .btn{display:inline-block;padding:11px 18px;border-radius:12px;border:1px solid var(--bd); background:var(--bg2);color:var(--tx);font:inherit;font-size:.92rem;font-weight:650;cursor:pointer} .btn:hover{border-color:var(--ac)} .btn-1{background:var(--c,var(--ac));border-color:var(--c,var(--ac));color:var(--ct,#fff)} .btn-1:hover{filter:brightness(1.08)} /* Une rangée de boutons de retour, en bas des pages annexes. */ .ilia-retour{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:36px 0 0} /* ---------- listes en ligne ---------- */ /* ⚠️ LE GABARIT UNIQUE d'une leçon affichée en liste : grande vignette à gauche, titre et objectif à droite. Il sert aux pages de route, aux pages d'étape, à la page des News (écrite par _AgentYoutube) et, depuis le 2026-08-20, aux résultats de recherche et à l'accueil du site. « Ça doit être un standard d'affichage pour que l'utilisateur ne soit jamais perdu » (user). Cette section est EXPORTÉE dans le socle commun : une seule définition, deux feuilles. */ /* .hd-news (la pastille rose de l'en-tête) a été retirée le 2026-08-13 : trois accès à News dans le même chrome, c'était deux de trop. */ /* liste des nouveautés : UNE vidéo par ligne */ .nl-mois{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2); font-weight:650;margin:0 0 12px} .nl{display:grid;gap:12px} .nl-i{position:relative;display:flex;gap:20px;align-items:center;padding:14px;background:var(--bg2); border:1px solid var(--bd);border-left:4px solid var(--c,var(--NW));border-radius:var(--r); transition:border-color .12s,transform .12s} .nl-i:hover{border-color:var(--c,var(--NW));transform:translateY(-2px)} /* .sr : libellé réservé aux lecteurs d'écran (résultats de recherche) */ .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .nl-v{flex:none;width:270px;max-width:40%;aspect-ratio:16/9;border-radius:11px;overflow:hidden; background:var(--bg3)} .nl-v img{width:100%;height:100%;object-fit:cover} .nl-b{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px} .nl-d{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tx2);font-weight:650} .nl-t{font-size:1.08rem;font-weight:650;line-height:1.3} .nl-m{font-size:.85rem;color:var(--tx2)} .nl-r{font-size:.9rem;color:var(--tx2);line-height:1.5;margin-top:2px} .nl-yt{position:relative;z-index:2;flex:none;width:44px;padding:6px;border-radius:10px; align-self:center;opacity:.85;transition:opacity .12s,background .12s} .nl-yt:hover{opacity:1;background:var(--bg3)} .nl-yt svg{width:100%;height:auto;display:block} /* mêmes lignes pour les ROUTES (pages d'étape + toutes les routes) : une route par ligne, jamais de grille carrée (user 2026-08-12). Le chevron remplace le logo YT. */ .nl-routes .nl-v{background:var(--bg3)} .nl-routes .nl-t{font-size:1.14rem} /* Un outil n'a pas de vignette 16/9 comme une route : juste son emoji. La case passe donc en carré et rétrécit, sinon un émoji flotte au milieu de 270 px de vide. */ .nl-outils .nl-v{width:74px;max-width:22%;aspect-ratio:1;background:var(--bg3)} .nl-outils .nl-v .c-noimg{font-size:1.9rem;opacity:1} @media(max-width:560px){.nl-outils .nl-v{width:58px}} .nl-go{flex:none;align-self:center;font-size:1.3rem;color:var(--c,var(--ac));opacity:.8; transition:transform .12s,opacity .12s} .nl-i:hover .nl-go{opacity:1;transform:translateX(4px)} @media(max-width:700px){ .nl-i{flex-wrap:wrap;gap:12px} .nl-v{width:100%;max-width:none;order:1} .nl-b{order:3;flex-basis:100%} .nl-yt{order:2;margin-left:auto} .nl-go{order:2;margin-left:auto} .nl-t{font-size:1rem} .nl-routes .nl-t{font-size:1.05rem} } /* ---------- pied ---------- */ .ft{border-top:1px solid var(--bd);margin-top:60px;padding:30px 18px 46px;color:var(--tx2); font-size:.85rem;text-align:center} .ft-note{max-width:62ch;margin:6px auto 0} .ft-note a:hover{color:var(--ac)} /* ============================ QCM ============================ */ /* Un QCM = une route. Cibles tactiles ≥ 44px : on répond au pouce. */ .dr-bqcm{background:var(--bg3);border:1px solid var(--ac);color:var(--tx);margin:0 0 10px} .dr-bqcm:hover{background:color-mix(in srgb,var(--ac) 16%,var(--bg3))} .btn-qcm{background:var(--QZ);border-color:var(--QZ);color:#2a1c00;font-weight:650} .btn-qcm b{font-weight:650;opacity:.72} .btn-qcm:hover{border-color:var(--QZ);filter:brightness(1.08)} /* --- hub : la liste des QCM --- */ .qi-chiffres{color:var(--tx2);font-size:.9rem} .qi-note{color:var(--tx2)} .qi-vide{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:22px} .qi-vide code{background:var(--bg3);padding:2px 6px;border-radius:6px;font-size:.88em} .qi-grille{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))} .qc{display:flex;flex-direction:column;gap:7px;padding:16px 17px;background:var(--bg2); border:1px solid var(--bd);border-left:4px solid var(--c,var(--ac));border-radius:var(--r)} .qc:hover{background:var(--bg3);border-color:var(--c,var(--ac))} .qc-hd{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--tx2)} .qc-code{font-weight:800;letter-spacing:.04em;color:var(--c,var(--ac))} .qc-fam{display:flex;align-items:center;gap:6px;margin-left:auto} .qc-t{font-weight:650;font-size:1.02rem;line-height:1.35} .qc-r{font-size:.84rem;color:var(--tx2)} /* Le QCM d'ÉTAPE prend toute la largeur : c'est l'épreuve qui ferme l'étape, pas un questionnaire de plus dans la grille. */ .qc-ep{grid-column:1/-1;background:linear-gradient(135deg, color-mix(in srgb,var(--c,var(--ac)) 7%,var(--bg2)),var(--bg2)); border-left-width:6px} .qc-ep .qc-t{font-size:1.32rem;font-weight:800} .qc-ep .qc-code{font-size:.92rem} .qc-pied{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:.8rem;color:var(--tx2)} .qc-score{margin-left:auto;font-weight:700;padding:3px 10px;border-radius:99px; background:var(--bg3);color:var(--tx)} .qc-score:empty{display:none} .qc-score.s-ok{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)} .qc-score.s-ko{background:color-mix(in srgb,var(--ko) 20%,transparent);color:var(--ko)} /* --- la page d'un QCM --- */ .qz{padding:34px 0 4px;max-width:72ch} .qz-rt{color:var(--tx2);border-bottom:1px dotted var(--bd)} .qz-rt:hover{color:var(--c,var(--ac))} .qz-sub{color:var(--tx2)} .qz-noscript{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:18px} .qz-zone{max-width:760px;margin:22px auto 0} .qz-barre{height:7px;border-radius:99px;background:var(--bg3);overflow:hidden;margin:0 0 8px} .qz-barre i{display:block;height:100%;background:var(--c,var(--QZ));transition:width .25s ease} .qz-etat{display:flex;gap:12px;font-size:.82rem;color:var(--tx2);margin:0 0 18px} .qz-etat b{color:var(--tx)} .qz-juste{margin-left:auto} .qz-q{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:22px} .qz-enonce{font-size:1.14rem;font-weight:650;line-height:1.4;margin:0 0 16px} .qz-opts{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none} .qz-o{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:52px;padding:13px 15px; text-align:left;font:inherit;color:var(--tx);background:var(--bg3);border:1px solid var(--bd); border-radius:12px;cursor:pointer} .qz-o:hover:not(:disabled){border-color:var(--c,var(--ac))} .qz-o:focus-visible{outline:2px solid var(--ac);outline-offset:2px} .qz-o:disabled{cursor:default} .qz-k{flex:none;width:26px;height:26px;border-radius:8px;background:var(--bg2); border:1px solid var(--bd);display:flex;align-items:center;justify-content:center; font-size:.82rem;font-weight:700;color:var(--tx2)} /* Correction SOBRE (user 2026-08-16) : la couleur sert à désigner la bonne et la mauvaise réponse, pas à éblouir. On garde le liseré franc et on descend les aplats à une teinte de fond, au lieu des pavés saturés d'avant. */ .qz-o.bon{border-color:color-mix(in srgb,var(--ok) 70%,var(--bd)); background:color-mix(in srgb,var(--ok) 8%,var(--bg3))} .qz-o.bon .qz-k{background:color-mix(in srgb,var(--ok) 20%,var(--bg2)); border-color:color-mix(in srgb,var(--ok) 60%,var(--bd));color:var(--ok)} .qz-o.mauvais{border-color:color-mix(in srgb,var(--ko) 70%,var(--bd)); background:color-mix(in srgb,var(--ko) 8%,var(--bg3))} .qz-o.mauvais .qz-k{background:color-mix(in srgb,var(--ko) 20%,var(--bg2)); border-color:color-mix(in srgb,var(--ko) 60%,var(--bd));color:var(--ko)} .qz-o.pale{opacity:.45} .qz-fb{margin:16px 0 0;padding:15px 16px;border-radius:12px;border:1px solid var(--bd); background:var(--bg3);font-size:.94rem} .qz-fb .qz-verdict{display:block;font-weight:700;margin:0 0 5px} .qz-fb.bon{border-color:color-mix(in srgb,var(--ok) 30%,var(--bd))} .qz-fb.bon .qz-verdict{color:var(--ok)} .qz-fb.mauvais{border-color:color-mix(in srgb,var(--ko) 30%,var(--bd))} .qz-fb.mauvais .qz-verdict{color:var(--ko)} .qz-lecon{display:inline-flex;align-items:center;gap:9px;margin:12px 0 0;padding:9px 13px; background:var(--bg2);border:1px solid var(--bd);border-radius:11px;font-size:.86rem; font-weight:600} .qz-lecon:hover{border-color:var(--ac)} .qz-lecon svg{width:22px;height:16px;flex:none} /* « Question suivante » est aligné à DROITE (user 2026-08-16) : c'est le sens de lecture, et le pouce le trouve là où il finit sa course. En jaune plein il flashait à chaque question - il passe en bouton dessiné. */ .qz-nav{display:flex;gap:10px;margin:18px 0 0;justify-content:flex-end} .qz-nav .btn{min-height:46px;display:inline-flex;align-items:center} .qz-nav .btn-qcm{background:transparent;color:var(--QZ); border-color:color-mix(in srgb,var(--QZ) 45%,var(--bd))} .qz-nav .btn-qcm:hover{background:color-mix(in srgb,var(--QZ) 10%,transparent); border-color:var(--QZ);filter:none} /* --- la bulle d'aide : le détail du QCM sans manger le haut de la page --- */ .qz-tete{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .qz-tete h1{margin:0} .qz-aide{flex:none} .qz-aide>summary{position:relative;list-style:none;width:27px;height:27px;border-radius:50%; border:1px solid var(--bd);background:var(--bg3);color:var(--tx2); display:flex;align-items:center;justify-content:center; font-size:.85rem;font-weight:700;cursor:pointer} .qz-aide>summary::-webkit-details-marker{display:none} /* Le rond reste petit à l'œil, mais la zone touchée fait 44px : la règle tactile du site vaut aussi pour une pastille discrète. */ .qz-aide>summary::after{content:"";position:absolute;top:50%;left:50%; width:44px;height:44px;transform:translate(-50%,-50%)} .qz-aide>summary:hover{color:var(--tx);border-color:var(--tx2)} .qz-aide[open]>summary{background:var(--bg2);color:var(--tx);border-color:var(--tx2)} /* Ancrée sur .qz-tete (et non sur le « ? ») : elle ne peut pas déborder de l'écran, quelle que soit la longueur du titre au-dessus. */ .qz-bulle{position:absolute;z-index:30;left:0;top:100%;margin-top:8px; width:min(440px,100%);padding:13px 15px;background:var(--bg2); border:1px solid var(--bd);border-radius:12px;font-size:.88rem;line-height:1.55; color:var(--tx2);box-shadow:0 14px 34px rgba(0,0,0,.5)} .qz-bulle b{color:var(--tx)} /* --- l'écran de score --- */ .qz-bilan{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:28px 24px; text-align:center} /* Le score sur 20 : le chiffre obtenu domine, le « /20 » reste discret. */ .qz-note{font-size:3.6rem;font-weight:800;line-height:1;letter-spacing:-.03em} .qz-note i{font-style:normal;font-size:.46em;font-weight:700;opacity:.6} .qz-note.s-ok{color:var(--ok)} .qz-note.s-ko{color:var(--ko)} .qz-sur{color:var(--tx2);font-size:.9rem;margin:6px 0 0} .qz-mot{margin:14px auto 0;max-width:48ch;font-size:1.12rem;font-weight:650;color:var(--tx)} .qz-record{display:inline-block;margin:14px 0 0;padding:5px 13px;border-radius:99px; background:var(--bg3);font-size:.82rem;color:var(--tx2)} .qz-refaire{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0 0} .qz-rappel{margin:26px 0 0;text-align:left} .qz-rappel h2{font-size:1.05rem} .qz-rate{display:block;padding:13px 15px;margin:0 0 9px;background:var(--bg2); border:1px solid var(--bd);border-left:3px solid var(--ko);border-radius:12px;font-size:.92rem} .qz-rate b{display:block;margin:0 0 4px} .qz-rate span{color:var(--tx2);font-size:.86rem} @media(max-width:560px){ .qz-q{padding:17px 15px} .qz-enonce{font-size:1.06rem} .qz-nav .btn{flex:1 1 auto;justify-content:center} } /* ============ pages écrites à la main : reprise de la charte ============ */ /* Anciens noms de variables (accueil, creative/, tools/) redirigés vers les tokens de /learn. `html:root` passe DEVANT le `:root` inline des pages. */ html:root{ --bg-dark:var(--bg); --bg-card:var(--bg2); --bg-card-hover:var(--bg3); --border:var(--bd); --text-primary:var(--tx); --text-secondary:var(--tx2); --text-muted:var(--tx2); --accent-cyan:#00d4ff; --accent-green:var(--V); --accent-purple:var(--A); --accent-orange:var(--E); --accent-red:var(--ko); --accent-yellow:var(--QZ); --accent-blue:var(--N); } /* L'en-tête commun est injecté par innovlia.js : il remplace l'ancienne barre. Les pages qui réservaient la place d'une barre fixe n'en ont plus besoin. */ body.ilia{padding-top:0!important} body.ilia>.hd{margin-bottom:14px} .ilia-wrap{max-width:1060px;margin:0 auto;padding:0 18px 72px} /* .ilia-retour a migré dans la section « badges, boutons » de la feuille de /learn : tools/index.html charge cette feuille-là, et la règle n'existait qu'ici. Elle part maintenant dans LES DEUX sorties (site.css et, par export, innovlia.css) - une seule définition, deux feuilles. */ /* ---- La barre doit être le MÊME objet que dans /learn ---- Piège : les pages écrites à la main déclarent leur