/* La roue du mois - Cabinet KLD 1.0. Assemblée par fabriquer_greffon_mois.py depuis la maquette : c'est la feuille qu'on a regardée, pas une recopie. */ :root{ --violet:#742997; --violet2:#7b2f9e; --violet-mid:#af82c6; --violet-clair:#d2aae4; --lav1:#faf7fc; --lav2:#f4ecfa; --lav3:#f1e9f6; --orange:#fba13a; --orange2:#ff8e3f; --noir:#222222; --gris:#4a4a4a; --gris2:#6a6a6a; --n0:#ffffff; --n1:#f7f7f8; --n2:#eeeef0; --n3:#dedee2; --n4:#c8c8ce; --carte:#ffffff; --page:#ffffff; --om:0 0 27px 4px rgba(0,0,0,.11); --om2:0 4px 12px rgba(0,0,0,.05); --b:"Open Sans",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; --h:"Shadows Into Light Two",cursive; } /* M1 (24/09/2026, essai dans un vrai WordPress) : LA ROUE RESTE CLAIRE, TOUJOURS. Les deux blocs sombres (prefers-color-scheme et data-theme="dark") faisaient de la roue un disque noir sur la page blanche du site. Ils sont retirés ; le producteur les retire aussi à l'export s'ils revenaient (porter_feuille). */ /* ══ LE BLOC DU SITE — ce que le greffon WordPress habille ══ ⛔ Ces classes étaient dans la maquette et PAS dans la feuille livrée : le greffon les utilisait, le site les aurait rendues sans style. Elles vivent ici parce que c'est ce fichier que le producteur exporte en ciel-du-jour.css. */ .kld-ciel{max-width:360px;margin:0 auto} .kld-ciel .cd4{max-width:360px} .kld-ciel .title-section{font-family:var(--b);font-size:22px;font-weight:800; color:var(--violet);margin:0 0 12px;text-align:center} .kld-sous{margin:8px auto 0;border-top:1px solid var(--n3);padding-top:9px} .kld-invite{margin:0 0 7px;font-size:11px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--violet-mid);text-align:center} .kld-invite:empty{display:none} /* écrite par le script : vide sans JavaScript */ .kld-bloc{min-height:96px;font-size:12.5px;line-height:1.6;color:var(--gris);text-align:left} .kld-bloc b{color:var(--noir)} .kld-leg summary{font-size:12px;font-weight:700;color:var(--violet);cursor:pointer; list-style:none;padding:10px 0;border-top:1px solid var(--n3);text-align:center} .kld-leg summary::before{content:"\25B8 ";color:var(--violet-mid)} .kld-leg[open] summary::before{content:"\25BE "} .kld-leg .cd4-leg{grid-template-columns:1fr;font-size:11px;margin-top:6px} .kld-note{font-size:11.5px;line-height:1.6;color:var(--gris);margin:10px 0 4px;text-align:left} .kld-note b{color:var(--noir)} /* ══ LA LÉGENDE — elle MONTRE la marque, elle ne la décrit plus ══ */ .cd4-leg{list-style:none;margin:16px auto 0;padding:0;max-width:480px; display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:7px 20px} .cd4-leg li{display:flex;align-items:center;gap:9px;font-family:var(--b); font-size:11.5px;line-height:1.4;color:var(--gris2)} .cd4-leg b{font-weight:700;color:var(--noir);display:block} .cd4-leg span{min-width:0} .ech{flex:0 0 34px;width:34px;height:18px;overflow:visible} .e-dur{stroke:#c26a0a;stroke-width:2.2;stroke-linecap:round} .e-harmo{stroke:var(--violet);stroke-width:2.2;stroke-linecap:round} .e-neutre{stroke:var(--gris2);stroke-width:2;stroke-dasharray:3.5 4;stroke-linecap:round} .e-perf{stroke:#c26a0a;stroke-width:3.4;stroke-linecap:round} .e-chev{fill:none;stroke:var(--gris);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .e-pale{stroke:#b9b6c0;stroke-width:1;stroke-linecap:round} .e-chip{fill:var(--carte);stroke:var(--violet);stroke-width:1.7} .e-chip2{stroke:var(--violet-mid);stroke-width:1.3} /* B4, 24/09/2026 : l'échantillon « Nœuds (moyens), Lune noire (moyenne) » reprend l'habit des pastilles de rang 5 (.r5) de la roue. */ .e-chip5{fill:var(--n1);stroke:var(--n4);stroke-width:1.1} .e-gly5{fill:var(--gris2);font-family:"Open Sans","DejaVu Sans","Segoe UI Symbol",-apple-system,Helvetica,Arial,sans-serif;font-size:8px;font-variant-emoji:text} .e-gly{fill:#a8600f;font-family:var(--b);font-size:8px} .e-fil{stroke:#adadb6;stroke-width:1.1} .e-pt{fill:var(--gris2)} .e-retro{fill:var(--gris);font-family:var(--b);font-size:11px;font-weight:800} .e-pt-lune{fill:var(--violet-mid)} .e-lune{fill:none;stroke:var(--violet-mid);stroke-width:2;stroke-dasharray:5 3.5;stroke-linecap:round} /* ══ LE CADRAN ══ */ .cd4{display:block;margin:0 auto;width:100%;max-width:480px} .gr0{stop-color:var(--n0)} .gr1{stop-color:var(--n1)} .sec{stroke:none;transition:fill .14s} .sec-a{fill:var(--n1)} .sec-b{fill:var(--n2)} .ring{fill:none;stroke:var(--n3);stroke-width:1} .ring-out{stroke:var(--n4);stroke-width:1.2} .ring-fin{stroke:var(--n3);stroke-width:.9} .cusp{stroke:var(--n3);stroke-width:.9} .cusp-a{stroke:var(--n4);stroke-width:1.2} .slab{fill:var(--violet);font-family:var(--b);font-size:12.5px;font-weight:700;letter-spacing:.045em} .snum{fill:var(--gris2);font-family:var(--b);font-size:9px;font-weight:700;letter-spacing:.10em} /* 5,41:1 — l'opacité .7 le mettait à 2,18 */ .zod{stroke:none} .zod-a{fill:var(--n0)} .zod-b{fill:var(--n1)} .grad{stroke:var(--n4);stroke-width:.7;opacity:.7} .grad-g{stroke:var(--gris2);stroke-width:.9;opacity:.65} /* B10 — --b se termine par la générique sans-serif, qui résout TOUJOURS : les deux polices porteuses des glyphes n'étaient jamais essayées. Elles passent devant. */ .sgly{fill:var(--violet2);font-family:"Open Sans","DejaVu Sans","Segoe UI Symbol",-apple-system,Helvetica,Arial,sans-serif;font-size:12.5px;font-variant-emoji:text;opacity:.75} .c,.cf,.c-halo,.chev{fill:none} .cf{stroke:#b9b6c0;stroke-width:.85;opacity:.9} .c-halo{stroke:var(--n1);stroke-width:calc(var(--w) + 3.4);opacity:.9} .c{stroke-width:var(--w);opacity:.78;stroke-linecap:round} .c-dur{stroke:#d97c0a} /* 3,05:1 — était #ef7420 à 2,92 */ .c-harmo{stroke:var(--violet)} .c-neutre{stroke:var(--gris2)} /* B2 — .c-mineur (0,1,0) perdait contre .cd4.anime .trace (0,3,0) : le pointillé n'existait dans AUCUN état de la page, sur 43,3 % des cordes. On le rend au même poids de spécificité, et on lui retire l'animation de tracé (elle utilise la même propriété). Mesuré le 10/09/2026. */ .cd4 .c.c-mineur,.cd4.anime .c.c-mineur{stroke-dasharray:3.5 4;stroke-dashoffset:0; animation:kld-paraitre .5s ease backwards;animation-delay:var(--d,0s)} /* M2 (24/09/2026) : « forwards » + « to » FIGEAIT l'opacité à .78 : au survol, les cordes mineures ne s'atténuaient plus (.78 au lieu de .14). « backwards » + un seul « from » : l'animation ne tient l'opacité que pendant son délai et son tracé. */ @keyframes kld-paraitre{from{opacity:0}} .c-perf{stroke-width:calc(var(--w) + 1.2);opacity:1} .chev{fill:none;stroke:var(--gris);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .c-perf.c-dur{stroke:#c26a0a} /* 3,90:1 — l'emphase ne baisse plus le contraste */ /* L'arc est VISIBLE en permanence (GO Loïc 10/09). Il se renforce au survol de la Lune. Tirets longs et bouts ronds : il ne doit pas se confondre avec le pointillé court des aspects mineurs, qui traverse le disque. */ .lune-trajet{transition:opacity .18s ease} .lune-arc{fill:none;stroke:var(--violet-mid);stroke-width:2;stroke-dasharray:5 3.5; stroke-linecap:round} .cd4.lune .lune-arc{stroke:var(--violet);stroke-width:2.6} .cd4.lune .lune-borne{fill:var(--violet)} .cd4.focus .lune-trajet{opacity:.2} .cd4.focus.lune .lune-trajet{opacity:1} .lune-borne{fill:var(--violet-mid)} .rappel{stroke:#adadb6;stroke-width:1.1} .pt-vrai{fill:var(--gris2)} .chip{fill:var(--carte);stroke:var(--violet);stroke-width:1.7} .r1 .chip{stroke-width:2.1} .astre[data-p="Soleil"] .chip{stroke:#d97c0a} /* 3,05:1 — était 2,05 */ .astre[data-p="Soleil"] .gly{fill:#a8600f} /* 4,79:1 — était 2,05 */ .astre[data-p="Lune"] .chip{fill:var(--lav2)} .r4 .chip{stroke:var(--violet-mid);stroke-width:1.3} .r5 .chip{fill:var(--n1);stroke:var(--n4);stroke-width:1.1} .r5 .gly{fill:var(--gris2)} .gly{fill:var(--violet);font-family:"Open Sans","DejaVu Sans","Segoe UI Symbol",-apple-system,Helvetica,Arial,sans-serif;font-size:15px;font-variant-emoji:text} .r1 .gly{font-size:16.5px} .r5 .gly{font-size:12px} .deg{fill:var(--gris2);font-family:var(--b);font-size:9.5px;font-weight:700;paint-order:stroke fill;stroke:var(--n0);stroke-width:2.6;stroke-linejoin:round} .retro{fill:var(--gris);font-family:var(--b);font-size:10px;font-weight:800;paint-order:stroke fill;stroke:var(--n0);stroke-width:2.4;stroke-linejoin:round} .ctr{fill:var(--carte);stroke:var(--n3);stroke-width:1} .kld{fill:var(--violet-clair)} .ctr-signe{fill:var(--violet);font-family:var(--h);font-size:25px;letter-spacing:1.4px} .ctr-date{fill:var(--gris2);font-family:var(--b);font-size:7px;font-weight:700;letter-spacing:.12em} /* ══ animation 4 : le tracé ══ */ .cd4.anime .trace,.cd4.anime .c-halo{stroke-dasharray:var(--L);stroke-dashoffset:var(--L); animation:kld-tr .85s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)} @keyframes kld-tr{to{stroke-dashoffset:0}} .cd4.anime .astre{transform-box:fill-box;transform-origin:center; animation:kld-po .42s cubic-bezier(.34,1.25,.5,1) backwards;animation-delay:var(--d,0s)} /* M2 : même défaut, les autres astres restaient à 1 au survol au lieu de .35. */ @keyframes kld-po{from{opacity:.001;transform:scale(.9)}} /* ══ animation 1 : survol / focus d'un astre ══ */ .cd4 .astre{cursor:pointer;transition:opacity .18s ease} .cd4 .c,.cd4 .c-halo,.cd4 .cf{transition:opacity .18s ease} .cd4 .astre .chip,.cd4 .astre .gly{transition:transform .16s ease} /* ROUE COMPLÈTE (24/09/2026, V1 décidée par Loïc à 20 h 11) : les traits gris ne se touchent jamais ; le moyeu et le logo ne captent plus le doigt (le rectangle masqué du logo mesurait 103,7 u de côté et prenait le toucher au centre) ; les traits et le chevron non plus. */ .cd4 .cf,.cd4 .c,.cd4 .c-halo,.cd4 .chev,.cd4 .ctr,.cd4 .kld,.cd4 .lune-trajet{pointer-events:none} /* Toucher un astre allume aussi ses traits gris, et l'astre au bout, à demi (maquette reflexion_2026-09-24/variante1_gris_allumes.html). */ .cd4.focus .cf.on{opacity:1;stroke:#9c98a6;stroke-width:1.15} .cd4.focus .astre.demi{opacity:.7} .cd4.focus .c,.cd4.focus .cf,.cd4.focus .c-halo,.cd4.focus .chev{opacity:.14} .cd4 .chev{transition:opacity .18s ease} .cd4.focus .c.on{opacity:1} .cd4.focus .c-halo.on{opacity:.95} .cd4.focus .astre{opacity:.35} .cd4.focus .astre.on{opacity:1} .cd4 .astre:focus{outline:none} /* m1 : pas de cadre du navigateur au clic ; au clavier, la pastille s'allume (ligne suivante) */ .cd4 .astre:focus-visible .chip{stroke:var(--orange);stroke-width:2.6;outline:none} .cd4 .astre.on .chip{stroke-width:2.6} @media (prefers-reduced-motion:reduce){ .cd4.anime .trace{stroke-dasharray:none;stroke-dashoffset:0;animation:none} .cd4 .c.c-mineur,.cd4.anime .c.c-mineur{stroke-dasharray:3.5 4;animation:none} .cd4.anime .astre{animation:none;transform:none} .cd4 .astre .chip,.cd4 .astre .gly{transition:none} } /* ══ CE QUE LE MOIS AJOUTE — les arcs (P1a), repris de la roue de l'ANNÉE ══ */ .m-arc{fill:none;stroke:var(--violet-mid);stroke-width:2.1;stroke-linecap:round;opacity:.85} .m-arc.m-recul{stroke-dasharray:3 3.2;opacity:.8} .m-debut{fill:var(--violet-mid);opacity:.9} /* CONV-C : l'astre qui n'a presque pas bougé — un point, pas un trait étiré */ .m-point{fill:var(--violet-mid);opacity:.9;stroke:var(--carte);stroke-width:1} .m-point.m-recul{fill:none;stroke:var(--violet-mid);stroke-width:1.6;stroke-dasharray:2 2} .m-cran{stroke:var(--gris2);stroke-width:1.2;stroke-linecap:round} .cf{stroke:#b9b6c0;opacity:.9} /* le toucher : un secteur s'allume comme un astre (règle de l'ANNÉE) */ .cd4 .sec{cursor:pointer} .cd4 .slab{cursor:pointer} .cd4.focus .sec.on{fill:var(--lav2)} .cd4.focus .slab.on{fill:var(--violet);font-weight:800} .cd4.focus .astre{opacity:.45} .cd4.focus .astre.on{opacity:1} .cd4.focus .astre.demi{opacity:.75} .cd4.focus .c,.cd4.focus .c-halo,.cd4.focus .cf{opacity:.12} .cd4.focus .c.on{opacity:.95} .cd4.focus .c-halo.on{opacity:.9} .cd4.focus .cf.on{opacity:.8} .cd4.focus .m-arc,.cd4.focus .m-point,.cd4.focus .m-debut{opacity:.2} .cd4.focus .m-arc.on,.cd4.focus .m-point.on,.cd4.focus .m-debut.on{opacity:.95} /* ⛔ LES MARQUES DE LA LUNE ET DES ENTRÉES — ajoutées le 23/10, et c'était un DÉFAUT VISIBLE. Trouvé par la seconde relecture indépendante : `dessin_mois.py` écrit `mk-lun`, `mk-forte` et `mk-ing`, et AUCUNE n'avait de règle. Conséquence à l'écran, vérifiée : un cercle SVG sans `fill` se rend NOIR — quatre points noirs par roue, les lunaisons —, et un trait (élément « line ») sans `stroke` ne se dessine PAS : les deux marques d'entrée de signe étaient invisibles. ⚠ Ce commentaire a d'abord porté la balise entre chevrons, et le fabricant a REFUSÉ de produire : sa garde « il reste du HTML dans la feuille » ne fait pas la différence entre une balise et une balise citée. Faux positif — **on a changé le commentaire, pas la garde** : une garde qu'on assouplit pour se laisser passer ne garde plus rien. Ce sont des marques inventées par le MOIS (le jour n'a pas d'équivalent : il n'a que `.lune-arc` / `.lune-borne`), donc personne n'avait écrit leur habillage. Le modèle suivi est celui du jour pour la Lune — `.lune-borne{fill:var(--violet)}` — et celui de ses graduations pour le trait d'entrée — `.grad{stroke:var(--n4);stroke-width:.7}`. */ .mk-lun{fill:var(--violet-mid);opacity:.85} .mk-forte{fill:var(--violet);opacity:1} /* nouvelle et pleine lune : plus affirmées */ .mk-ing{stroke:var(--n4);stroke-width:1.1;opacity:.75;stroke-linecap:round} /* la cible du doigt sur une lunaison : large, et invisible. `fill-opacity:0` et non `fill:none` — un disque sans remplissage ne reçoit pas le toucher, un disque transparent si. Et pas de `pointer-events` : inutile ici, et la liste blanche ne l'accepterait pas. */ .mk-touche{fill:#ffffff;fill-opacity:0;cursor:pointer} .cd4.focus .mk-touche{opacity:1} /* échantillons de la légende */ .e-arc{stroke:var(--violet-mid);stroke-width:2.1;stroke-linecap:round;fill:none} .e-arcr{stroke:var(--violet-mid);stroke-width:2.1;stroke-dasharray:3 3.2;stroke-linecap:round;fill:none} .e-pt{fill:var(--violet-mid)} .e-ptv{fill:var(--gris2)} /* l'échantillon du petit point gris, même teinte que lui */ .e-lun{fill:var(--violet-mid);opacity:.85} .e-lunf{fill:var(--violet)} .e-ing{stroke:var(--n4);stroke-width:1.1;stroke-linecap:round} .e-fin{stroke:#b9b6c0;stroke-width:1.15;stroke-linecap:round} .e-gras{stroke:#b9b6c0;stroke-width:2.4;stroke-linecap:round}