/* 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; /* ⚠️ DEUX BORDS, ET ILS NE SONT PAS INTERCHANGEABLES (arbitrage 11.2, 2026-09-08). `--bd` est le trait DÉCORATIF : séparateurs, filets, cadres de cartes. Il vaut 1,93:1 sur le fond, et c'est très bien - WCAG n'exige rien d'un trait qui ne délimite aucun contrôle. `--bdi` est le bord d'un COMPOSANT qu'on manipule : champ de saisie, bouton, chip. WCAG 2.1 § 1.4.11 y demande 3:1, et `--bd` n'y arrivait pas : un champ dont ni le fond (1,12:1) ni le bord n'atteint le seuil n'a plus de limite visible pour un œil peu contrasté. `#59698d` est le premier ton à passer 3:1 SUR LE FOND ET SUR LA CARTE - viser le seul fond de page laissait le champ de recherche, qui vit sur `--bg2`, à 2,80:1 - en gardant la teinte (222°) et la saturation (22%) de `--bd`. ⛔ Ne pas « unifier » les deux : repeindre les 45 séparateurs du site pour une règle qui ne les concerne pas serait une refonte, pas une correction. */ --bdi:#59698d; --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 🏠 A ÉTÉ RETIRÉE le 2026-08-24 (user). Elle avait été posée le 2026-08-13 à gauche du mot innovLia, quand la ligne « Accueil » a quitté le menu : il fallait que le retour à la maison se voie sans rien ouvrir. Le logo tient ce rôle à lui seul - c'est le même lien, il l'a toujours été, et un mot-symbole en haut à gauche qui ramène à l'accueil est la convention la mieux établie du web. L'émoji n'ajoutait donc pas une destination, seulement un objet de plus dans une barre déjà dense sur téléphone. ✅ Le tiroir garde SA maison (`.dr-accueil`, première ligne du menu) : c'est un libellé en toutes lettres, pas un pictogramme seul. */ .hd-logo{display:flex;align-items:center;flex:none;padding:2px 0} .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} /* ⛔ `.hd-news` A ÉTÉ RETIRÉE DE L'EN-TÊTE le 2026-08-24 (user) : la pastille rouge est descendue en première ligne du tiroir (`.dr-news`). Elle occupait 57 px sur téléphone dans la seule barre du site où la place manque, et c'est le commutateur de langue qui payait - comprimé à 0,75 rem pour lui faire de la place. Ses règles sont supprimées, y compris les deux paliers mobiles et le `margin-left:auto` qui la collait à droite : plus personne ne les porte. */ /* 🇫🇷🇬🇧 LA BASCULE DE LANGUE, à droite de News. Volontairement DISCRÈTE : c'est une porte de sortie pour qui n'est pas dans la bonne langue, pas un appel à l'action. Elle n'a donc ni fond plein ni couleur de marque - le rouge de News doit rester le seul point vif de la barre, sinon deux boutons se disputent le même regard. ⚠️ Même hauteur que News (38 px, 44 au téléphone) : deux pastilles de hauteurs différentes côte à côte se voient immédiatement. */ /* 🇫🇷🇬🇧 LE COMMUTATEUR DE LANGUE — les DEUX côtés, l'actif allumé. Refondu le 2026-08-24 (user : « on voit bien celui qui est activé »). C'est un segmented control : un étui, deux moitiés, une seule allumée. La forme dit ce que le texte seul ne disait pas - qu'il y a un CHOIX, et lequel est fait. L'étui garde son fond transparent : le rouge de News doit rester le seul aplat vif de la barre, la langue active se signale au contraste, pas à la couleur de marque. */ /* ⬅️ `margin-left:auto` LE COLLE À DROITE (user 2026-08-24 : « je veux toujours à droite comme avant »). C'était `.hd-news` qui portait cette poussée ; en la retirant de la barre le même jour, on a enlevé le seul élément qui repoussait quoi que ce soit, et le commutateur est venu se coller au logo. ⚠️ Sous 760 px c'est `.hd-logo{margin-right:auto}` qui fait le travail (le logo y est élastique) : la règle mobile remet donc `margin-left:0`. */ .hd-lang{flex:none;display:inline-flex;align-items:stretch;gap:2px;margin-left:auto; padding:2px;border-radius:99px; background:var(--bg3);border:1px solid var(--bd); white-space:nowrap;min-height:38px;overflow:hidden} /* ⚠️ le `margin-left:8px` qui était ici ÉCRASAIT le `auto` déclaré plus haut dans la même règle - c'est la dernière déclaration qui gagne. */ .hd-lang .hd-lg{display:inline-flex;align-items:center; padding:0 11px;border-radius:99px;color:var(--tx2); font-size:.8rem;font-weight:700;letter-spacing:.04em;line-height:1} /* ⚠️ L'ACTIF n'est pas juste « un peu plus clair » : fond plein, texte sombre. Un simple changement de teinte ne se voit pas sur un écran de portable mal réglé, et pas du tout pour un daltonien. Ici c'est le CONTRASTE qui porte l'information, pas la couleur. */ .hd-lang .hd-lg.on{background:var(--tx);color:var(--bg);cursor:default} /* L'autre langue reste un lien : il doit se comporter comme tel. */ /* ⚠️ `--ac` et non `--cy` : cette dernière n'est définie NULLE PART dans la feuille. Elle traînait dans la première version du bouton (2026-08-24) : le survol ne changeait donc rien du tout, la déclaration étant invalide et ignorée en silence. C'est le genre de panne qu'aucun test ne voit. */ .hd-lang a.hd-lg:hover{color:var(--ac);background:rgba(126,166,255,.14)} .hd-lang a.hd-lg:focus-visible{outline:2px solid var(--ac);outline-offset:-2px} /* Sous 520 px on ne retire RIEN, on resserre : « FR » et « EN » sont déjà les deux libellés les plus courts possibles. ⚠️ L'ancienne règle posait `font-size:0` pour ne garder que le drapeau - depuis qu'il n'y en a plus (user 2026-08-24), elle aurait vidé le commutateur sur téléphone. */ /* ⚠️ Le détail des tailles téléphone est REGROUPé dans le palier 760 plus bas, avec News et le logo : trois éléments qui se partagent une seule ligne se règlent ensemble ou pas du tout. L'ancien palier 520, qui ne touchait que le commutateur, est parti là-bas. */ @media(max-width:760px){.hd-lang{min-height:44px;order:11}} /* 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} /* ⛔ `.dr-q` A ÉTÉ RETIRÉE le 2026-08-24 : le champ de recherche a quitté le tiroir pour sa page dédiée (user). Le tiroir n'en porte plus qu'un LIEN. Les règles du champ vivent désormais dans `.rech-q`, plus bas, et elles y étaient déjà : c'est là que le champ habitait avant le 2026-08-20. */ @media(max-width:900px){ .hd-nav a{padding:7px 9px;font-size:.86rem} } /* ⚠️ UNE SEULE LIGNE SUR TÉLÉPHONE (user 2026-08-24 : « innovLia, News, FR/EN, les boutons doivent tenir sur une ligne »). L'arrivée du commutateur de langue, le même jour, avait fait déborder la barre sur une SECONDE ligne : trois éléments à taille fixe (logo + News + FR/EN) plus le burger ne tiennent pas dans 324 px utiles. Sur un téléphone, deux lignes d'en-tête colle, c'est un sixième de l'écran mangé avant d'avoir lu un mot - et la barre étant `sticky`, ce vol de hauteur suit le visiteur sur toute la page. 🧱 LA MÉTHODE : on passe en `nowrap` et on désigne UN SEUL élément élastique - le LOGO. C'est lui qui absorbe le manque de place, parce qu'un logo réduit reste un logo, alors qu'un bouton tronqué ne veut plus rien dire. Il garde son rapport (`object-fit:contain` + les attributs width/height du HTML) et ne descend jamais sous 74 px, où le mot « innovLia » cesserait d'être lisible. ⛔ Ne pas rendre News ou FR/EN élastiques à leur tour : deux éléments qui rétrécissent en même temps, et plus rien n'a de taille prévisible. 📏 Vérifié à 320 px (le plus petit écran encore en service) : 36 + 74 + 60 + 72 + les gouttières = 262 px pour 296 px utiles. Ça tient. */ @media(max-width:760px){ .hd-nav{display:none} .hd-burger{display:flex} .hd{flex-wrap:nowrap;gap:8px;padding:10px 12px} /* cible tactile : le retour à l'accueil doit se toucher au pouce (44 px) */ .hd-logo{flex:0 1 auto;min-width:0;margin-right:auto;min-height:44px} /* `max-width:100%` + parent à `min-width:0` : sans les deux, une image ne rétrécit JAMAIS dans un conteneur flex, elle déborde. */ /* 📏 LE LOGO EST PLAFONNÉ À 120 px sur téléphone (2026-08-24, 2e passe). Il réclamait 167 px, soit à lui seul 43 % de la largeur d'un iPhone - pour un mot qu'on lit très bien à 120. C'est LUI qui prenait la place des deux boutons. Le plancher à 74 px reste : en dessous, « innovLia » ne se lit plus. Entre les deux, l'image se met à l'aise toute seule. */ .hd-img{height:26px;width:auto;max-width:150px;min-width:74px;object-fit:contain} /* Le champ de recherche a quitté l'en-tête le 2026-08-20 ; la règle reste au cas où une page écrite à la main en porterait encore un. */ .hd-q{flex:1 1 120px;order:9;margin-left:0;min-width:0} /* ✅ FR/EN A RETROUVÉ SA TAILLE (user 2026-08-24 : « comme ça on aura de la place pour agrandir de nouveau FR/EN sur la version mobile »). Il avait été comprimé à 0,75 rem / 8 px le matin même pour loger le bouton News ; News étant descendu dans le tiroir, les 57 px lui reviennent. Il repasse même AU-DESSUS de sa taille de bureau (0,8 rem) : sur téléphone c'est le seul réglage de la barre, autant qu'il se touche bien. ⚠️ `min-height:44px` reste : c'est la cible tactile, elle se mesure en hauteur, et elle n'a jamais été le problème. */ .hd-lang{order:11;margin-left:0} .hd-lang .hd-lg{padding:0 15px;font-size:.92rem} } /* Le plus petit palier : on rogne les gouttières et les rembourrages, jamais un libellé. « News », « FR » et « EN » sont déjà les mots les plus courts possibles - il n'y a plus rien à abréger après eux. */ @media(max-width:380px){ .hd{gap:6px;padding:10px 10px} .hd-burger{width:36px} .hd-img{max-width:126px} .hd-lang .hd-lg{padding:0 7px} } /* ---------- 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(--bdi);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(--bdi);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(--bdi);color:var(--tx);margin:0 0 8px; min-height:56px;align-items:center} .dr-uni:hover{border-color:var(--ac)} /* 🧭 LES TROIS PORTES DU MENU (user 2026-08-24) : News, Recherche, Itinéraire. ⚠️ Elles portent TOUTES LES TROIS la classe `.dr-uni` - c'est elle, et elle seule, qui définit leur forme. « L'itinéraire doit être du même style que les autres boutons » (user, 2e passe) : la première version leur avait donné des règles SÉPARÉES, aux valeurs pourtant identiques - et elles ont divergé sur-le-champ, parce que `.dr-uni` avait déjà deux règles ailleurs (l'état « page en cours », et le dépouillement en mode épinglé) que les deux nouvelles classes n'avaient pas. ⛔ Ne jamais redéfinir fond, bordure ou hauteur ici : un seul gabarit, `.dr-uni`, et des MODIFICATEURS qui ne changent qu'une chose. 🔴 Le seul modificateur : News garde son rouge, en TRAIT et non en aplat. Dans la barre du haut, seul élément vif d'un fond sombre, l'aplat #ff0000 fonctionnait ; empilé dans un menu, il écraserait ses deux voisines. */ .dr-news{border-left:3px solid #ff0000} .dr-news:hover{border-left-color:#ff0000} .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)} /* ⛔ PLUS DE CHEVRON (user 2026-09-01 : « c'est elle qui bloque les actions »). La flèche occupait le bord droit de la ligne et n'y faisait QUE basculer le volet : cliquer la fin d'un titre ne partait donc nulle part. Passée à 44 px pour être visable au pouce, elle rendait cette zone morte trois fois plus grande - le remède était pire que le mal. La LIGNE ENTIÈRE est donc le lien, et c'est `clicDirect()` qui tranche : on est ailleurs → on part ; on est déjà sur la page du groupe → on plie ou on déplie. Un geste, une ligne, aucune zone qui ne répond pas. ⚠️ La gouttière du est portée par le LIEN, pas par le : posée sur le summary, elle laissait une bande de 11 px tout autour où le clic basculait le volet au lieu de suivre le lien - la zone morte revenait par la fenêtre. */ .mn-fam summary{padding:0} .mn-fl{display:flex;align-items:center;gap:10px;flex:1;min-width:0; padding:11px 12px;color:inherit;text-decoration:none} .mn-fn{font-size:.98rem} .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} /* innovLia World prend le bleu, la seule des quatre teintes que les trois sections ci-dessus n'avaient pas prise. Encre sombre sur l'aplat vif, comme les autres pastilles. */ .g-wld{--c:var(--N);--ct:#04101f} /* innovLia Game : le jaune des QCM, l'autre coin « jeu » du site. */ .g-game{--c:var(--QZ);--ct:#1f1600} /* La section d'UNE page : même gouttière, même pastille, même hauteur de ligne qu'un titre de groupe - mais aucun volet dessous. ⚠️ Elle porte .mn-fl, qui pose déjà la gouttière interne : ici seul le bord gauche coloré et l'arrondi du sont à reprendre, sinon la ligne serait la seule du menu à n'avoir ni l'un ni l'autre. */ .mn-seul{border-radius:11px;font-weight:650;border-left:3px solid var(--c,var(--ac))} .mn-seul:hover{background:var(--bg3)} /* 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} /* ⛔ LE DÉPOUILLEMENT DES TROIS PREMIÈRES LIGNES EN MODE ÉPINGLÉ A ÉTÉ RETIRÉ le 2026-08-24. Il enlevait fond et bordure au-dessus de 1060 px, au motif que trois boîtes pleines contre un fond nu redessinaient un cadre. Mais depuis que News et Recherche sont devenues des lignes de menu, ce sont bien TROIS BOUTONS de même rang, et le user les veut identiques - or ce bloc ne s'appliquait qu'à `.dr-uni`, ce qui faisait justement diverger l'itinéraire de ses deux voisines sur grand écran. ⚠️ La hauteur de 48 px partait avec : les trois font 56 px partout. */ /* É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). */ /* 📐 UNE SEULE COLONNE, ET PLUS DE GRILLE NOMMÉE (user 2026-08-26). La porte en a eu trois : l'emoji, le texte, l'étiquette d'étape. Les deux colonnes de bord sont parties le même jour - l'étiquette dans le titre, l'emoji retiré (« ça sert à rien »). Ce qui reste s'empile dans l'ordre du HTML, donc les `grid-area` nommées n'ont plus rien à placer : trois lignes de texte, l'une sous l'autre, et la couleur d'étape portée par le bord gauche de la carte - qui devient du coup le seul repère visuel, et suffit. ⛔ Ne pas remettre `align-items:center` : il servait à centrer l'emoji sur la hauteur des trois lignes, il n'a plus d'objet et forcerait un `stretch` en `center` sur des blocs de texte. */ .portes{display:grid;gap:12px;grid-template-columns:1fr} .porte{position:relative;display:grid;gap:4px;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-t{font-size:1.14rem;font-weight:650} .po-d{color:var(--tx2);font-size:.92rem} .po-go{font-size:.88rem;color:var(--c,var(--ac));font-weight:600} /* ⛔ N'EXISTENT PLUS depuis le 2026-08-26 : `.po-e` (l'emoji de gauche) et `.po-f` (l'étiquette d'étape en petites capitales, à droite). */ /* Sur téléphone : les mêmes lignes, juste plus resserrées. */ @media(max-width:700px){ .porte{gap:7px;padding:18px 18px 16px} .po-t{font-size:1.05rem} } .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. */ /* 📏 LES DEUX ÉCARTS DE LA PAGE DE RECHERCHE, réglés le 2026-08-24 (user : « entre la barre de recherche et le filtre, faut laisser plus d'espace, mais remonte la barre »). Le titre et le champ vont ENSEMBLE - le champ est ce que le titre annonce - donc peu d'air entre eux (30 px → 6 px de marge haute, soit ~22 px rendus). Les filtres, eux, sont un OUTRE geste : ils se détachent (6 → 24 px sous le champ). L'œil doit lire deux blocs, pas trois lignes à distance égale. */ .rech-q{position:relative;margin:0 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(--bdi);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 ». */ /* ⚠️ 16 → 4 px le 2026-08-24 : c'est ce bloc, et non `.rech-q`, qui portait l'essentiel de l'écart sous le titre. */ .rech{margin:4px 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. */ /* 🎚️ LES QUATRE BASCULES D'ÉTAPE. À l'étroit jusqu'au 2026-08-24 (user : « les filtres sont trop collés ») : 6 px de gouttière et 5×11 de rembourrage, des réglages hérités du temps où elles vivaient dans une colonne de menu de 350 px. Sur leur page dédiée elles ont toute la largeur : 10 px entre elles, et une pastille assez haute pour se toucher au pouce (36 px). ⚠️ `gap` porte les DEUX axes : sur téléphone les quatre passent sur deux lignes, et 6 px d'interligne les faisait se toucher verticalement aussi. */ .rech-f{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 18px} .rf{padding:8px 16px;min-height:36px;border:1px solid var(--bdi);border-radius:99px; background:var(--bg2);color:var(--tx2);font:inherit;font-size:.85rem;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(--bdi); background:var(--bg2);color:var(--tx);font:inherit;font-size:.92rem;font-weight:650;cursor:pointer} .btn:hover{border-color:var(--ac)} /* ⚠️ LE REPLI D'ENCRE ÉTAIT BLANC, ET C'ÉTAIT UN ÉCHEC WCAG (corrigé 2026-08-24). Un `.btn-1` posé hors d'un contexte de famille prend `--ac` (#7ea6ff, un bleu CLAIR) comme fond, et retombait sur `#fff` pour le texte : **2,39:1**, très loin du 4,5 exigé. Les quatre familles définissent toutes une encre SOMBRE (`.f-V{--ct:#04140e}` etc.) - seul le repli avait été oublié, donc le défaut ne se voyait que sur les boutons hors parcours : le catalogue innovTools, « Les autres QCM ». En sombre : **7,98:1**. ⛔ Ne jamais remettre une encre claire ici : `--ac` est une couleur claire, un aplat clair veut une encre sombre. */ .btn-1{background:var(--c,var(--ac));border-color:var(--c,var(--ac));color:var(--ct,#051020)} .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)} /* ============ 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