/* ══ Clarté biseautée : le mode clair de la PWA (28/09/2026) ═════════════════════════════════════ Jason : « va voir ce qui a été proposé pour le light mode [canevas « Communauté en avant », page « Mon light mode »] et adapte-le pour notre PWA ; base-toi aussi sur le backoffice ». Même direction que la maquette de l'app et que le backoffice (scripts/backoffice/clarte.css) : fond perle #F5F5F7, cartes blanches SANS filet sur une ombre douce, coins coupés à 45° qui grandissent avec l'objet (étiquette 3-4, puce 7, segment 8, tuile 10, carte 12, image 14), encre #0D0F14, gris #6E717B. Une seule couleur pour agir : le vermillon #C8372D. L'or #B08433 est réservé à ce qui réussit (médailles, grade atteint). Titres en GT Sectra italique gras, le reste en Inter. Les hexagones du sombre deviennent des coins coupés ; l'octogone reste aux réussites. Tout est sous :root[data-theme="light"] (posé par js/gk-theme.js, injecté au build) : le sombre ne bouge pas. Ne changent pas : les photos et vidéos et ce qui est posé dessus, les couleurs des ceintures et de leurs pierres, le médaillon de dan. Pièges (repris du backoffice) : · clip-path coupe box-shadow et outline : le blanc d'une carte est un ::before coupé, son ombre un ::after NON coupé glissé derrière ; ou une ombre en filter: drop-shadow sur un PARENT. · un filtre sur un ancêtre tue le backdrop-filter des descendants. · ne jamais poser display sur un élément qui peut porter [hidden] sans :not([hidden]). ═════════════════════════════════════════════════════════════════════════════════════════════════ */ :root { --cl-fond:#F5F5F7; --cl-carte:#FFFFFF; --cl-texte:#0D0F14; --cl-texte2:#6E717B; --cl-texte3:#A2A5AD; --cl-ardoise:#4A4D57; --cl-corps:#2B2E36; --cl-filet:rgba(13,15,20,.08); --cl-rempli:#EAEAEE; --cl-perle2:#EDEDF1; --cl-creux:#F0F0F3; --cl-accent:#C8372D; --cl-accent-doux:rgba(200,55,45,.08); --cl-or:#B08433; --cl-or-doux:rgba(176,132,51,.12); --cl-titre:'GT Sectra Display',Georgia,serif; --cl-sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --cl-ombre:0 1px 1px rgba(13,15,20,.05), 0 10px 22px rgba(13,15,20,.08); --cl-ombre-f:drop-shadow(0 1px 1px rgba(13,15,20,.05)) drop-shadow(0 10px 22px rgba(13,15,20,.08)); --cl-ombre-touche:drop-shadow(0 1px 1px rgba(13,15,20,.07)) drop-shadow(0 4px 9px rgba(13,15,20,.07)); --c3:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px); --c4:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px); --c6:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px); --c6i:polygon(5.41px 0,calc(100% - 5.41px) 0,100% 5.41px,100% calc(100% - 5.41px),calc(100% - 5.41px) 100%,5.41px 100%,0 calc(100% - 5.41px),0 5.41px); --c7:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px); --c7i:polygon(6.41px 0,calc(100% - 6.41px) 0,100% 6.41px,100% calc(100% - 6.41px),calc(100% - 6.41px) 100%,6.41px 100%,0 calc(100% - 6.41px),0 6.41px); --c8:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); --c10:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px); --c12:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px); --c14:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px); /* octogone régulier (29 %) : réservé aux réussites, comme dans l'app */ --c-oct:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%); } /* ── Jetons : les deux familles de la PWA (hextech-or.css et glass-site.css) ramenées à Clarté. Le rôle de l'or change : l'action passe au vermillon, la réussite garde un or plus profond. ── */ :root[data-theme="light"] { color-scheme:light; --gk-bg:#F5F5F7; --gk-text:#0D0F14; --gk-muted:#6E717B; --gk-aqua:#C8372D; --gk-amber:#C8372D; --gk-violet:#C8372D; --gk-gold:#B08433; --gk-rose:#C8372D; --gk-glass:#FFFFFF; --gk-glass-md:#FFFFFF; --gk-glass-strong:#FFFFFF; --gk-glass-lg:#FFFFFF; --gk-border:rgba(13,15,20,.08); --gk-border-subtle:rgba(13,15,20,.06); --gk-border-bright:rgba(13,15,20,.14); --gk-shadow:0 1px 1px rgba(13,15,20,.05), 0 10px 22px rgba(13,15,20,.08); --gk-shadow-float:0 2px 4px rgba(13,15,20,.06), 0 16px 34px rgba(13,15,20,.12); --gk-glow:none; --gk-blur:none; --gk-blur-lg:none; --gk-reflection:none; --gold-satin:linear-gradient(#C8372D,#C8372D); --bg:#F5F5F7; --bg2:#EAEAEE; --card:#FFFFFF; --border:rgba(13,15,20,.08); --glass-b:rgba(13,15,20,.12); --text:#0D0F14; --muted:#6E717B; --acc:#C8372D; --gold:#C8372D; --goldlt:#C8372D; --ivory:#0D0F14; scrollbar-color:rgba(13,15,20,.22) transparent; } /* ── Fond : perle uni, sans texture ni dégradé sombre. Un décor peint (le même que le backoffice, déjà fondu sur le perle) en haut de page, choisi par rubrique avec --cl-decor ; rien ne passe devant le contenu. ── */ /* La page défile dans le BODY (html reste à la hauteur de l'écran) : le décor est posé sur le body, en attachement « local », pour défiler avec le contenu au lieu de rester figé en haut de l'écran. */ :root[data-theme="light"] { background:#F5F5F7; } :root[data-theme="light"] body { color:#0D0F14; -webkit-font-smoothing:antialiased; } :root[data-theme="light"] :is(.background-body, .background-gradien) { display:none; } :root[data-theme="light"] ::selection { background:rgba(200,55,45,.16); } :root[data-theme="light"] :is(input[type=checkbox], input[type=radio], input[type=range], progress) { accent-color:#C8372D; } /* ── Titres : GT Sectra (déjà la police des titres en sombre), à l'encre. Sauf ceux posés sur une photo, une vidéo ou une scène 3D (inventaire du 28/09 sur toutes les pages des familles) : ils gardent le blanc et l'ombre du sombre. :where() garde la spécificité de la règle (0,2,1). Les en-têtes .mhero n'y sont pas : leur photo passe sous un voile perle, le titre y reste à l'encre. ── */ :root[data-theme="light"] :is(h1, h2, h3, h4, h5):not(:where(.overview_card, .ve-hero, .ve-carton, .v3pc-band, .evhero, .pl-over, .lphero, a.resume, .pdan) *) { color:#0D0F14; -webkit-text-fill-color:currentColor; text-shadow:none; } :root[data-theme="light"] :is(p, li, dd, dt, td, th, label, small, figcaption) { text-shadow:none; } /* ══ Barre latérale (bureau) et tiroir (mobile) : blanc, filet à droite, l'actif en vermillon ══ */ :root[data-theme="light"] .navbar.sb { background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none; border-right:0; box-shadow:1px 0 0 rgba(13,15,20,.06), 8px 0 24px rgba(13,15,20,.04); color:#0D0F14; } :root[data-theme="light"] .sb .brand b { color:#0D0F14; } /* logo (barre latérale et sa copie de la barre du haut mobile) : même dessin, à l'encre sur blanc. La plaque nuit devient blanche, le double cadre et le tracé or passent à l'encre. */ :root[data-theme="light"] :is(.sb .brand .lg, .nav-logo) svg > rect:first-of-type { fill:#FFFFFF; } :root[data-theme="light"] :is(.sb .brand .lg, .nav-logo) svg > rect:nth-of-type(2) { stroke:#0D0F14; } :root[data-theme="light"] :is(.sb .brand .lg, .nav-logo) svg > rect:nth-of-type(3) { stroke:rgba(13,15,20,.22); } :root[data-theme="light"] :is(.sb .brand .lg, .nav-logo) svg > path { fill:#0D0F14; } /* étiquette de version : gris secondaire lisible (à 35 % dans le tiroir mobile, elle disparaissait sur le blanc) */ :root[data-theme="light"] .sb .ver { color:#6E717B; opacity:1; } :root[data-theme="light"] .sbsep .ln { background:linear-gradient(90deg,transparent,rgba(13,15,20,.14)); } :root[data-theme="light"] .sbsep .ln.r { background:linear-gradient(270deg,transparent,rgba(13,15,20,.14)); } :root[data-theme="light"] .sbsep img { filter:invert(1) brightness(.35); opacity:.5; } :root[data-theme="light"] .sit { color:#4A4D57; clip-path:var(--c8); } :root[data-theme="light"] .sit i { color:#6E717B; } :root[data-theme="light"] .sit:hover { background:#F0F0F3; color:#0D0F14; } :root[data-theme="light"] .sit.on, :root[data-theme="light"] .sit.on:hover { background:rgba(200,55,45,.08); color:#C8372D; font-weight:600; } :root[data-theme="light"] .sit.on i { background:none; -webkit-text-fill-color:currentColor; color:#C8372D; } :root[data-theme="light"] .sit.on::after, :root[data-theme="light"] .sit.on:hover::after { display:none; } :root[data-theme="light"] .ssub .sit, :root[data-theme="light"] .ssub2 .sit { color:#6E717B; } /* compteur de « Mon club » (v3-club-notif.css) : pastille or satin, devient vermillon à chiffre blanc */ :root[data-theme="light"] .sit .sit-n { background:#C8372D; color:#FFFFFF; clip-path:var(--c3); } :root[data-theme="light"] .sb-plier { background:#F0F0F3; color:#4A4D57; box-shadow:none; clip-path:var(--c6); } :root[data-theme="light"] .sb-plier:hover { background:#EAEAEE; color:#0D0F14; } :root[data-theme="light"] .sb-tip { background:#0D0F14; color:#FFFFFF; box-shadow:0 8px 20px rgba(13,15,20,.18); } /* raccourcis (favoris) : les tuiles hexagonales deviennent des tuiles perle coupées, les emblèmes or passent au vermillon. État vide : le cœur dans une pastille vermillon légère. */ :root[data-theme="light"] .sit-empty { color:#6E717B; background:#F5F5F7; box-shadow:none; clip-path:var(--c8); } :root[data-theme="light"] .sit-empty::before { color:#C8372D; background:rgba(200,55,45,.08); clip-path:var(--c4); } :root[data-theme="light"] .sit-empty.is--recents > i { color:#C8372D; background:rgba(200,55,45,.08); clip-path:var(--c4); } :root[data-theme="light"] .sb .sqk-h { background:#F5F5F7; box-shadow:none; clip-path:var(--c8); } :root[data-theme="light"] .sb .sqk-t:hover .sqk-h, :root[data-theme="light"] .sb .sqk-t.on .sqk-h { background:rgba(200,55,45,.08); } :root[data-theme="light"] .sb .sqk-h b, :root[data-theme="light"] .sb .sqk-h i { color:#C8372D; } :root[data-theme="light"] .sb .sqk-h .em, :root[data-theme="light"] .sb .sqk-t:is(:hover, .on) .sqk-h .em { background:#C8372D; } :root[data-theme="light"] .sb .sqk-plus .sqk-h { background:#F0F0F3; } :root[data-theme="light"] .sb .sqk-t .lb { color:#4A4D57; } :root[data-theme="light"] .sb .sqk-t:hover .lb, :root[data-theme="light"] .sb .sqk-t.on .lb { color:#0D0F14; } /* médaillon de keup d'une tuile (gk-medaillon.js) : le cadre or passe au vermillon, les barrettes à l'encre, la gemme (couleur de ceinture) ne change pas. Le médaillon de dan (gemme onyx) garde son or. */ :root[data-theme="light"] .sb .gkmed:not(:has(stop[stop-color="#3A4152"])) > polygon:first-of-type { fill:#C8372D; } :root[data-theme="light"] .sb .gkmed:not(:has(stop[stop-color="#3A4152"])) g > rect[fill^="url(#gkmf"] { fill:#0D0F14; } /* compte, cloche, stores, globe : les hexagones deviennent des touches blanches coupées */ :root[data-theme="light"] .sb :is(.gk-acct-btn, .gk-ntf-bell) { background:#F0F0F3; color:#0D0F14; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; clip-path:var(--c7); } :root[data-theme="light"] .sb :is(.gk-acct-btn, .gk-ntf-bell):hover { background:#EAEAEE; } /* la cloche : sa touche coupée est peinte par ::after (comme son hexagone en sombre, hextech-or.css), pour que la découpe ne rogne plus la pastille du compteur posée sur son coin */ :root[data-theme="light"] .sb .gk-ntf-bell, :root[data-theme="light"] .sb .gk-ntf-bell:hover { background:none; clip-path:none; } :root[data-theme="light"] .sb .gk-ntf-bell::after { background:#F0F0F3; -webkit-backdrop-filter:none; backdrop-filter:none; clip-path:var(--c7); } :root[data-theme="light"] .sb .gk-ntf-bell:hover::after { background:#EAEAEE; } :root[data-theme="light"] .sb .gk-acct-btn.is--in { box-shadow:none; } :root[data-theme="light"] .sb .gk-acct-btn :is(i, span, b) { color:#0D0F14; } /* l'anneau hexagonal clair du bouton compte n'a plus lieu d'être sur la touche grise coupée */ :root[data-theme="light"] body .sb .gk-acct-btn::before { display:none; } /* connecté : la pastille d'initiale en or satin devient vermillon, coupée comme les touches */ :root[data-theme="light"] .sb .gk-acct-avatar { background:#C8372D; clip-path:var(--c4); } :root[data-theme="light"] .sb .gk-acct-btn .gk-acct-avatar { color:#FFFFFF; } :root[data-theme="light"] .sb .gk-acct-avatar.is--photo { background:#EAEAEE; } :root[data-theme="light"] .sb .gk-ntf-bell i { color:#0D0F14; } :root[data-theme="light"] .sb .gk-store-btn { background:#F0F0F3; color:#4A4D57; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; clip-path:var(--c6); } :root[data-theme="light"] .sb .gk-store-btn::after { display:none; } :root[data-theme="light"] .sb .gk-store-btn :is(i, svg, img) { color:#4A4D57; filter:none; } :root[data-theme="light"] .sb .flex_store .gk-lang.is--mini .gk-lang-btn { background:#F0F0F3; clip-path:var(--c6); } :root[data-theme="light"] .sb .flex_store .gk-lang.is--mini .gk-lang-btn::before { display:none; } :root[data-theme="light"] .sb .flex_store .gk-lang.is--mini .gk-lang-btn:hover { background:#EAEAEE; } :root[data-theme="light"] .sb .flex_store .gk-lang.is--mini .gk-lang-globe { color:#4A4D57; } /* menu du globe : blanc coupé ; clip-path coupe son box-shadow, l'ombre est donc un filtre posé sur son parent le temps qu'il est ouvert (sinon le menu se fond dans la barre blanche) */ :root[data-theme="light"] .sb .gk-lang.is--mini .gk-lang-menu { background:#FFFFFF; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .sb .gk-lang.is--mini.is-open { filter:drop-shadow(0 0 1px rgba(13,15,20,.10)) drop-shadow(0 2px 4px rgba(13,15,20,.06)) drop-shadow(0 16px 30px rgba(13,15,20,.14)); } :root[data-theme="light"] .sb .gk-lang-opt { color:#0D0F14; } :root[data-theme="light"] .sb .gk-lang-opt:hover { background:#F5F5F7; } :root[data-theme="light"] .sb .gk-lang-opt.is-on { color:#C8372D; box-shadow:inset 2px 0 0 #C8372D; } /* Apparence (gk-theme.js) dans le menu du globe, dans les deux thèmes */ .gk-lang-menu .gk-theme-sep { margin:6px 6px 2px; padding-top:8px; border-top:1px solid rgba(255,255,255,.12); font:600 10px/1 Inter, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); } .gk-lang-menu .gk-theme-opt i { font-size:14px; vertical-align:-2px; margin-right:4px; } :root[data-theme="light"] .gk-lang-menu .gk-theme-sep { border-top-color:rgba(13,15,20,.08); color:#6E717B; } /* ── Mobile : barre du haut (logo, burger) en touches blanches coupées sur ombre douce ── */ /* (la coupe et l'ombre ne vont pas sur le même élément : blanc coupé en ::before, ombre en ::after) */ :root[data-theme="light"] :is(.nav-hamburger, .nav-logo) { isolation:isolate; background:transparent; border-color:transparent; border-radius:0; color:#0D0F14; box-shadow:none; filter:none; } :root[data-theme="light"] .nav-hamburger::before, :root[data-theme="light"] .nav-logo::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c8); } :root[data-theme="light"] .nav-hamburger::after, :root[data-theme="light"] .nav-logo::after { content:''; position:absolute; inset:2px 3px 1px; z-index:-2; pointer-events:none; box-shadow:0 1px 1px rgba(13,15,20,.07), 0 4px 9px rgba(13,15,20,.07); } :root[data-theme="light"] .nav-hamburger :is(i, span, svg) { color:#0D0F14; } :root[data-theme="light"] .nav-hamburger span { background:#0D0F14; } /* voile sous le tiroir ouvert : le noir à 55 % salit une page claire, une encre plus légère suffit */ :root[data-theme="light"] .nav-backdrop { background:rgba(13,15,20,.32); } /* ══ Cartes : blanc coupé à 12 px devant, ombre douce derrière ══ */ /* (.card.kfr-row n'est pas dans la liste : son blanc est un ::before coupé, voir plus bas ; un fond blanc ici remplissait ses coins coupés) */ :root[data-theme="light"] :is(.card.bigmed, .gk-hub-card, .card.fl3-ap, .gk-prof-card, .apgrade) { background:#FFFFFF; border-color:transparent; border-image:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; color:#0D0F14; } :root[data-theme="light"] :is(.card.bigmed, .gk-hub-card) { clip-path:var(--c12); } :root[data-theme="light"] .gk-hub-card::before { display:none; } :root[data-theme="light"] :is(.gk-hub-name) { color:#0D0F14; } :root[data-theme="light"] :is(.gk-hub-sub, .gk-hub-intro) { color:#6E717B; } :root[data-theme="light"] .gk-hub-ko { color:#C8372D; } /* Le fond du body est forcé en !important dans hextech-or.css (dégradé nuit, fixe) */ :root[data-theme="light"] body { background:#F5F5F7 var(--cl-decor, url(/images/clarte/decor-contenu.jpg)) no-repeat right top / min(78%, 1100px) auto !important; background-attachment:local !important; } /* halos de couleur de la scène (rose en haut, lavande en bas) : Clarté est un perle uni */ :root[data-theme="light"] .gk-scene::before, :root[data-theme="light"] .gk-scene::after { display:none; } /* fil d'Ariane posé sur la photo d'en-tête : un halo perle pour le détacher */ :root[data-theme="light"] .main.mhero .crumb :is(a, span:not(.d)) { color:#0D0F14; text-shadow:0 0 10px rgba(245,245,247,.95), 0 0 3px rgba(245,245,247,.85); } /* ══ Titres de section « ── Taegeuk · les 8 Jang ── » ══ */ :root[data-theme="light"] .hxt .t { color:#0D0F14; } :root[data-theme="light"] .hxt .t em { color:#6E717B; } :root[data-theme="light"] .hxt .ln { background:linear-gradient(90deg,transparent,rgba(13,15,20,.16)); } :root[data-theme="light"] .hxt .ln.r { background:linear-gradient(270deg,transparent,rgba(13,15,20,.16)); } :root[data-theme="light"] .main.mhero h1.display { text-shadow:none; } /* ══ Cartes en rangée (.card.bigmed : Taegeuk, keup…) : le blanc est un ::before coupé à 12 px, l'ombre un ::after non coupé derrière (clip-path coupe box-shadow). Les cartes PHOTO (Dan, fond en style en ligne) gardent leur image : seule la coupe change. ══ */ :root[data-theme="light"] .card.bigmed:not([style*="background-image"]) { position:relative; isolation:isolate; background:transparent; box-shadow:none; clip-path:none; } :root[data-theme="light"] .card.bigmed:not([style*="background-image"])::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); transition:background .15s; } :root[data-theme="light"] .card.bigmed:not([style*="background-image"])::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .card.bigmed:not([style*="background-image"]):hover { background:transparent; } :root[data-theme="light"] .card.bigmed:not([style*="background-image"]):hover::before { background:#FAFAFB; } :root[data-theme="light"] .card.bigmed[style*="background-image"] { clip-path:var(--c12); box-shadow:none; } :root[data-theme="light"] .bigmed .bt b { color:#0D0F14; } :root[data-theme="light"] .bigmed .bt span { color:#6E717B; } :root[data-theme="light"] .bigmed .jg { background:#F0F0F3; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .bigmed .jg img { filter:brightness(0); opacity:.82; } :root[data-theme="light"] .bigmed .jg i { color:#0D0F14; } :root[data-theme="light"] .card.bigmed .ph-caret-right, :root[data-theme="light"] .card.bigmed > i:last-child { color:#A2A5AD; } /* le filet de la ceinture noire (Jason 25/09) : sur blanc, il n'a plus besoin de liseré clair */ :root[data-theme="light"] .hvb-keup .bnv { box-shadow:none; } /* médaillon de keup des cartes de l'accueil (svg.tro, home-bento.js) : même dessin, le cadre or passe au vermillon, le cœur nuit au perle, les barrettes or à l'encre. La gemme garde la couleur de sa ceinture ; un filet d'encre la détache quand elle est blanche. */ :root[data-theme="light"] .hvb-keup svg.tro > polygon:first-of-type { fill:#C8372D; } :root[data-theme="light"] .hvb-keup svg.tro > polygon:nth-of-type(2) { fill:#F5F5F7; } :root[data-theme="light"] .hvb-keup svg.tro > rect:nth-of-type(1) { stroke:rgba(13,15,20,.16); stroke-width:.6px; } :root[data-theme="light"] .hvb-keup svg.tro g > rect { fill:#0D0F14; } /* ══ Accueil (.gk-v3-home, home-vars.css) ══ */ :root[data-theme="light"] .hvb-head h1 { color:#0D0F14; } /* le sous-titre passe sur le décor peint : ardoise plutôt que gris (3,7 de contraste seulement) */ :root[data-theme="light"] .hvb-head p { color:#4A4D57; } /* recherche : un champ blanc coupé, ombre douce portée par son parent */ :root[data-theme="light"] .hvb-search { filter:var(--cl-ombre-f); } :root[data-theme="light"] .hvb-field { background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .hvb-field::before { display:none; } :root[data-theme="light"] .hvb-field i { color:#6E717B; } :root[data-theme="light"] .gk-v3-home .hvb-search .hvb-field input[type="search"] { color:#0D0F14 !important; } :root[data-theme="light"] .hvb-field input::placeholder { color:#A2A5AD; } :root[data-theme="light"] .hvb-field kbd { color:#4A4D57; background:#F0F0F3; box-shadow:none; clip-path:var(--c3); } :root[data-theme="light"] .hvb-res { background:#FFFFFF; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .hvb-res a { border-bottom-color:rgba(13,15,20,.06); } :root[data-theme="light"] .hvb-res a:hover { background:#F5F5F7; } :root[data-theme="light"] .hvb-res .kd { color:#C8372D; } :root[data-theme="light"] .hvb-res b { color:#0D0F14; } /* les trois portes */ :root[data-theme="light"] .hvb-intent { isolation:isolate; background:transparent; box-shadow:none; clip-path:none; overflow:visible; } :root[data-theme="light"] .hvb-intent::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); transition:background .15s; } :root[data-theme="light"] .hvb-intent::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .hvb-intent:hover { background:transparent; } :root[data-theme="light"] .hvb-intent:hover::before { background:#FAFAFB; } :root[data-theme="light"] .hvb-intent i.ic { color:#C8372D; } :root[data-theme="light"] .hvb-intent b { color:#0D0F14; } :root[data-theme="light"] .hvb-intent span { color:#6E717B; } :root[data-theme="light"] .hvb-intent em { display:none; } /* cartes d'article : la carte blanche coupée est .in, l'ombre suit la coupe par un filtre sur son parent */ :root[data-theme="light"] .hvb-art { background:none; clip-path:none; padding:0; filter:var(--cl-ombre-f); } :root[data-theme="light"] .hvb-art:hover { background:none; } :root[data-theme="light"] .hvb-art .in { background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .hvb-art .ph img, :root[data-theme="light"] .hvb-art:hover .ph img { filter:none; } :root[data-theme="light"] .hvb-art .ph::after { display:none; } :root[data-theme="light"] .hvb-art .kd { bottom:10px; padding:5px 7px; background:#0D0F14; color:#FFFFFF; clip-path:var(--c3); letter-spacing:.12em; } :root[data-theme="light"] .hvb-art .bd b { color:#0D0F14; } :root[data-theme="light"] .hvb-art .bd .ex { color:#6E717B; } :root[data-theme="light"] .hvb-art .ft { color:#6E717B; border-top-color:rgba(13,15,20,.07); } :root[data-theme="light"] .hvb-art .ft .go, :root[data-theme="light"] .hvb-art:hover .ft .go { color:#C8372D; } /* familles, pied de page, grille de poomsae en photo (variante) */ :root[data-theme="light"] :is(.hvb-fam, .hvb-foot a) { background:#FFFFFF; box-shadow:none; clip-path:var(--c12); } :root[data-theme="light"] :is(.hvb-fam:hover, .hvb-foot a:hover) { background:#FAFAFB; } :root[data-theme="light"] :is(.hvb-fams, .hvb-foot) { filter:var(--cl-ombre-f); } :root[data-theme="light"] .hvb-fam .n { color:#C8372D; } :root[data-theme="light"] :is(.hvb-fam b, .hvb-foot b) { color:#0D0F14; } :root[data-theme="light"] .hvb-foot i { color:#C8372D; } /* bloc « Explorer le taekwondo » (seo-discovery.css, sur beaucoup de pages) : son cadre blanc à 18 % disparaissait sur le perle ; il devient une carte blanche coupée sur ombre douce, comme les index des familles ressources et clubs */ :root[data-theme="light"] .seo-discovery { position:relative; isolation:isolate; border-color:transparent; color:#2B2E36; } :root[data-theme="light"] .seo-discovery::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .seo-discovery::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .seo-discovery p { color:#4A4D57; } :root[data-theme="light"] .seo-discovery a { color:#0D0F14; text-decoration-color:rgba(13,15,20,.22); } :root[data-theme="light"] .seo-discovery a:hover { color:#C8372D; text-decoration-color:currentColor; } :root[data-theme="light"] .hvb-p { clip-path:var(--c10); } /* ══ Puces de filtre (.fchip) : sur le perle, une puce blanche à filet, en deux couches (le fond porte le trait, le ::after à 1 px repose le blanc) ; la choisie en encre ══ */ :root[data-theme="light"] .fchip { background:rgba(13,15,20,.12); color:#0D0F14; font-weight:500; letter-spacing:.02em; clip-path:var(--c7); } :root[data-theme="light"] .fchip::after { background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] .fchip:hover { background:rgba(13,15,20,.22); color:#0D0F14; box-shadow:none; } :root[data-theme="light"] .fchip.on { background:#0D0F14; color:#FFFFFF; } :root[data-theme="light"] .fchip.on::before { background:#0D0F14; clip-path:var(--c7i); } :root[data-theme="light"] .fchip.on::after { background:none; } /* ══ Cartes photo des Dan : la photo et ce qui est posé dessus ne changent pas, seule la coupe. Le rang (« 1er dan »), en or sur la photo, devient une petite pastille vermillon lisible partout. ══ */ :root[data-theme="light"] .pdan { clip-path:var(--c12); } :root[data-theme="light"] .pdan .dtag { top:12px; right:24px; padding:3px 6px 3px 5px; background:#C8372D; color:#FFFFFF; line-height:1.2; letter-spacing:.02em; clip-path:var(--c3); } /* ══ En-tête photo (.mhero) : la photo reste, le voile de nuit devient un voile perle, fondu vers le bas par le masque du sombre. Le titre prend un halo blanc, comme dans la maquette. ══ */ :root[data-theme="light"] .main.mhero::before, :root[data-theme="light"].gk-app .content.mhero::before { background-image:linear-gradient(180deg,rgba(245,245,247,.34),rgba(245,245,247,.70) 58%,rgba(245,245,247,.97) 100%),var(--mh); filter:saturate(.96); } @media (max-width:767px) { :root[data-theme="light"] .main.mhero[style*="--mh-m"]::before, :root[data-theme="light"].gk-app .content.mhero[style*="--mh-m"]::before { background-image:linear-gradient(180deg,rgba(245,245,247,.34),rgba(245,245,247,.70) 58%,rgba(245,245,247,.97) 100%),var(--mh-m); } } :root[data-theme="light"] .main.mhero h1.display { text-shadow:0 1px 24px rgba(245,245,247,.95), 0 0 3px rgba(245,245,247,.7); } :root[data-theme="light"] .main.mhero [style*="Noto Serif KR"] { color:#4A4D57 !important; text-shadow:none; } /* Profil (05/10, Jason : « à la moitié mon image et à la moitié une autre image en haut de la page ») : le fond du profil est SON image (ou le pavillon par défaut de l'app). Le décor peint du body passait à côté et au travers du voile perle : deux images l'une sur l'autre. Sur le profil, pas de décor. */ :root[data-theme="light"] body:has(.content.gk-pf) { --cl-decor:none; } /* ══ Fil d'Ariane : gris ardoise, la page courante en puce blanche coupée ══ */ :root[data-theme="light"] :is(.crumb, .main.mhero .crumb) { color:#4A4D57; } :root[data-theme="light"] :is(.crumb .d, .main.mhero .crumb .d) { color:#A2A5AD; } :root[data-theme="light"] :is(.crumb b, .main.mhero .crumb b) { color:#0D0F14; background:#FFFFFF; box-shadow:none; clip-path:var(--c6); } :root[data-theme="light"] .crumb a { color:#4A4D57; } /* ══ Étiquettes de section (.hx, capsule hexagonale en sombre) : un titre GT Sectra, sans capsule ══ */ :root[data-theme="light"] .hx { background:none; clip-path:none; padding:0; } :root[data-theme="light"] .hx::before { display:none; } :root[data-theme="light"] .hx .t { font:italic 700 22px/1.15 'GT Sectra Display',Georgia,serif; letter-spacing:0; color:#0D0F14; } :root[data-theme="light"] .hx .t em { color:#6E717B; } /* ══ Cartes de verre (.gkco : fiche technique, fiche poomsae) : blanches et coupées. Leur ::before (filet dégradé) devient le blanc coupé, leur ::after (coins en équerre) devient l'ombre. ══ */ :root[data-theme="light"] :is([data-gk-technique] .tkp-card, [data-gk-technique] .tkp-media, .gk-fiche-v3 .apcard, .gk-fiche-v3 .apschema) { background-color:transparent; background-image:none; box-shadow:none; } :root[data-theme="light"] :is([data-gk-technique] .tkp-card, [data-gk-technique] .tkp-media, .gk-fiche-v3 .apcard, .gk-fiche-v3 .apschema)::before { content:''; position:absolute; inset:0; z-index:-1; padding:0; pointer-events:none; background:#FFFFFF; -webkit-mask:none; mask:none; clip-path:var(--c12); } :root[data-theme="light"] :is([data-gk-technique] .tkp-card, [data-gk-technique] .tkp-media, .gk-fiche-v3 .apcard, .gk-fiche-v3 .apschema).gkco::after, :root[data-theme="light"] .gk-fiche-v3 .apschema::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; opacity:1; pointer-events:none; background:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .gk-fiche-v3 .apschema { position:relative; isolation:isolate; } :root[data-theme="light"] .gkco::after { background-image:none; } /* lignes clé / valeur de la fiche technique */ :root[data-theme="light"] [data-gk-technique] .tkr { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] [data-gk-technique] .tkr span { color:#6E717B; } :root[data-theme="light"] [data-gk-technique] .tkr b { color:#0D0F14; } :root[data-theme="light"] [data-gk-technique] .tkr b a { color:#C8372D; } :root[data-theme="light"] [data-gk-technique] .tkr b a:hover { color:#0D0F14; } :root[data-theme="light"] [data-gk-technique] .tkp-txt { color:#2B2E36; } :root[data-theme="light"] .gk-tech-alt b { color:#4A4D57; } :root[data-theme="light"] .gk-tech-alt { color:#6E717B; } /* ══ Bouton d'action (.cta, or satin en sombre) : le vermillon, coupé à 8 px ══ */ :root[data-theme="light"] .cta { background:#C8372D; color:#FFFFFF; font-style:normal; font-weight:700; box-shadow:none; clip-path:var(--c8); } :root[data-theme="light"] body .cta::before { display:none; } :root[data-theme="light"] .cta:hover { filter:brightness(.94); } :root[data-theme="light"] :is(button, a, .sit, .wtab):focus-visible { outline-color:#C8372D; } /* ══ Mur « créer un compte » (gk-mur.css) : un voile perle, le cadenas dans une touche blanche ══ */ :root[data-theme="light"] .gkm-fondu { background:linear-gradient(to bottom,rgba(245,245,247,0) 0%,rgba(245,245,247,.62) 34%,rgba(245,245,247,.93) 66%,#F5F5F7 100%); } :root[data-theme="light"] .gkm-voile.is--plein .gkm-fondu { background:linear-gradient(to bottom,rgba(245,245,247,.70),rgba(245,245,247,.95)); } :root[data-theme="light"] .gkm-voile.is--plein.is--leger .gkm-fondu { background:linear-gradient(to bottom,rgba(245,245,247,.40),rgba(245,245,247,.90)); } :root[data-theme="light"] .gkm-cad { background:#FFFFFF; clip-path:var(--c7); filter:none; } :root[data-theme="light"] .gkm-cad::before, :root[data-theme="light"] .gkm-cad::after { display:none; } :root[data-theme="light"] .gkm-cad i { color:#C8372D; } :root[data-theme="light"] .gkm-voile b { color:#0D0F14; } :root[data-theme="light"] .gkm-voile p { color:#6E717B; } :root[data-theme="light"] .gkm-voile :is(a, button):not(.cta) { color:#4A4D57; } /* ══ En-tête des fiches : surtitre gris, filigrane coréen à peine visible, ornement éteint, touches blanches coupées (son, cœur) sur ombre douce. Le cœur donné passe au vermillon. ══ */ :root[data-theme="light"] .gk-tech-kicker { color:#6E717B; font-weight:600; letter-spacing:.14em; } :root[data-theme="light"] .gk-tech-kicker em { color:#A2A5AD; } :root[data-theme="light"] em.tkp-ko { color:rgba(13,15,20,.05); } :root[data-theme="light"] .pgflr i { background:#C8372D; box-shadow:none; } :root[data-theme="light"] .pgflr .l1 { background:linear-gradient(270deg,rgba(13,15,20,.22),transparent); } :root[data-theme="light"] .pgflr .l2 { background:linear-gradient(90deg,rgba(13,15,20,.22),transparent); } :root[data-theme="light"] .gkb-head.is--centre .pgflr.g .ln { background:linear-gradient(90deg,transparent,rgba(13,15,20,.16)); } :root[data-theme="light"] .gkb-head.is--centre .pgflr.d .ln { background:linear-gradient(270deg,transparent,rgba(13,15,20,.16)); } /* touches : la coupe et l'ombre ne vont pas sur le même élément (la coupe s'applique après le filtre) : le blanc coupé est un ::before, l'ombre un ::after non coupé */ :root[data-theme="light"] :is(.gk-tech-heart, .gk-tech-audio) { position:relative; isolation:isolate; background:transparent; color:#0D0F14; box-shadow:none; clip-path:none; filter:none; } :root[data-theme="light"] :is(.gk-tech-heart, .gk-tech-audio)::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c7); } :root[data-theme="light"] :is(.gk-tech-heart, .gk-tech-audio)::after { content:''; position:absolute; inset:2px 3px 1px; z-index:-2; pointer-events:none; box-shadow:0 1px 1px rgba(13,15,20,.07), 0 4px 9px rgba(13,15,20,.07); } :root[data-theme="light"] .gk-tech-audio:hover::before { background:#F5F5F7; } :root[data-theme="light"] .gk-tech-heart.is--on { color:#FFFFFF; } :root[data-theme="light"] .gk-tech-heart.is--on::before { background:#C8372D; } /* ══ Carte photo « Reprendre / Explorer » (a.resume) : la photo et son voile ne changent pas, le texte posé dessus reste clair ; seule la coupe devient biseautée. ══ */ :root[data-theme="light"] a.resume:not(.introduction_container) { clip-path:var(--c14); } :root[data-theme="light"] a.resume:not(.introduction_container) :is(h1, h2, h3, h4, b, .rtx) { color:#FFFFFF; } /* sur la photo : le surtitre or passe au blanc, le bouton de lecture hexagonal or devient une touche vermillon coupée (sans son anneau or), la jauge de reprise passe au vermillon */ :root[data-theme="light"] .resume:not(.introduction_container) .rtx .k { color:rgba(255,255,255,.86); } :root[data-theme="light"] .resume:not(.introduction_container) .go2 { background:#C8372D; color:#FFFFFF; clip-path:var(--c8); } :root[data-theme="light"] body .resume:not(.introduction_container) .go2::before { display:none; } :root[data-theme="light"] .resume:not(.introduction_container) .rpb i { background:#C8372D; } /* ══ Liste des grades (Apprendre, v3-grades.css) : cartes blanches coupées ══ */ :root[data-theme="light"] .kfr-row { position:relative; isolation:isolate; background:transparent; border-color:transparent; border-image:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; color:#0D0F14; } :root[data-theme="light"] .kfr-row::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); transition:background .15s; } :root[data-theme="light"] .kfr-row::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .kfr-row:hover { box-shadow:none; } :root[data-theme="light"] .kfr-row:hover::before { background:#FAFAFB; } :root[data-theme="light"] .kfr-n { color:#6E717B; } :root[data-theme="light"] .kfr-ko { color:#6E717B; } :root[data-theme="light"] .kfr-tx b { color:#0D0F14; } :root[data-theme="light"] .kfr-row:hover .kfr-go { color:#C8372D; } :root[data-theme="light"] .kfr-belt { box-shadow:inset 0 0 0 1px rgba(13,15,20,.14); } /* ══ Onglets (.wtabs, rail hexagonal en sombre) : contrôle segmenté, comme la maquette. Rail gris coupé à 8 px, l'onglet choisi en blanc coupé à 6 px, les autres en ardoise (le gris #6E717B ne donnait que 4,1 de contraste sur le rail #EAEAEE). ══ */ :root[data-theme="light"] .wtabs { background:#EAEAEE; clip-path:var(--c8); padding:2px; gap:2px; box-shadow:none; } :root[data-theme="light"] .wtabs::before { display:none; } :root[data-theme="light"] :is(.wtab, .wtabs .wtab, .main.mhero .wtab, .main.mhero .wtabs .wtab) { background:transparent; color:#4A4D57; clip-path:var(--c6); box-shadow:none; font-weight:500; letter-spacing:0; text-shadow:none; } :root[data-theme="light"] :is(.wtab, .wtabs .wtab):hover { color:#0D0F14; } :root[data-theme="light"] :is(.wtab.on, .wtabs .wtab.on, .main.mhero .wtab.on, .main.mhero .wtabs .wtab.on) { background:#FFFFFF; color:#0D0F14; font-weight:600; text-shadow:none; } /* pas de pseudo-élément dans :is() : la règle entière serait ignorée */ :root[data-theme="light"] .wtabs .wtab.on::before, :root[data-theme="light"] .wtabs .wtab.on::after, :root[data-theme="light"] .wtab.on:not(.wtabs .wtab)::before { display:none; } :root[data-theme="light"] .wtab.goldring { background:#FFFFFF !important; color:#0D0F14 !important; } :root[data-theme="light"] .wtab.goldring::before { display:none !important; } :root[data-theme="light"] .content.gk-fiche-v3 .tabs-menu .wtabs .tab.w-tab-link, :root[data-theme="light"] .content.gk-fiche-v3.mhero .tabs-menu .wtabs .tab.w-tab-link { color:#4A4D57 !important; clip-path:var(--c6); } :root[data-theme="light"] .content.gk-fiche-v3 .tabs-menu .wtabs .tab.w-tab-link:hover { color:#0D0F14 !important; } :root[data-theme="light"] .content.gk-fiche-v3 .tabs-menu .wtabs .tab.w-tab-link:is(.on, .w--current), :root[data-theme="light"] .content.gk-fiche-v3.mhero .tabs-menu .wtabs .tab.w-tab-link:is(.on, .w--current) { background:#FFFFFF !important; color:#0D0F14 !important; font-weight:600; } /* ══ Anciennes pages Webflow (glass-site.css) : pas de halo noir sous les titres, pas de voile nuit forcé sous les introductions ══ */ :root[data-theme="light"] :is(.heading_1, .heading_2, .techniques_heading) { filter:none; color:#0D0F14; } :root[data-theme="light"] :is(.left_introduction, .right_introduction) { background-color:transparent !important; -webkit-backdrop-filter:none; backdrop-filter:none; } /* ══ Pages système, chacune avec sa feuille en ligne pensée pour la nuit ══ */ /* pages légales (mentions-legales-*, confidentialite-*, repérées par ) : le corps passe déjà à l'encre ; liens et bouton or deviennent vermillon. Ce sont des documents : pas de décor peint derrière le texte (les liens vermillon y tombaient à 2,5 de contraste sur ses boiseries). */ :root[data-theme="light"] :is(body[data-gk-noi18n], body:has(> main.wrap)) { --cl-decor:none; } :root[data-theme="light"] body[data-gk-noi18n] > main a { color:#C8372D; text-decoration-color:rgba(200,55,45,.4); } :root[data-theme="light"] body[data-gk-noi18n] > main button { background:#C8372D; color:#FFFFFF; clip-path:var(--c8); } :root[data-theme="light"] body[data-gk-noi18n] > main :is(a, button):focus-visible { outline-color:#C8372D; } :root[data-theme="light"] body[data-gk-noi18n] > main footer { border-top-color:rgba(13,15,20,.12); } /* politique de confidentialité (privacy-policy-*, main.wrap) : paragraphes gris clair sur nuit, liens aqua */ :root[data-theme="light"] main.wrap :is(p, li) { color:#2B2E36; } :root[data-theme="light"] body:has(> main.wrap) > :is(main, aside) a { color:#C8372D; } /* page introuvable (404) : champ blanc coupé et bouton vermillon sur une ombre douce, liens ardoise */ :root[data-theme="light"] .gk-404 form { filter:var(--cl-ombre-f); } :root[data-theme="light"] .gk-404 input { border:0; border-radius:0; background:#FFFFFF; color:#0D0F14; clip-path:var(--c8); } :root[data-theme="light"] .gk-404 input::placeholder { color:#A2A5AD; } :root[data-theme="light"] .gk-404 :is(button, a.btn) { border-radius:0; background:#C8372D; color:#FFFFFF; clip-path:var(--c8); } :root[data-theme="light"] .gk-404 .liens a { color:#4A4D57; opacity:1; text-decoration-color:rgba(13,15,20,.3); } :root[data-theme="light"] .gk-404 .liens a:hover { color:#C8372D; } /* hors ligne (hors-ligne.html) : l'hexagone or à cœur nuit devient une tuile blanche coupée, le trigramme en vermillon ; texte ardoise, bouton vermillon coupé */ :root[data-theme="light"] body > main > .hx { filter:var(--cl-ombre-f); } :root[data-theme="light"] body > main > .hx span { width:100%; height:100%; background:#FFFFFF; color:#C8372D; clip-path:var(--c10); } :root[data-theme="light"] body > main:has(> .hx) > p { color:#4A4D57; } :root[data-theme="light"] body > main:has(> .hx) > button { background:#C8372D; color:#FFFFFF; clip-path:var(--c8); } :root[data-theme="light"] body > main:has(> .hx) > .ko { color:#6E717B; } /* ═════════════════════════════════════════════════════════════════════════════════════════════════ Familles de pages (28/09/2026) : poomsae, grades et entraînement, ressources et techniques, clubs et compte (et éléments système), articles. Chaque bloc ne vise que ses pages, ou un élément système. ═════════════════════════════════════════════════════════════════════════════════════════════════ */ /* ══ Clarté biseautée : fragment « poomsae » (fusionné à la fin de css/clarte.css) ══ */ /* ══ Hub /poomsae : le champ de recherche sous le titre. En sombre, un hexagone nuit (fond clair en anneau + ::after nuit) ; en clair, un champ rempli gris coupé à 6 px, sans filet. Au focus : blanc, trait vermillon dessous. ══ */ :root[data-theme="light"] .srch[data-pl-search] { background:#EAEAEE; color:#6E717B; box-shadow:none; clip-path:var(--c6); } :root[data-theme="light"] .srch[data-pl-search]::after { display:none; } :root[data-theme="light"] .srch[data-pl-search]:hover { background:#E4E4E9; box-shadow:none; } :root[data-theme="light"] .srch[data-pl-search]:focus-within { background:#FFFFFF; box-shadow:inset 0 -2px 0 #C8372D; } :root[data-theme="light"] .srch[data-pl-search] i { color:#6E717B; } :root[data-theme="light"] .srch[data-pl-search] input { color:#0D0F14; } :root[data-theme="light"] .srch[data-pl-search] input::placeholder { color:#6E717B; } /* puces « Par exemple » : blanches à filet, en deux couches (le fond porte le trait, le ::before à 1 px repose le blanc sous le texte) */ :root[data-theme="light"] .pl-ex { color:#6E717B; } :root[data-theme="light"] .pl-ex button { background:rgba(13,15,20,.12); color:#0D0F14; font-weight:500; letter-spacing:.02em; clip-path:var(--c7); } :root[data-theme="light"] .pl-ex button::before { inset:1px; z-index:-1; background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] .pl-ex button:hover { background:rgba(13,15,20,.22); color:#0D0F14; } /* suggestions sous la recherche : un panneau blanc coupé, le survol en vermillon léger */ :root[data-theme="light"] .pl-sug { background:#FFFFFF; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .pl-s { color:#0D0F14; border-bottom-color:rgba(13,15,20,.06); } :root[data-theme="light"] :is(.pl-s:hover, .pl-s.cur) { background:rgba(200,55,45,.08); color:#0D0F14; } :root[data-theme="light"] .pl-s .pn { color:#C8372D; } :root[data-theme="light"] :is(.pl-s .pm span, .pl-s .pnum, .pl-empty) { color:#6E717B; } /* ══ Fiche : en-tête. Le surtitre (« Taegeuk », « Dan · ceinture noire ») était blanc sur la photo ; le voile perle du clair le rend illisible : il passe à l'ardoise, comme le hangeul du titre. ══ */ :root[data-theme="light"] :is(.gkf-eb, .main.mhero .gkf-eb) { color:#4A4D57; font-weight:600; } :root[data-theme="light"] .gkf-crumb a:hover { color:#0D0F14; } /* en-tête collant au défilement : le bandeau nuit devient perle */ :root[data-theme="light"] .content.gk-fiche-v3.is--compact .gkf-head { background:rgba(245,245,247,.94); box-shadow:0 14px 0 rgba(245,245,247,.94); } :root[data-theme="light"] .content.gk-fiche-v3.is--compact .tabs-menu.w-tab-menu { background:rgba(245,245,247,.94) !important; } /* ══ Fiche : onglets. Le contrôle segmenté de clarte.css blanchit l'onglet choisi, mais son hexagone nuit (::before anneau, ::after fond) restait dessus : on les éteint ici. ══ */ :root[data-theme="light"] .content.gk-fiche-v3 .tabs-menu .wtabs .wtab.on::before, :root[data-theme="light"] .content.gk-fiche-v3 .tabs-menu .wtabs .wtab.on::after { display:none; } /* pastille « bêta » de l'onglet Vue 3D : pastille d'info sombre coupée, texte blanc */ :root[data-theme="light"] .content.gk-fiche-v3 .gk-beta { background:#0D0F14; border:0; box-shadow:none; clip-path:var(--c3); } :root[data-theme="light"] .content.gk-fiche-v3 .gk-beta-txt { color:#FFFFFF; text-shadow:none; } /* cœur et partage : touches blanches coupées à 7 px sur ombre douce. Le blanc est le ::before coupé ; l'ombre est un filtre sur la touche elle-même, qui n'est plus coupée. */ :root[data-theme="light"] .content.gk-fiche-v3 .tabs-menu :is(.gk-fav-heart, .gk-share-btn) { background:transparent !important; color:#0D0F14 !important; clip-path:none; filter:var(--cl-ombre-touche); } :root[data-theme="light"] .content.gk-fiche-v3 .tabs-menu :is(.gk-fav-heart, .gk-share-btn)::before { inset:0; background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none; clip-path:var(--c7); } :root[data-theme="light"] .content.gk-fiche-v3 .tabs-menu :is(.gk-fav-heart, .gk-share-btn):hover { color:#C8372D !important; } :root[data-theme="light"] .content.gk-fiche-v3 .tabs-menu .gk-fav-heart.is--on { background:transparent !important; color:#FFFFFF !important; } :root[data-theme="light"] .content.gk-fiche-v3 .tabs-menu .gk-fav-heart.is--on::before { background:#C8372D; } /* menu Partager (bureau, posé dans le body) : panneau blanc coupé à 10 px sur ombre portée */ :root[data-theme="light"] .gk-share-menu { isolation:isolate; background:transparent; box-shadow:none; } :root[data-theme="light"] .gk-share-menu::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c10); } :root[data-theme="light"] .gk-share-menu::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:0 2px 4px rgba(13,15,20,.06), 0 16px 34px rgba(13,15,20,.14); } :root[data-theme="light"] .gk-share-menu :is(a, button) { color:#0D0F14; clip-path:var(--c6); } :root[data-theme="light"] .gk-share-menu :is(a, button):hover { background:#F5F5F7; color:#0D0F14; } :root[data-theme="light"] .gk-share-menu i { color:#4A4D57; } :root[data-theme="light"] .gk-share-menu .sep { background:rgba(13,15,20,.08); } /* ══ Onglet « À propos » : le nom à côté du médaillon, la ligne du grade (tuile grise coupée, le keup en pastille d'info sombre), les lignes clé / valeur, la description, le schéma. Médaillon et gemme du grade : voir la fin du bloc. ══ */ :root[data-theme="light"] .gk-fiche-v3 .aphead .apnom { color:#0D0F14; } :root[data-theme="light"] .gk-fiche-v3 .apgrade { background:#F5F5F7; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .gk-fiche-v3 .apgrade:hover { background:#EDEDF1; } :root[data-theme="light"] .gk-fiche-v3 .apgrade .aptx b { color:#0D0F14; } :root[data-theme="light"] .gk-fiche-v3 .apgrade .aptx span { display:inline-block; margin-top:5px; padding:4px 6px 3px; background:#0D0F14; color:#FFFFFF; letter-spacing:.12em; clip-path:var(--c3); } :root[data-theme="light"] .gk-fiche-v3 .apgrade > i { color:#A2A5AD; } :root[data-theme="light"] .gk-fiche-v3 .apr { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] .gk-fiche-v3 .apr span { color:#6E717B; } :root[data-theme="light"] .gk-fiche-v3 .apr b { color:#0D0F14; } :root[data-theme="light"] .gk-fiche-v3 .apdesc { color:#2B2E36; } /* le schéma et sa légende sont dessinés en noir sur transparent : le sombre les inversait, le clair les montre tels quels */ :root[data-theme="light"] .gk-fiche-v3 .apschema :is(.apsc, .aplg) { filter:none; opacity:1; } /* médaillon du poomsae et gemme du grade (gk-medaillon.js) : le liseré or satin passe au vermillon plat, l'emblème gravé et les barrettes du keup à l'encre (lisibles sur toutes les pierres) ; la pierre garde la couleur de la ceinture. Le médaillon de dan (pierre onyx) ne change pas. */ :root[data-theme="light"] .gk-fiche-v3 :is(.apb, .apgb):not([data-gk-sig^="onyx"]) svg.gkmed > polygon:first-of-type { fill:#C8372D; } :root[data-theme="light"] .gk-fiche-v3 :is(.apb, .apgb):not([data-gk-sig^="onyx"]) svg.gkmed :is(path, rect)[fill^="url"] { fill:#0D0F14; } /* ══ Onglet « Technique » : la liste devient une carte blanche coupée. Sous le mur, la liste est en overflow:hidden : l'ombre est donc celle de la liste elle-même (resserrée), pas un ::after. ══ */ :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-list { position:relative; isolation:isolate; background:transparent; box-shadow:0 1px 1px -1px rgba(13,15,20,.05), 0 10px 22px -5px rgba(13,15,20,.09); } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-list::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-fam { color:#6E717B; font-weight:600; font-size:11px; letter-spacing:.12em; } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-row { clip-path:var(--c8); } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-row b { color:#0D0F14; } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-row:hover { background:#F5F5F7; } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-row.on { background:rgba(200,55,45,.08); } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-row.on b { color:#C8372D; } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-row .th { background:#F0F0F3; box-shadow:none; clip-path:var(--c6); } /* le détail : surtitres gris, photo coupée, textes au corps de lecture */ :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-meta .fam { color:#6E717B; font-weight:600; font-size:11px; letter-spacing:.12em; } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-meta .pos { color:#6E717B; } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-view .ph img { box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .bl .lb { color:#6E717B; font-weight:600; font-size:11px; letter-spacing:.12em; } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .bl :is(.d, .x) { color:#2B2E36; } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-vide { color:#6E717B; } :root[data-theme="light"] .gk-fiche-v3 :is(.tk-desc, .tk-exec) { color:#2B2E36; } /* schéma des appuis : pieds blancs sur transparent (dessinés pour le sombre). Inversés, ils passent à l'encre ; le fond est posé en négatif (#0A0A08) pour ressortir perle après le filtre. Le trait d'angle et son « 30° », or dans l'image, passent au gris (grayscale), comme les autres schémas d'appuis de la fiche. */ :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-duo .ap img { background-color:#0A0A08 !important; box-shadow:none; clip-path:var(--c10); filter:invert(1) grayscale(1); } :root[data-theme="light"] .gk-fiche-v3 .gk-tk .tkm-duo .ap figcaption { color:#6E717B; font-weight:600; } /* ══ Onglet « Vue d'ensemble » : les photos gardent ce qui est posé dessus (textes blancs, compteur sombre), la coupe devient biseautée. Le verso (appuis + détail) devient blanc, les pieds passent à l'encre. ══ */ :root[data-theme="light"] .content.gk-fiche-v3 .overview_card.ovc { clip-path:var(--c10); } /* la coupe mange l'ombre : elle est portée par l'élément de liste qui ne contient que la carte (le verso retourné est une carte blanche, il lui faut son ombre douce sur le perle) */ :root[data-theme="light"] .content.gk-fiche-v3 .overview_container_img > .w-dyn-item { filter:var(--cl-ombre-f); } /* sur la photo, sous son voile noir : le titre du mouvement reste blanc (la règle des titres du socle l'avait passé à l'encre), la mention des sources remonte à 62 % pour se lire */ :root[data-theme="light"] .content.gk-fiche-v3 .overview_card h4.heading_4.white { color:#FFFFFF; } :root[data-theme="light"] .content.gk-fiche-v3 .overview_card .overview_text-sources { color:rgba(255,255,255,.62); } :root[data-theme="light"] .content.gk-fiche-v3 .ovc-back { background:#FFFFFF; box-shadow:none; } :root[data-theme="light"] .content.gk-fiche-v3 .ovc-back .bk-n { color:#C8372D; } :root[data-theme="light"] .content.gk-fiche-v3 .ovc-back b { color:#0D0F14; } :root[data-theme="light"] .content.gk-fiche-v3 .ovc-back em { color:#6E717B; } :root[data-theme="light"] .content.gk-fiche-v3 .ovc-back p { color:#2B2E36; } :root[data-theme="light"] .content.gk-fiche-v3 .ovc-back .bk-foot img { filter:invert(1) grayscale(1); } /* ══ Onglet « Vue détaillée » : grande image coupée à 14 px (la coupe remplace les équerres), appuis et vue de face en tuiles blanches coupées à 10 px sur ombre douce, flèches en touches, le mouvement choisi en vermillon léger. ══ */ :root[data-theme="light"] .gk-fiche-v3 .gk-mv .mvbig { box-shadow:none; clip-path:var(--c14); } :root[data-theme="light"] .gk-fiche-v3 .gk-mv .mvbig::after { display:none; } /* lecture du mouvement, posée sur la photo : comme toutes les lectures du clair, l'or satin passe au vermillon, la flèche au blanc, l'hexagone devient une coupe à 8 px */ :root[data-theme="light"] .gk-fiche-v3 .mvbig .mvplay { background:#C8372D; color:#FFFFFF; clip-path:var(--c8); } :root[data-theme="light"] .gk-fiche-v3 .mvbig .mvplay:hover { filter:brightness(.94); } :root[data-theme="light"] .gk-fiche-v3 .gk-mv :is(.mvfoot, .mvrev) { isolation:isolate; background:transparent; box-shadow:none; } :root[data-theme="light"] .gk-fiche-v3 .gk-mv .mvfoot::before { inset:0; z-index:-1; opacity:1; pointer-events:none; clip-path:var(--c10); background:linear-gradient(rgba(13,15,20,.04) 1px,transparent 1px) 0 0/22px 22px, linear-gradient(90deg,rgba(13,15,20,.04) 1px,transparent 1px) 0 0/22px 22px, #FFFFFF; } :root[data-theme="light"] .gk-fiche-v3 .gk-mv .mvrev::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c10); } :root[data-theme="light"] .gk-fiche-v3 .gk-mv :is(.mvfoot, .mvrev)::after { inset:3px 5px 2px; z-index:-2; opacity:1; background:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .gk-fiche-v3 .gk-mv .mvfoot img { filter:invert(1) grayscale(1); } :root[data-theme="light"] .gk-fiche-v3 .gk-mv .mvfoot .fl { color:#6E717B; } /* « Vue de face » : le libellé blanc chevauchait le cadre, devenu blanc ; il passe en pastille d'info sombre, posée dans la photo */ :root[data-theme="light"] .gk-fiche-v3 .gk-mv .mvrev .fl { left:16px; bottom:16px; padding:4px 6px 3px; background:#0D0F14; color:#FFFFFF; clip-path:var(--c3); } :root[data-theme="light"] .gk-fiche-v3 .gk-mv-nav { filter:var(--cl-ombre-touche); } :root[data-theme="light"] .gk-fiche-v3 .gk-mv-nav button { background:#FFFFFF; color:#0D0F14; box-shadow:none; clip-path:var(--c7); } :root[data-theme="light"] .gk-fiche-v3 .gk-mv-nav button:hover { background:#FAFAFB; color:#C8372D; } :root[data-theme="light"] .gk-fiche-v3 .gk-mv-cap .p { color:#4A4D57; } :root[data-theme="light"] .gk-fiche-v3 .gk-mv .mvrow { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] .gk-fiche-v3 .gk-mv-list .mvrow .th { box-shadow:none; clip-path:var(--c6); } :root[data-theme="light"] .gk-fiche-v3 .gk-mv .mvrow.on { background:rgba(200,55,45,.08); box-shadow:none; clip-path:var(--c8); } :root[data-theme="light"] .gk-fiche-v3 .gk-mv .mvrow.on .tx b { color:#C8372D; } :root[data-theme="light"] .gk-fiche-v3 .gk-mv .mvrow .n.red { color:#C8372D; } :root[data-theme="light"] .gk-fiche-v3 .gk-mv .mvrow:focus-visible { outline-color:#C8372D; } :root[data-theme="light"] .gk-fiche-v3 .gk-mv-list::-webkit-scrollbar-thumb { background:rgba(13,15,20,.14); } /* ══ Onglet « Vidéo » : intertitres à l'encre sur filet gris, cadres coupés. Les vidéos ne changent pas ; l'affiche d'attente, la lecture et le cadenas perdent leur or. La boîte de consentement YouTube (gk-media-consent.js) relève de la famille ressources. ══ */ :root[data-theme="light"] .content.gk-fiche-v3 .gk-pv-h { color:#0D0F14; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-pv-h::after { background:linear-gradient(90deg,rgba(13,15,20,.16),rgba(13,15,20,0)); } :root[data-theme="light"] .content.gk-fiche-v3 .poomsae_video { box-shadow:none; clip-path:var(--c14); } :root[data-theme="light"] .content.gk-fiche-v3 .poomsae_video::after { display:none; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-pv-thumb { box-shadow:none; clip-path:var(--c10); } /* vignettes des explicatives et des shorts : aucune affiche n'est chargée avant le consentement, c'est l'image d'attente video-placeholder.svg (nuit, cercle or), posée en style en ligne. En clair : la même image redessinée en creux gris ; le cercle, simple ornement, passe au gris tertiaire, la flèche (cachée sous le bouton) au vermillon. */ :root[data-theme="light"] .content.gk-fiche-v3 .gk-pv-thumb { background-color:#EAEAEE; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 360'%3E%3Crect width='640' height='360' fill='%23EAEAEE'/%3E%3Ccircle cx='320' cy='180' r='42' fill='none' stroke='%23A2A5AD' stroke-width='1.5'/%3E%3Cpath d='M308 157v46l36-23z' fill='%23C8372D'/%3E%3C/svg%3E") !important; } /* bouton de lecture : comme toutes les lectures du clair, l'or satin passe au vermillon, la flèche au blanc, l'hexagone devient une coupe à 8 px */ :root[data-theme="light"] .content.gk-fiche-v3 .gk-pv-play, :root[data-theme="light"] .content.gk-fiche-v3 .gk-pv-card:hover .gk-pv-play { background:#C8372D; color:#FFFFFF; clip-path:var(--c8); } /* cadenas des vidéos réservées aux comptes (gk-mur.js) : pastille d'info à l'encre, cadenas blanc */ :root[data-theme="light"] .content.gk-fiche-v3 .gkm-cle { background:#0D0F14; } :root[data-theme="light"] .content.gk-fiche-v3 .gkm-cle i { color:#FFFFFF; } /* chapitres : puces blanches à filet, la choisie en encre */ :root[data-theme="light"] .gk-fiche-v3 .gk-chap .ch { background:rgba(13,15,20,.12); clip-path:var(--c7); } :root[data-theme="light"] .gk-fiche-v3 .gk-chap .ch::before { display:none; } :root[data-theme="light"] .gk-fiche-v3 .gk-chap .ch::after { background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] .gk-fiche-v3 .gk-chap .ch b { color:#0D0F14; } :root[data-theme="light"] .gk-fiche-v3 .gk-chap .ch span { color:#6E717B; } :root[data-theme="light"] .gk-fiche-v3 .gk-chap .ch.on { background:#0D0F14; } :root[data-theme="light"] .gk-fiche-v3 .gk-chap .ch.on::after { background:#0D0F14; } :root[data-theme="light"] .gk-fiche-v3 .gk-chap .ch.on :is(b, span) { color:#FFFFFF; } /* ══ Onglet « Vue 3D » : la scène 3D ne change pas. Autour : titre en GT Sectra italique, scène coupée à 14 px, barre de commandes blanche (touches grises, Lecture en vermillon), déroulé en carte blanche coupée, le mouvement en cours en vermillon léger. ══ */ :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-title { color:#0D0F14; font-style:italic; font-weight:700; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-stage { border:0; border-radius:0; box-shadow:none; clip-path:var(--c14); } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-ctrl { background:#FFFFFF; border-top:0; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-ctrl button { background:#F0F0F3; color:#0D0F14; border:0; border-radius:0; clip-path:var(--c6); } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-ctrl button:hover { background:#EAEAEE; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-ctrl .gk-s3d-play { background:#C8372D !important; color:#FFFFFF !important; } /* Lecture réservée aux comptes (gk-mur.js : .gkm-lock.is--nu, opacité .45) : un vermillon délavé laissait un texte blanc sur rose ; en clair, une touche grise éteinte, pleinement opaque */ :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-ctrl .gk-s3d-play.gkm-lock.is--nu { opacity:1; background:#EAEAEE !important; color:#6E717B !important; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-step { color:#6E717B; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-list { position:relative; isolation:isolate; background:transparent; box-shadow:none; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-list::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-list::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-lh { color:#0D0F14; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-lh em { color:#6E717B; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-row { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-row:hover { background:#F5F5F7; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-row .n { color:#6E717B; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-row .th { background:#F0F0F3; clip-path:var(--c6); } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-row .tx b { color:#0D0F14; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-row .tx span { color:#6E717B; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-row .ki { color:#FFFFFF; background:#0D0F14; clip-path:var(--c3); } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-row.on { background:rgba(200,55,45,.08); box-shadow:none; clip-path:var(--c8); } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-row.on :is(.n, .tx b) { color:#C8372D; } :root[data-theme="light"] .content.gk-fiche-v3 .gk-s3d-rows::-webkit-scrollbar-thumb { background:rgba(13,15,20,.14); } /* ══ Mur « créer un compte » posé sur une carte BLANCHE (liste Technique, déroulé 3D) : le fondu perle de clarte.css y dessinait un voile gris ; il fond vers le blanc, le cadenas passe en gris. ══ */ :root[data-theme="light"] .gk-fiche-v3 :is(.tkm-list, .gk-s3d-list) .gkm-fondu { background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.62) 34%,rgba(255,255,255,.93) 66%,#FFFFFF 100%); } :root[data-theme="light"] .gk-fiche-v3 :is(.tkm-list, .gk-s3d-list) .gkm-cad { background:#F0F0F3; } /* ══ Clarté biseautée : fragment « grades et entraînement » (fusionné à la fin de css/clarte.css) ══ Pages : /keup (frise des grades), /keup/keup-XtoY et leurs six onglets (.v3k), /flashcards (planche et session), /entrainement, /entrainement/, /entrainement-editeur, /corps. La section « Parcours ceintures » (/parcours, .v3pc) est tenue par la famille articles. L'or disparaît : le vermillon marque ce qui agit, ce qui est actif ou choisi ; l'encre et le gris portent les textes, les filets et les icônes au repos. Restent : les couleurs des ceintures et de leurs pierres (médaillons de paquet compris), les photos, les vidéos et la scène 3D avec ce qui est posé dessus, et l'or #B08433 pour une réussite effective (carte apprise, paquet validé, session ou examen réussis). */ /* ══ Hub des grades (/keup) ══ */ :root[data-theme="light"] .kfr-lead { color:#4A4D57; } /* le lien porte l'or des liens du sombre, hérité par les morceaux de ceinture (sans texte) */ :root[data-theme="light"] .kfr-row { color:#0D0F14; } :root[data-theme="light"] .kfr-n { color:#6E717B; } :root[data-theme="light"] .kfr-lbl { color:#6E717B; } :root[data-theme="light"] .kfr-go { color:#A2A5AD; } /* ══ Page de grade (.v3k) : en-tête. La barre et la pierre gardent la couleur de la ceinture ; un liseré d'encre rend la ceinture blanche visible sur le perle. ══ */ :root[data-theme="light"] .v3k .kbar { box-shadow:inset 0 0 0 1px rgba(13,15,20,.14); } :root[data-theme="light"] .v3k .keyebrow { color:#4A4D57; font-size:11px; letter-spacing:.12em; text-shadow:0 1px 10px rgba(245,245,247,.9); } :root[data-theme="light"] .v3k .kgem { box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px rgba(13,15,20,.14), 0 1px 3px rgba(13,15,20,.18); } /* cœur favori : une touche blanche coupée (le blanc est un ::before coupé, l'ombre un filtre sur la touche elle-même : posé sur l'élément coupé, le filtre serait rogné par la découpe) */ :root[data-theme="light"] .v3k .gk-fav-heart-keup { position:relative; isolation:isolate; background:transparent; border:0; border-radius:0; box-shadow:none; color:#0D0F14; filter:var(--cl-ombre-touche); -webkit-backdrop-filter:none; backdrop-filter:none; } :root[data-theme="light"] .v3k .gk-fav-heart-keup::before { content:''; position:absolute; inset:0; z-index:-1; background:#FFFFFF; clip-path:var(--c7); transition:background .15s; } :root[data-theme="light"] .v3k .gk-fav-heart-keup:hover { background:transparent; color:#0D0F14; } :root[data-theme="light"] .v3k .gk-fav-heart-keup:hover::before { background:#FAFAFB; } :root[data-theme="light"] .v3k .gk-fav-heart-keup.is--on::before { background:#C8372D; } :root[data-theme="light"] .v3k .gk-fav-heart-keup.is--on svg path { fill:#FFFFFF; stroke:#FFFFFF; } /* ══ Onglets des pages de grade : l'onglet choisi garde son pavé sombre (::before et ::after de hextech-or.css), la règle de clarte.css qui l'éteint met des pseudo-éléments dans :is() et tombe. Ici, sélecteurs simples. Et le bandeau posé derrière la barre collée devient perle. ══ */ :root[data-theme="light"] .v3k .wtabs .wtab.on::before, :root[data-theme="light"] .v3k .wtabs .wtab.on::after { display:none; } :root[data-theme="light"] .content.v3k::after { background:linear-gradient(180deg,#F5F5F7 0 49px,rgba(245,245,247,0) 64px); } @media (max-width:991px) { :root[data-theme="light"] .content.v3k::after { background:linear-gradient(180deg,#F5F5F7 0 111px,rgba(245,245,247,0) 126px); } } /* Vue app (28/09) : v3-grades.css y colle la barre en haut (safe-area) avec un bandeau de 64 px ; le fondu perle suit la même hauteur (sinon le dégradé à 111 px restait opaque, sans fondu) */ :root[data-theme="light"].gk-app .content.v3k::after { background:linear-gradient(180deg,#F5F5F7 0 calc(env(safe-area-inset-top, 0px) + 49px),rgba(245,245,247,0) calc(env(safe-area-inset-top, 0px) + 64px)); } /* ══ Rappel « Programme indicatif » (.warn) : une note grise coupée, sans filet or ══ */ :root[data-theme="light"] .v3k .warn { background:#EDEDF1; clip-path:var(--c8); } :root[data-theme="light"] body .v3k .warn::before { display:none; } :root[data-theme="light"] .v3k .warn i { color:#4A4D57; } :root[data-theme="light"] .v3k .warn p { color:#2B2E36; } :root[data-theme="light"] .v3k .warn-x { color:#6E717B; } :root[data-theme="light"] .v3k .warn-x:hover { color:#0D0F14; } /* ══ Contenu des onglets (Résumé, Exécution, Notation, Répertoire, Théorie) ══ */ /* les voiles de verre du gabarit Webflow s'effacent (glass-site.css pose le sien en !important) : le titre s'aligne sur sa carte */ :root[data-theme="light"] .v3k .w-tab-pane :is(.left_introduction, .container_keup) { background-color:transparent !important; -webkit-backdrop-filter:none; backdrop-filter:none; } :root[data-theme="light"] .v3k .w-tab-pane .container_keup { padding:0 0 8px; } /* keup 10→9 et 9→8 : le bloc Résumé porte aussi la classe Webflow « resume », et le voile de nuit de la carte photo Reprendre (.resume::after, hextech-or.css) s'y pose en bande sombre */ :root[data-theme="light"] .v3k .introduction_container.resume::after { display:none; } :root[data-theme="light"] .v3k .w-tab-pane .intro_content_text { padding:0; } /* titres de section : le pavé hexagonal devient un titre GT Sectra à l'encre, sans le halo noir que glass-site.css pose sur .heading_2 ; les sous-titres du répertoire (Seogi, Makgi…) deviennent des surtitres (la police des titres y est forcée en !important) */ :root[data-theme="light"] .v3k .w-tab-pane :is(h2.heading_2, h3.kibon_title) { background:none; clip-path:none; padding:0; color:#0D0F14; text-shadow:none; filter:none; } :root[data-theme="light"] .v3k .w-tab-pane h2.heading_2::before, :root[data-theme="light"] .v3k .w-tab-pane h3.kibon_title::before { display:none; } :root[data-theme="light"] .v3k .w-tab-pane h2.heading_2 { margin:26px 0 12px; font:italic 700 22px/1.15 'GT Sectra Display',Georgia,serif; letter-spacing:0; } :root[data-theme="light"] .v3k .w-tab-pane .intro_content_text h2.heading_2:first-child { margin-top:8px; } :root[data-theme="light"] .v3k .w-tab-pane h3.kibon_title { margin:20px 0 9px; font:normal 600 11.5px/1.3 Inter,sans-serif; font-family:'Inter',sans-serif !important; font-weight:600 !important; font-style:normal !important; letter-spacing:.12em; text-transform:uppercase; color:#6E717B; } /* la carte de lignes : blanc coupé à 12 px (::before), ombre douce (::after, ex-équerres d'angle) */ :root[data-theme="light"] .v3k .w-tab-pane .keup_overview_collection { background:transparent; } :root[data-theme="light"] .v3k .w-tab-pane .keup_overview_collection::before { z-index:-1; padding:0; background:#FFFFFF; -webkit-mask:none; mask:none; clip-path:var(--c12); } :root[data-theme="light"] .v3k .w-tab-pane .keup_overview_collection::after { inset:3px 5px 2px; z-index:-2; opacity:1; background:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .v3k .w-tab-pane :is(.flex-h.space_between.intro, .w-dyn-item > .flex-h) { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] .v3k .w-tab-pane .flex-h .body-s.white { color:#0D0F14; } :root[data-theme="light"] .v3k .w-tab-pane .flex-h .body-s.white._70 { color:#6E717B; } :root[data-theme="light"] .v3k .w-tab-pane .w-dyn-item .flex-h > .body-s:only-child { color:#2B2E36; } /* ══ Vidéos des onglets : la vignette d'attente (video-placeholder.svg, nuit et or) s'efface pour un aplat gris coupé, le bouton de lecture devient une pastille vermillon. La vidéo lancée (iframe) ne change pas. ══ */ :root[data-theme="light"] .v3k .kv-play { background:#EAEAEE; clip-path:var(--c10); transition:background .15s; } :root[data-theme="light"] .v3k .kv-play:hover { background:#E4E4E9; } :root[data-theme="light"] .v3k .kv-play img[src*="video-placeholder"] { visibility:hidden; } :root[data-theme="light"] .v3k .kv-pbtn { background:#C8372D; -webkit-backdrop-filter:none; backdrop-filter:none; clip-path:var(--c8); } :root[data-theme="light"] .v3k .kv-pbtn::before { display:none; } :root[data-theme="light"] .v3k .kv-play:hover .kv-pbtn { filter:brightness(.94); } :root[data-theme="light"] .v3k .kv-frame { clip-path:var(--c10); } :root[data-theme="light"] .v3k .video_container:not(:empty) { clip-path:var(--c14); } /* bloc vidéo du gabarit Webflow resté vide (aucun lecteur, rien à lancer) : la même vignette d'attente, en gris */ :root[data-theme="light"] .v3k .w-embed-youtubevideo { background:#EAEAEE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 360'%3E%3Ccircle cx='320' cy='180' r='42' fill='none' stroke='%23A2A5AD' stroke-width='2'/%3E%3Cpath d='M308 157v46l36-23z' fill='%23A2A5AD'/%3E%3C/svg%3E") 50% / cover no-repeat; } :root[data-theme="light"] .v3k .kv-vid figcaption { color:#4A4D57; opacity:1; } /* ══ Parcours ceintures (/parcours, .v3pc) : ce que v3-grades.css y pose. Les pierres de la frise gardent leurs couleurs ; le bandeau photo final et ce qui est posé dessus ne changent pas. ══ */ :root[data-theme="light"] .v3pc .v3pc-kk { color:#4A4D57; text-shadow:none; } :root[data-theme="light"] .v3pc .gk-dk-hero { text-shadow:0 1px 24px rgba(245,245,247,.95), 0 0 3px rgba(245,245,247,.7); } :root[data-theme="light"] .v3pc .gk-dk-lead { color:#4A4D57; } :root[data-theme="light"] .v3pc .gk-dk-eyebrow { color:#6E717B; } :root[data-theme="light"] .v3pc .gk-dk-p { color:#2B2E36; } /* chiffres clés et cartes : tuiles blanches coupées, l'ombre portée par leur rangée */ :root[data-theme="light"] .v3pc :is(.gk-dk-stats, .gk-dk-2col) { filter:var(--cl-ombre-f); } :root[data-theme="light"] .v3pc .gk-dk-stat { background:#FFFFFF; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; clip-path:var(--c10); } :root[data-theme="light"] .v3pc .gk-dk-stat-n { color:#0D0F14; } :root[data-theme="light"] .v3pc .gk-dk-stat-l { color:#6E717B; } :root[data-theme="light"] .v3pc .gk-dk-card { background:#FFFFFF; box-shadow:none; clip-path:var(--c12); } :root[data-theme="light"] .v3pc .gk-dk-card-t { color:#6E717B; } :root[data-theme="light"] .v3pc .gk-dk-arrow { color:#0D0F14; } :root[data-theme="light"] .v3pc .gk-dk-card-b { color:#2B2E36; } :root[data-theme="light"] .v3pc .gk-dk-card--note { background:#EDEDF1; clip-path:var(--c8); } :root[data-theme="light"] body .v3pc .gk-dk-card--note::before { display:none; } /* la frise : fil d'encre, pierres cerclées d'un liseré d'encre au lieu du halo noir */ :root[data-theme="light"] .v3pc .gk-dk-road-head { color:#6E717B; } :root[data-theme="light"] .v3pc .v3pc-frise .gk-dk-beltlist::before { background:linear-gradient(90deg,rgba(13,15,20,.18),rgba(13,15,20,.07)); } :root[data-theme="light"] .v3pc .v3pc-frise .gk-dk-beltband { box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px rgba(13,15,20,.16), 0 2px 5px rgba(13,15,20,.14); } :root[data-theme="light"] .v3pc .v3pc-kids .gk-dk-beltband { box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(13,15,20,.16); } :root[data-theme="light"] .v3pc :is(.v3pc-frise, .v3pc-kids) .gk-dk-belt-l { color:#4A4D57; } :root[data-theme="light"] .v3pc .v3pc-kids .gk-dk-beltrow { border-bottom-color:rgba(13,15,20,.07); } /* examen, dan, durées : lignes à filet d'encre */ :root[data-theme="light"] .v3pc :is(.gk-dk-exam-row, .gk-dk-dan-row, .gk-dk-time-row) { border-bottom-color:rgba(13,15,20,.08); } :root[data-theme="light"] .v3pc :is(.gk-dk-exam-ko, .gk-dk-dan-ko) { color:#6E717B; } :root[data-theme="light"] .v3pc :is(.gk-dk-exam-b, .gk-dk-dan-b) { color:#6E717B; } :root[data-theme="light"] .v3pc .gk-dk-dan-row::before { box-shadow:0 0 0 1px rgba(13,15,20,.12); } :root[data-theme="light"] .v3pc .gk-dk-time-n { color:#0D0F14; } :root[data-theme="light"] .v3pc .gk-dk-time-l { color:#2B2E36; } :root[data-theme="light"] .v3pc .gk-dk-tbl-head { border-bottom-color:rgba(13,15,20,.12); } :root[data-theme="light"] .v3pc .gk-dk-tbl-row { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] .v3pc .gk-dk-tbl-row.is--hinge { border-bottom-color:rgba(176,132,51,.6); } :root[data-theme="light"] .v3pc .gk-dk-tbl-v { color:#2B2E36; } :root[data-theme="light"] .v3pc .gk-dk-note { background:#EDEDF1; border:0; clip-path:var(--c8); } /* bandeau photo final : la photo, son voile et le texte blanc restent ; la coupe devient biseautée */ :root[data-theme="light"] .v3pc .v3pc-band { clip-path:var(--c14); } :root[data-theme="light"] .v3pc .v3pc-band .gk-dk-h2 { color:#FFFFFF; } :root[data-theme="light"] .v3pc .v3pc-band .gk-dk-p { color:rgba(255,255,255,.8); } :root[data-theme="light"] .v3pc .gk-dk-cta { color:#FFFFFF; background:#C8372D; box-shadow:none; clip-path:var(--c8); font-style:normal; font-weight:700; } :root[data-theme="light"] .v3pc .gk-dk-cta:hover { filter:brightness(.94); } :root[data-theme="light"] .v3pc .gk-dk-cta-ghost { clip-path:var(--c8); font-style:normal; font-weight:700; } /* liens vers chaque grade : puces blanches à filet (le ::before garde la pierre de la ceinture) */ :root[data-theme="light"] .v3pc .gk-dk-keuplink { position:relative; isolation:isolate; color:#0D0F14; background:rgba(13,15,20,.12); box-shadow:none; clip-path:var(--c7); } :root[data-theme="light"] .v3pc .gk-dk-keuplink::after { content:''; position:absolute; inset:1px; z-index:-1; background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] .v3pc .gk-dk-keuplink:hover { background:rgba(13,15,20,.22); color:#0D0F14; } :root[data-theme="light"] .v3pc .gk-dk-keuplink::before { box-shadow:0 0 0 1px rgba(13,15,20,.14); } /* ══ Flashcards : la planche (Mes paquets + Aperçu) ══ */ /* carte photo « Continuer » : la photo, son voile et son texte blanc restent ; le surtitre or passe au blanc, le bouton de lecture devient une pastille vermillon coupée */ :root[data-theme="light"] button.resume.fl3-cont { clip-path:var(--c14); } :root[data-theme="light"] button.resume.fl3-cont :is(b, .rtx, .rtx span) { color:#FFFFFF; } :root[data-theme="light"] button.resume.fl3-cont .rtx .k { color:rgba(255,255,255,.8); } :root[data-theme="light"] button.resume.fl3-cont .go2 { color:#FFFFFF; background:#C8372D; clip-path:var(--c8); } :root[data-theme="light"] button.resume.fl3-cont .go2::before { display:none; } :root[data-theme="light"] button.resume.fl3-cont:hover .go2 { filter:brightness(.94); } /* médaillons de paquet : le cadre et le livre gardent la pierre de la ceinture, le fond de nuit devient perle ; la pierre ivoire (ceinture blanche) prend un liseré d'encre pour se détacher */ :root[data-theme="light"] .fl3-med svg > polygon:nth-of-type(2) { fill:#F0F0F3; } :root[data-theme="light"] .fl3-deck[data-deck^="keup-10"] .fl3-med svg > polygon:first-of-type { stroke:rgba(13,15,20,.2); stroke-width:1; } /* paquet choisi : un liseré vermillon qui suit la coupe (le ::after passe du rôle d'ombre à celui de trait, le blanc du ::before rentre de 1,5 px), l'ombre portée par un filtre sur la carte */ :root[data-theme="light"] .fl3-decks .card.bigmed.on { filter:var(--cl-ombre-f); } :root[data-theme="light"] .fl3-decks .card.bigmed.on::before { inset:1.5px; clip-path:polygon(11.12px 0,calc(100% - 11.12px) 0,100% 11.12px,100% calc(100% - 11.12px),calc(100% - 11.12px) 100%,11.12px 100%,0 calc(100% - 11.12px),0 11.12px); } :root[data-theme="light"] .fl3-decks .card.bigmed.on::after { inset:0; background:#C8372D; box-shadow:none; clip-path:var(--c12); } /* cartes à revoir : pastille d'info en encre ; « Validé » : l'or de la réussite */ :root[data-theme="light"] .fl3-due { color:#FFFFFF; background:#0D0F14; clip-path:var(--c3); } /* (le titre du paquet est un : la règle du socle .bigmed .bt b le mettrait à l'encre) */ :root[data-theme="light"] .bigmed .bt b.fl3-valide { color:#B08433; } /* « Créer un paquet » (pas encore ouvert) et son étiquette « Bientôt » */ :root[data-theme="light"] .fl3-create .cta { background:#EAEAEE; color:#6E717B; opacity:1; } :root[data-theme="light"] .fl3-create .gsoon { background:#EDEDF1; color:#4A4D57; clip-path:var(--c3); } /* panneau Aperçu : carte blanche coupée sur ombre douce */ :root[data-theme="light"] .fl3-grid .card.fl3-ap { position:relative; isolation:isolate; background:transparent; border-color:transparent; border-image:none; } :root[data-theme="light"] .fl3-grid .card.fl3-ap::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .fl3-grid .card.fl3-ap::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } /* statuts : « Appris » dans l'or de la réussite, « En cours » et « À revoir » à l'encre */ :root[data-theme="light"] .fl3-gh.is--learned { color:#B08433; } :root[data-theme="light"] .fl3-gh:is(.is--learning, .is--review) { color:#0D0F14; } :root[data-theme="light"] .fl3-row { border-bottom-color:rgba(13,15,20,.06); } :root[data-theme="light"] .fl3-row b { color:#0D0F14; } :root[data-theme="light"] .fl3-row small { color:#6E717B; } /* carte nouvelle : le sombre l'estompe à 55 %, illisible sur blanc ; elle se distingue ici par son losange gris et un titre ardoise */ :root[data-theme="light"] .fl3-row.is--new { opacity:1; } :root[data-theme="light"] .fl3-row.is--new b { color:#4A4D57; } /* losanges : appris en or plein, en cours cerclé de vermillon, à revoir teinté de vermillon, nouveau cerclé de gris */ :root[data-theme="light"] .fl3-dia.is--learned { background:#B08433; } :root[data-theme="light"] .fl3-dia.is--learning { box-shadow:inset 0 0 0 1.5px #C8372D; } :root[data-theme="light"] .fl3-dia.is--review { background:rgba(200,55,45,.18); box-shadow:inset 0 0 0 1.5px #C8372D; } :root[data-theme="light"] .fl3-dia.is--new { box-shadow:inset 0 0 0 1px rgba(13,15,20,.32); } :root[data-theme="light"] .fl3-apbtns .cta[disabled] { background:#EAEAEE; color:#6E717B; opacity:1; } :root[data-theme="light"] .fl3-hint { color:#6E717B; } /* ══ Boutons secondaires (Tout mélanger, Examen, Écouter) : blancs à filet, en deux couches (le fond porte le trait, le ::before à 1 px repose le blanc) ══ */ :root[data-theme="light"] :is(.fl3-ghost, .fl3-play .gk-fl-audio) { color:#0D0F14; background:rgba(13,15,20,.12); box-shadow:none; clip-path:var(--c8); } :root[data-theme="light"] body :is(.fl3-ghost, .fl3-play .gk-fl-audio)::before { inset:1px; background:#FFFFFF; clip-path:polygon(7.41px 0,calc(100% - 7.41px) 0,100% 7.41px,100% calc(100% - 7.41px),calc(100% - 7.41px) 100%,7.41px 100%,0 calc(100% - 7.41px),0 7.41px); } :root[data-theme="light"] :is(.fl3-ghost, .fl3-play .gk-fl-audio):not([disabled]):hover { color:#0D0F14; background:rgba(13,15,20,.24); box-shadow:none; } /* examen déjà passé du jour : le bouton grisé reste lisible */ :root[data-theme="light"] .fl3-ghost[disabled] { color:#6E717B; background:#EAEAEE; opacity:1; cursor:default; } :root[data-theme="light"] body .fl3-ghost[disabled]::before { background:#EAEAEE; } /* ══ Flashcards : la session ══ */ /* barre haute : quitter (touche blanche), progression (rail gris, avancée en vermillon) */ :root[data-theme="light"] .fl3-play .gk-fl-quit { position:relative; isolation:isolate; color:#0D0F14; background:transparent; box-shadow:none; clip-path:none; filter:var(--cl-ombre-touche); } :root[data-theme="light"] .fl3-play .gk-fl-quit::before { content:''; position:absolute; inset:0; z-index:-1; background:#FFFFFF; clip-path:var(--c7); } :root[data-theme="light"] .fl3-play .gk-fl-quit:hover { background:transparent; color:#0D0F14; } :root[data-theme="light"] .fl3-play .gk-fl-quit:hover::before { background:#FAFAFB; } :root[data-theme="light"] .fl3-play .gk-fl-bar { background:#EAEAEE; clip-path:var(--c3); } :root[data-theme="light"] .fl3-play .gk-fl-bar i { background:#C8372D; } :root[data-theme="light"] .fl3-play .gk-fl-count { color:#0D0F14; } /* badges série / niveau : puces blanches à filet, la flamme de la série en vermillon ; « Nouveau mot », « Examen », « +XP » (cadre or en sombre) : cadre et texte vermillon ; « Retente ta chance » : teinté de vermillon */ :root[data-theme="light"] .fl3-bdg { color:#4A4D57; background:rgba(13,15,20,.12); clip-path:var(--c7); } :root[data-theme="light"] .fl3-bdg::before { background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] .fl3-bdg i { color:#C8372D; } :root[data-theme="light"] .fl3-bdg.is--gold { color:#C8372D; background:#C8372D; } :root[data-theme="light"] .fl3-bdg.is--gold::before { background:#FFFFFF; } :root[data-theme="light"] .fl3-bdg.is--retry { color:#C8372D; background:rgba(200,55,45,.45); } :root[data-theme="light"] .fl3-bdg.is--retry::before { background:#FBEFEE; } /* la question */ :root[data-theme="light"] .fl3-kick { color:#6E717B; } :root[data-theme="light"] .fl3-play .gk-fl-face-tx.is--big { color:#0D0F14; } :root[data-theme="light"] .fl3-play :is(.gk-fl-face-tx.is--big .gk-fl-han, .gk-fl-han.is--big) { color:#4A4D57; } :root[data-theme="light"] .fl3-play .gk-fl-meaning { color:#2B2E36; } :root[data-theme="light"] .fl3-play .gk-fl-face-img { background:#F0F0F3; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .fl3-play .gk-fl-made-ph { color:#6E717B; } /* QCM : tuiles blanches coupées, l'ombre portée par leur grille ; la correction garde vert et rouge */ :root[data-theme="light"] .fl3-play .gk-fl-choices { filter:var(--cl-ombre-f); } :root[data-theme="light"] .fl3-play .gk-fl-choice { background:#FFFFFF; color:#0D0F14; clip-path:var(--c10); } :root[data-theme="light"] .fl3-play .gk-fl-choice::before { display:none; } :root[data-theme="light"] .fl3-play .gk-fl-choice:not(.is--right):not(.is--wrongpick):not(.is--off):hover { background:#FAFAFB; } :root[data-theme="light"] .fl3-play .gk-fl-choice:is(.is--right, .is--wrongpick)::before { display:block; inset:1.5px; clip-path:polygon(9.12px 0,calc(100% - 9.12px) 0,100% 9.12px,100% calc(100% - 9.12px),calc(100% - 9.12px) 100%,9.12px 100%,0 calc(100% - 9.12px),0 9.12px); } :root[data-theme="light"] .fl3-play .gk-fl-choice.is--right { background:#5DBB63; } :root[data-theme="light"] .fl3-play .gk-fl-choice.is--right::before { background:#EEF8EF; } :root[data-theme="light"] .fl3-play .gk-fl-choice.is--wrongpick { background:#C4213F; } :root[data-theme="light"] .fl3-play .gk-fl-choice.is--wrongpick::before { background:#FCEEF0; } /* réponses écartées après la correction : grisées et pleines (le sombre les met à 35 %, illisibles sur blanc) */ :root[data-theme="light"] .fl3-play .gk-fl-choice.is--off { color:#6E717B; background:#EAEAEE; opacity:1; } :root[data-theme="light"] .fl3-play .gk-fl-verdict.is--ok { color:#2F8A3B; } :root[data-theme="light"] .fl3-play .gk-fl-verdict.is--ko { color:#C4213F; } /* assemblage : la banque en puces blanches à filet, la réponse posée en encre pleine */ :root[data-theme="light"] .fl3-play .gk-fl-word { color:#0D0F14; background:rgba(13,15,20,.12); clip-path:var(--c8); } :root[data-theme="light"] .fl3-play .gk-fl-word::before { inset:1px; background:#FFFFFF; clip-path:polygon(7.41px 0,calc(100% - 7.41px) 0,100% 7.41px,100% calc(100% - 7.41px),calc(100% - 7.41px) 100%,7.41px 100%,0 calc(100% - 7.41px),0 7.41px); } :root[data-theme="light"] .fl3-play .gk-fl-word:not(.is--used):hover { background:rgba(13,15,20,.24); } /* tuile déjà posée : grisée, pleine (le sombre la met à 35 %, illisible sur blanc) */ :root[data-theme="light"] .fl3-play .gk-fl-word.is--used { color:#6E717B; background:#EAEAEE; opacity:1; } :root[data-theme="light"] .fl3-play .gk-fl-word.is--used::before { background:#EAEAEE; } :root[data-theme="light"] .fl3-play .gk-fl-slot { color:#FFFFFF; background:#0D0F14; clip-path:var(--c8); } :root[data-theme="light"] .fl3-play .gk-fl-slot::before { display:none; } :root[data-theme="light"] .fl3-play .gk-fl-made.is--ok .gk-fl-slot { background:#5DBB63; color:#FFFFFF; } :root[data-theme="light"] .fl3-play .gk-fl-made.is--ko .gk-fl-slot { background:#C4213F; color:#FFFFFF; } /* réponse validée : les tuiles verrouillées (disabled, donc à 55 %) restent lisibles sur le perle */ :root[data-theme="light"] .fl3-play .gk-fl-made:is(.is--ok, .is--ko) .gk-fl-slot:disabled { opacity:1; } /* Valider / Continuer : l'action, en vermillon plein */ :root[data-theme="light"] .fl3-play .gk-fl-go { color:#FFFFFF; background:#C8372D; box-shadow:none; clip-path:var(--c8); font-style:normal; font-weight:700; } :root[data-theme="light"] body .fl3-play .gk-fl-go::before { display:none; } :root[data-theme="light"] .fl3-play .gk-fl-go:not([disabled]):hover { filter:brightness(.94); } :root[data-theme="light"] .fl3-play .gk-fl-go[disabled] { background:#EAEAEE; color:#6E717B; opacity:1; } /* fin de session : l'or pour la réussite (session terminée, examen réussi), le gris pour un examen à repasser */ :root[data-theme="light"] .fl3-play .gk-fl-end-ic { color:#B08433; } :root[data-theme="light"] .fl3-play .gk-fl-end-ic.ph-arrow-counter-clockwise { color:#6E717B; } :root[data-theme="light"] .fl3-play .gk-fl-score { color:#4A4D57; } /* ══ S'entraîner (/entrainement, /entrainement/) ══ */ /* chapô, surtitres, état vide et lien retour : ardoise, lisibles aussi sur le décor peint */ :root[data-theme="light"] .gk-tr-wrap > .gk-rel-sub { color:#4A4D57; opacity:1; } :root[data-theme="light"] :is([data-gk-training], [data-gk-seance]) .gk-ntf-h { color:#4A4D57; } :root[data-theme="light"] [data-gk-training] .gk-prof-empty { color:#4A4D57; } :root[data-theme="light"] :is([data-gk-training], [data-gk-seance], [data-gk-training-editor]) .gk-fl-back { color:#4A4D57; } :root[data-theme="light"] :is([data-gk-training], [data-gk-seance], [data-gk-training-editor]) .gk-fl-back:hover { color:#0D0F14; } :root[data-theme="light"] [data-gk-seance] .gk-tr-meta { color:#4A4D57; } :root[data-theme="light"] :is([data-gk-training], [data-gk-seance]) .gk-fl-h { font:italic 700 24px/1.2 'GT Sectra Display',Georgia,serif; color:#0D0F14; } /* boutons : l'action en vermillon plein, le secondaire blanc à filet (deux couches) */ :root[data-theme="light"] :is([data-gk-training], [data-gk-seance]) .gk-fl-go { position:relative; isolation:isolate; color:#FFFFFF; background:#C8372D; border:0; clip-path:var(--c8); } :root[data-theme="light"] :is([data-gk-training], [data-gk-seance]) .gk-fl-go:not([disabled]):hover { filter:brightness(.94); } :root[data-theme="light"] :is([data-gk-training], [data-gk-seance]) .gk-fl-go.is--ghost { color:#0D0F14; background:rgba(13,15,20,.12); } :root[data-theme="light"] :is([data-gk-training], [data-gk-seance]) .gk-fl-go.is--ghost::before { content:''; position:absolute; inset:1px; z-index:-1; background:#FFFFFF; clip-path:polygon(7.41px 0,calc(100% - 7.41px) 0,100% 7.41px,100% calc(100% - 7.41px),calc(100% - 7.41px) 100%,7.41px 100%,0 calc(100% - 7.41px),0 7.41px); } :root[data-theme="light"] :is([data-gk-training], [data-gk-seance]) .gk-fl-go.is--ghost:not([disabled]):hover { background:rgba(13,15,20,.24); filter:none; } /* catégories du catalogue (posées sur le perle) : puces blanches à filet, la choisie en encre */ :root[data-theme="light"] [data-gk-training] .gk-bug-chip { position:relative; isolation:isolate; color:#0D0F14; font-weight:500; background:rgba(13,15,20,.12); border:0; clip-path:var(--c7); } :root[data-theme="light"] [data-gk-training] .gk-bug-chip::before { content:''; position:absolute; inset:1px; z-index:-1; background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] [data-gk-training] .gk-bug-chip:hover { color:#0D0F14; background:rgba(13,15,20,.24); } :root[data-theme="light"] [data-gk-training] .gk-bug-chip.is--on { color:#FFFFFF; background:#0D0F14; } :root[data-theme="light"] [data-gk-training] .gk-bug-chip.is--on::before { display:none; } /* exercices du catalogue : cartes blanches coupées (la vidéo reste), ombre portée par la grille */ :root[data-theme="light"] .gk-tr-exos { filter:var(--cl-ombre-f); } :root[data-theme="light"] .gk-tr-exo { background:#FFFFFF; border:0; clip-path:var(--c12); } :root[data-theme="light"] .gk-tr-exo-tx b { color:#0D0F14; } :root[data-theme="light"] .gk-tr-exo-tx small { color:#6E717B; } /* étiquettes (séries, reps, repos) */ :root[data-theme="light"] .gk-tr-pill { color:#4A4D57; background:#EDEDF1; clip-path:var(--c3); } :root[data-theme="light"] .gk-tr-pill.is--rest { color:#6E717B; background:#F5F5F7; box-shadow:inset 0 0 0 1px rgba(13,15,20,.08); } /* lignes d'une séance et entraînements du compte : cartes blanches coupées à 10 px sur ombre douce */ :root[data-theme="light"] :is(.gk-tr-step, .gk-tr-card) { position:relative; isolation:isolate; background:transparent; border-color:transparent; } :root[data-theme="light"] :is(.gk-tr-step, .gk-tr-card)::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c10); transition:background .15s; } :root[data-theme="light"] :is(.gk-tr-step, .gk-tr-card)::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:0 1px 1px rgba(13,15,20,.05), 0 6px 14px rgba(13,15,20,.07); } :root[data-theme="light"] :is(a.gk-tr-card, button.gk-tr-card):hover { background:transparent; } :root[data-theme="light"] :is(a.gk-tr-card, button.gk-tr-card):hover::before { background:#FAFAFB; } :root[data-theme="light"] .gk-tr-card .ph-caret-right { color:#A2A5AD; } :root[data-theme="light"] .gk-tr-card a.gk-tr-card-tx { color:#0D0F14; } :root[data-theme="light"] .gk-tr-card a.gk-tr-card-tx small { color:#6E717B; } :root[data-theme="light"] .gk-tr-mini { color:#0D0F14; background:#F0F0F3; border:0; clip-path:var(--c7); } :root[data-theme="light"] .gk-tr-mini:hover { background:#EAEAEE; } :root[data-theme="light"] .gk-tr-appnote { color:#6E717B; } :root[data-theme="light"] .gk-tr-appnote i { color:#4A4D57; } /* « Ta régularité » (compte connecté, communaute.js) : cases blanches coupées ; aujourd'hui cerclé de vermillon ; séance enregistrée : losange vermillon plein, séance prévue : losange ajouré */ :root[data-theme="light"] .gk-tr-calwrap .gk-prof-h { color:#6E717B; } :root[data-theme="light"] .gk-calx-side { border-left-color:rgba(13,15,20,.08); border-top-color:rgba(13,15,20,.08); } :root[data-theme="light"] .gk-calx-stat b { color:#0D0F14; } :root[data-theme="light"] .gk-calx-stat span { color:#6E717B; } :root[data-theme="light"] .gk-calx-leg { color:#6E717B; } :root[data-theme="light"] .gk-calx-month { color:#0D0F14; } :root[data-theme="light"] .gk-calx-nav { color:#0D0F14; background:transparent; clip-path:none; filter:var(--cl-ombre-touche); } :root[data-theme="light"] .gk-calx-nav::before { content:''; position:absolute; inset:0; z-index:-1; background:#FFFFFF; clip-path:var(--c7); } :root[data-theme="light"] .gk-calx-nav:hover { background:transparent; } :root[data-theme="light"] .gk-calx-nav:hover::before { background:#FAFAFB; } :root[data-theme="light"] .gk-calx-dows span { color:#6E717B; } :root[data-theme="light"] .gk-calx-day { color:#4A4D57; background:transparent; clip-path:none; } :root[data-theme="light"] .gk-calx-day::before { inset:0; background:#FFFFFF; clip-path:var(--c6); } :root[data-theme="light"] .gk-calx-day.is--today { color:#C8372D; font-weight:700; background:#C8372D; clip-path:var(--c6); } :root[data-theme="light"] .gk-calx-day.is--today::before { inset:1.5px; background:#FFFFFF; clip-path:polygon(5.12px 0,calc(100% - 5.12px) 0,100% 5.12px,100% calc(100% - 5.12px),calc(100% - 5.12px) 100%,5.12px 100%,0 calc(100% - 5.12px),0 5.12px); } :root[data-theme="light"] .gk-calx-dia { background:#C8372D; } :root[data-theme="light"] .gk-calx-dia.is--hollow { background:none; box-shadow:inset 0 0 0 1px #C8372D; } :root[data-theme="light"] .gk-calx-foot { color:#6E717B; } /* ══ Éditeur d'entraînement (/entrainement-editeur) ══ */ /* champs : remplis gris, coupés, sans filet ; au focus fond blanc et trait vermillon dessous (glass-site.css peint tous les champs en var(--gk-glass) !important, blanc en clair) */ :root[data-theme="light"] [data-gk-training-editor] :is(.gk-ted-name, .gk-ted-t, .gk-ted-n, .gk-ted-cname) { background:#EAEAEE !important; border-color:transparent; clip-path:var(--c6); } :root[data-theme="light"] [data-gk-training-editor] :is(.gk-ted-name, .gk-ted-t, .gk-ted-n, .gk-ted-cname):hover { border-color:transparent; background:#E4E4E9 !important; } :root[data-theme="light"] [data-gk-training-editor] :is(.gk-ted-name, .gk-ted-t, .gk-ted-n, .gk-ted-cname):focus { border-color:transparent; background:#FFFFFF !important; box-shadow:inset 0 -2px 0 #C8372D; } :root[data-theme="light"] [data-gk-training-editor] .gk-ted-name::placeholder { color:#6E717B; } :root[data-theme="light"] [data-gk-training-editor] :is(.gk-ted-t, .gk-ted-n)::placeholder { color:#6E717B; } /* intitulés de zone et de colonnes : ardoise, lisibles sur le décor peint */ :root[data-theme="light"] :is(.gk-ted-h, .gk-ted-cols, .gk-ted-wcols) { color:#4A4D57; } :root[data-theme="light"] :is(.gk-ted-cols, .gk-ted-wcols) { border-bottom-color:rgba(13,15,20,.08); } :root[data-theme="light"] .gk-ted-add { color:#4A4D57; border-color:rgba(13,15,20,.22); } :root[data-theme="light"] .gk-ted-add:hover { color:#0D0F14; border-color:rgba(13,15,20,.4); } :root[data-theme="light"] .gk-ted-circhead { background:rgba(200,55,45,.06); } :root[data-theme="light"] .gk-ted-cc-n { color:#0D0F14; } :root[data-theme="light"] .gk-ted-rounds button { border-color:rgba(13,15,20,.16); } :root[data-theme="light"] .gk-ted-ac { background:#FFFFFF; border:0; box-shadow:0 2px 4px rgba(13,15,20,.06), 0 16px 34px rgba(13,15,20,.14); } :root[data-theme="light"] .gk-ted-ac-row:is(:hover, .is--on) { background:rgba(200,55,45,.08); } /* catalogue ouvert par la loupe (tiroir blanc) : lignes perle coupées, sans filet */ :root[data-theme="light"] .gk-ted-pk-row { background:#F5F5F7; border-color:transparent; clip-path:var(--c8); } :root[data-theme="light"] .gk-ted-pk-row:hover { background:#EDEDF1; border-color:transparent; } :root[data-theme="light"] .gk-ted-pk-tx b { color:#0D0F14; } :root[data-theme="light"] .gk-ted-pk-tx small { color:#6E717B; } :root[data-theme="light"] .gk-ted-pk-row .gk-tr-pill { background:#FFFFFF; } /* Enregistrer : l'action, en vermillon plein (le contour or du sombre s'éteint) */ :root[data-theme="light"] [data-gk-training-editor] .gk-modal-submit { color:#FFFFFF; background:#C8372D; clip-path:var(--c8); font-style:normal; font-weight:700; } :root[data-theme="light"] [data-gk-training-editor] .gk-modal-submit::before { display:none; } :root[data-theme="light"] [data-gk-training-editor] .gk-modal-submit:not([disabled]):hover { color:#FFFFFF; background:#C8372D; filter:brightness(.94); } /* ══ Le corps (/corps) : la scène 3D reste sombre ; ce qui est posé dessus (fil d'Ariane, surtitre, titre) reste clair, comme sur une photo ══ */ :root[data-theme="light"] .gk-corps-v3 .pl-over .crumb :is(a, a i) { color:rgba(255,255,255,.78); text-shadow:none; } :root[data-theme="light"] .gk-corps-v3 .pl-over .crumb a:hover { color:#FFFFFF; } :root[data-theme="light"] .gk-corps-v3 .pl-over .crumb .d { color:rgba(255,255,255,.4); } :root[data-theme="light"] .gk-corps-v3 .pl-over .gkf-eb { color:rgba(255,255,255,.72); } :root[data-theme="light"] .gk-corps-v3 .pl-over h1.display { color:#FFFFFF; -webkit-text-fill-color:#FFFFFF; text-shadow:none; } /* ══ Clarté biseautée : fragment « ressources » (fusionné à la fin de css/clarte.css) ══ */ /* Pages : /ressources (hub), /ressources/, /technique/, /lexique, /arbre, /decouverte (Inspiration), /nouveautes. Même recette que le socle : fond perle, cartes blanches coupées sur ombre douce, puces blanches à filet (la choisie en encre), champs gris coupés, le vermillon pour agir et pour l'accent. L'or ne reste qu'aux ceintures et à leurs pierres, au médaillon de dan et à la réussite. Restent sombres : photos, vidéos et le flux Inspiration, la scène 3D de l'arbre. */ /* ══ Hub /ressources : recherche du catalogue, champ gris coupé à 6 px ══ */ :root[data-theme="light"] .rh-search.srch { background:#EAEAEE; box-shadow:none; clip-path:var(--c6); color:#6E717B; } :root[data-theme="light"] .rh-search.srch::after { display:none; } :root[data-theme="light"] .rh-search.srch:hover { background:#E4E4E9; box-shadow:none; } :root[data-theme="light"] .rh-search.srch:focus-within { background:#FFFFFF; box-shadow:inset 0 -2px 0 #C8372D; } :root[data-theme="light"] .rh-search i { color:#6E717B; } :root[data-theme="light"] .rh-search input { color:#0D0F14; } :root[data-theme="light"] .rh-search input::placeholder { color:#6E717B; } /* la tête collée (bureau) garde un fond perle : un fondu au-dessus adoucit son bord sur la photo */ @media (min-width:1101px) { :root[data-theme="light"] .rh-sticky::before { content:''; position:absolute; left:0; right:0; bottom:100%; height:40px; pointer-events:none; background:linear-gradient(180deg,rgba(245,245,247,0),#F5F5F7); } } /* compteur : « déjà vues » n'est pas une réussite (rien n'est maîtrisé), c'est l'accent : le vermillon */ :root[data-theme="light"] .rh-count em { color:#C8372D; } /* bascule liste / grille : contrôle segmenté, comme les onglets */ :root[data-theme="light"] .rh-view { gap:2px; padding:2px; background:#EAEAEE; clip-path:var(--c8); } :root[data-theme="light"] .rh-vb { background:transparent; color:#6E717B; clip-path:var(--c6); } :root[data-theme="light"] .rh-vb:hover { background:transparent; color:#0D0F14; } :root[data-theme="light"] .rh-vb.on { background:#FFFFFF; color:#0D0F14; } /* ══ Répertoire A → Z : rangées à l'encre sur filet gris ; le nom déjà lu passe à l'encre pleine ══ */ :root[data-theme="light"] .rh-row { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] .rh-row:hover { background:rgba(13,15,20,.035); } :root[data-theme="light"] .rh-nm b { color:#4A4D57; } :root[data-theme="light"] .rh-row.is-seen .rh-nm b { color:#0D0F14; } :root[data-theme="light"] .rh-nm em { color:#6E717B; } :root[data-theme="light"] .rh-famtag { color:#6E717B; } /* le losange dit le grade en cours : le vermillon marque l'actif */ :root[data-theme="light"] .rh-dot { box-shadow:inset 0 0 0 1px rgba(13,15,20,.22); } :root[data-theme="light"] .rh-row.is-prog .rh-dot { background:#C8372D; box-shadow:none; } :root[data-theme="light"] .rh-sep { border-top-color:rgba(13,15,20,.10); color:#6E717B; } /* rail A → Z : la lettre qui mène à une technique à l'encre ; celle qui ne mène à rien était à 30 % d'opacité (blanc sur perle), elle passe au gris secondaire, sans graisse */ :root[data-theme="light"] .rh-l { color:#0D0F14; } :root[data-theme="light"] .rh-l.is-off { opacity:1; color:#6E717B; font-weight:400; } :root[data-theme="light"] button.rh-l:hover { color:#C8372D; } :root[data-theme="light"] .rh-list::-webkit-scrollbar-thumb { background:rgba(13,15,20,.18); } /* vue grille : la carte blanche coupée à 12 px (::before) sur son ombre (::after) ; la vignette garde la coupe du haut */ :root[data-theme="light"] .rh-list.is-grid .rh-row { isolation:isolate; overflow:visible; background:transparent; clip-path:none; } :root[data-theme="light"] .rh-list.is-grid .rh-row::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); transition:background .15s; } :root[data-theme="light"] .rh-list.is-grid .rh-row::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .rh-list.is-grid .rh-row:hover { background:transparent; } :root[data-theme="light"] .rh-list.is-grid .rh-row:hover::before { background:#FAFAFB; } :root[data-theme="light"] .rh-list.is-grid .rh-img { overflow:hidden; background:#F0F0F3; clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px); } :root[data-theme="light"] .rh-list.is-grid .rh-img-empty i { color:#A2A5AD; } /* ══ Explorer : les tuiles photo gardent leur image et leur voile ; le liseré doré tombe, la coupe passe à 12 px sur les quatre coins, l'ombre douce est portée par la grille ══ */ :root[data-theme="light"] .rh-tiles { filter:var(--cl-ombre-f); } :root[data-theme="light"] .rh-right .rh-tile.hxring, :root[data-theme="light"] .rh-right a.rh-tile.hxring:hover, :root[data-theme="light"] .rh-right .rh-tile.is--soon { background:#0E1424; clip-path:var(--c12); } :root[data-theme="light"] .rh-right .rh-tile.hxring::before, :root[data-theme="light"] .rh-right .rh-tile.hxring::after { inset:0; clip-path:none; } :root[data-theme="light"] .rh-right .rh-tile.hxring > img { inset:0; width:100%; height:100%; clip-path:none; } :root[data-theme="light"] .rh-arts-sub { color:#6E717B; } /* pictos posés sur la photo : blancs, l'or tombe */ :root[data-theme="light"] .rh-right .rh-tile > i { color:#FFFFFF; } /* « Bientôt » : en sombre la tuile entière passe à 60 % d'opacité ; sur le perle elle devenait grise et son texte illisible. En clair la tuile reste pleine : la photo passe en gris foncé, le texte reste blanc, l'étiquette est une pastille blanche translucide coupée (plus d'hexagone). */ :root[data-theme="light"] .rh-right .rh-tile.is--soon { opacity:1; } :root[data-theme="light"] .rh-right .rh-tile.is--soon > img { filter:grayscale(1) brightness(.42); } :root[data-theme="light"] .rh-right .rh-tile.is--soon > span:not(.gsoon) { color:rgba(255,255,255,.78); } :root[data-theme="light"] .rh-right .rh-tile.is--soon .gsoon { color:#FFFFFF; background:rgba(255,255,255,.18); clip-path:var(--c3); } /* ══ Index des techniques (bloc .seo-discovery sous le hub, visible) : son filet blanc disparaissait sur le perle. Carte blanche coupée à 12 px sur ombre douce, liens à l'encre, comme sur Clubs. ══ */ :root[data-theme="light"] .content:has(.rh-tiles) > .seo-discovery { position:relative; isolation:isolate; border:0; padding:22px 24px; color:#2B2E36; } :root[data-theme="light"] .content:has(.rh-tiles) > .seo-discovery::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .content:has(.rh-tiles) > .seo-discovery::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .content:has(.rh-tiles) > .seo-discovery p { color:#4A4D57; } :root[data-theme="light"] .content:has(.rh-tiles) > .seo-discovery a { color:#0D0F14; text-decoration-color:rgba(13,15,20,.22); } :root[data-theme="light"] .content:has(.rh-tiles) > .seo-discovery a:hover { color:#C8372D; text-decoration-color:currentColor; } /* ══ Pages de famille (/ressources/seogi…) : rangées sur filet gris, vignettes coupées à 8 px, le choix de proposition en puces ══ */ :root[data-theme="light"] .gk-rl .rl-props span { color:#6E717B; } :root[data-theme="light"] .gk-rl .rl-props button { position:relative; isolation:isolate; background:rgba(13,15,20,.12); color:#0D0F14; box-shadow:none; clip-path:var(--c7); font-weight:500; } :root[data-theme="light"] .gk-rl .rl-props button::after { content:''; position:absolute; inset:1px; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] .gk-rl .rl-props button:hover { background:rgba(13,15,20,.22); color:#0D0F14; } :root[data-theme="light"] .gk-rl .rl-props button.on { background:#0D0F14; color:#FFFFFF; } :root[data-theme="light"] .gk-rl .rl-props button.on::after { display:none; } :root[data-theme="light"] .gk-rl :is(.rl-row, .rl-ix) { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] .gk-rl :is(.rl-row, .rl-ix):hover { background:rgba(13,15,20,.035); } :root[data-theme="light"] .gk-rl .rl-row .th { background:#EAEAEE; clip-path:var(--c8); } :root[data-theme="light"] .gk-rl .rl-row .tx b { color:#0D0F14; } :root[data-theme="light"] .gk-rl .rl-row .tx span { color:#6E717B; } :root[data-theme="light"] .gk-rl .rl-row .ko { color:#6E717B; } :root[data-theme="light"] .gk-rl .rl-ix b { color:#0D0F14; } :root[data-theme="light"] .gk-rl .rl-ix :is(em, span) { color:#6E717B; } :root[data-theme="light"] .gk-rl :is(.rl-row, .rl-ix) i { color:#A2A5AD; } :root[data-theme="light"] .gk-rl :is(.rl-row, .rl-ix):hover i { color:#C8372D; } /* schéma des appuis : pieds blancs et marques jaunes sur transparent (dessinés pour le sombre). En clair, traits à l'encre et marques en gris, comme les schémas de la fiche poomsae ; posé ici pour ne pas dépendre du filtre du sombre. */ :root[data-theme="light"] .gk-rl .rl-row .ap { opacity:1; } :root[data-theme="light"] .gk-rl .rl-row .ap img { filter:invert(1) grayscale(1); } /* ══ Titres de section des pages Bibliothèque (familles, freestyle, lexique) : capsule hexagonale en sombre, un titre GT Sectra à l'encre en clair, comme .hx ══ */ :root[data-theme="light"] :is(.gk-bib-v3 h1.heading_1.techniques, .gk-bib-v3 .gk-free-h, .gk-bib-v3 .gk-lex-sub) { padding:0; background:none; clip-path:none; font:italic 700 22px/1.15 'GT Sectra Display',Georgia,serif; letter-spacing:0; color:#0D0F14; } :root[data-theme="light"] :is(.gk-bib-v3 h1.heading_1.techniques, .gk-bib-v3 .gk-free-h, .gk-bib-v3 .gk-lex-sub)::before { display:none; } /* ══ Freestyle : cartes blanches coupées à 12 px sur ombre douce, « Voir la fiche » au vermillon ══ */ :root[data-theme="light"] .gk-free-card { position:relative; isolation:isolate; background:transparent; border-color:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; } :root[data-theme="light"] .gk-free-card::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); transition:background .15s; } :root[data-theme="light"] .gk-free-card::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .gk-free-card:hover { background:transparent; } :root[data-theme="light"] .gk-free-card:hover::before { background:#FAFAFB; } :root[data-theme="light"] .gk-free-nm { color:#0D0F14; } :root[data-theme="light"] .gk-free-ko { color:#6E717B; } /* le lien porte sa couleur en style en ligne (freestyle-live.js) */ :root[data-theme="light"] .gk-free-card > span { color:#C8372D !important; } /* ══ Lexique : barre de puces sur un fondu perle, tuiles blanches coupées à 10 px, touche audio grise ══ */ :root[data-theme="light"] .gk-bib-v3 .gk-lex-bar { background:linear-gradient(180deg,rgba(245,245,247,.94) 70%,rgba(245,245,247,0)); } /* la barre est collée en haut : un fondu au-dessus adoucit son bord sur la photo, hors écran une fois collée */ :root[data-theme="light"] .gk-bib-v3 .gk-lex-bar::before { content:''; position:absolute; left:0; right:0; bottom:100%; height:28px; pointer-events:none; background:linear-gradient(180deg,rgba(245,245,247,0),rgba(245,245,247,.94)); } :root[data-theme="light"] .gk-bib-v3 .gk-lex-chip { position:relative; isolation:isolate; background:rgba(13,15,20,.12); color:#0D0F14; box-shadow:none; clip-path:var(--c7); font-weight:500; letter-spacing:.02em; } :root[data-theme="light"] .gk-bib-v3 .gk-lex-chip::after { content:''; position:absolute; inset:1px; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] .gk-bib-v3 .gk-lex-chip:hover { background:rgba(13,15,20,.22); color:#0D0F14; } :root[data-theme="light"] .gk-bib-v3 .gk-lex-chip.is-on { background:#0D0F14; color:#FFFFFF; } :root[data-theme="light"] .gk-bib-v3 .gk-lex-chip.is-on::after { display:none; } :root[data-theme="light"] .gk-lex-item { isolation:isolate; background:transparent; border-color:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; } :root[data-theme="light"] .gk-lex-item::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c10); } :root[data-theme="light"] .gk-lex-item::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .gk-lex-ko { color:#0D0F14; } :root[data-theme="light"] .gk-lex-audio { border:0; border-radius:0; background:#F0F0F3; color:#0D0F14; clip-path:var(--c7); } :root[data-theme="light"] .gk-lex-audio:hover { background:#EAEAEE; } :root[data-theme="light"] .gk-lex-audio.is-playing { background:rgba(200,55,45,.12); } /* ══ Fiche technique : sous-titre « Vidéos », légendes, étapes, pastilles, tuiles vidéo coupées ══ */ :root[data-theme="light"] .gk-tech-sub { color:#0D0F14; } :root[data-theme="light"] .gk-tech-sub em { color:#A2A5AD; } :root[data-theme="light"] .gk-tech-ko { color:#4A4D57; } :root[data-theme="light"] .gk-tech-desc { color:#2B2E36; } :root[data-theme="light"] .gk-tech-badge { background:#EAEAEE; color:#4A4D57; box-shadow:none; clip-path:var(--c3); } :root[data-theme="light"] .gk-tech-badge.v { background:#0D0F14; color:#FFFFFF; } /* 29/09 : la photo suit les coins coupés de sa carte blanche (Jason) : coupe à 10 px, la taille des images */ :root[data-theme="light"] [data-gk-technique] .tkp-fig img { background:#F0F0F3; clip-path:var(--c10); } :root[data-theme="light"] [data-gk-technique] .tkp-fig figcaption { color:#6E717B; } :root[data-theme="light"] [data-gk-technique] .tkp-noimg { color:#6E717B; } :root[data-theme="light"] [data-gk-technique] .tkp-noimg i { color:#A2A5AD; } :root[data-theme="light"] [data-gk-technique] .tkp-steps li { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] [data-gk-technique] .tkp-steps li::before { background:#0D0F14; color:#FFFFFF; clip-path:var(--c3); } /* surtitre (« Coup de pied ») posé sur la photo d'en-tête : le gris y tombait à 2,1 de contraste. Encre, avec le halo perle du fil d'Ariane. */ :root[data-theme="light"] [data-gk-technique] .gk-tech-kicker { color:#0D0F14; text-shadow:0 0 10px rgba(245,245,247,.95), 0 0 3px rgba(245,245,247,.85); } /* le résumé posé dans le HTML (avant que le catalogue réponde, et sans JS) : famille en blanc à 45 % et traduction en or sur la photo. Même traitement que le surtitre ; squelettes gris à reflet blanc. */ :root[data-theme="light"] .gk-tech-ssr .gk-tech-fam { color:#0D0F14; text-shadow:0 0 10px rgba(245,245,247,.95), 0 0 3px rgba(245,245,247,.85); } :root[data-theme="light"] .gk-tech-ssr .gk-tech-trad { color:#2B2E36; text-shadow:0 0 10px rgba(245,245,247,.95), 0 0 3px rgba(245,245,247,.85); } :root[data-theme="light"] .gk-skel { background:#EDEDF1; box-shadow:none; } :root[data-theme="light"] .gk-skel::after { background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.75) 50%,transparent 100%); } /* tuiles vidéo : aucune vignette YouTube n'est chargée avant l'accord (vie privée), la tuile montre l'image d'attente, un aplat nuit à cercle d'or. En clair : un emplacement gris coupé à 10 px, la lecture comme partout ailleurs : pastille vermillon coupée à 8 px, triangle blanc. */ :root[data-theme="light"] .gk-tech-vid { background:#EDEDF1; box-shadow:none; clip-path:var(--c10); color:#0D0F14; } :root[data-theme="light"] .gk-tech-vid img[src*="video-placeholder"] { visibility:hidden; } /* le titre (fiches freestyle) n'a pas de style : en sombre il reste caché sous l'image d'attente ; sans elle il se centrait par-dessus la touche. Il reste caché. */ :root[data-theme="light"] .gk-tech-vid:has(img[src*="video-placeholder"]) .tt { visibility:hidden; } :root[data-theme="light"] .gk-tech-vid .pl { color:#FFFFFF; font-size:17px; text-shadow:none; filter:var(--cl-ombre-touche); } :root[data-theme="light"] .gk-tech-vid .pl i { width:46px; height:46px; display:grid; place-items:center; background:#C8372D; clip-path:var(--c8); transition:filter .15s; } :root[data-theme="light"] .gk-tech-vid:hover .pl i { filter:brightness(.94); } /* derrière le mur (visiteur sans compte) : de simples gabarits gris sous le voile perle */ :root[data-theme="light"] .gkm-zone.is--coupe .gk-tech-vid :is(.pl, .tt) { visibility:hidden; } /* ══ Boîte de consentement vidéo (js/gk-media-consent.js, style posé en JS : nuit, filet et bouton d'or). Partout où une vidéo YouTube attend l'accord : fiche technique, onglet Vidéo des poomsae, Inspiration. En clair : l'emplacement de la vidéo en gris coupé à 12 px, titre à l'encre, texte ardoise, « Autoriser » en bouton vermillon coupé, liens au vermillon ; « Fermer la vidéo » en touche blanche. Le repère de focus passe à l'intérieur (la coupe rogne un contour extérieur). ══ */ :root[data-theme="light"] .gk-media-consent { background:#EAEAEE; color:#4A4D57; border:0; clip-path:var(--c12); font-family:Inter,-apple-system,system-ui,sans-serif; } /* le lecteur Webflow qui la porte (onglet Vidéo des poomsae) garde son fond nuit : un liseré sombre perçait au bord des coupes. Même gris derrière. */ :root[data-theme="light"] .w-embed-youtubevideo:has(> .gk-media-consent) { background:#EAEAEE; } :root[data-theme="light"] .gk-media-consent strong { color:#0D0F14; font-weight:700; } :root[data-theme="light"] .gk-media-consent p { color:#4A4D57; } :root[data-theme="light"] .gk-media-consent button { border-color:transparent; background:#C8372D; color:#FFFFFF; font-family:Inter,-apple-system,system-ui,sans-serif; font-weight:700; clip-path:var(--c8); } :root[data-theme="light"] .gk-media-consent button:hover { filter:brightness(.94); } :root[data-theme="light"] .gk-media-consent > button { background:#FFFFFF; color:#0D0F14; } :root[data-theme="light"] .gk-media-consent > button:hover { filter:none; background:#FAFAFB; } :root[data-theme="light"] .gk-media-consent a { color:#C8372D; text-decoration-color:rgba(200,55,45,.35); } :root[data-theme="light"] .gk-media-consent a:hover { text-decoration-color:currentColor; } :root[data-theme="light"] .gk-media-consent :focus-visible { outline:2px solid #0D0F14; outline-offset:-4px; } :root[data-theme="light"] .gk-media-consent a:focus-visible { outline-offset:2px; } /* dans le flux Inspiration (tuile et lecteur), qui reste sombre : la boîte reste sombre, à l'encre pleine plutôt qu'au bleu nuit, sans or (texte blanc, liens blancs, « Autoriser » au vermillon) */ :root[data-theme="light"] :is(.gk-disco-frame, .gk-disco-lb-frame) .gk-media-consent { background:#0D0F14; color:rgba(255,255,255,.78); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); } :root[data-theme="light"] :is(.gk-disco-frame, .gk-disco-lb-frame) .gk-media-consent :is(strong, p) { color:inherit; } :root[data-theme="light"] :is(.gk-disco-frame, .gk-disco-lb-frame) .gk-media-consent strong { color:#FFFFFF; } :root[data-theme="light"] :is(.gk-disco-frame, .gk-disco-lb-frame) .gk-media-consent a { color:#FFFFFF; text-decoration-color:rgba(255,255,255,.4); } :root[data-theme="light"] :is(.gk-disco-frame, .gk-disco-lb-frame) .gk-media-consent > button { background:rgba(255,255,255,.12); color:#FFFFFF; } :root[data-theme="light"] :is(.gk-disco-frame, .gk-disco-lb-frame) .gk-media-consent :focus-visible { outline-color:#FFFFFF; } /* ══ Ligne « pourquoi un compte » de la boîte de connexion (gk-mur.js, style dans gk-mur.css : texte blanc sur beige doré, cadenas d'or), ouverte par une vidéo verrouillée d'Inspiration ou d'une fiche : texte ardoise sur perle, cadenas vermillon. Réglé ici pour ces pages seulement. ══ */ :root[data-theme="light"]:has(.gk-dscv3, [data-gk-technique]) .gkm-raison { color:#4A4D57; background:#F5F5F7; box-shadow:none; clip-path:var(--c6); } :root[data-theme="light"]:has(.gk-dscv3, [data-gk-technique]) .gkm-raison i { color:#C8372D; } /* ══ Arbre 3D (/arbre) : la scène 3D ne change pas. Le voile du haut devient perle ; la recherche, le choix grade / forme et les pastilles passent en clair ══ */ /* le voile tient jusqu'à la dernière rangée (sur mobile, en « par forme », le compteur passe sous la recherche et tombait sur la scène, illisible) ; il ne se fond que dans la marge du bas */ :root[data-theme="light"] .gk-arbre-v3 .ax-overlay { background:linear-gradient(180deg,rgba(245,245,247,.96) 0,rgba(245,245,247,.9) calc(100% - 30px),rgba(245,245,247,0) 100%); } :root[data-theme="light"] .gk-arbre-v3 .ax-title h1 { color:#0D0F14; text-shadow:0 1px 24px rgba(245,245,247,.95),0 0 3px rgba(245,245,247,.7); } :root[data-theme="light"] .gk-arbre-v3 .ax-back { color:#6E717B; } :root[data-theme="light"] .gk-arbre-v3 .ax-back:hover { color:#C8372D; } /* recherche : champ gris coupé, au focus blanc souligné de vermillon */ :root[data-theme="light"] .gk-arbre-v3 .ax-find .fi { background:#EAEAEE; clip-path:var(--c6); } :root[data-theme="light"] .gk-arbre-v3 .ax-find .fi::before { display:none; } :root[data-theme="light"] .gk-arbre-v3 .ax-find .fi:focus-within { background:#FFFFFF; box-shadow:inset 0 -2px 0 #C8372D; } :root[data-theme="light"] .gk-arbre-v3 .ax-find .fi i { color:#6E717B; } :root[data-theme="light"] .gk-arbre-v3 .ax-find input { color:#0D0F14; } :root[data-theme="light"] .gk-arbre-v3 .ax-find input::placeholder { color:#6E717B; } :root[data-theme="light"] .gk-arbre-v3 .ax-find .fx { color:#6E717B; } :root[data-theme="light"] .gk-arbre-v3 .ax-find .fx:hover { color:#0D0F14; } :root[data-theme="light"] .gk-arbre-v3 .ax-res { background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .gk-arbre-v3 .ax-r { color:#0D0F14; } :root[data-theme="light"] .gk-arbre-v3 :is(.ax-r:hover, .ax-r.cur) { background:rgba(200,55,45,.08); color:#C8372D; } :root[data-theme="light"] .gk-arbre-v3 .ax-r .rg { color:#6E717B; } :root[data-theme="light"] .gk-arbre-v3 .ax-vide { color:#6E717B; } /* grade ou forme : contrôle segmenté */ :root[data-theme="light"] .gk-arbre-v3 .ax-seg { padding:2px; gap:2px; background:#EAEAEE; clip-path:var(--c8); } :root[data-theme="light"] .gk-arbre-v3 .ax-sg { height:30px; background:transparent; color:#6E717B; font-weight:500; clip-path:var(--c6); } :root[data-theme="light"] .gk-arbre-v3 .ax-sg:hover { color:#0D0F14; } :root[data-theme="light"] .gk-arbre-v3 .ax-sg.on { background:#FFFFFF; color:#0D0F14; font-weight:600; } :root[data-theme="light"] .gk-arbre-v3 .ax-count { color:#4A4D57; } /* pastilles de grade et de forme : puces blanches à filet (le fond porte le trait, le ::before repose le blanc), la choisie en encre. Les pierres de ceinture ne changent pas. */ :root[data-theme="light"] .gk-arbre-v3 :is(.ax-g, .ax-f) { background:rgba(13,15,20,.12); color:#0D0F14; clip-path:var(--c7); } :root[data-theme="light"] .gk-arbre-v3 :is(.ax-g, .ax-f)::before { inset:1px; background:#FFFFFF; box-shadow:none; clip-path:var(--c7i); } :root[data-theme="light"] .gk-arbre-v3 :is(.ax-g, .ax-f):hover { filter:none; background:rgba(13,15,20,.22); } :root[data-theme="light"] .gk-arbre-v3 :is(.ax-g, .ax-f).on { background:#0D0F14; color:#FFFFFF; } :root[data-theme="light"] .gk-arbre-v3 :is(.ax-g, .ax-f).on::before { background:#0D0F14; box-shadow:none; } /* « Mon grade » au-dessus de la pastille choisie : ce qui est à moi, au vermillon */ :root[data-theme="light"] .gk-arbre-v3 .ax-g .gr-tag { color:#C8372D; } :root[data-theme="light"] .gk-arbre-v3 .axlab { color:#6E717B; } :root[data-theme="light"] .gk-arbre-v3 :is(.ax-grades, .ax-formes) { scrollbar-color:rgba(13,15,20,.2) transparent; } :root[data-theme="light"] .gk-arbre-v3 :is(.ax-grades, .ax-formes)::-webkit-scrollbar-thumb { background:rgba(13,15,20,.18); } /* Le cadre 3D (arbre/embed.html) reçoit lui aussi clarte.css et gk-theme.js au build, donc data-theme="light" : sans ces règles, le socle lui posait un fond perle, une encre sombre sur ses textes, un titre de fiche à l'encre sur fond nuit et un .cta vermillon. La scène, sa fiche et ses commandes ne changent pas : on leur rend le fond nuit et l'encre claire. */ :root[data-theme="light"]:has(> body > canvas#scene) { background:#0F0D0B; scrollbar-color:auto; } :root[data-theme="light"]:has(> body > canvas#scene) body { background:#0F0D0B !important; color:#FFFFFF; } :root[data-theme="light"]:has(> body > canvas#scene) :is(.hero h1, .m-title) { color:#FFFFFF; } :root[data-theme="light"].tkd-essai { background:#0F0D0B; scrollbar-color:auto; } :root[data-theme="light"].tkd-essai body { background:#0F0D0B !important; color:#FFFFFF; } :root[data-theme="light"] .eb-nom { color:#F2F4FA; } :root[data-theme="light"] aside.panel .cta { background:none; clip-path:none; font-weight:inherit; } :root[data-theme="light"] aside.panel .cta:hover { filter:none; } /* ══ Inspiration (/decouverte) : le flux reste sombre (c'est de la vidéo, comme dans l'app) ; seule la barre de puces passe en clair. « Mes mouvements » garde l'accent : le vermillon. ══ */ :root[data-theme="light"] .gk-dscv3 .gk-disco-chip { position:relative; isolation:isolate; background:rgba(13,15,20,.12); color:#0D0F14; box-shadow:none; clip-path:var(--c7); font-weight:500; letter-spacing:.02em; } :root[data-theme="light"] .gk-dscv3 .gk-disco-chip::before { content:''; position:absolute; inset:1px; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] .gk-dscv3 .gk-disco-chip:hover { background:rgba(13,15,20,.22); color:#0D0F14; } :root[data-theme="light"] .gk-dscv3 .gk-disco-chip.is-on { background:#0D0F14; color:#FFFFFF; } :root[data-theme="light"] .gk-dscv3 .gk-disco-chip.is-on::before { display:none; } :root[data-theme="light"] .gk-dscv3 .gk-disco-chip.is-saved:not(.is-on) { background:rgba(13,15,20,.12); color:#C8372D; } :root[data-theme="light"] .gk-dscv3 .gk-disco-chip.is-saved:not(.is-on)::before { background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] .gk-dscv3 .gk-disco-chip.is-saved:not(.is-on):hover { background:rgba(200,55,45,.4); color:#C8372D; } :root[data-theme="light"] .gk-dscv3 :is(.gk-disco-spin, .gk-disco-sentinel) { border-color:rgba(13,15,20,.12); border-top-color:#C8372D; } /* le flux reste sombre, mais l'or posé dessus tombe : blanc sur la vidéo, vermillon pour l'état choisi */ :root[data-theme="light"] .gk-dscv3 .gk-disco-cat { color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.3); } :root[data-theme="light"] .gk-dscv3 .gk-disco-move { color:#FFFFFF; } :root[data-theme="light"] .gk-dscv3 .gk-disco-move:hover { color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; } :root[data-theme="light"] .gk-dscv3 .gk-disco-views i { color:#FFFFFF; } :root[data-theme="light"] .gk-dscv3 .gk-disco-save.is-on { color:#FFFFFF; background:#C8372D; box-shadow:none; } :root[data-theme="light"] .gk-dscv3 .gk-disco-poom:hover { color:#FFFFFF; background:#C8372D; } /* l'image d'attente (aucune vignette YouTube avant l'accord) est un aplat nuit à cercle et triangle d'or : désaturée, elle garde le noir du flux et son cercle passe au gris clair */ :root[data-theme="light"] .gk-dscv3 .gk-disco-thumb[src*="video-placeholder"] { filter:grayscale(1) brightness(1.2); } :root[data-theme="light"] .gk-dscv3 .gk-disco-item:hover .gk-disco-thumb[src*="video-placeholder"] { filter:grayscale(1) brightness(1.4); } /* lecteur plein écran (une vidéo au centre) : il reste sombre ; la catégorie et les flèches passent au blanc, « Voir le poomsae » et l'enregistré au vermillon */ :root[data-theme="light"] .gk-disco-lb-meta .c { color:rgba(255,255,255,.72); } :root[data-theme="light"] .gk-disco-lb-poom { background:#C8372D; color:#FFFFFF; } :root[data-theme="light"] .gk-disco-lb-poom:hover { filter:brightness(.94); } :root[data-theme="light"] .gk-disco-lb-save.is-on { background:#C8372D; color:#FFFFFF; } :root[data-theme="light"] .gk-disco-lb-nav { color:#FFFFFF; } /* ══ Nouveautés (/nouveautes) : cartes blanches coupées sur ombre douce, pastilles d'icône grises, fil de la version en gris, repère en losange vermillon ══ */ :root[data-theme="light"] .nvv3 .gk-rel-sub { color:#6E717B; opacity:1; } :root[data-theme="light"] .gk-rel-dot { width:9px; height:9px; border-radius:0; background:#C8372D; transform:rotate(45deg); } :root[data-theme="light"] .gk-rel-body { border-left-color:rgba(13,15,20,.12); } :root[data-theme="light"] :is(.gk-rel-card, .gk-rel-featured) { position:relative; isolation:isolate; background:transparent; border-color:transparent; border-radius:0; box-shadow:none; } :root[data-theme="light"] :is(.gk-rel-card, .gk-rel-featured)::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] :is(.gk-rel-card, .gk-rel-featured)::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .gk-rel-featured::before { background:linear-gradient(rgba(200,55,45,.06),rgba(200,55,45,.06)),#FFFFFF; } :root[data-theme="light"] .gk-rel-row + .gk-rel-row { border-top-color:rgba(13,15,20,.07); } :root[data-theme="light"] .gk-rel-ic { border-radius:0; background:#F0F0F3; clip-path:var(--c7); } :root[data-theme="light"] .gk-rel-ic .ph { color:#0D0F14; } :root[data-theme="light"] .gk-rel-tx small { color:#6E717B; } :root[data-theme="light"] .gk-rel-minor { color:#4A4D57; } :root[data-theme="light"] .gk-rel-more { color:#C8372D; } /* ══ Clarté biseautée : fragment « clubs-compte » (fusionné à la fin de css/clarte.css) ══ Clubs (carte, liste, annuaire, fiche), communauté, compte (profil, paramètres, modale de connexion) et éléments système (boîtes de dialogue, cloche, mur mobile, bandeau des cookies). */ /* coupe intérieure d'un filet de 1 px sur une coupe de 8 (8 - 0,586) */ :root[data-theme="light"] { --c8i:polygon(7.41px 0,calc(100% - 7.41px) 0,100% 7.41px,100% calc(100% - 7.41px),calc(100% - 7.41px) 100%,7.41px 100%,0 calc(100% - 7.41px),0 7.41px); } /* ══ Onglets de ces pages : le rail segmenté de clarte.css, sans la pastille nuit de l'onglet choisi (ses ::before et ::after du sombre restaient peints par-dessus le blanc) ══ */ :root[data-theme="light"] :is(.gk-clubs, .gk-comv3, .gk-pf) .wtabs .wtab.on::before, :root[data-theme="light"] :is(.gk-clubs, .gk-comv3, .gk-pf) .wtabs .wtab.on::after { display:none; } /* ══ Clubs : en-tête ══ */ :root[data-theme="light"] .gk-clubs .gkb-head h1.display { color:#0D0F14; } :root[data-theme="light"] .gk-clubs .gkb-sub { color:#4A4D57; } /* ══ Clubs : barre de filtres. Posés à même la page, la recherche et le choix du pays sont des champs blancs coupés sur ombre douce (comme la recherche de l'accueil) : un gris sur le perle ne se verrait pas. Le blanc est le ::before, l'ombre un ::after, le trait vermillon du focus est peint dans le ::before pour suivre la coupe. ══ */ :root[data-theme="light"] :is(.clb-champ, .clb-sel-b) { background:transparent; clip-path:none; color:#0D0F14; } :root[data-theme="light"] :is(.clb-champ, .clb-sel-b)::before { inset:0; background:#FFFFFF; clip-path:var(--c10); transition:background .15s; } :root[data-theme="light"] :is(.clb-champ, .clb-sel-b)::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .clb-champ:focus-within::before { background:linear-gradient(#C8372D,#C8372D) left bottom / 100% 2px no-repeat, #FFFFFF; } :root[data-theme="light"] :is(.clb-champ, .clb-sel-b) i { color:#6E717B; } :root[data-theme="light"] .clb-champ input { color:#0D0F14; } :root[data-theme="light"] .clb-champ input::placeholder { color:#A2A5AD; } :root[data-theme="light"] .clb-sel-b:hover { background:transparent; } :root[data-theme="light"] .clb-sel-b:hover::before, :root[data-theme="light"] .clb-sel.is--ouvert .clb-sel-b::before { background:#FAFAFB; } /* le panneau des pays : un rectangle blanc sur ombre portée (il défile, une coupe rognerait l'ombre) */ :root[data-theme="light"] .clb-sel-p { background:#FFFFFF; box-shadow:0 2px 4px rgba(13,15,20,.06), 0 16px 34px rgba(13,15,20,.14); } :root[data-theme="light"] .clb-sel-o { color:#4A4D57; } :root[data-theme="light"] .clb-sel-o:hover { background:#F5F5F7; color:#0D0F14; } :root[data-theme="light"] .clb-sel-o em { color:#6E717B; } :root[data-theme="light"] .clb-sel-o.is--on { color:#C8372D; background:rgba(200,55,45,.08); box-shadow:inset 2px 0 0 #C8372D; } :root[data-theme="light"] .clb-sel-o.is--on em { color:rgba(200,55,45,.7); } :root[data-theme="light"] .clb-sel-f { background:#FFFFFF; box-shadow:inset 0 -1px 0 rgba(13,15,20,.08); } :root[data-theme="light"] .clb-sel-f .fx { background:#EAEAEE; clip-path:var(--c6); } :root[data-theme="light"] .clb-sel-f .fx::before { display:none; } :root[data-theme="light"] .clb-sel-f .fx:focus-within { background:#FFFFFF; box-shadow:inset 0 -2px 0 #C8372D; } :root[data-theme="light"] .clb-sel-f i { color:#6E717B; } :root[data-theme="light"] .clb-sel-f input { color:#0D0F14; background:transparent !important; border:0 !important; } :root[data-theme="light"] .clb-sel-f input::placeholder { color:#A2A5AD; } /* « Mon club n'est ni sur la carte ni dans la liste » */ :root[data-theme="light"] .clb-abs-o { color:#6E717B; text-decoration-color:rgba(13,15,20,.22); } :root[data-theme="light"] .clb-abs-o:hover { color:#C8372D; } :root[data-theme="light"] .clb-abs-o i { color:#C8372D; } :root[data-theme="light"] .clb-abs-m { color:#6E717B; } /* ══ Clubs : la carte. Grande image, coupée à 14 px. Le fond clair (choisi par clubs-live.js sur .gk-theme-light, qui pose alors .is--aquarelle, nom gardé de l'ancien fond) est la teinte claire de la carte du sombre : il se montre tel quel, sans le lavis d'encre de v3-clubs.css. Si le thème passe au clair après la construction de la carte, elle garde le fond sombre d'Esri : on l'inverse en gris clair jusqu'au prochain chargement. ══ */ :root[data-theme="light"] .clb-map, :root[data-theme="light"] .clb-map.leaflet-container { background:#EAEAEE; box-shadow:none; clip-path:var(--c14); } :root[data-theme="light"] .clb-map.is--aquarelle .leaflet-tile { filter:none; } :root[data-theme="light"] .clb-map:not(.is--aquarelle) :is(.leaflet-tile-pane, .leaflet-overlay-pane) { filter:invert(1) hue-rotate(180deg) brightness(1.08) contrast(.9); } /* points et paquets : encre, liseré blanc en deux couches (la couleur ne dit rien, la taille monte) */ :root[data-theme="light"] .clb-pin i { position:relative; background:#FFFFFF; border-radius:0; box-shadow:none; clip-path:var(--c4); } :root[data-theme="light"] .clb-pin i::before { content:''; position:absolute; inset:2px; background:#0D0F14; clip-path:var(--c3); } :root[data-theme="light"] .clb-cl { color:#FFFFFF; } :root[data-theme="light"] .clb-cl .nb { isolation:isolate; background:#FFFFFF; border-radius:0; box-shadow:none; clip-path:var(--c4); } :root[data-theme="light"] .clb-cl .nb::before { content:''; position:absolute; inset:2px; z-index:-1; background:#0D0F14; clip-path:var(--c3); } /* zoom : deux touches blanches empilées, coupées ensemble, ombre sur leur coin de carte */ :root[data-theme="light"] .clb-map .leaflet-top.leaflet-left { filter:var(--cl-ombre-touche); } :root[data-theme="light"] .clb-map .leaflet-bar { border:0; border-radius:0; box-shadow:none; clip-path:var(--c7); } :root[data-theme="light"] .clb-map .leaflet-bar a { background:#FFFFFF; color:#0D0F14; border-bottom-color:rgba(13,15,20,.08); border-radius:0; } :root[data-theme="light"] .clb-map .leaflet-bar a:hover { background:#F5F5F7; color:#0D0F14; } :root[data-theme="light"] .clb-map .leaflet-bar a.leaflet-disabled { background:#F5F5F7; color:#A2A5AD; } :root[data-theme="light"] .clb-map .leaflet-control-attribution { background:rgba(255,255,255,.84); color:#6E717B; } :root[data-theme="light"] .clb-map .leaflet-control-attribution a { color:#4A4D57; } /* bulle d'un club : blanche coupée, l'ombre suit la coupe (filtre sur la bulle entière) */ :root[data-theme="light"] .clb-map .leaflet-popup { filter:drop-shadow(0 2px 4px rgba(13,15,20,.07)) drop-shadow(0 12px 26px rgba(13,15,20,.14)); } :root[data-theme="light"] .clb-map .leaflet-popup-content-wrapper { background:#FFFFFF; color:#0D0F14; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .clb-map .leaflet-popup-tip { background:#FFFFFF; box-shadow:none; } :root[data-theme="light"] .clb-map a.leaflet-popup-close-button { color:#6E717B; } :root[data-theme="light"] .clb-map a.leaflet-popup-close-button:hover { color:#0D0F14; } :root[data-theme="light"] .clb-pop b { color:#0D0F14; } :root[data-theme="light"] .clb-pop span { color:#6E717B; } :root[data-theme="light"] .clb-pop em { color:#6E717B; font-weight:600; letter-spacing:.12em; } :root[data-theme="light"] .clb-pop a { color:#C8372D; } :root[data-theme="light"] .clb-pop a.go { color:#FFFFFF; background:#C8372D; clip-path:var(--c8); } :root[data-theme="light"] .clb-pop a.go:hover { filter:brightness(.94); } :root[data-theme="light"] .clb-face { border-color:#FFFFFF; background:#EDEDF1; border-radius:0; clip-path:var(--c6); } :root[data-theme="light"] .clb-face i, :root[data-theme="light"] .clb-pop .clb-plus, :root[data-theme="light"] .clb-pop .clb-gens-n { color:#4A4D57; } /* ══ Clubs : la liste, une carte blanche coupée, rangées à filet fin ══ */ :root[data-theme="light"] .clb-count { font-size:11px; font-weight:600; letter-spacing:.12em; color:#6E717B; } :root[data-theme="light"] .clb-count--pauvre { color:#6E717B; } :root[data-theme="light"] .clb-count--pauvre::before { background:rgba(13,15,20,.08); } :root[data-theme="light"] .clb-list { position:relative; isolation:isolate; padding:4px 18px; } :root[data-theme="light"] .clb-list::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .clb-list::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .clb-row { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] .clb-row:last-child { border-bottom:0; } :root[data-theme="light"] .clb-row:hover { background:transparent; } :root[data-theme="light"] .clb-row .tx :is(b, .nm) { color:#0D0F14; } :root[data-theme="light"] .clb-row .tx .nm:hover { color:#C8372D; } :root[data-theme="light"] .clb-row .tx span { color:#6E717B; } :root[data-theme="light"] .clb-row .py { color:#6E717B; } :root[data-theme="light"] .clb-row .lk { color:#4A4D57; background:#F0F0F3; clip-path:var(--c6); } :root[data-theme="light"] .clb-row .lk:hover { color:#FFFFFF; background:#C8372D; } :root[data-theme="light"] .clb-list.is--pauvre .clb-row .tx b { color:#4A4D57; } :root[data-theme="light"] .clb-empty { color:#6E717B; } /* ══ Annuaire par pays (/annuaire-clubs/*, la section est la page) et « Parcourir les clubs par pays » sous la carte : le cadre à filet du sombre devient une carte blanche coupée ══ */ :root[data-theme="light"] :is(.gk-clubs > .seo-discovery, .content > .seo-discovery:first-child) { position:relative; isolation:isolate; border:0; padding:22px 24px; color:#2B2E36; } :root[data-theme="light"] :is(.gk-clubs > .seo-discovery, .content > .seo-discovery:first-child)::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] :is(.gk-clubs > .seo-discovery, .content > .seo-discovery:first-child)::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] :is(.gk-clubs > .seo-discovery, .content > .seo-discovery:first-child) p { color:#4A4D57; } :root[data-theme="light"] :is(.gk-clubs > .seo-discovery, .content > .seo-discovery:first-child) a { color:#0D0F14; text-decoration-color:rgba(13,15,20,.22); } :root[data-theme="light"] :is(.gk-clubs > .seo-discovery, .content > .seo-discovery:first-child) a:hover { color:#C8372D; text-decoration-color:currentColor; } :root[data-theme="light"] .content > .seo-discovery:first-child nav { margin-top:18px; padding-top:14px; border-top:1px solid rgba(13,15,20,.07); } /* ══ Fiche d'un club (/club/, js/club-live.js), aussi embarquée dans l'espace du club (/mon-club). « Page officielle », l'étoile de la note et le statut vérifié sont des insignes : vermillon ══ */ /* écusson : une tuile blanche coupée à 10 px sur ombre douce, initiales à l'encre. L'écusson EN IMAGE (.is--img) n'a pas la classe .hxring : ni ancrage, ni tuile. Son ombre (::after, en absolu) partait donc s'accrocher à la fiche entière : un grand cadre gris autour de toute la page, de « Page officielle » à « Page tenue par le club » (Jason 05/10). Il reçoit le même ancrage et la même tuile, et son image suit les coins coupés. */ :root[data-theme="light"] .clp-badge { position:relative; isolation:isolate; background:transparent; clip-path:none; } :root[data-theme="light"] .clp-badge::before { inset:0; background:#FFFFFF; clip-path:var(--c10); } :root[data-theme="light"] .clp-badge.is--img::before { content:''; position:absolute; z-index:-1; } :root[data-theme="light"] .clp-badge.is--img img { clip-path:var(--c10); } :root[data-theme="light"] .clp-badge::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .clp-badge > span { color:#0D0F14; } :root[data-theme="light"] .clp-id h1.display { color:#0D0F14; } :root[data-theme="light"] .clp-off { color:#C8372D; } :root[data-theme="light"] .clp-off.is--test { color:#6E717B; } :root[data-theme="light"] .clp-kicker { color:#6E717B; } :root[data-theme="light"] .clp-meta { color:#4A4D57; } :root[data-theme="light"] .clp-meta b { color:#0D0F14; } :root[data-theme="light"] .clp-meta .st i { color:#C8372D; } :root[data-theme="light"] .clp-meta .dm { background:rgba(13,15,20,.28); } :root[data-theme="light"] .clp-tag { color:#4A4D57; background:#FFFFFF; box-shadow:none; clip-path:var(--c4); } /* les deux actions : plein = vermillon, contour = blanc à filet (deux couches), éteint = gris */ :root[data-theme="light"] .clp-b { font-family:Inter, sans-serif; font-style:normal; font-weight:700; clip-path:var(--c8); } :root[data-theme="light"] .clp-b.is--plein { color:#FFFFFF; background:#C8372D; } :root[data-theme="light"] .clp-b.is--plein:hover { filter:brightness(.94); } :root[data-theme="light"] .clp-b.is--ghost { position:relative; isolation:isolate; color:#0D0F14; background:rgba(13,15,20,.14); box-shadow:none; } :root[data-theme="light"] .clp-b.is--ghost::before { content:''; position:absolute; inset:1px; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c8i); } :root[data-theme="light"] .clp-b.is--ghost:hover::before { background:#F8F8FA; } :root[data-theme="light"] :is(.clp-b.is--off, .clp-b.is--off:hover) { color:#6E717B; background:#EAEAEE; box-shadow:none; filter:none; } :root[data-theme="light"] .clp-b.is--off::before { display:none; } /* invitation à devenir l'hôte (18/10/2026) : filet et sur-titre vermillon (agir), textes à l'encre */ :root[data-theme="light"] .clp-invite { border-left-color:#C8372D; } :root[data-theme="light"] .clp-invite-k { color:#C8372D; } :root[data-theme="light"] .clp-invite-t { color:#0D0F14; } :root[data-theme="light"] .clp-invite-p { color:#4A4D57; } :root[data-theme="light"] .clp-invite-n { color:#6E717B; } :root[data-theme="light"] .clp-claim { color:#C8372D; } :root[data-theme="light"] .clp-claim:hover { color:#0D0F14; } :root[data-theme="light"] .clp-owned { color:#6E717B; } /* petits boutons (Itinéraire, Voir sur la carte, Copier, crayon) : blancs à filet ; celui qui envoie un signalement sur /clubs est l'action, en vermillon */ :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club], .gk-clubs, [data-gk-event]) .hxbtn { color:#0D0F14; background:rgba(13,15,20,.14); clip-path:var(--c7); } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club], .gk-clubs, [data-gk-event]) .hxbtn::before { inset:1px; background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club], .gk-clubs, [data-gk-event]) .hxbtn:hover { color:#0D0F14; } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club], .gk-clubs, [data-gk-event]) .hxbtn:hover::before { background:#F8F8FA; } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club], .gk-clubs, [data-gk-event]) .hxbtn i { color:#4A4D57; } :root[data-theme="light"] .gk-clubs .hxbtn.clb-abs-env { color:#FFFFFF; background:#C8372D; clip-path:var(--c8); } :root[data-theme="light"] .gk-clubs .hxbtn.clb-abs-env::before { display:none; } /* cartes de la fiche (dojang, chiffres, adresse, horaires, contacts) : blanc coupé, ombre douce */ :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .card:not(.bigmed) { isolation:isolate; background:transparent; border-color:transparent; border-image:none; box-shadow:none; } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .card:not(.bigmed)::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .card:not(.bigmed)::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .addr .clp-map { background:#EAEAEE; clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px); } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) :is(.infrow, .ctrow) { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .infrow .k { color:#6E717B; } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .infrow b { color:#0D0F14; } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .infrow b.mut { color:#6E717B; } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .infrow.today .k { color:#0D0F14; } /* le créneau du jour (horaires) : « Aujourd'hui » passe de l'or au vermillon */ :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .todaybadge { color:#C8372D; } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .ctrow i { color:#6E717B; } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .ctrow b { color:#0D0F14; } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .addr b.l1 { color:#0D0F14; } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .clstat .k.gold { color:#6E717B; } :root[data-theme="light"] :is([data-gk-club], [data-gk-club-infos], [data-gk-espace-club]) .clstat .v { color:#0D0F14; } :root[data-theme="light"] .clp-desc { color:#2B2E36; } /* pratiquants et publications */ :root[data-theme="light"] .clp-face { border-color:#F5F5F7; background:#EAEAEE; border-radius:0; clip-path:var(--c6); } :root[data-theme="light"] :is(.clp-face i, .clp-faces .clp-plus) { color:#4A4D57; } :root[data-theme="light"] .clp-gens-moi { color:#4A4D57; } /* « Suivre ce club » : v3-club.css ne l'habille qu'en sombre (sinon bouton brut du navigateur) ; en clair, même gabarit que le sombre, bouton blanc à filet en deux couches comme .clp-b.is--ghost */ :root[data-theme="light"] .clp-suivre { position:relative; isolation:isolate; align-items:center; justify-content:center; min-height:38px; padding:0 20px; border:0; border-radius:0; font:600 12.5px Inter, sans-serif; letter-spacing:.02em; color:#0D0F14; background:rgba(13,15,20,.14); clip-path:var(--c8); } :root[data-theme="light"] .clp-suivre:not([hidden]) { display:inline-flex; } :root[data-theme="light"] .clp-suivre::before { content:''; position:absolute; inset:1px; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c8i); } :root[data-theme="light"] .clp-suivre:not(:disabled):hover { background:rgba(13,15,20,.22); } :root[data-theme="light"] .clp-suivre:not(:disabled):hover::before { background:#F8F8FA; } :root[data-theme="light"] .clp-post, :root[data-theme="light"] .clp-post .ph { background:#EAEAEE; } :root[data-theme="light"] .clp-post { clip-path:var(--c10); } :root[data-theme="light"] .clp-src { color:#6E717B; } :root[data-theme="light"] .clp-src a { color:#4A4D57; } /* modales de club (contacter, revendiquer) : statut sur perle, canaux en touches blanches à filet (le choisi en vermillon), erreur et recours à l'encre, plus d'or */ :root[data-theme="light"] .clp-status { background:#F5F5F7; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .clp-status i { color:#6E717B; } :root[data-theme="light"] .clp-status.is--ok i { color:#C8372D; } :root[data-theme="light"] .clp-status b { color:#0D0F14; } :root[data-theme="light"] .clp-status span { color:#6E717B; } :root[data-theme="light"] .clp-chan { position:relative; isolation:isolate; color:#4A4D57; background:rgba(13,15,20,.14); box-shadow:none; clip-path:var(--c8); } :root[data-theme="light"] .clp-chan::before { content:''; position:absolute; inset:1px; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c8i); } :root[data-theme="light"] .clp-chan:hover::before { background:#F8F8FA; } :root[data-theme="light"] .clp-chan.is--on { color:#C8372D; background:#C8372D; box-shadow:none; } :root[data-theme="light"] .clp-chan.is--on::before { background:#FBEFEE; } :root[data-theme="light"] .clp-cfield.is--err :is(input, input:focus) { box-shadow:inset 0 -2px 0 #C8372D; } :root[data-theme="light"] .clp-err { color:#C8372D; } :root[data-theme="light"] .clp-again { color:#4A4D57; } :root[data-theme="light"] .clp-again:hover { color:#C8372D; } :root[data-theme="light"] .clp-demo { color:#4A4D57; } :root[data-theme="light"] .clp-demo b { color:#0D0F14; } :root[data-theme="light"] .clp-mfoot { color:#6E717B; } /* tuiles de publication : sur photo, le texte reste blanc et le cœur passe au blanc ; sans photo (.ph), plus de dégradé nuit : texte à l'encre, cœur vermillon */ :root[data-theme="light"] .clp-post .lk i { color:#FFFFFF; } :root[data-theme="light"] .clp-multi { color:#FFFFFF; } :root[data-theme="light"] .clp-post .ph ~ .in { background:none; } :root[data-theme="light"] .clp-post .ph ~ .in b { color:#0D0F14; } :root[data-theme="light"] .clp-post .ph ~ .in .wh { color:#6E717B; } :root[data-theme="light"] .clp-post .ph ~ .in .lk { color:#4A4D57; } :root[data-theme="light"] .clp-post .ph ~ .in .lk i { color:#C8372D; } /* une publication ouverte (/club/#post=) : à l'encre ; la portée en étiquette grise, « Membres du club » en vermillon ; le cœur des compteurs et la puce du carrousel en vermillon */ /* le nom du club, posé sur la photo d'en-tête : ardoise sur halo perle, comme le fil d'Ariane */ :root[data-theme="light"] .clp-pnav-t { color:#4A4D57; text-shadow:0 0 10px rgba(245,245,247,.95), 0 0 3px rgba(245,245,247,.85); } /* sous la photo (le temps qu'elle arrive), un gris clair plutôt que le noir du sombre ; la vidéo garde son noir */ :root[data-theme="light"] :is(.clp-shots-vue, img.clp-pmedia) { background:#EAEAEE; } :root[data-theme="light"] .clp-pmeta .wh { color:#6E717B; } :root[data-theme="light"] .clp-scope { color:#4A4D57; background:#EDEDF1; box-shadow:none; clip-path:var(--c4); } :root[data-theme="light"] .clp-scope.is--members { color:#C8372D; background:rgba(200,55,45,.08); box-shadow:none; } :root[data-theme="light"] .clp-ptxt { color:#2B2E36; } :root[data-theme="light"] .clp-pcounts { color:#0D0F14; } :root[data-theme="light"] .clp-pcounts i { color:#6E717B; } :root[data-theme="light"] .clp-pcounts .ph-heart { color:#C8372D; } :root[data-theme="light"] .clp-cm b { color:#0D0F14; } :root[data-theme="light"] .clp-cm p { color:#2B2E36; } :root[data-theme="light"] .clp-dot::before { background:rgba(13,15,20,.22); } :root[data-theme="light"] .clp-dot:hover::before { background:rgba(13,15,20,.45); } :root[data-theme="light"] .clp-dot.is--on::before { background:#C8372D; } :root[data-theme="light"] .clp-dot:focus-visible { outline-color:#C8372D; } /* ══ Espace du club (/mon-club, club-espace.js, v3-club-espace.css : la page du détenteur). Touches blanches à filet (l'active en vermillon), « + » en vermillon plein, menus en panneaux blancs ; membres en cartes blanches coupées ; messagerie à l'encre, champ gris, envoi vermillon ══ */ :root[data-theme="light"] .clesp-ib { color:#0D0F14; background:rgba(13,15,20,.14); clip-path:var(--c8); } :root[data-theme="light"] .clesp-ib::before { background:#FFFFFF; clip-path:var(--c8i); } :root[data-theme="light"] .clesp-ib:hover { background:rgba(13,15,20,.22); } :root[data-theme="light"] .clesp-ib:hover::before { background:#F8F8FA; } :root[data-theme="light"] .clesp-ib.is--on { color:#C8372D; background:#C8372D; } :root[data-theme="light"] .clesp-ib.is--on::before { background:#FBEFEE; } :root[data-theme="light"] .clesp-ib.is--sm { clip-path:var(--c6); } :root[data-theme="light"] .clesp-ib.is--sm::before { clip-path:var(--c6i); } :root[data-theme="light"] .clesp-tabs::after { height:1px; background:linear-gradient(90deg, rgba(13,15,20,0), rgba(13,15,20,.12) 50%, rgba(13,15,20,0)); } :root[data-theme="light"] .clesp-plus { color:#FFFFFF; background:#C8372D; clip-path:var(--c8); } :root[data-theme="light"] .clesp-plus:hover { background:#C8372D; filter:brightness(.94); } :root[data-theme="light"] .clesp-menu { background:#FFFFFF; box-shadow:0 2px 4px rgba(13,15,20,.06), 0 16px 34px rgba(13,15,20,.14); } :root[data-theme="light"] .clesp-mi { color:#0D0F14; } :root[data-theme="light"] .clesp-mi:hover { background:#F5F5F7; } :root[data-theme="light"] .clesp-mi i { color:#4A4D57; } /* membres (et résultats d'invitation, cases d'un groupe) : blanc coupé en ::before, ombre en ::after */ :root[data-theme="light"] .clm-row { background:transparent; clip-path:none; } :root[data-theme="light"] .clm-row.hxring::before { inset:0; background:#FFFFFF; clip-path:var(--c10); } :root[data-theme="light"] .clm-row::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .clm-id b { color:#0D0F14; } :root[data-theme="light"] :is(.clm-id small, .clm-id small.mut, .clg-r .clm-id small) { color:#6E717B; } :root[data-theme="light"] .clm-lien { color:#C8372D; } :root[data-theme="light"] .clm-inv .gk-field input { color:#0D0F14 !important; background-color:#EAEAEE !important; box-shadow:none; clip-path:var(--c6); } :root[data-theme="light"] .clm-inv .gk-field input:focus { background-color:#FFFFFF !important; box-shadow:inset 0 -2px 0 #C8372D !important; } :root[data-theme="light"] .clms-who { color:#0D0F14; } :root[data-theme="light"] .clms-who.is--club { color:#C8372D; } :root[data-theme="light"] .clms-m p { color:#2B2E36; } :root[data-theme="light"] .clms-in { background:#EAEAEE; clip-path:var(--c8); } :root[data-theme="light"] .clms-in.hxring::before { display:none; } :root[data-theme="light"] .clms-in:focus-within { background:#FFFFFF; box-shadow:inset 0 -2px 0 #C8372D; } :root[data-theme="light"] .clms-in textarea { color:#0D0F14 !important; } :root[data-theme="light"] .clms-send { color:#FFFFFF; background:#C8372D; clip-path:var(--c8); } :root[data-theme="light"] .clms-send::before { display:none; } :root[data-theme="light"] .clms-send[disabled] { opacity:1; color:#A2A5AD; background:#EAEAEE; } /* messagerie en deux colonnes (05/10) : un panneau blanc coupé sur ombre douce ; la conversation ouverte sur perle avec un filet vermillon ; mes bulles en vermillon doux, celles des autres en gris ; le « + » d'un nouveau groupe en vermillon */ :root[data-theme="light"] .clesp-pane[data-pane="messages"] { filter:var(--cl-ombre-f); } :root[data-theme="light"] .clms { background:#FFFFFF; box-shadow:none; clip-path:var(--c12); } :root[data-theme="light"] :is(.clms-liste, .clms-body) { scrollbar-color:rgba(13,15,20,.22) transparent; } :root[data-theme="light"] .clms-liste { border-right-color:rgba(13,15,20,.08); } :root[data-theme="light"] .clms-c { color:#0D0F14; } :root[data-theme="light"] .clms-c:hover { background:#F5F5F7; } :root[data-theme="light"] .clms-c.on { background:#F5F5F7; box-shadow:inset 2px 0 0 #C8372D; } :root[data-theme="light"] :is(.clms-c, .clms-nouveau):focus-visible { outline-color:#C8372D; } :root[data-theme="light"] .clms-cl b { color:#0D0F14; } :root[data-theme="light"] .clms-ci { color:#0D0F14; background:#EAEAEE; clip-path:var(--c8); } :root[data-theme="light"] .clms-cn { color:#FFFFFF; background:#C8372D; clip-path:var(--c4); } :root[data-theme="light"] .clms-nouveau { color:#C8372D; border-top-color:rgba(13,15,20,.08); } :root[data-theme="light"] .clms-nouveau:hover { background:#FBEFEE; } :root[data-theme="light"] .clms-nouveau .clms-ci { color:#C8372D; background:rgba(13,15,20,.14); clip-path:var(--c8); } :root[data-theme="light"] .clms-nouveau .clms-ci::before { background:#FFFFFF; clip-path:var(--c8i); } :root[data-theme="light"] :is(.clms-tete, .clms-bar) { border-color:rgba(13,15,20,.08); } :root[data-theme="light"] .clms-tt b { color:#0D0F14; } :root[data-theme="light"] .clms-jour::before, :root[data-theme="light"] .clms-jour::after { background:rgba(13,15,20,.1); } :root[data-theme="light"] .clms-m p { background:#F0F0F3; clip-path:var(--c8); } :root[data-theme="light"] .clms-m p.hxring::before { display:none; } :root[data-theme="light"] .clms-m.is--moi p { background:#FBEFEE; } :root[data-theme="light"] .clms-m time { color:#A2A5AD; } :root[data-theme="light"] .clg-r { color:#0D0F14; } :root[data-theme="light"] .clg-r:hover { background:#F5F5F7; } :root[data-theme="light"] .clg-r > i { color:rgba(13,15,20,.28); } :root[data-theme="light"] .clg-r.is--on > i { color:#C8372D; } /* ══ Éditeur de la page du club (club-editeur.js, v3-club-editeur.css) : ses anneaux hexagonaux (.hxring, .cle-ring, .ghx) deviennent des aplats coupés : champs et pastilles en gris, pastille choisie en encre pleine, bascule active, ajouts et envoi en vermillon ; plus de nuit ni d'or ══ */ :root[data-theme="light"] .cle .cle-ring::before, :root[data-theme="light"] .cle .hxring::before, :root[data-theme="light"] .cle .ghx::before { display:none; } :root[data-theme="light"] .cle-top-txt b { color:#0D0F14; } :root[data-theme="light"] .cle .cle-hx { background:#EAEAEE; clip-path:var(--c6); } :root[data-theme="light"] .cle .cle-hx:focus-within { background:#FFFFFF; box-shadow:inset 0 -2px 0 #C8372D; } :root[data-theme="light"] .cle-hx input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), :root[data-theme="light"] .cle-hx textarea { color:#0D0F14 !important; } :root[data-theme="light"] .cle-hx input[type="time"] { color-scheme:light; } :root[data-theme="light"] .cle-hx input[type="time"]::-webkit-calendar-picker-indicator { filter:none; } :root[data-theme="light"] .cle .cle-chip { color:#0D0F14; background:#F0F0F3; clip-path:var(--c7); } :root[data-theme="light"] .cle .cle-chip:hover { background:#EAEAEE; } :root[data-theme="light"] .cle-chip.is--in input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { color:#0D0F14 !important; } :root[data-theme="light"] .cle .cle-chip.is--in { background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(13,15,20,.12); } :root[data-theme="light"] .cle .cle-chip.is--sugg { color:#C8372D; background:rgba(200,55,45,.08); } :root[data-theme="light"] .cle-chip.is--sugg i { color:#C8372D; } :root[data-theme="light"] .cle .cle-chip.is--off { color:#6E717B; } :root[data-theme="light"] .cle .cle-chip.ghx { color:#FFFFFF; background:#0D0F14 !important; } /* bascule active (« Fermé », « Membres du club ») : toute la largeur, donc pas un aplat d'encre : filet et texte vermillon sur fond vermillon léger (le fond fait le filet, le ::before le remplissage) */ :root[data-theme="light"] .cle .cle-tog.ghx { color:#C8372D; background:#C8372D !important; } :root[data-theme="light"] .cle .cle-tog.ghx::before { display:block; inset:1px; background:#FBEFEE; clip-path:var(--c8i); } :root[data-theme="light"] .cle .cle-chip.ghx i { color:rgba(255,255,255,.7); } :root[data-theme="light"] .cle .cle-tog { color:#4A4D57; background:#F0F0F3; clip-path:var(--c8); } :root[data-theme="light"] .cle .cle-tog i { color:currentColor; } :root[data-theme="light"] .cle-x:hover, :root[data-theme="light"] .cle-rm:hover, :root[data-theme="light"] .cle-com > button:hover { color:#0D0F14; } :root[data-theme="light"] .cle-add { color:#C8372D; } :root[data-theme="light"] .cle-add:hover { color:#A82D25; } :root[data-theme="light"] .cle .cle-cover { background:#EAEAEE; clip-path:var(--c14); } :root[data-theme="light"] .cle-cover-btn i { color:currentColor; } /* couverture sans image : pas de dégradé nuit, bouton à l'encre (avec image, le voile et le blanc restent) */ :root[data-theme="light"] .cle .cle-cover:not(:has(img))::after { display:none; } :root[data-theme="light"] .cle .cle-cover:not(:has(img)) .cle-cover-btn { color:#0D0F14; } :root[data-theme="light"] .cle .cle-badge { background:#EAEAEE; clip-path:var(--c10); } :root[data-theme="light"] :is(.cle-badge i, .cle-pbtn i) { color:#C8372D; } :root[data-theme="light"] .cle-badge-txt b { color:#0D0F14; } :root[data-theme="light"] .cle .cle-pbtn { background:#EAEAEE; clip-path:var(--c10); } :root[data-theme="light"] .cle-com b { color:#0D0F14; } :root[data-theme="light"] .cle-com p { color:#2B2E36; } :root[data-theme="light"] .cle .cle-rep-btn { color:#FFFFFF; background:#C8372D !important; clip-path:var(--c8); } :root[data-theme="light"] .cle .cle-rep-btn[disabled] { opacity:1; color:#A2A5AD; background:#EAEAEE !important; } :root[data-theme="light"] .cle-ro b { color:#0D0F14; } :root[data-theme="light"] .cle-bar { background:linear-gradient(to bottom, rgba(245,245,247,0), #F5F5F7 45%, #F5F5F7); } /* bouton d'action désactivé (« À jour », « S'inscrire » d'un événement, étapes de la revendication) : un vermillon à demi transparent devient rose sur rose, illisible ; en clair il passe au gris plein */ :root[data-theme="light"] :is(.cle-bar, .evact) .cta[disabled], :root[data-theme="light"] .clp-cbtn[disabled] { opacity:1; color:#6E717B; background:#EAEAEE; filter:none; } /* vignette d'une publication : l'étiquette posée sur la photo en petite pastille vermillon */ :root[data-theme="light"] .cle-photo { background:#EAEAEE; } :root[data-theme="light"] .cle-photo-t { color:#FFFFFF; background:#C8372D; } :root[data-theme="light"] .cle-photo-act button:not([disabled]):hover { color:#FBEFEE; } /* ══ Page « Bientôt » (gk-admin.js : /calendrier et /evenement pour qui n'est pas admin). Une carte blanche coupée ; le sablier passe au vermillon, le titre à l'encre ══ */ :root[data-theme="light"] .v3-soon { isolation:isolate; background:transparent; box-shadow:none; clip-path:none; } :root[data-theme="light"] .v3-soon::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .v3-soon::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .v3-soon > i { color:#C8372D; } :root[data-theme="light"] .v3-soon > b { color:#0D0F14; } :root[data-theme="light"] .v3-soon > p { color:#6E717B; } :root[data-theme="light"] :is(.v3-soon, [data-gk-event]) .gsoon { color:#6E717B; background:#EDEDF1; clip-path:var(--c3); } /* ══ Calendrier (agenda-live.js, vu par l'admin) : en-tête, grille du mois, liste ══ */ :root[data-theme="light"] :is(.calk, .main.mhero .calk) { color:#4A4D57; text-shadow:0 0 10px rgba(245,245,247,.95), 0 0 3px rgba(245,245,247,.85); } /* flèches et « Aujourd'hui » : touches blanches à filet (le fond fait le trait, le ::after le blanc) */ :root[data-theme="light"] .calnav > span.calarr { color:#0D0F14; background:rgba(13,15,20,.14); box-shadow:none; clip-path:var(--c7); } :root[data-theme="light"] .calarr::after { background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] .calnav > span.calarr:hover { color:#0D0F14; background:rgba(13,15,20,.22); } :root[data-theme="light"] .calarr:hover::after { background:#F8F8FA; } /* jours du mois : tuiles blanches coupées sur une ombre légère ; hors du mois, ni tuile ni ombre */ :root[data-theme="light"] .cday { isolation:isolate; background:transparent; box-shadow:none; clip-path:none; } :root[data-theme="light"] .cday::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c8); transition:background .15s; } :root[data-theme="light"] .cday::after { content:''; position:absolute; inset:2px 3px 1px; z-index:-2; pointer-events:none; box-shadow:0 1px 1px rgba(13,15,20,.05), 0 4px 10px rgba(13,15,20,.05); } :root[data-theme="light"] .cday:not(.vide):hover::before { background:#FAFAFB; } :root[data-theme="light"] .cday.vide:hover { background:transparent; } :root[data-theme="light"] .cday .n { color:#0D0F14; } :root[data-theme="light"] .cday.out { opacity:1; } :root[data-theme="light"] .cday.out::before, :root[data-theme="light"] .cday.out::after { display:none; } :root[data-theme="light"] .cday.out .n { color:#6E717B; } /* aujourd'hui : la tuile teintée de vermillon, le numéro en vermillon (le filet or disparaît) */ :root[data-theme="light"] .cday.today { background:transparent; box-shadow:none; } :root[data-theme="light"] .cday.today::before { background:linear-gradient(rgba(200,55,45,.08),rgba(200,55,45,.08)), #FFFFFF; } :root[data-theme="light"] .cday.today .n { color:#C8372D; } @media (max-width:767px) { :root[data-theme="light"] .cday::before { clip-path:var(--c6); } } /* événements dans la case : pastille grise, trait de gauche à la couleur du type (le stage, or en sombre, passe au vermillon ; compétition verte et « autre » bleu ne changent pas) */ :root[data-theme="light"] .cev { color:#0D0F14; background:#F0F0F3; box-shadow:none; border-left-color:rgba(13,15,20,.35); } :root[data-theme="light"] .cev.v { background:rgba(200,55,45,.08); border-left-color:#C8372D; } :root[data-theme="light"] .cmore { color:#6E717B; } :root[data-theme="light"] .dots i.v { background:#C8372D; } :root[data-theme="light"] .dots i.w { background:#6E717B; } /* rangées d'événement : cartes blanches coupées */ :root[data-theme="light"] .evrow { position:relative; isolation:isolate; background:transparent; box-shadow:none; clip-path:none; } :root[data-theme="light"] .evrow::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); transition:background .15s; } :root[data-theme="light"] .evrow::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .evrow:hover { filter:none; } :root[data-theme="light"] .evrow:hover::before { background:#FAFAFB; } :root[data-theme="light"] :is(.evd b, .evt b) { color:#0D0F14; } :root[data-theme="light"] :is(.evd span, .evt span) { color:#6E717B; } /* type : étiquette grise ; le stage (satin or en sombre) en vermillon */ :root[data-theme="light"] body .evtag { color:#4A4D57; background:#EDEDF1; clip-path:var(--c4); } :root[data-theme="light"] body .evtag::before { display:none; } :root[data-theme="light"] body .evtag.v { color:#C8372D; background:rgba(200,55,45,.08); } :root[data-theme="light"] :is(.gk-pf, [data-gk-agenda], [data-gk-event]) .wsep .ln { background:linear-gradient(90deg,transparent,rgba(13,15,20,.16)); } :root[data-theme="light"] :is(.gk-pf, [data-gk-agenda], [data-gk-event]) .wsep .ln.r { background:linear-gradient(270deg,transparent,rgba(13,15,20,.16)); } :root[data-theme="light"] :is(.gk-pf, [data-gk-agenda], [data-gk-event]) .wsep .sfleur { filter:brightness(0); opacity:.28; } :root[data-theme="light"] :is(.gk-pf, [data-gk-agenda], [data-gk-event]) .wsep .sfil { filter:brightness(0); opacity:.5; } :root[data-theme="light"] .agn-toast { color:#FFFFFF; background:#0D0F14; clip-path:var(--c8); } /* ══ Fiche événement (/evenement?id=) : la photo et son voile restent, ce qui est posé dessus passe au blanc ; faits en tuiles blanches, programme et description à l'encre ══ */ :root[data-theme="light"] .evhero { clip-path:var(--c14); } :root[data-theme="light"] .evhero .ov :is(.k, h2) { color:#FFFFFF; } /* v3-agenda : « .evfact div » peint aussi les deux div intérieures (une boîte dans la boîte) : en clair, seule la tuile porte le blanc ; l'ombre suit la coupe par un filtre sur la rangée */ :root[data-theme="light"] .evfact { filter:var(--cl-ombre-f); } :root[data-theme="light"] .evfact > div { background:#FFFFFF; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .evfact > div > div { padding:0; background:none; box-shadow:none; clip-path:none; } :root[data-theme="light"] .evfact .lb { color:#6E717B; } :root[data-theme="light"] .evfact .vl { color:#0D0F14; } /* « Ajouter au calendrier », « Partager » : touches blanches à filet */ :root[data-theme="light"] .evact .wtab { position:relative; isolation:isolate; color:#0D0F14; background:rgba(13,15,20,.14); clip-path:var(--c8); font-weight:600; } :root[data-theme="light"] .evact .wtab::before { content:''; position:absolute; inset:1px; z-index:-1; display:block; pointer-events:none; background:#FFFFFF; clip-path:var(--c8i); } :root[data-theme="light"] .evact .wtab:hover::before { background:#F8F8FA; } :root[data-theme="light"] [data-gk-event] .prow { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] [data-gk-event] .prow .hh { color:#0D0F14; } :root[data-theme="light"] [data-gk-event] .prow .dd { color:#2B2E36; } :root[data-theme="light"] [data-gk-event] .prow .dd em { color:#6E717B; } :root[data-theme="light"] [data-gk-event] .pdot { background:rgba(13,15,20,.28); } :root[data-theme="light"] [data-gk-event] .pdot.v { background:#C8372D; box-shadow:none; } :root[data-theme="light"] [data-gk-event] .gdesc { color:#2B2E36; } /* ══ Communauté : les actus (news-live.js). Cartes blanches coupées, titres à l'encre ; les mots mis en avant dans un titre (« or », « Jeux olympiques »…) sont des accents, pas des réussites de l'utilisateur : vermillon, comme l'étiquette « Résultats » ; les autres étiquettes grises, la compétition en pastille d'encre ══ */ :root[data-theme="light"] .gk-comv3 .gk-news-colh { color:#0D0F14; } :root[data-theme="light"] .gk-comv3 .gk-news-colh em { color:#6E717B; } :root[data-theme="light"] .gk-comv3 .gk-news-colh::after { background:linear-gradient(90deg, rgba(13,15,20,.14), rgba(13,15,20,0)); } :root[data-theme="light"] .gk-comv3 .gk-news-card { position:relative; isolation:isolate; background:transparent; box-shadow:none; clip-path:none; } :root[data-theme="light"] .gk-comv3 .gk-news-card::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); transition:background .15s; } :root[data-theme="light"] .gk-comv3 .gk-news-card::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .gk-comv3 .gk-news-card:hover { filter:none; } :root[data-theme="light"] .gk-comv3 .gk-news-card:hover::before { background:#FAFAFB; } :root[data-theme="light"] .gk-comv3 .gk-news-title em { color:#C8372D; } :root[data-theme="light"] .gk-comv3 .gk-news-res { color:#4A4D57; } :root[data-theme="light"] .gk-comv3 .gk-news-ext { color:#6E717B; } :root[data-theme="light"] .gk-comv3 :is(.gk-news-cat, .gk-news-pays) { color:#4A4D57; background:#EDEDF1; box-shadow:none; clip-path:var(--c4); } :root[data-theme="light"] .gk-comv3 :is(.gk-news-cat, .gk-news-pays)::before { display:none; } :root[data-theme="light"] .gk-comv3 .gk-news-cat.is-res { color:#C8372D; background:rgba(200,55,45,.08); } :root[data-theme="light"] .gk-comv3 .gk-news-cat.is-comp { color:#FFFFFF; background:#0D0F14; } :root[data-theme="light"] .gk-comv3 .gk-news-flag { color:#C8372D; } :root[data-theme="light"] .gk-comv3 .gk-news-dot { background:#C8372D; box-shadow:none; } :root[data-theme="light"] .gk-comv3 .gk-news-empty { border-color:rgba(13,15,20,.14); border-radius:0; } /* ══ Communauté : les publications (communaute.js), lues derrière le mur ou une fois connecté ; les mêmes cartes servent « Tes séances » du profil ══ */ :root[data-theme="light"] .gk-comv3 .gk-rel-sub { color:#4A4D57; opacity:1; } :root[data-theme="light"] :is(.gk-pf, .gk-comv3) .gk-com-card { position:relative; isolation:isolate; background:transparent; border-color:transparent; border-image:none; } :root[data-theme="light"] :is(.gk-pf, .gk-comv3) .gk-com-card::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] :is(.gk-pf, .gk-comv3) .gk-com-card::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } /* profil public d'un membre (communaute.js renderPublicProfile) : carte blanche coupée, sans filet */ :root[data-theme="light"] .gk-com-pcard { position:relative; isolation:isolate; background:transparent; border-color:transparent; border-radius:0; } :root[data-theme="light"] .gk-com-pcard::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .gk-com-pcard::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] :is(.gk-pf, .gk-comv3) :is(.gk-com-img, .gk-com-video, .gk-com-thumbs img) { border-radius:0; clip-path:var(--c10); } :root[data-theme="light"] .gk-com-avatar { border-radius:0; clip-path:var(--c6); } /* « … » d'une publication : trois petits points, à l'ardoise pour qu'ils restent visibles une fois lissés */ :root[data-theme="light"] .gk-com-x { color:#4A4D57; } :root[data-theme="light"] .gk-com-x:hover { color:#0D0F14; } :root[data-theme="light"] .gk-com-act.is--more { color:#4A4D57; } /* publication privée : le pointillé du sombre, rentré dans la carte (la coupe de 12 px le laisse entier) */ :root[data-theme="light"] :is(.gk-pf, .gk-comv3) .gk-com-card.is--private { outline:1px dashed rgba(13,15,20,.2); outline-offset:-8px; } /* champ fichier (signalement d'un bug) : le bouton natif en touche grise coupée */ :root[data-theme="light"] .gk-field input[type=file]::file-selector-button { margin-right:10px; padding:7px 12px; border:0; color:#0D0F14; background:#F0F0F3; font:600 12px Inter, sans-serif; clip-path:var(--c6); cursor:pointer; } :root[data-theme="light"] .gk-com-avatar--ini { color:#FFFFFF; background:#0D0F14; } :root[data-theme="light"] .gk-com-dur { color:#4A4D57; background:#EDEDF1; border-radius:0; clip-path:var(--c4); } :root[data-theme="light"] :is(.gk-com-act.is--liked, .gk-pf .gk-com-act.is--liked i, .gk-comv3 .gk-com-act.is--liked i) { color:#C8372D; } :root[data-theme="light"] .gk-com-comment { background:#F5F5F7; border-color:transparent; border-radius:0; } :root[data-theme="light"] .gk-com-comment.is--corr { border-left-color:#C8372D; } :root[data-theme="light"] .gk-comv3 .gk-com-open-composer { color:#6E717B; background:#FFFFFF; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .gk-com-composer.is--lecture { background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] body .gk-com-composer.is--lecture::before { display:none; } :root[data-theme="light"] .gk-com-composer.is--lecture i { color:#C8372D; } :root[data-theme="light"] .gk-com-composer.is--lecture span { color:#4A4D57; } :root[data-theme="light"] .gk-com-stores { color:#FFFFFF; background:#C8372D; clip-path:var(--c7); } :root[data-theme="light"] .gk-com-teaser { border-color:rgba(13,15,20,.14); border-radius:0; } :root[data-theme="light"] .gk-com-menu { background:#FFFFFF; box-shadow:0 2px 4px rgba(13,15,20,.06), 0 16px 34px rgba(13,15,20,.14); } :root[data-theme="light"] .gk-com-menu button { color:#0D0F14; } :root[data-theme="light"] .gk-com-menu button:hover { background:#F5F5F7; } :root[data-theme="light"] .gk-com-menu button.is--danger { color:#C8372D; } /* l'échantillon posé sous le voile pour un visiteur (gk-mur.js) : des formes grises, pas de satin */ :root[data-theme="light"] :is(.gkm-ech-av, .gkm-ech-l, .gkm-ech-pills i) { background:#EAEAEE; } :root[data-theme="light"] .gkm-ech-av { border-radius:0; clip-path:var(--c6); } :root[data-theme="light"] .gkm-ech-pills i { clip-path:var(--c7); } :root[data-theme="light"] .gkm-ech-media { background:linear-gradient(135deg, #E4E4E8, #F5F5F7); clip-path:var(--c10); } /* ══ Profil sans compte (communaute.js, profil-cote.js, training-live.js) ══ */ :root[data-theme="light"] .gk-pf .pf-teaser p { color:#4A4D57; } :root[data-theme="light"] :is(.gk-pf, .gk-comv3) .gk-fl-go.is--ghost { position:relative; isolation:isolate; border:0; border-radius:0; color:#0D0F14; background:rgba(13,15,20,.14); clip-path:var(--c8); } :root[data-theme="light"] :is(.gk-pf, .gk-comv3) .gk-fl-go.is--ghost::before { content:''; position:absolute; inset:1px; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c8i); } :root[data-theme="light"] :is(.gk-pf, .gk-comv3) .gk-fl-go.is--ghost:not([disabled]):hover { background:rgba(13,15,20,.22); } :root[data-theme="light"] :is(.gk-pf, .gk-comv3) .gk-fl-go:not(.is--ghost) { color:#FFFFFF; background:#C8372D; border:0; border-radius:0; clip-path:var(--c8); } /* cartes de côté (Mon grade, Mes poomsae, Activité) : blanc coupé, l'ombre dans le ::after de .gkco */ :root[data-theme="light"] .gk-pf .pfs-card { position:relative; isolation:isolate; background:transparent; border-color:transparent; border-image:none; } :root[data-theme="light"] .gk-pf .pfs-card::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .gk-pf .pfs-card.gkco::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; opacity:1; pointer-events:none; background:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .gk-pf .pfs-vide { color:#6E717B; } :root[data-theme="light"] .gk-pf .pfs-cta { color:#FFFFFF; background:#C8372D; clip-path:var(--c8); } :root[data-theme="light"] .gk-pf .pfs-cta:hover { filter:brightness(.94); } :root[data-theme="light"] .gk-pf .pfs-gtx b { color:#0D0F14; } :root[data-theme="light"] .gk-pf .pfs-gtx span { color:#6E717B; } :root[data-theme="light"] .gk-pf .pfs-next { color:#0D0F14; background:#F5F5F7; box-shadow:none; clip-path:var(--c8); } :root[data-theme="light"] .gk-pf .pfs-next:hover { color:#0D0F14; background:#EDEDF1; } :root[data-theme="light"] .gk-pf .pfs-next i { color:#C8372D; } :root[data-theme="light"] .gk-pf .pfs-rep { background:#F5F5F7; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .gk-pf .pfs-rep .lb { color:#6E717B; } :root[data-theme="light"] .gk-pf .pfs-rep b { color:#0D0F14; } :root[data-theme="light"] .gk-pf .pfs-rep i { color:#C8372D; } :root[data-theme="light"] .gk-pf .pfs-favs a { color:#0D0F14; background:#F0F0F3; box-shadow:none; clip-path:var(--c7); } :root[data-theme="light"] .gk-pf .pfs-favs a:hover { color:#FFFFFF; background:#0D0F14; } :root[data-theme="light"] .gk-pf .pfs-kpis b { color:#0D0F14; } :root[data-theme="light"] .gk-pf .pfs-kpis span { color:#6E717B; } /* ══ Profil d'un compte connecté (communaute.js, v3-social.css) : l'hexagone nuit de l'avatar devient une tuile blanche coupée sur ombre douce, initiales à l'encre (comme l'écusson d'un club) ; les chiffres à l'encre ══ */ :root[data-theme="light"] .pf-ava { isolation:isolate; background:transparent; clip-path:none; } :root[data-theme="light"] .pf-ava::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c14); } :root[data-theme="light"] .pf-ava::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .pf-ava img { clip-path:polygon(12.83px 0,calc(100% - 12.83px) 0,100% 12.83px,100% calc(100% - 12.83px),calc(100% - 12.83px) 100%,12.83px 100%,0 calc(100% - 12.83px),0 12.83px); } :root[data-theme="light"] .pf-ava .ini { color:#0D0F14; background:transparent; clip-path:none; } /* médaillon de « Mon grade » (gk-medaillon.js), comme celui de la barre latérale (00-socle) : le cadre or passe au vermillon, les barrettes à l'encre, la pierre garde sa couleur ; le médaillon de dan (onyx) garde son or */ :root[data-theme="light"] .gk-pf .pfs-grade .gkmed:not(:has(stop[stop-color="#3A4152"])) > polygon:first-of-type { fill:#C8372D; } :root[data-theme="light"] .gk-pf .pfs-grade .gkmed:not(:has(stop[stop-color="#3A4152"])) g > rect[fill^="url(#gkmf"] { fill:#0D0F14; } /* ceinture et club sous le nom, posés sur la photo d'en-tête : ardoise sur halo perle (comme le fil d'Ariane) */ :root[data-theme="light"] .pf-belt { color:#4A4D57; text-shadow:0 0 10px rgba(245,245,247,.95), 0 0 3px rgba(245,245,247,.85); } :root[data-theme="light"] .pf-stat b { color:#0D0F14; } :root[data-theme="light"] .pf-stat span { color:#6E717B; } /* casquette d'hôte de club (club-hote.js) : touche blanche à filet ; portée (club) : filet et texte vermillon ; le compteur en pastille vermillon ; le menu en panneau blanc */ :root[data-theme="light"] .clh-casq { position:relative; isolation:isolate; color:#0D0F14; background:rgba(13,15,20,.14); box-shadow:none; clip-path:var(--c8); } :root[data-theme="light"] .clh-casq::before { content:''; position:absolute; inset:1px; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c8i); } :root[data-theme="light"] .clh-casq:hover { background:rgba(13,15,20,.22); } :root[data-theme="light"] .clh-casq:hover::before { background:#F8F8FA; } :root[data-theme="light"] .clh-casq.is--on { color:#C8372D; background:#C8372D; box-shadow:none; } :root[data-theme="light"] .clh-casq.is--on::before { background:#FBEFEE; } :root[data-theme="light"] .clh-casq > i:first-child { color:#C8372D; } :root[data-theme="light"] .clh-casq > i:last-child { color:#6E717B; } :root[data-theme="light"] .clh-casq-n { color:#FFFFFF; background:#C8372D; clip-path:var(--c4); } :root[data-theme="light"] .clh-sel { background:#FFFFFF; box-shadow:0 2px 4px rgba(13,15,20,.06), 0 16px 34px rgba(13,15,20,.14); } :root[data-theme="light"] .clh-sel-r { color:#0D0F14; } :root[data-theme="light"] .clh-sel-r:hover { background:#F5F5F7; } :root[data-theme="light"] .clh-sel-r.is--on { color:#C8372D; box-shadow:inset 2px 0 0 #C8372D; } :root[data-theme="light"] .clh-sel-r > i { color:#4A4D57; } :root[data-theme="light"] .clh-sel-r > small { color:#6E717B; } /* trophées : tuiles blanches coupées ; verrouillées sur gris, sans voile d'opacité (le texte resterait illisible) ; progression en vermillon. 05/10 : le médaillon est celui de l'app (js/gk-medaillon.js). Obtenu ou en cours, il est le même dans les deux thèmes (cœur nuit, décision du 27/09 dans l'app) ; verrouillé, le clair montre la case vide au cadenas d'encre, sur le gris de sa tuile. */ :root[data-theme="light"] .tphy { opacity:1; background:#FFFFFF; clip-path:var(--c10); } :root[data-theme="light"] .tphy:not(.is--earned):not(.is--progress) { background:#EDEDF1; } :root[data-theme="light"] .tphy b { color:#0D0F14; } :root[data-theme="light"] .tphy:not(.is--earned):not(.is--progress) b { color:#6E717B; } :root[data-theme="light"] .gkt > span.gkt-sombre { display:none; } :root[data-theme="light"] .gkt > span.gkt-clair { display:inline-flex; } :root[data-theme="light"] .tphy { --gkt-vide:#EDEDF1; } :root[data-theme="light"] .tphy-sub { color:#6E717B; } :root[data-theme="light"] .tphy-sub.is--claim { color:#4A4D57; } :root[data-theme="light"] .tphy-sub.is--rejected { color:#C8372D; } :root[data-theme="light"] .tphy-bar { background:rgba(13,15,20,.1); } :root[data-theme="light"] .tphy-bar i { background:#C8372D; } :root[data-theme="light"] .tphy-total { color:#0D0F14; } :root[data-theme="light"] .tphy-invite { color:#6E717B; } /* favoris : tuiles blanches coupées sur ombre (filtre sur la grille, qui ne contient qu'elles) ; vidéos enregistrées : l'image d'attente nuit et or devient perle et vermillon */ :root[data-theme="light"] .gk-prof-grid { filter:var(--cl-ombre-f); } :root[data-theme="light"] .gk-prof-fav { background:#FFFFFF; border:0; border-radius:0; clip-path:var(--c10); color:#0D0F14; } :root[data-theme="light"] .gk-prof-fav:hover { background:#FAFAFB; } :root[data-theme="light"] .gk-prof-fav-img { clip-path:var(--c6); } :root[data-theme="light"] .gk-prof-fav-img.is--ic { color:#4A4D57; background:#F0F0F3; } :root[data-theme="light"] .gk-prof-fav-tx b { color:#0D0F14; } :root[data-theme="light"] .gk-saved-thumb { border:0; border-radius:0; clip-path:var(--c10); background-color:#EAEAEE; } /* vidéo enregistrée sans vignette : la même lecture que partout ailleurs (pastille vermillon coupée, flèche blanche) */ :root[data-theme="light"] .gk-saved-thumb[style*="video-placeholder"] { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 360'%3E%3Crect width='640' height='360' fill='%23EAEAEE'/%3E%3Cpath d='M290 134H350L366 150V210L350 226H290L274 210V150Z' fill='%23C8372D'/%3E%3Cpath d='M309 161v38l32-19z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important; } :root[data-theme="light"] .gk-saved-t { color:#0D0F14; } /* éditeur de profil : puces de genre et de ceinture grises, la choisie en encre pleine (la pastille de couleur de la ceinture ne change pas) ; mention et erreur plus en or */ :root[data-theme="light"] .gk-pf .gk-belt-opt { color:#0D0F14; background:#F0F0F3; box-shadow:none; clip-path:var(--c7); } :root[data-theme="light"] .gk-pf .gk-belt-opt:hover { background:#EAEAEE; } :root[data-theme="light"] .gk-pf .gk-belt-opt.is--on { color:#FFFFFF; background:#0D0F14; box-shadow:none; } :root[data-theme="light"] .gk-pf .gk-belt-opt.is--on .gk-belt-note { color:rgba(255,255,255,.7); } :root[data-theme="light"] .gk-belt-note { color:#6E717B; } :root[data-theme="light"] .pf-edit-lab { color:#6E717B; } :root[data-theme="light"] .pf-edit-err { color:#C8372D; } :root[data-theme="light"] .pf-edit .gk-field select { background-image:linear-gradient(45deg, transparent 50%, #4A4D57 50%), linear-gradient(135deg, #4A4D57 50%, transparent 50%) !important; background-position:calc(100% - 16px) 17px, calc(100% - 11px) 17px !important; background-size:5px 5px, 5px 5px !important; background-repeat:no-repeat !important; } :root[data-theme="light"] .pf-edit .gk-field select option { color:#0D0F14; background:#FFFFFF; } /* ══ Boutons du compte (.pf-btn : profil, confirmations, modales de club). Le satin devient le vermillon plein ; le bouton simple est blanc à filet, en deux couches ══ */ :root[data-theme="light"] .pf-btn { color:#0D0F14; background:rgba(13,15,20,.14); clip-path:var(--c8); } :root[data-theme="light"] body .pf-btn::before { inset:1px; background:#FFFFFF; clip-path:var(--c8i); } :root[data-theme="light"] .pf-btn:hover { box-shadow:none; } :root[data-theme="light"] body .pf-btn:hover::before { background:#F8F8FA; } :root[data-theme="light"] .pf-btn.gold, :root[data-theme="light"] .pf-btn.is--danger { color:#FFFFFF; background:#C8372D; font:700 12.5px Inter, sans-serif; letter-spacing:.02em; } :root[data-theme="light"] body :is(.pf-btn.gold, .pf-btn.is--danger)::before { display:none; } :root[data-theme="light"] :is(.pf-btn.gold, .pf-btn.is--danger):hover { filter:brightness(.94); } /* ══ Paramètres et profil sans compte : la carte de connexion ══ */ :root[data-theme="light"] .gk-prof-card.gk-prof-signin { position:relative; isolation:isolate; background:transparent; } :root[data-theme="light"] .gk-prof-card.gk-prof-signin::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .gk-prof-card.gk-prof-signin::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .gk-prof-signin .gk-prof-avatar--ghost { background:#F0F0F3; color:#6E717B; border-radius:0; clip-path:var(--c10); } :root[data-theme="light"] .gk-prof-signin .gk-prof-name { font-style:italic; font-weight:700; color:#0D0F14; } :root[data-theme="light"] .gk-prof-btn { border:0; border-radius:0; background:#F0F0F3; color:#0D0F14; box-shadow:none; clip-path:var(--c8); } :root[data-theme="light"] .gk-prof-btn:hover { background:#EAEAEE; } :root[data-theme="light"] .gk-prof-btn.is--primary, :root[data-theme="light"] .gk-prof-btn.is--primary:hover { background:#C8372D; color:#FFFFFF; } :root[data-theme="light"] .gk-prof-btn.is--primary:hover { filter:brightness(.94); } :root[data-theme="light"] .gk-prof-btn.is--danger { color:#C8372D; } /* ══ Paramètres d'un compte connecté (tkd-account.js renderSettings, v3-social.css) : la carte d'identité et chaque groupe de rangées en cartes blanches coupées, rangées à filet fin, libellés à l'encre ; interrupteurs en pastilles (ON en vermillon, OFF en gris), la suppression en vermillon ══ */ :root[data-theme="light"] :is(.set-card, .set-rows) { position:relative; isolation:isolate; background:transparent; box-shadow:none; } :root[data-theme="light"] .set-rows { padding:2px 18px; } :root[data-theme="light"] .set-rows + .set-rows { margin-top:12px; } :root[data-theme="light"] .set-card::before, :root[data-theme="light"] .set-rows::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .set-card::after, :root[data-theme="light"] .set-rows::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .set-card .gk-prof-name { color:#0D0F14; } :root[data-theme="light"] .set-card .gk-prof-mail { color:#6E717B; } /* avatar à initiales, posé dans la carte blanche : tuile grise coupée, initiales à l'encre */ :root[data-theme="light"] .gk-prof-avatar:not(.gk-prof-avatar--ghost) { color:#0D0F14; background:#F0F0F3; border-radius:0; clip-path:var(--c10); } :root[data-theme="light"] .set-row { color:#0D0F14; border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] .set-row .k { color:#0D0F14; } :root[data-theme="light"] :is(.set-row .k small, .set-row.is--club .k small, .set-row b, .set-row i) { color:#6E717B; } :root[data-theme="light"] .set-row.is--go:hover { color:#0D0F14; } :root[data-theme="light"] .set-row.is--go:hover i { color:#C8372D; } :root[data-theme="light"] :is(.set-row.is--danger .k, .set-row.is--danger i) { color:#C8372D; } /* listes déroulantes : glass-site.css pose fond, bordure et couleur de TOUS les champs en !important */ :root[data-theme="light"] .set-sel { color:#0D0F14 !important; border:0 !important; box-shadow:none; clip-path:var(--c6); background-color:#F0F0F3 !important; background-image:linear-gradient(45deg, transparent 50%, #4A4D57 50%), linear-gradient(135deg, #4A4D57 50%, transparent 50%) !important; background-position:calc(100% - 15px) 14px, calc(100% - 10px) 14px !important; background-size:5px 5px, 5px 5px !important; background-repeat:no-repeat !important; } :root[data-theme="light"] .set-sel option { color:#0D0F14; background:#FFFFFF; } :root[data-theme="light"] .set-pill { color:#6E717B; background:#EDEDF1; clip-path:var(--c3); } :root[data-theme="light"] .set-pill.is--on { color:#FFFFFF; background:#C8372D; } :root[data-theme="light"] .set-club-b { color:#0D0F14; background:#F0F0F3; box-shadow:none; clip-path:var(--c7); } :root[data-theme="light"] .set-club-b:hover { color:#0D0F14; background:#EAEAEE; box-shadow:none; } :root[data-theme="light"] .set-ver { color:#6E717B; } /* ══ Boîtes de dialogue (.gk-modal : connexion, confirmation gk-dialog.js, contact et revendication d'un club, signalement). Voile d'encre, carte blanche coupée à 14 px (elle défile : pas d'ombre, le voile la détache) ══ */ :root[data-theme="light"] :is(.gk-modal-backdrop, .gk-drawer-backdrop) { background:rgba(13,15,20,.36); } :root[data-theme="light"] .gk-modal-card { background:#FFFFFF; color:#0D0F14; border:0; border-radius:0; box-shadow:none; clip-path:var(--c14); -webkit-backdrop-filter:none; backdrop-filter:none; } :root[data-theme="light"] .gk-modal-title { font-style:italic; font-weight:700; color:#0D0F14; } :root[data-theme="light"] :is(.gk-modal-x, .gk-drawer-x) { color:#4A4D57; background:#F0F0F3; border:0; border-radius:0; clip-path:var(--c7); } :root[data-theme="light"] :is(.gk-modal-x, .gk-drawer-x):hover { color:#0D0F14; background:#EAEAEE; } :root[data-theme="light"] :is(.gk-modal-pitch, .gk-confirm-msg, .clp-msub, .clp-expl) { color:#4A4D57; } :root[data-theme="light"] .clp-claim-club { color:#0D0F14; } /* « pourquoi un compte » (gk-mur.js poserRaison), glissée dans la modale quand on l'ouvre depuis un contenu verrouillé, sur toutes les pages : blanc sur beige doré en sombre, ardoise sur perle ici, cadenas vermillon */ :root[data-theme="light"] .gkm-raison { color:#4A4D57; background:#F5F5F7; box-shadow:none; clip-path:var(--c6); } :root[data-theme="light"] .gkm-raison i { color:#C8372D; } /* Connexion / Inscription : contrôle segmenté */ :root[data-theme="light"] .gk-modal-tabs { height:auto; padding:2px; gap:2px; background:#EAEAEE; clip-path:var(--c8); } :root[data-theme="light"] .gk-modal-tabs::after { display:none; } :root[data-theme="light"] .gk-modal-tab { height:40px; color:#6E717B; background:transparent; clip-path:var(--c6); } :root[data-theme="light"] .gk-modal-tab:hover { color:#0D0F14; background:transparent; } :root[data-theme="light"] :is(.gk-modal-tab.is--active, .gk-modal-tab.is--active:hover) { color:#0D0F14; background:#FFFFFF; font:600 12.5px/1 Inter, sans-serif; letter-spacing:.02em; } /* Google, Apple : blancs à filet */ :root[data-theme="light"] .gk-prov { color:#0D0F14; background:rgba(13,15,20,.14); clip-path:var(--c8); } :root[data-theme="light"] .gk-prov::before { inset:1px; background:#FFFFFF; clip-path:var(--c8i); } :root[data-theme="light"] .gk-prov:hover { background-color:rgba(13,15,20,.22); } :root[data-theme="light"] .gk-prov:hover::before { background:#F8F8FA; } :root[data-theme="light"] .gk-modal-or { color:#6E717B; } :root[data-theme="light"] .gk-modal-or::before, :root[data-theme="light"] .gk-modal-or::after { background:rgba(13,15,20,.08); } /* champs : pleins en gris, coupés ; au focus blancs, trait vermillon dessous. glass-site.css pose fond et bordure de TOUS les champs en !important, d'où les !important ici. */ :root[data-theme="light"] .gk-field > span { color:#6E717B; } :root[data-theme="light"] .gk-field :is(input, textarea, select) { color:#0D0F14; background-color:#EAEAEE !important; border:0 !important; border-radius:0; box-shadow:none; clip-path:var(--c6); } :root[data-theme="light"] .gk-field :is(input, textarea, select):focus { background-color:#FFFFFF !important; box-shadow:inset 0 -2px 0 #C8372D; } :root[data-theme="light"] .gk-field input::placeholder { color:#A2A5AD; } :root[data-theme="light"] .gk-field-hint { color:#6E717B; } :root[data-theme="light"] .gk-modal-error { color:#C8372D; background:rgba(200,55,45,.08); border:0; border-radius:0; clip-path:var(--c6); } /* message de confirmation (lien de réinitialisation envoyé…) : ni erreur ni réussite, à l'encre sur perle */ :root[data-theme="light"] .gk-modal-error.is--ok { color:#2B2E36; background:#EDEDF1; } :root[data-theme="light"] .gk-modal-submit, :root[data-theme="light"] .gk-modal-submit:not([disabled]):hover { color:#FFFFFF; background:#C8372D; font:700 14px/1 Inter, sans-serif; letter-spacing:.02em; clip-path:var(--c8); } :root[data-theme="light"] .gk-modal-submit::before { display:none; } :root[data-theme="light"] .gk-modal-submit:not([disabled]):hover { filter:brightness(.94); } :root[data-theme="light"] .gk-modal-legal { color:#6E717B; } :root[data-theme="light"] .gk-modal-legal a { color:#4A4D57; } :root[data-theme="light"] .gk-modal-legal a:hover { color:#C8372D; } /* bandeau de confirmation (gkUI.toast) : pastille d'encre */ :root[data-theme="light"] .gk-toast { color:#FFFFFF; background:#0D0F14; clip-path:var(--c8); } /* ══ Cloche : le tiroir des notifications (gk-notify.js). Panneau blanc, ombre portée à gauche ; ses cartes intérieures restent à plat, en perle ══ */ :root[data-theme="light"] .gk-drawer-panel { background-color:#FFFFFF; border-left:0; box-shadow:-1px 0 0 rgba(13,15,20,.06), -18px 0 40px rgba(13,15,20,.12); -webkit-backdrop-filter:none; backdrop-filter:none; } :root[data-theme="light"] .gk-drawer-head h3 { font-style:italic; font-weight:700; color:#0D0F14; } :root[data-theme="light"] :is(.gk-ntf-badge, .gk-ntf-dot) { color:#FFFFFF; background:#C8372D; box-shadow:none; border-radius:0; clip-path:var(--c4); } :root[data-theme="light"] :is(.gk-ntf-chat-row, .gk-ntf-reply) { background:#F5F5F7; border:0; border-radius:0; clip-path:var(--c10); } :root[data-theme="light"] .gk-ntf-chat-row:hover { background:#EDEDF1; } :root[data-theme="light"] .gk-ntf-reply.is--new { box-shadow:inset 2px 0 0 #C8372D; } :root[data-theme="light"] .gk-ntf-avatar { border-radius:0; clip-path:var(--c8); } :root[data-theme="light"] .gk-ntf-bug-btn { color:#0D0F14; background:#F0F0F3; border:0; border-radius:0; clip-path:var(--c8); } :root[data-theme="light"] .gk-ntf-bug-btn:hover { background:#EAEAEE; } /* conversation et signalement */ :root[data-theme="light"] .gk-chat-bubble { border:0; border-radius:0; clip-path:var(--c8); } :root[data-theme="light"] .gk-chat-msg.is--user .gk-chat-bubble { color:#FFFFFF; background:#0D0F14; border:0; } :root[data-theme="light"] .gk-chat-msg.is--admin .gk-chat-bubble { color:#0D0F14; background:#F0F0F3; border:0; } /* glass-site.css habille TOUS les champs à (0,3,1) en !important : « body input » passe devant */ :root[data-theme="light"] body input.gk-chat-input, :root[data-theme="light"] body textarea.gk-chat-input { color:#0D0F14 !important; background-color:#EAEAEE !important; border:0 !important; border-radius:0 !important; clip-path:var(--c6); } :root[data-theme="light"] body :is(input, textarea).gk-chat-input:focus { background-color:#FFFFFF !important; box-shadow:inset 0 -2px 0 #C8372D; } :root[data-theme="light"] .gk-chat-send { color:#FFFFFF; background:#C8372D; border-radius:0; clip-path:var(--c7); } :root[data-theme="light"] .gk-bug-chip { color:#4A4D57; background:#EDEDF1; border:0; border-radius:0; clip-path:var(--c7); } :root[data-theme="light"] .gk-bug-chip:hover { color:#0D0F14; background:#E4E4E8; } :root[data-theme="light"] .gk-bug-chip.is--on { color:#FFFFFF; background:#0D0F14; } :root[data-theme="light"] .gk-bug-shot img { border-radius:0; border:0; clip-path:var(--c6); } /* rangées de club (invitations, demandes : v3-club-notif.css) */ :root[data-theme="light"] .gk-ntf-club { background:#F5F5F7; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .gk-ntf-plq { color:#0D0F14; background:#FFFFFF; box-shadow:none; clip-path:var(--c8); } :root[data-theme="light"] .gk-ntf-plq i { color:#4A4D57; } /* invitation d'un club : ce n'est pas une réussite, la plaque passe au vermillon */ :root[data-theme="light"] .gk-ntf-plq.is--gold { background:rgba(200,55,45,.08); box-shadow:none; } :root[data-theme="light"] .gk-ntf-plq.is--gold i { color:#C8372D; } :root[data-theme="light"] .gk-ntf-club-tx b { color:#0D0F14; } :root[data-theme="light"] :is(.gk-ntf-club-tx small, .gk-ntf-hint, .gk-ntf-etat) { color:#6E717B; } /* les boutons d'une demande d'abonnement n'ont aucun style dans le sombre (boutons du système) : en clair, ils prennent ceux de l'invitation de club juste au-dessus */ :root[data-theme="light"] .gk-ntf-club-act { display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; } :root[data-theme="light"] .gk-ntf-no { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer; font-size:16px; } :root[data-theme="light"] .gk-ntf-yes { height:30px; padding:0 14px; border:0; cursor:pointer; font:600 11px Inter, sans-serif; letter-spacing:.9px; text-transform:uppercase; } :root[data-theme="light"] :is(.gk-ntf-cx, .gk-ntf-no) { color:#6E717B; } :root[data-theme="light"] :is(.gk-ntf-cx, .gk-ntf-no):hover { color:#0D0F14; } :root[data-theme="light"] :is(.gk-ntf-cok, .gk-ntf-cok:hover, .gk-ntf-cta.is--plein, .gk-ntf-yes) { color:#FFFFFF; background:#C8372D; clip-path:var(--c7); } :root[data-theme="light"] .gk-ntf-cok::before, :root[data-theme="light"] .gk-ntf-yes::before { display:none; } :root[data-theme="light"] .gk-ntf-cta { font-style:normal; font-family:Inter, sans-serif; font-weight:700; clip-path:var(--c7); } :root[data-theme="light"] .gk-ntf-cta.is--ghost { color:#0D0F14; background:#F0F0F3; box-shadow:none; } :root[data-theme="light"] .gk-ntf-cta.is--ghost:hover { background:#EAEAEE; } /* ══ Mur mobile (.gkmob-mur, styles en ligne de gk-mobile.js) : la page perle et son décor peint, les stores en boutons blancs à filet, le compte en lien vermillon. Le logo suit celui de la barre latérale (00-socle) : plaque blanche, cadre et emblème à l'encre, ombre douce qui suit l'hexagone ══ */ :root[data-theme="light"] .gkmob-mur { color:#0D0F14; background:#F5F5F7 var(--cl-decor, url(/images/clarte/decor-contenu.jpg)) no-repeat 62% 0 / auto 260px; } :root[data-theme="light"] .gkmob-mur .lg svg { overflow:visible; filter:var(--cl-ombre-touche); } :root[data-theme="light"] .gkmob-mur .lg polygon { fill:#FFFFFF; stroke:#0D0F14; stroke-width:1.5; } :root[data-theme="light"] .gkmob-mur .lg path { fill:#0D0F14; } :root[data-theme="light"] .gkmob-mur h2 { color:#0D0F14; } :root[data-theme="light"] .gkmob-mur p { color:#4A4D57; } :root[data-theme="light"] .gkmob-mur .st a { color:#0D0F14; background:rgba(13,15,20,.14); clip-path:var(--c8); } :root[data-theme="light"] .gkmob-mur .st a::before { background:#FFFFFF; clip-path:var(--c8i); } :root[data-theme="light"] .gkmob-mur .ac { color:#C8372D; text-decoration-color:rgba(200,55,45,.45); } :root[data-theme="light"] .gkmob-mur .rt { color:#6E717B; } /* gk-mobile.js pose aussi, sous 720 px et hors de l'app, un tiroir de navigation nuit en !important (fond #0B0E1A, liens blancs) : on rend au tiroir le blanc de clarte.css */ @media (max-width:720px) { :root[data-theme="light"] .sb { background:#FFFFFF !important; border-right:0 !important; } :root[data-theme="light"] .sb a.sit { color:#4A4D57 !important; } :root[data-theme="light"] .sb a.sit:hover { color:#0D0F14 !important; } :root[data-theme="light"] .sb a.sit.on { color:#C8372D !important; } } /* ══ Bandeau des cookies (#gk-consent, styles en ligne de gk-consent.js). Panneau blanc : il défile, donc sa coupe est peinte par quatre dégradés et son ombre suit la coupe par un filtre sur lui-même. Accepter et Refuser gardent EXACTEMENT le même poids (exigence légale) : tous deux en vermillon plein ; Personnaliser et Enregistrer en gris. Le focus se dessine en dedans (la coupe rognerait un contour extérieur). ══ */ :root[data-theme="light"] #gk-consent { color:#2B2E36; } :root[data-theme="light"] #gk-consent section { border:0; box-shadow:none; color:#2B2E36; font-family:Inter, system-ui, sans-serif; background:linear-gradient(135deg, transparent 8.48px, #FFFFFF 8.5px) left top / 51% 51% no-repeat, linear-gradient(225deg, transparent 8.48px, #FFFFFF 8.5px) right top / 51% 51% no-repeat, linear-gradient(315deg, transparent 8.48px, #FFFFFF 8.5px) right bottom / 51% 51% no-repeat, linear-gradient(45deg, transparent 8.48px, #FFFFFF 8.5px) left bottom / 51% 51% no-repeat; filter:drop-shadow(0 2px 4px rgba(13,15,20,.08)) drop-shadow(0 16px 34px rgba(13,15,20,.16)); } :root[data-theme="light"] #gk-consent section:focus { outline:none; } /* le panneau prend le focus à l'ouverture : pas de cadre */ :root[data-theme="light"] #gk-consent h2 { color:#0D0F14; font:italic 700 22px/1.2 'GT Sectra Display', Georgia, serif; } :root[data-theme="light"] #gk-consent p { color:#4A4D57; } :root[data-theme="light"] #gk-consent button { color:#0D0F14; background:#F0F0F3; border:0; font-family:Inter, system-ui, sans-serif; clip-path:var(--c8); } :root[data-theme="light"] #gk-consent button:hover { background:#EAEAEE; } :root[data-theme="light"] #gk-consent .choice, :root[data-theme="light"] #gk-consent .choice:hover { color:#FFFFFF; background:#C8372D; } :root[data-theme="light"] #gk-consent .choice:hover { filter:brightness(.94); } :root[data-theme="light"] #gk-consent button:focus-visible { outline:2px solid #0D0F14; outline-offset:-5px; } :root[data-theme="light"] #gk-consent .choice:focus-visible { outline-color:#FFFFFF; } :root[data-theme="light"] #gk-consent :is(a, input):focus-visible { outline:2px solid #0D0F14; outline-offset:3px; } :root[data-theme="light"] #gk-consent a { color:#C8372D; } :root[data-theme="light"] #gk-consent input { accent-color:#C8372D; } :root[data-theme="light"] #gk-consent .details { border-top-color:rgba(13,15,20,.08); } /* ══ Clarté biseautée : fragment « articles » (fusionné à la fin de css/clarte.css) ══════════════ Les six articles éditoriaux : /prejuges et /poomsae/comprendre (.gk-art), /decouvrir (.gk-dkv3), /parcours (.v3pc), puis /recuperation et /souplesse (.gk-recup-e, la mise en scène « E »). Lecture longue : fond perle uni, corps de texte #2B2E36, titres GT Sectra à l'encre, encadrés en cartes blanches coupées, le vermillon pour les liens et l'actif. Ne changent pas : les photos et ce qui est posé dessus (héros, cartons de chapitre, bandeau d'appel), les planches 3D sur fond nuit, les pierres de ceinture. Le gabarit .gk-dk-* n'existe que sur ces six pages. Petits textes secondaires : #686B75 et non le #6E717B de la palette, qui fait 4,47:1 sur le perle (sous le seuil de 4,5 des petits textes) ; l'écart ne se voit pas. ═════════════════════════════════════════════════════════════════════════════════════════════════ */ /* ══ Fond : perle uni sous le texte long ══ Le décor peint et les deux halos de .gk-scene sont fixés à l'écran (c'est le BODY qui défile) : pendant la lecture, ils passaient derrière chaque paragraphe. */ :root[data-theme="light"]:has(.content.gk-dkv3, .content.v3pc) { background-image:none; } :root[data-theme="light"]:has(.content.gk-dkv3, .content.v3pc) .gk-scene { display:none; } /* ══ Gabarit des articles (.gk-dk-*) : les textes ══ */ :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-p { color:#2B2E36; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-p :is(b, strong) { color:#0D0F14; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-lead { color:#4A4D57; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-hero { color:#0D0F14; text-shadow:0 1px 24px rgba(245,245,247,.95), 0 0 3px rgba(245,245,247,.7); } :root[data-theme="light"] .content.v3pc .v3pc-kk { color:#4A4D57; text-shadow:none; } /* surtitres : Inter 600 en capitales, gris */ :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-eyebrow, .gk-dk-card-ko, .gk-dk-quote-ko, .gk-dk-road-head) { color:#686B75; letter-spacing:.14em; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-sub, .gk-dk-note-t, .gk-dk-card-t, .gk-dk-arrow) { color:#0D0F14; } :root[data-theme="light"] .content.v3pc .gk-dk-card-t { color:#686B75; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-card-b, .gk-dk-note-b) { color:#2B2E36; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-sources, .gk-dk-finenote, .gk-dk-road-note) { color:#686B75; } /* ══ Encadrés (.gk-dk-card, .gk-dk-note, .ar-card) : carte blanche coupée à 12 px, ombre douce. Le blanc est un ::before coupé, l'ombre un ::after qui ne l'est pas. ══ */ :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-card, .gk-dk-note) { position:relative; isolation:isolate; background:transparent; border:0; border-radius:0; box-shadow:none !important; clip-path:none; -webkit-backdrop-filter:none; backdrop-filter:none; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-card, .gk-dk-note)::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-card, .gk-dk-note)::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; background:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .content.v3pc .gk-dk-note { color:#4A4D57; } /* ══ Chiffres clés, tuiles 태 권 도, trigrammes : tuiles blanches coupées à 10 px, l'ombre portée par la grille (elle ne contient que des tuiles) ══ */ :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-stats, .dk-name3, .gk-dk-trigrid) { filter:var(--cl-ombre-f); } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-stat, .dk-name3-tile, .gk-dk-tri) { background:#FFFFFF; border:0; border-radius:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; clip-path:var(--c10); } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-stat-n, .dk-name3-tile b, .dk-name3-tile .r, .gk-dk-tri-sym, .gk-dk-tri-ko) { color:#0D0F14; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-stat-l, .dk-name3-tile .m, .gk-dk-tri-el, .gk-dk-tri-pm) { color:#686B75; } /* ══ Découvrir : couleurs de ceinture, kwans, maîtres, frise, préceptes, serment, glossaire ══ */ /* la pastille garde la couleur de sa ceinture ; le rond devient un carré coupé, cerné d'un filet */ :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-belt-dot { border:0; border-radius:0; clip-path:var(--c3); box-shadow:inset 0 0 0 1px rgba(13,15,20,.16); } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-belt-name, .gk-dk-kwan-hangul, .gk-dk-kwan-name, .gk-dk-founder-name, .gk-dk-tenet-t, .gk-dk-glo-ko, .gk-dk-glo-r) { color:#0D0F14; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-belt-meaning, .gk-dk-kwan-founder, .gk-dk-founder-sub, .gk-dk-tenet-ko, .gk-dk-glo-hanja, .gk-dk-glo-fr, .gk-dk-oath-note) { color:#686B75; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) :is(.gk-dk-kwan-note, .gk-dk-tenet-b, .gk-dk-tl-text) { color:#2B2E36; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-founder-img { border:0; background:#EDEDF1; clip-path:var(--c10); } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-fedlogo { border-radius:0; clip-path:var(--c6); } /* frise : un rail gris, des jalons en losange à l'encre (plus de rond) */ :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-tl-item { border-left-color:rgba(13,15,20,.14); } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-tl-item:last-child { border-left-color:transparent; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-tl-item::before { left:-7px; top:5px; width:10px; height:10px; border:2px solid #0D0F14; border-radius:0; background:#F5F5F7; transform:rotate(45deg); } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-tl-year { color:#0D0F14; } /* numéros des préceptes : pastille d'info sombre */ :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-num { color:#FFFFFF; background:#0D0F14; border:0; border-radius:0; clip-path:var(--c4); } /* le serment : une carte blanche coupée (le ::before portait l'anneau hexagonal) */ :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-quote { background:transparent; box-shadow:none !important; clip-path:none; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-quote::before { inset:0; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-quote::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-quote-txt { color:#0D0F14; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-glo-row { border-bottom-color:rgba(13,15,20,.08); } /* ══ Boutons de fin d'article : le satin or devient le vermillon plein ; le fantôme, une touche blanche à filet (le fond porte le trait, le ::before repose le blanc) ══ */ :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-cta { background:#C8372D; color:#FFFFFF; box-shadow:none !important; clip-path:var(--c8); font:700 13px/1.2 'Inter',sans-serif; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-cta::before { display:none; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-cta:hover { filter:brightness(.94); } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-cta-ghost { position:relative; isolation:isolate; background:rgba(13,15,20,.12); color:#0D0F14; box-shadow:none !important; clip-path:var(--c8); font:600 13px/1.2 'Inter',sans-serif; } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-cta-ghost::before { content:''; position:absolute; inset:1px; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:polygon(7.41px 0,calc(100% - 7.41px) 0,100% 7.41px,100% calc(100% - 7.41px),calc(100% - 7.41px) 100%,7.41px 100%,0 calc(100% - 7.41px),0 7.41px); } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .gk-dk-cta-ghost:hover { background:rgba(13,15,20,.24); } /* ══ Séparateurs (.wsep) : filets gris, fleur et fil à l'encre ══ */ :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .wsep .ln { background:linear-gradient(90deg,transparent,rgba(13,15,20,.16)); } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .wsep .ln.r { background:linear-gradient(270deg,transparent,rgba(13,15,20,.16)); } :root[data-theme="light"] :is(.gk-dkv3:not(.gk-recup), .v3pc) .wsep :is(.sfleur, .sfil) { filter:brightness(0); opacity:.4; } /* ══ Parcours (.v3pc) ══ */ :root[data-theme="light"] .content.v3pc .v3pc-frise .gk-dk-beltlist::before { background:linear-gradient(90deg,rgba(13,15,20,.22),rgba(13,15,20,.08)); } /* les pierres gardent leur couleur ; le halo noir du sombre devient une ombre douce */ :root[data-theme="light"] .content.v3pc .v3pc-frise .gk-dk-beltband { box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px rgba(13,15,20,.12), 0 2px 5px rgba(13,15,20,.16); } :root[data-theme="light"] .content.v3pc .v3pc-kids .gk-dk-beltband { box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(13,15,20,.14); } /* la pierre blanche disparaissait sur le blanc : un filet un peu plus net */ :root[data-theme="light"] .content.v3pc .v3pc-frise .gk-dk-beltrow:nth-child(1) .gk-dk-beltband { box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px rgba(13,15,20,.22), 0 2px 5px rgba(13,15,20,.16); } :root[data-theme="light"] .content.v3pc .v3pc-kids .gk-dk-beltrow:nth-child(1) .gk-dk-beltband, :root[data-theme="light"] .content.v3pc .gk-dk-keuplink:nth-child(1)::before { box-shadow:0 0 0 1px rgba(13,15,20,.24); } :root[data-theme="light"] .content.v3pc :is(.v3pc-frise, .v3pc-kids) .gk-dk-belt-l { color:#2B2E36; } :root[data-theme="light"] .content.v3pc .gk-dk-belt-k { color:#686B75; } :root[data-theme="light"] .content.v3pc .v3pc-kids .gk-dk-beltrow { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] .content.v3pc :is(.gk-dk-exam-row, .gk-dk-dan-row, .gk-dk-time-row) { border-bottom-color:rgba(13,15,20,.08); } :root[data-theme="light"] .content.v3pc :is(.gk-dk-exam-ko, .gk-dk-dan-ko) { color:#686B75; } :root[data-theme="light"] .content.v3pc :is(.gk-dk-exam-r, .gk-dk-dan-t, .gk-dk-time-n) { color:#0D0F14; } :root[data-theme="light"] .content.v3pc :is(.gk-dk-exam-b, .gk-dk-dan-b) { color:#4A4D57; } :root[data-theme="light"] .content.v3pc .gk-dk-time-l { color:#2B2E36; } /* tableau des durées */ :root[data-theme="light"] .content.v3pc .gk-dk-tbl-head { color:#686B75; border-bottom-color:rgba(13,15,20,.14); } :root[data-theme="light"] .content.v3pc .gk-dk-tbl-row { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] .content.v3pc .gk-dk-tbl-row.is--hinge { border-bottom-color:rgba(13,15,20,.32); } :root[data-theme="light"] .content.v3pc .gk-dk-tbl-r { color:#0D0F14; } :root[data-theme="light"] .content.v3pc .gk-dk-tbl-v { color:#2B2E36; } /* liens keup : puces blanches à filet (le ::before garde la pierre de ceinture) */ :root[data-theme="light"] .content.v3pc .gk-dk-keuplink { position:relative; isolation:isolate; background:rgba(13,15,20,.12); color:#0D0F14; box-shadow:none; clip-path:var(--c7); } :root[data-theme="light"] .content.v3pc .gk-dk-keuplink::after { content:''; position:absolute; inset:1px; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] .content.v3pc .gk-dk-keuplink:hover { background:rgba(13,15,20,.24); color:#0D0F14; } /* le bandeau d'appel est une photo : elle et ce qui est posé dessus restent ; l'hexagone devient des coins coupés, et le halo d'or au centre du voile devient un voile neutre */ :root[data-theme="light"] .content.v3pc .v3pc-band { clip-path:var(--c14); } :root[data-theme="light"] .content.v3pc .v3pc-band::after { background:radial-gradient(60% 90% at 50% 50%, rgba(8,12,22,.12), rgba(8,12,22,.55) 78%); } :root[data-theme="light"] .content.v3pc .v3pc-band .gk-dk-h2 { color:#F2F4FA; -webkit-text-fill-color:currentColor; text-shadow:0 2px 16px rgba(0,0,0,.6); } :root[data-theme="light"] .content.v3pc .v3pc-band .gk-dk-p { color:rgba(255,255,255,.8); } :root[data-theme="light"] .content.v3pc .v3pc-band .gk-dk-cta-ghost { background:rgba(12,16,30,.6); color:rgba(255,255,255,.88); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.1) !important; } :root[data-theme="light"] .content.v3pc .v3pc-band .gk-dk-cta-ghost::before { display:none; } /* ══ Préjugés et Comprendre les poomsae (.gk-art, v3-article.css) ══ */ /* le surtitre du héros est posé sur le haut de la photo, où le voile perle est le plus léger : à l'encre, avec le halo du fil d'Ariane */ :root[data-theme="light"] .content.gk-art .gk-dk-eyebrow.ar-kicker { color:#0D0F14; text-shadow:0 0 10px rgba(245,245,247,.95), 0 0 3px rgba(245,245,247,.85); } :root[data-theme="light"] .content.gk-art .ar-myth { color:#0D0F14; } :root[data-theme="light"] .content.gk-art :is(.ar-note, .ar-cap, .ar-sources, .ar-chain-caps, .ar-diag .l) { color:#686B75; } /* le losange de la charte, en puce et en jalon : à l'encre */ :root[data-theme="light"] .content.gk-art .ar-dia { background:#0D0F14; } :root[data-theme="light"] .content.gk-art .ar-dia.is--hollow { background:none; box-shadow:inset 0 0 0 1px #0D0F14; } :root[data-theme="light"] .content.gk-art .ar-bul li span { color:#2B2E36; } /* l'amplitude qui monte avec la pratique : une progression, pas une réussite, donc le vermillon */ :root[data-theme="light"] .content.gk-art .ar-flex svg [stroke="rgba(255,255,255,.14)"] { stroke:rgba(13,15,20,.14); } :root[data-theme="light"] .content.gk-art .ar-flex svg [stroke="#C8AA6E"] { stroke:#C8372D; } :root[data-theme="light"] .content.gk-art .ar-flex svg [fill="#C8AA6E"] { fill:#C8372D; } :root[data-theme="light"] .content.gk-art :is(.ar-flex-col .w, .ar-kit-step .w, .ar-vs-row .r) { color:#0D0F14; } :root[data-theme="light"] .content.gk-art .ar-flex-col .l { color:#686B75; } :root[data-theme="light"] .content.gk-art .ar-vs-row { border-top-color:rgba(13,15,20,.08); } :root[data-theme="light"] .content.gk-art .ar-vs-row::before { background:rgba(13,15,20,.12); } :root[data-theme="light"] .content.gk-art .ar-vs-row.is--head > span:nth-of-type(1) { color:#686B75; } :root[data-theme="light"] .content.gk-art .ar-vs-row.is--head > span:nth-of-type(2) { color:#0D0F14; } :root[data-theme="light"] .content.gk-art .ar-vs-row .l { color:#686B75; } :root[data-theme="light"] .content.gk-art .ar-kit-row::before { background:linear-gradient(90deg,rgba(13,15,20,.28),rgba(13,15,20,.08)); } :root[data-theme="light"] .content.gk-art .ar-kit-step .t { color:#4A4D57; } /* chiffres clés et trigrammes : tuiles blanches coupées (la grille porte l'ombre) */ :root[data-theme="light"] .content.gk-art :is(.ar-stats, .ar-tri) { filter:var(--cl-ombre-f); } :root[data-theme="light"] .content.gk-art :is(.ar-stat, .ar-tri-cell) { background:#FFFFFF; box-shadow:none !important; clip-path:var(--c10); } :root[data-theme="light"] .content.gk-art :is(.ar-stat, .ar-tri-cell)::before { display:none; } :root[data-theme="light"] .content.gk-art .ar-tri-cell:hover { background:#FAFAFB; } :root[data-theme="light"] .content.gk-art :is(.ar-stat b, .ar-tri-cell b) { color:#0D0F14; } :root[data-theme="light"] .content.gk-art :is(.ar-stat span, .ar-tri-cell .ko) { color:#686B75; } :root[data-theme="light"] .content.gk-art .ar-tri-cell .b { color:#4A4D57; } :root[data-theme="light"] .content.gk-art .ar-tri-cell .s { color:#C8372D; } /* termes coréens, étapes, notation, formes de ceinture noire */ :root[data-theme="light"] .content.gk-art :is(.ar-term, .ar-score-row, .ar-dan-row) { border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] .content.gk-art :is(.ar-term .ko, .ar-dan-row .ko) { color:#C8372D; } :root[data-theme="light"] .content.gk-art :is(.ar-term .tx b, .ar-steps li b, .ar-score-row .n, .ar-score-row .tx b, .ar-dan-row .tx b) { color:#0D0F14; } :root[data-theme="light"] .content.gk-art .ar-term .tx b em { color:#686B75; } :root[data-theme="light"] .content.gk-art :is(.ar-term .tx > span, .ar-steps li span) { color:#2B2E36; } :root[data-theme="light"] .content.gk-art :is(.ar-score-row .tx > span, .ar-dan-row .tx > span) { color:#4A4D57; } :root[data-theme="light"] .content.gk-art a.ar-dan-row:hover { background:rgba(13,15,20,.03); } :root[data-theme="light"] .content.gk-art .ar-steps li::before { color:#FFFFFF; background:#0D0F14; clip-path:var(--c4); } /* le tracé au sol : le caractère 王 à l'encre, le départ en vermillon */ :root[data-theme="light"] .content.gk-art .ar-floor svg [stroke="#C8AA6E"] { stroke:#0D0F14; } :root[data-theme="light"] .content.gk-art .ar-floor svg [fill="#D53C2A"] { fill:#C8372D; } /* la chaîne de la puissance : le coin qui monte en vermillon, les maillons en étiquettes grises */ :root[data-theme="light"] .content.gk-art .ar-wedge [fill="#C8AA6E"] { fill:#C8372D; } :root[data-theme="light"] .content.gk-art .ar-wedge [stroke="#C8AA6E"] { stroke:#C8372D; } :root[data-theme="light"] .content.gk-art .ar-chain-chip { color:#0D0F14; background:#F0F0F3; clip-path:var(--c4); } :root[data-theme="light"] .content.gk-art .ar-chain-ar { background:rgba(13,15,20,.35); } :root[data-theme="light"] .content.gk-art .ar-chain-ar::after { border-left-color:rgba(13,15,20,.5); } /* ITF face à WT : les deux tracés à l'encre */ :root[data-theme="light"] .content.gk-art .ar-diag svg [stroke="rgba(255,255,255,.18)"] { stroke:rgba(13,15,20,.16); } :root[data-theme="light"] .content.gk-art .ar-diag svg [stroke="#C8AA6E"] { stroke:#0D0F14; } :root[data-theme="light"] .content.gk-art .ar-diag svg [stroke="rgba(255,255,255,.5)"] { stroke:rgba(13,15,20,.45); } /* ══ Récupération et Souplesse : la mise en scène « E » (v3-recup.css, v3-recup-e.css, v3-souplesse.css, v3-galerie.css) ══════════════════════════════════════════════════════════════ La page se lit sur le perle. Restent sombres : le héros, les cartons de chapitre et les interludes (des photos avec leurs voiles), et la vue des planches 3D (une encre claire sur un rendu transparent). Les variables --rc-* repeignent aussi les SVG écrits par les scripts. Le bleu (poomsae) et le rouge (kyorugi) restent le code des disciplines, en tons plus profonds pour le blanc. L'or disparaît : --rc-gold code « preuves faibles », la zone du bassin, la série « lactique » et la courbe trop courte ; il passe à l'ardoise (un vermillon se confondrait avec le rouge du kyorugi). --ve-gold et --ve-satin, l'accent de la mise en scène, passent au vermillon. */ :root[data-theme="light"] { --rc-paper:#F5F5F7; --rc-paper-2:rgba(13,15,20,.035); --rc-card:#FFFFFF; --rc-line:rgba(13,15,20,.12); --rc-ink:#0D0F14; --rc-ink-2:#2B2E36; --rc-ink-3:#686B75; --rc-blue:#2C6CB0; --rc-blue-soft:rgba(44,108,176,.10); --rc-red:#B4344F; --rc-red-soft:rgba(180,52,79,.10); --rc-green:#1D7A58; --rc-green-soft:rgba(29,122,88,.10); --rc-gold:#4A4D57; } /* le fond des chapitres : perle, sans les trois tons de nuit */ :root[data-theme="light"] .content.gk-recup-e { --ve-bg:#F5F5F7; --ve-gold:#C8372D; --ve-satin:linear-gradient(#C8372D,#C8372D); } /* ── Héros, cartons, interludes : des photos ; elles et ce qui est posé dessus ne changent pas ── */ /* le voile du carton finit sur la nuit (il finissait sur la teinte du chapitre) */ :root[data-theme="light"] .content.gk-recup-e .ve-carton { --ve-bg:#0B0E1A; } /* sans image (repli, ou photo pas encore chargée), le cadre reste nuit : son texte est blanc */ :root[data-theme="light"] .content.gk-recup-e :is(.ve-hero, .ve-ph) { background-color:#0B0E1A; } :root[data-theme="light"] .content.gk-recup-e .ve-carton-t { color:#F2F4FA; -webkit-text-fill-color:currentColor; } /* le halo perle du socle est fait pour les en-têtes clairs : ici l'ombre du sombre */ :root[data-theme="light"] .content.gk-recup-e .ve-hero h1.display { text-shadow:0 2px 18px rgba(0,0,0,.6); } :root[data-theme="light"] .content.gk-recup-e .ve-hero .crumb { color:rgba(255,255,255,.78); } :root[data-theme="light"] .content.gk-recup-e .ve-hero .crumb a { color:inherit; } :root[data-theme="light"] .content.gk-recup-e .ve-hero .crumb .d { color:rgba(255,255,255,.5); } :root[data-theme="light"] .content.gk-recup-e .ve-hero .crumb b { color:#FFFFFF; background:rgba(8,12,22,.55); } /* sur la photo, l'or devient blanc : surtitre coréen du héros, surtitre des chapitres, invite à défiler */ :root[data-theme="light"] .content.gk-recup-e :is(.ve-hero .gk-dk-kick, .ve-carton-k) { color:rgba(255,255,255,.82); } :root[data-theme="light"] .content.gk-recup-e .ve-cue { color:#FFFFFF; } :root[data-theme="light"] .content.gk-recup-e .ve-cue i { background:rgba(255,255,255,.26); } :root[data-theme="light"] .content.gk-recup-e .ve-cue i::after { background:#FFFFFF; } /* ── La mention « vulgarisation », au-dessus du héros ── */ :root[data-theme="light"] .content.gk-recup-e .rc-vulg { border-top-color:rgba(13,15,20,.12); border-bottom-color:rgba(13,15,20,.06); } :root[data-theme="light"] .content.gk-recup-e :is(.rc-vulg-t, .rc-vulg-p) { color:#686B75; } :root[data-theme="light"] .content.gk-recup-e .rc-vulg-x { color:#A2A5AD; } :root[data-theme="light"] .content.gk-recup-e .rc-vulg-x:hover { color:#C8372D; } /* ── Le texte : Spectral à #2B2E36, titres et chiffres à l'encre, renvois et définitions au vermillon (ce sont des liens) ── */ :root[data-theme="light"] .content.gk-recup-e :is(.ve-body, .ve-intro, .gk-dk-wrap) :is(.gk-dk-p, .rc-prose li, .rc-checks li) { color:#2B2E36; } :root[data-theme="light"] .content.gk-recup-e .gk-dk-p :is(strong, b) { color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .rc-story .gk-dk-p:first-child::first-letter { color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .ve-body :is(.rc-h3, .rc-h4, .rc-q) { color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .ve-body .rc-lead { color:#4A4D57; } :root[data-theme="light"] .content.gk-recup-e .rc-num { color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .rc-ref { color:#C8372D; opacity:1; } :root[data-theme="light"] .content.gk-recup-e .rc-term { text-decoration-color:#C8372D; } :root[data-theme="light"] .content.gk-recup-e :is(.rc-term:hover, .rc-term:focus-visible) { background:rgba(200,55,45,.08); } /* surtitres et intitulés : gris */ :root[data-theme="light"] .content.gk-recup-e :is(.gk-dk-eyebrow, .rc-lbl, .rc-label, .rc-kicker, .rc-hint) { color:#686B75; } /* à part : un id dans :is() donnerait sa force (1,0,0) à toute la liste */ :root[data-theme="light"] .content.gk-recup-e #rc-switch-hint { color:#686B75; } /* les étiquettes de l'introduction (un filet sur la nuit en sombre) : remplies de gris, coupées à 3 px */ :root[data-theme="light"] .content.gk-recup-e .rc-pill { color:#2B2E36; background:#EAEAEE; clip-path:var(--c3); } :root[data-theme="light"] .content.gk-recup-e .rc-pill::before { display:none; } :root[data-theme="light"] .content.gk-recup-e .rc-tagd { clip-path:var(--c3); } /* ── Les grands chiffres : à l'encre, sans boîte ; le filet de tête garde le code discipline ── */ :root[data-theme="light"] .content.gk-recup-e :is(.rc-stat .rc-v, .ve-moment .rc-v) { background:none; color:#0D0F14; -webkit-text-fill-color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .rc-stat .rc-l { color:#4A4D57; } /* ── Encadrés (.rc-card, .rc-callout) : carte blanche coupée à 12 px. Le filet de discipline (bleu poomsae, rouge kyorugi) devient une bande de 2 px en tête du blanc. ── */ :root[data-theme="light"] .content.gk-recup-e :is(.rc-card, .rc-callout) { position:relative; isolation:isolate; background:transparent; box-shadow:none; border-top:0; border-left:0; } :root[data-theme="light"] .content.gk-recup-e :is(.rc-card, .rc-callout)::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .content.gk-recup-e :is(.rc-card, .rc-callout)::after { content:''; position:absolute; inset:3px 5px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .content.gk-recup-e .rc-card.rc-p::before { background:linear-gradient(var(--rc-blue),var(--rc-blue)) top / 100% 2px no-repeat, #FFFFFF; } :root[data-theme="light"] .content.gk-recup-e .rc-card.rc-k::before { background:linear-gradient(var(--rc-red),var(--rc-red)) top / 100% 2px no-repeat, #FFFFFF; } :root[data-theme="light"] .content.gk-recup-e .rc-card :is(p, li) { color:#2B2E36; } :root[data-theme="light"] .content.gk-recup-e :is(.rc-card, .rc-tool, .rc-callout) > :is(.rc-h4, .rc-h3) { color:#0D0F14; } /* les grands chiffres sont des .rc-card, mais sans boîte : un filet entre deux, rien d'autre */ :root[data-theme="light"] .content.gk-recup-e .ve-moment .rc-card { border-top:1px solid rgba(13,15,20,.10); } :root[data-theme="light"] .content.gk-recup-e .ve-moment .rc-card:last-child { border-bottom-color:rgba(13,15,20,.10); } :root[data-theme="light"] .content.gk-recup-e .ve-moment .rc-card.rc-p { border-top:2px solid var(--rc-blue); } :root[data-theme="light"] .content.gk-recup-e .ve-moment .rc-card.rc-k { border-top:2px solid var(--rc-red); } :root[data-theme="light"] .content.gk-recup-e .ve-moment .rc-card::before, :root[data-theme="light"] .content.gk-recup-e .ve-moment .rc-card::after { display:none; } :root[data-theme="light"] .content.gk-recup-e .ve-moment { border-bottom-color:rgba(13,15,20,.10); } /* les équerres d'or dessinaient un cadre : le coin coupé le remplace */ :root[data-theme="light"] .content.gk-recup-e .ve-reg { display:none; } /* ── Planches (figures, schémas, calculateurs) : blanc coupé à 14 px. Leur ::before (le filet) devient l'ombre, leur ::after (le fond) le blanc. ── */ :root[data-theme="light"] .content.gk-recup-e .ve-body :is(.rc-fig, .rc-diag, .rc-tool)::before { inset:3px 5px 2px; background:none; clip-path:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .content.gk-recup-e .ve-body :is(.rc-fig, .rc-diag, .rc-tool)::after { inset:0; background:#FFFFFF; clip-path:var(--c14); } :root[data-theme="light"] .content.gk-recup-e .rc-ft { color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .rc-fs { color:#4A4D57; } :root[data-theme="light"] .content.gk-recup-e .rc-fn { color:#686B75; } :root[data-theme="light"] .content.gk-recup-e .rc-fn a { color:#C8372D; opacity:1; } /* les graphiques : libellés en gris, catégories et valeurs à l'encre, grille à peine là ; les séries gardent leur code, en tons qui tiennent sur le blanc */ :root[data-theme="light"] .content.gk-recup-e :is(.rc-fig, .rc-diag) text { fill:#4A4D57; } :root[data-theme="light"] .content.gk-recup-e :is(.rc-fig text.rc-cat, .rc-diag .rc-lbl, .rc-fig text.rc-val, .rc-diag text.rc-val) { fill:#0D0F14; } /* un texte SVG se peint par fill ; sa couleur suit, pour qu'une mesure de contraste lise la même encre */ :root[data-theme="light"] .content.gk-recup-e .rc-diag text.rc-lbl { color:#0D0F14; } /* le yop chagi : l'étiquette « Bassin » est posée sur la jambe de frappe, un liseré blanc l'en détache */ :root[data-theme="light"] .content.gk-recup-e #rc-diag-kick text { paint-order:stroke; stroke:#FFFFFF; stroke-width:4px; stroke-linejoin:round; } :root[data-theme="light"] .content.gk-recup-e .rc-fig text.rc-sub { fill:#686B75; } :root[data-theme="light"] .content.gk-recup-e .rc-grid { stroke:rgba(13,15,20,.08); } :root[data-theme="light"] .content.gk-recup-e .rc-zero { stroke:rgba(13,15,20,.28); } :root[data-theme="light"] .content.gk-recup-e .rc-bar { stroke:none; } :root[data-theme="light"] .content.gk-recup-e .rc-c-blue { fill:#3A7EC6; } :root[data-theme="light"] .content.gk-recup-e .rc-c-red { fill:#CF4A64; } :root[data-theme="light"] .content.gk-recup-e .rc-c-green { fill:#2A8F74; } :root[data-theme="light"] .content.gk-recup-e .rc-c-gold { fill:#4A4D57; } :root[data-theme="light"] .content.gk-recup-e .rc-c-ink { fill:rgba(13,15,20,.26); } /* les bulles : pastilles d'info sombres */ :root[data-theme="light"] .content.gk-recup-e .rc-tip { background:#0D0F14; color:#FFFFFF; box-shadow:none; } :root[data-theme="light"] .content.gk-recup-e .rc-tip b { color:#FFFFFF; } :root[data-theme="light"] .rc-gtip { background:#0D0F14; color:rgba(255,255,255,.86); box-shadow:0 8px 20px rgba(13,15,20,.18); border-top-color:#C8372D; } :root[data-theme="light"] .rc-gtip b { color:#FFFFFF; } :root[data-theme="light"] .rc-gtip .rc-gk { color:#A2A5AD; } /* ── Commandes des schémas et des planches 3D : puces blanches à filet, la choisie à l'encre ── */ :root[data-theme="light"] .content.gk-recup-e :is(.rc-ctrl button, .ve-anat-bt) { position:relative; isolation:isolate; color:#0D0F14; background:rgba(13,15,20,.12); clip-path:var(--c7); } :root[data-theme="light"] .content.gk-recup-e :is(.rc-ctrl button, .ve-anat-bt)::after { content:''; position:absolute; inset:1px; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c7i); } :root[data-theme="light"] .content.gk-recup-e :is(.rc-ctrl button, .ve-anat-bt):hover { color:#0D0F14; background:rgba(13,15,20,.24); } :root[data-theme="light"] .content.gk-recup-e :is(.rc-ctrl button, .ve-anat-bt)[aria-pressed="true"] { color:#FFFFFF; background:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e :is(.rc-ctrl button, .ve-anat-bt)[aria-pressed="true"]::after { display:none; } :root[data-theme="light"] .content.gk-recup-e .rc-ctrl { color:#686B75; } :root[data-theme="light"] .content.gk-recup-e .rc-ctrl label { color:#4A4D57; } :root[data-theme="light"] .content.gk-recup-e :is(button, a, input, select):focus-visible { outline-color:#C8372D; } /* le curseur : un rail gris, le losange en vermillon */ :root[data-theme="light"] .content.gk-recup-e input[type=range] { accent-color:#C8372D; } :root[data-theme="light"] .content.gk-recup-e input[type=range]::-webkit-slider-runnable-track { background:rgba(13,15,20,.16); } :root[data-theme="light"] .content.gk-recup-e input[type=range]::-webkit-slider-thumb { background:#C8372D; } :root[data-theme="light"] .content.gk-recup-e input[type=range]::-moz-range-track { background:rgba(13,15,20,.16); } :root[data-theme="light"] .content.gk-recup-e input[type=range]::-moz-range-thumb { background:#C8372D; } /* ── Calculateurs : champs remplis gris coupés à 6 px, sans filet ; au focus fond blanc et trait vermillon. glass-site.css pose fond et filet de TOUS les champs en !important : on répond de même. ── */ :root[data-theme="light"] .content.gk-recup-e .rc-tool label { color:#686B75; } :root[data-theme="light"] .content.gk-recup-e .rc-tool :is(input[type=number], input[type=time], select) { color:#0D0F14; background-color:#EAEAEE !important; border:0 !important; box-shadow:none; clip-path:var(--c6); -webkit-backdrop-filter:none; backdrop-filter:none; } :root[data-theme="light"] .content.gk-recup-e .rc-tool :is(input[type=number], input[type=time], select):hover { background-color:#E3E3E8 !important; box-shadow:none; } :root[data-theme="light"] .content.gk-recup-e .rc-tool :is(input, select):focus-visible { outline:0; background-color:#FFFFFF !important; box-shadow:inset 0 -2px 0 #C8372D; } :root[data-theme="light"] .content.gk-recup-e .rc-tool select { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%230D0F14' stroke-width='1.6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 15px center !important; } :root[data-theme="light"] .content.gk-recup-e .rc-tool select option { background:#FFFFFF; color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .rc-tool input[type=time]::-webkit-calendar-picker-indicator { filter:none; opacity:.55; } :root[data-theme="light"] .content.gk-recup-e .rc-tool .rc-out { color:#2B2E36; border-top-color:rgba(13,15,20,.10); } :root[data-theme="light"] .content.gk-recup-e .rc-tool .rc-out b { color:#0D0F14; } /* ── Tableaux : une carte blanche coupée ; l'ombre est portée par l'enveloppe, qui ne contient que la table. Sur téléphone, chaque rangée devient une fiche blanche. ── */ :root[data-theme="light"] .content.gk-recup-e .rc-tablewrap { background:none; box-shadow:none; filter:var(--cl-ombre-f); } :root[data-theme="light"] .content.gk-recup-e .rc-tablewrap table { background:#FFFFFF; clip-path:var(--c12); } :root[data-theme="light"] .content.gk-recup-e :is(th, td) { color:#2B2E36; border-bottom-color:rgba(13,15,20,.08); } :root[data-theme="light"] .content.gk-recup-e th { color:#686B75; background:none; } @media (max-width:620px) { :root[data-theme="light"] .content.gk-recup-e .rc-tablewrap { filter:none; } :root[data-theme="light"] .content.gk-recup-e .rc-tablewrap table { background:none; clip-path:none; } :root[data-theme="light"] .content.gk-recup-e .rc-tablewrap tbody { filter:var(--cl-ombre-f); } :root[data-theme="light"] .content.gk-recup-e tr { background:#FFFFFF; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .content.gk-recup-e td:first-child { color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e td:last-child { color:#2B2E36; border-left-color:rgba(13,15,20,.16); } } /* ── Galerie de fiches et tableau de verdict : cartes blanches coupées, l'ombre portée par la grille (elle ne contient que des cartes). Le filet de tête du verdict devient une bande. ── */ :root[data-theme="light"] .content.gk-recup-e :is(.rc-gallery, .rc-vgrid) { filter:var(--cl-ombre-f); } :root[data-theme="light"] .content.gk-recup-e :is(.rc-gcard, .rc-vcol) { background:#FFFFFF; box-shadow:none; clip-path:var(--c12); } :root[data-theme="light"] .content.gk-recup-e .rc-gimg { background:#EDEDF1; border-bottom-color:rgba(13,15,20,.08); border-right-color:rgba(13,15,20,.08); } :root[data-theme="light"] .content.gk-recup-e .rc-gcard.ok .rc-gimg { background:var(--rc-green-soft); } :root[data-theme="light"] .content.gk-recup-e .rc-gcard.no .rc-gimg { background:var(--rc-red-soft); } :root[data-theme="light"] .content.gk-recup-e :is(.rc-gcard h4, .rc-ghow b, .rc-vcol li b) { color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .rc-ghow { color:#2B2E36; } :root[data-theme="light"] .content.gk-recup-e :is(.rc-gev, .rc-vcol li) { color:#4A4D57; } :root[data-theme="light"] .content.gk-recup-e :is(.rc-gq, .rc-vcol li span) { color:#686B75; } :root[data-theme="light"] .content.gk-recup-e .rc-vcol li { border-top-color:rgba(13,15,20,.08); } :root[data-theme="light"] .content.gk-recup-e .rc-vgrid > .rc-vcol { border-top:0; } :root[data-theme="light"] .content.gk-recup-e .rc-vgrid > .rc-vcol.ok { background:linear-gradient(var(--rc-green),var(--rc-green)) top / 100% 2px no-repeat, #FFFFFF; } :root[data-theme="light"] .content.gk-recup-e .rc-vgrid > .rc-vcol.mid { background:linear-gradient(var(--rc-blue),var(--rc-blue)) top / 100% 2px no-repeat, #FFFFFF; } :root[data-theme="light"] .content.gk-recup-e .rc-vgrid > .rc-vcol.weak { background:linear-gradient(var(--rc-gold),var(--rc-gold)) top / 100% 2px no-repeat, #FFFFFF; } :root[data-theme="light"] .content.gk-recup-e .rc-vgrid > .rc-vcol.none { background:linear-gradient(rgba(13,15,20,.22),rgba(13,15,20,.22)) top / 100% 2px no-repeat, #FFFFFF; } :root[data-theme="light"] .content.gk-recup-e .rc-vgrid > .rc-vcol.no { background:linear-gradient(var(--rc-red),var(--rc-red)) top / 100% 2px no-repeat, #FFFFFF; } /* les pastilles de verdict : étiquettes coupées à 3 px, le code reste (« preuves faibles » en gris) */ :root[data-theme="light"] .content.gk-recup-e .rc-vbadge { clip-path:var(--c3); } :root[data-theme="light"] .content.gk-recup-e .rc-vbadge.v-weak { background:#EAEAEE; color:#2B2E36; } :root[data-theme="light"] .content.gk-recup-e .rc-vbadge.v-none { color:#686B75; box-shadow:inset 0 0 0 1px rgba(13,15,20,.16); } /* les pictogrammes de repli : le corps à l'encre, le décor en gris */ :root[data-theme="light"] .content.gk-recup-e .rc-pline { stroke:rgba(13,15,20,.85); } :root[data-theme="light"] .content.gk-recup-e .rc-phead { fill:rgba(13,15,20,.85); } :root[data-theme="light"] .content.gk-recup-e .rc-gcard.no .rc-pline { stroke:rgba(13,15,20,.35); } :root[data-theme="light"] .content.gk-recup-e .rc-gcard.no .rc-phead { fill:rgba(13,15,20,.35); } :root[data-theme="light"] .content.gk-recup-e .rc-pfloor { stroke:rgba(13,15,20,.25); } :root[data-theme="light"] .content.gk-recup-e .rc-pprop { fill:rgba(13,15,20,.22); } :root[data-theme="light"] .content.gk-recup-e .rc-pbar { stroke:rgba(13,15,20,.4); } /* l'intention (l'élastique qui tire, les arcs du mouvement) : l'or devient le vermillon */ :root[data-theme="light"] .content.gk-recup-e :is(.rc-pband, .rc-parc) { stroke:#C8372D; } /* ── Planches 3D (anatomie, molécules) : la planche est blanche, la vue reste une tuile de nuit coupée à 10 px ; ses étiquettes (sur la nuit) ne changent pas ── */ :root[data-theme="light"] .content.gk-recup-e .ve-anat .ve-anat-vue { background:radial-gradient(120% 90% at 46% 42%, #121A2C, #0B0E1A 66%); clip-path:var(--c10); } /* sur la nuit de la vue, les noms d'étiquette passent de l'or au blanc (le rendu 3D ne change pas) */ :root[data-theme="light"] .content.gk-recup-e .ve-anat-n, :root[data-theme="light"] .content.gk-recup-e .ve-anat-vue .ve-mol-s { color:rgba(255,255,255,.66); } :root[data-theme="light"] .content.gk-recup-e .ve-anat-dit { color:#2B2E36; } /* sur téléphone, le script sort le panneau de mesure des planches moléculaires de la vue et le range sous le dessin (.ve-mol > .ve-mol-p) : il est alors sur le blanc de la planche */ :root[data-theme="light"] .content.gk-recup-e .ve-mol > .ve-mol-p .ve-mol-s { color:#686B75; } :root[data-theme="light"] .content.gk-recup-e .ve-mol > .ve-mol-p .ve-mol-v { color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .ve-mol > .ve-mol-p .ve-mol-m { background:rgba(13,15,20,.10); } :root[data-theme="light"] .content.gk-recup-e .ve-mol > .ve-mol-p .ve-mol-m > i { background:#C8372D; } :root[data-theme="light"] .content.gk-recup-e .ve-mol > .ve-mol-p .ve-mol-c { color:#4A4D57; } /* ── Les deux journées de compétition (.ve-jour) ── */ :root[data-theme="light"] .content.gk-recup-e .ve-jour .ve-jour-reg { stroke:rgba(13,15,20,.08); } :root[data-theme="light"] .content.gk-recup-e .ve-jour .ve-jour-eff { fill:rgba(13,15,20,.045); } :root[data-theme="light"] .content.gk-recup-e .ve-jour :is(.ve-jour-ax, .ve-jour-unite, .ve-jour-dur, .ve-jour-h) { fill:#686B75; } :root[data-theme="light"] .content.gk-recup-e .ve-jour .ve-jour-nom { fill:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .ve-jour .ve-jour-pic { fill:#4A4D57; } :root[data-theme="light"] .content.gk-recup-e .ve-jour .ve-jour-cote line { stroke:rgba(13,15,20,.24); } :root[data-theme="light"] .content.gk-recup-e .ve-jour-moments { border-top-color:rgba(13,15,20,.10); } :root[data-theme="light"] .content.gk-recup-e .ve-jour-m { border-right-color:rgba(13,15,20,.07); border-bottom-color:rgba(13,15,20,.07); } :root[data-theme="light"] .content.gk-recup-e .ve-jour-mh { color:#686B75; } :root[data-theme="light"] .content.gk-recup-e .ve-jour-mt { color:#2B2E36; } :root[data-theme="light"] .content.gk-recup-e .ve-jour-m.est-fin .ve-jour-mt { color:#0D0F14; } /* ── La citation seule sur son écran ── */ :root[data-theme="light"] .content.gk-recup-e .ve-quote .rc-q { color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .ve-quote .ve-fleur { filter:brightness(0); opacity:.35; } /* ── Progression et rail des chapitres : le fil passe au vermillon, le chapitre en cours aussi. Le rail est fixe : il passe sur le perle comme sur les photos des cartons. Il se pose donc sur une plaque blanche coupée à 8 px (le blanc en ::before, l'ombre en ::after) ; ses liens prennent toute la largeur, pour que le titre au survol sorte de la plaque au même endroit. ── */ :root[data-theme="light"] .content.gk-recup-e .ve-prog { background:rgba(13,15,20,.06); } :root[data-theme="light"] .content.gk-recup-e .ve-prog > i { background:#C8372D; } :root[data-theme="light"] .content.gk-recup-e .ve-nav { isolation:isolate; right:10px; padding:8px; } :root[data-theme="light"] .content.gk-recup-e .ve-nav::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#FFFFFF; clip-path:var(--c8); } :root[data-theme="light"] .content.gk-recup-e .ve-nav::after { content:''; position:absolute; inset:3px 4px 2px; z-index:-2; pointer-events:none; box-shadow:var(--cl-ombre); } :root[data-theme="light"] .content.gk-recup-e .ve-nav a { align-self:stretch; justify-content:flex-end; color:#686B75; } :root[data-theme="light"] .content.gk-recup-e .ve-nav a:hover { color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .ve-nav a.is--on { color:#C8372D; } :root[data-theme="light"] .content.gk-recup-e .ve-nav a:focus-visible { outline-color:#C8372D; } /* le titre au survol sort à gauche de la plaque : une pastille d'info à l'encre */ :root[data-theme="light"] .content.gk-recup-e .ve-nav-t { right:calc(100% + 18px); color:#FFFFFF; background:#0D0F14; padding:6px 9px; clip-path:var(--c3); } @media (max-width:620px) { :root[data-theme="light"] .content.gk-recup-e .ve-prog { background:rgba(255,255,255,.94); border-bottom-color:rgba(13,15,20,.08); } :root[data-theme="light"] .content.gk-recup-e .ve-prog-t { color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .ve-prog-t em { color:#C8372D; } } /* ── Sélecteur de discipline, sommaire, sources ── */ :root[data-theme="light"] .content.gk-recup-e .rc-switch { background:linear-gradient(180deg,rgba(245,245,247,.97) 78%,rgba(245,245,247,0)); } :root[data-theme="light"] .content.gk-recup-e .rc-seg { background:#EAEAEE; padding:2px; clip-path:var(--c8); } :root[data-theme="light"] .content.gk-recup-e .rc-seg::before { display:none; } :root[data-theme="light"] .content.gk-recup-e .rc-seg button { color:#686B75; background:transparent; clip-path:var(--c6); } :root[data-theme="light"] .content.gk-recup-e .rc-seg button:hover { color:#0D0F14; } :root[data-theme="light"] .content.gk-recup-e .rc-seg button[aria-pressed="true"] { color:#0D0F14; background:#FFFFFF; } :root[data-theme="light"] .content.gk-recup-e .rc-seg button[data-d="poomsae"][aria-pressed="true"] { color:var(--rc-blue); } :root[data-theme="light"] .content.gk-recup-e .rc-seg button[data-d="kyorugi"][aria-pressed="true"] { color:var(--rc-red); } :root[data-theme="light"] .content.gk-recup-e .rc-toc a { color:#2B2E36; } :root[data-theme="light"] .content.gk-recup-e .rc-toc a span { color:#686B75; opacity:1; } :root[data-theme="light"] .content.gk-recup-e .rc-toc a:hover { color:#0D0F14; background:rgba(13,15,20,.04); } :root[data-theme="light"] .content.gk-recup-e .rc-src ol { color:#686B75; } :root[data-theme="light"] .content.gk-recup-e .rc-src li em { color:#2B2E36; } :root[data-theme="light"] .content.gk-recup-e .rc-src :is(li:target, li.rc-vise) { color:#0D0F14; background:rgba(200,55,45,.08); box-shadow:-6px 0 0 rgba(200,55,45,.5); } :root[data-theme="light"] .content.gk-recup-e details { background:#FFFFFF; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .content.gk-recup-e summary { color:#C8372D; } :root[data-theme="light"] .content.gk-recup-e .rc-foot { color:#686B75; border-top-color:rgba(13,15,20,.08); } /* ══ L'arbre sur téléphone : le chemin (arbre/chemin.css, arbre/chemin.js), 13/10/2026 ═══════════════ Le clair de la piste « Le chemin », validé par Jason sur le canevas « Arbre sur mobile » (rangée « C · Le chemin, en clair »). Les hexagones deviennent des coins coupés, l'action et « Tu es ici » passent au vermillon, l'or ne dit plus que « acquis ». Depuis le 13/10 au soir la scène 3D est claire elle aussi et prend toute la page, comme en sombre : voir « L'arbre en clair, pleine page », à la fin de cette feuille. */ @media (max-width:720px){ :root[data-theme="light"] .gk-arbre-v3.chm-on .chm { background:#F5F5F7; color:#0D0F14; } :root[data-theme="light"] .content.gk-arbre-v3.chm-on.chm-vue-3d { background:#F5F5F7; } :root[data-theme="light"] .gk-arbre-v3.chm-on.chm-vue-3d .chm { background:transparent; } /* la touche : un carré blanc coupé à 17 %. Son ombre est portée par le parent (.chm-o) : une coupe mange l'ombre de sa propre boîte. */ :root[data-theme="light"] .chm-o { filter:drop-shadow(0 1px 1px rgba(13,15,20,.07)) drop-shadow(0 4px 9px rgba(13,15,20,.07)); } :root[data-theme="light"] .chm-t { width:38px; height:38px; color:#0D0F14; background:#FFFFFF; clip-path:var(--c6); } :root[data-theme="light"] .chm-t::before { display:none; } :root[data-theme="light"] .chm-vide { width:38px; height:38px; } /* la bascule 3D / 2D : le segment (piste grise coupée à 8, case choisie blanche coupée à 6, son ombre) */ :root[data-theme="light"] .chm-seg { gap:2px; padding:2px; background:#EAEAEE; clip-path:var(--c8); } :root[data-theme="light"] .chm-sg { width:56px; height:32px; background:none; clip-path:none; font:500 13px/1 'Inter',sans-serif; color:#6E717B; } :root[data-theme="light"] .chm-sg::before { display:none; } :root[data-theme="light"] .chm-sg span { display:flex; align-items:center; justify-content:center; width:100%; height:100%; } :root[data-theme="light"] .chm-sg.on { background:none; color:#0D0F14; font-weight:600; filter:drop-shadow(0 1px 1.5px rgba(13,15,20,.16)); } :root[data-theme="light"] .chm-sg.on span { background:#FFFFFF; clip-path:var(--c6); } :root[data-theme="light"] .chm-voile-haut { background:linear-gradient(180deg,#F5F5F7 0%,#F5F5F7 calc(100% - 34px),rgba(245,245,247,0) 100%); } /* le titre et les trois nombres : l'acquis en or (sa seule place), l'en-cours au vermillon, le reste en gris */ :root[data-theme="light"] .chm-titre { color:#0D0F14; } :root[data-theme="light"] .chm-etats span { color:#6E717B; } :root[data-theme="light"] .chm-etats b { font:700 17px/1 'Inter Tight','Inter',sans-serif; font-style:normal; color:#B08433; } :root[data-theme="light"] .chm-etats .is-ici b { color:#C8372D; } :root[data-theme="light"] .chm-etats .is-apres b { color:#6E717B; } /* le chemin : un filet d'encre, des étapes en carré coupé ; celle où je suis en encre pleine */ :root[data-theme="light"] .chm-voie::before { background:linear-gradient(180deg,rgba(13,15,20,.04),rgba(13,15,20,.2) 90px,rgba(13,15,20,.2) calc(100% - 160px),rgba(13,15,20,.08)); } :root[data-theme="light"] .chm-marque { top:1px; width:26px; height:26px; background:rgba(13,15,20,.16); clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px); } :root[data-theme="light"] .chm-marque::before { background:#FFFFFF; clip-path:polygon(4.4px 0,calc(100% - 4.4px) 0,100% 4.4px,100% calc(100% - 4.4px),calc(100% - 4.4px) 100%,4.4px 100%,0 calc(100% - 4.4px),0 4.4px); } :root[data-theme="light"] .chm-etape.is-ici .chm-marque { top:9px; width:34px; height:34px; background:#0D0F14; clip-path:var(--c6); } :root[data-theme="light"] .chm a.chm-cta { color:#FFFFFF; } :root[data-theme="light"] .chm-nom { color:#0D0F14; } :root[data-theme="light"] .chm-etat { color:#6E717B; } :root[data-theme="light"] .chm-etape.is-apres .chm-nom { color:#6E717B; } :root[data-theme="light"] .chm-etape.is-apres .chm-etat { color:#6E717B; } :root[data-theme="light"] .chm-etape.is-apres .chm-etat svg { color:#A2A5AD; } :root[data-theme="light"] .chm-etape.is-fait .chm-etat svg { color:#B08433; } :root[data-theme="light"] .chm-chevron { color:#A2A5AD; } :root[data-theme="light"] .chm-ici { font:600 10.5px/1 'Inter',sans-serif; letter-spacing:.7px; color:#C8372D; } /* les familles : petit titre en Inter gras (les petits titres du clair), photos coupées à 8 */ :root[data-theme="light"] .chm .chm-fam-t { font:700 14px/1 'Inter',sans-serif; font-family:'Inter',sans-serif!important; font-weight:700!important; font-style:normal!important; letter-spacing:-.3px; color:#0D0F14; } :root[data-theme="light"] .chm-fam-t small { font:600 10px/1 'Inter',sans-serif; letter-spacing:.7px; color:#6E717B; } :root[data-theme="light"] :is(.chm-tuile img, .chm-tuile .chm-sans) { clip-path:var(--c8); } :root[data-theme="light"] .chm-sans { background:#EAEAEE; box-shadow:none; letter-spacing:.7px; color:#6E717B; } :root[data-theme="light"] .chm-tuile > span:last-child { font:700 11.5px/1.2 'Inter',sans-serif; font-style:normal; letter-spacing:-.2px; color:#0D0F14; } :root[data-theme="light"] .chm-etape.is-apres .chm-tuile img { filter:saturate(.7); } /* la vue d'ensemble : la page est perle et la scène aussi ; elle se pose comme en sombre, bords fondus */ :root[data-theme="light"] .chm-sous { color:#6E717B; } :root[data-theme="light"] .chm-aide p { font:600 14px/1.3 'Inter',sans-serif; letter-spacing:-.2px; color:#0D0F14; } :root[data-theme="light"] .chm-aide div { font-size:12px; color:#6E717B; } :root[data-theme="light"] .chm-aide svg { color:#6E717B; } /* la feuille d'une technique : carte blanche aux coins du haut coupés à 14, son ombre portée par .chm-f */ :root[data-theme="light"] .chm-voile { background:rgba(13,15,20,.42); } :root[data-theme="light"] .chm-f { filter:drop-shadow(0 -8px 26px rgba(13,15,20,.2)); } :root[data-theme="light"] .chm-feuille { background:#FFFFFF; border-top:0; box-shadow:none; clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%,0 14px); } :root[data-theme="light"] .chm-feuille::before { display:none; } :root[data-theme="light"] .chm-feuille::after { background:#D5D6DC; } :root[data-theme="light"] .chm-photo { background:#EAEAEE; clip-path:var(--c10); } :root[data-theme="light"] .chm-photo figcaption { background:rgba(255,255,255,.9); color:#0D0F14; font:600 10px/1 'Inter',sans-serif; letter-spacing:.7px; clip-path:var(--c3); } :root[data-theme="light"] .chm-fermer { width:36px; height:36px; background:rgba(255,255,255,.9); } :root[data-theme="light"] .chm-photo .chm-o { filter:none; } :root[data-theme="light"] .chm-place small { font:600 10.5px/1 'Inter',sans-serif; letter-spacing:.7px; color:#6E717B; } :root[data-theme="light"] .chm-points i { background:#D5D6DC; } :root[data-theme="light"] .chm-points i.on { background:#C8372D; } :root[data-theme="light"] .chm-f-nom { color:#0D0F14; } :root[data-theme="light"] .chm-f-meta { color:#6E717B; } :root[data-theme="light"] .chm-f-meta b { color:#0D0F14; } :root[data-theme="light"] .chm-f-meta i { background:#A2A5AD; } /* l'action du clair : vermillon, 50 px, coupée à 10, son ombre rouge portée par .chm-o */ :root[data-theme="light"] .chm-cta-o { filter:drop-shadow(0 6px 10px rgba(200,55,45,.24)); } :root[data-theme="light"] .chm-cta { height:50px; font:600 16px/1 'Inter',sans-serif; letter-spacing:-.2px; color:#FFFFFF; background:#C8372D; clip-path:var(--c10); } /* la recherche : un champ gris coupé à 6, ses résultats sur une carte blanche */ :root[data-theme="light"] .chm-champ { height:44px; background:#EAEAEE; clip-path:var(--c6); color:#6E717B; } :root[data-theme="light"] .chm-champ::before { display:none; } :root[data-theme="light"] .content.gk-arbre-v3 .chm .chm-champ input[type="search"] { background:transparent!important; color:#0D0F14!important; } :root[data-theme="light"] .content.gk-arbre-v3 .chm .chm-champ input[type="search"]::placeholder { color:#6E717B!important; } :root[data-theme="light"] .chm-cherche::before { background:rgba(245,245,247,.92); } :root[data-theme="light"] .chm-res-o { filter:drop-shadow(0 1px 1px rgba(13,15,20,.05)) drop-shadow(0 10px 22px rgba(13,15,20,.08)); } :root[data-theme="light"] .chm-res { background:#FFFFFF; box-shadow:none; clip-path:var(--c10); } :root[data-theme="light"] .chm-r { color:#0D0F14; } :root[data-theme="light"] .chm-r + .chm-r { border-top-color:rgba(13,15,20,.08); } :root[data-theme="light"] .chm-r small { color:#6E717B; } :root[data-theme="light"] .chm-vide-res { color:#6E717B; } } /* ══ L'arbre en clair, pleine page (13/10/2026) ═══════════════════════════════════════════════════════════════ Jason : « un light mode qui est en couleur light, qui prend toute la page et qui ne soit pas juste une div dans le tout… comme le dark mode, mais en version light… et que tu réadaptes toutes les couleurs dans l'arbre ». Grand écran et téléphone. La scène 3D se peint elle-même en clair (ton() dans le module de arbre/embed.html : page perle jusque dans la brume, traits à l'encre, cartes blanches à pans coupés). Ici : la page autour, puis tout ce que le cadre pose sur la scène (bascule, aide, boutons, compteurs), la vue 2D, la fiche d'une technique et le volet. Le code des états, le même que sur « le chemin » : l'or (#B08433) ne dit que « acquis », le vermillon dit « en cours » et « Tu es ici », le gris dit « à débloquer ». Les ceintures gardent leurs couleurs. Les règles du cadre partent de html.arbre-cadre : ses classes (.hint, .btn, .panel, .pill…) existent ailleurs. */ /* ── La page : plus de fond nuit derrière le cadre ── */ :root[data-theme="light"] .gk-arbre-v3 .arbre-stage { background:#F5F5F7; } /* ── Le cadre ── */ html.arbre-cadre[data-theme="light"], html.arbre-cadre[data-theme="light"] body { background:#F5F5F7; color:#0D0F14; } html.arbre-cadre[data-theme="light"] .fade-out { background:#F5F5F7; } /* la bascule 3D / 2D : le segment de la page (« Par grade / Par forme »), piste grise coupée à 8, case blanche coupée à 6 */ html.arbre-cadre[data-theme="light"] .mode-toggle { gap:2px; padding:2px!important; background:#EAEAEE!important; clip-path:var(--c8); } html.arbre-cadre[data-theme="light"] .mode-toggle button { height:34px; padding:0 20px; background:transparent; color:#6E717B; font:500 13px/1 'Inter',sans-serif; letter-spacing:0; clip-path:var(--c6); } html.arbre-cadre[data-theme="light"] .mode-toggle button::before { display:none; } html.arbre-cadre[data-theme="light"] .mode-toggle button:hover { background:transparent; color:#0D0F14; } html.arbre-cadre[data-theme="light"] .mode-toggle button.on { background:#FFFFFF!important; color:#0D0F14!important; font-weight:600; } /* l'aide des gestes : une carte blanche sur son ombre, des touches grises */ html.arbre-cadre[data-theme="light"] .hint { background:#FFFFFF!important; border:0; color:#6E717B; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 1px 1px rgba(13,15,20,.05),0 10px 22px rgba(13,15,20,.08); } html.arbre-cadre[data-theme="light"] .hint kbd { background:#EAEAEE; border:0; color:#0D0F14; } /* les deux boutons (rotation, recentrer) : touches blanches coupées, leur ombre portée par la rangée */ html.arbre-cadre[data-theme="light"] .actions { filter:drop-shadow(0 1px 1px rgba(13,15,20,.07)) drop-shadow(0 4px 9px rgba(13,15,20,.07)); } html.arbre-cadre[data-theme="light"] .actions .btn { background:#FFFFFF!important; color:#0D0F14!important; clip-path:var(--c8); } html.arbre-cadre[data-theme="light"] .actions .btn::before { display:none; } html.arbre-cadre[data-theme="light"] .actions .btn:hover { background:#0D0F14!important; color:#FFFFFF!important; } /* les compteurs : carte blanche coupée à 10. La coupe est portée par ::before, l'ombre par la carte elle-même (une coupe mange l'ombre de sa propre boîte). */ html.arbre-cadre[data-theme="light"] .stats { isolation:isolate; background:transparent!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; box-shadow:none!important; clip-path:none; filter:drop-shadow(0 1px 1px rgba(13,15,20,.05)) drop-shadow(0 10px 22px rgba(13,15,20,.08)); } html.arbre-cadre[data-theme="light"] .stats::before { content:''; position:absolute; inset:0; z-index:-1; background:#FFFFFF; clip-path:var(--c10); } html.arbre-cadre[data-theme="light"] .stat-row .lbl { color:#0D0F14; } html.arbre-cadre[data-theme="light"] .stat-row .num { color:#0D0F14!important; } html.arbre-cadre[data-theme="light"] .stat-row .dot { box-shadow:none!important; } html.arbre-cadre[data-theme="light"] .stat-row:nth-child(1) .dot { background:#B08433!important; } html.arbre-cadre[data-theme="light"] .stat-row:nth-child(2) .dot { background:#C8372D!important; } html.arbre-cadre[data-theme="light"] .stat-row:nth-child(3) .dot { background:transparent!important; border:1px dashed #6E717B!important; } html.arbre-cadre[data-theme="light"] .stat-row:nth-child(4) .dot { background:#A2A5AD!important; } /* ── La vue d'ensemble du téléphone (?vue=ensemble) : les repères posés sur la scène claire ── */ html.arbre-cadre[data-theme="light"] .ve-n { color:rgba(13,15,20,.46); } html.arbre-cadre[data-theme="light"] .ve-n.ici { color:#0D0F14; } html.arbre-cadre[data-theme="light"] .ve-tier { color:#6E717B; } html.arbre-cadre[data-theme="light"] .ve-filet { background:linear-gradient(90deg,rgba(13,15,20,.26),rgba(13,15,20,0)); } html.arbre-cadre[data-theme="light"] .ve-ici { background:radial-gradient(closest-side,rgba(245,245,247,.94),rgba(245,245,247,.8) 62%,rgba(245,245,247,0)); } html.arbre-cadre[data-theme="light"] .ve-ici::before { background:#0D0F14; } html.arbre-cadre[data-theme="light"] .ve-ici b { display:inline-block; padding:5px 8px; background:#C8372D; color:#FFFFFF; font:600 10px/1 'Inter',system-ui,sans-serif; letter-spacing:.7px; clip-path:var(--c3); } html.arbre-cadre[data-theme="light"] .ve-ici strong { margin-top:8px; color:#0D0F14; } html.arbre-cadre[data-theme="light"] .ve-ici small { color:#6E717B; } html.arbre-cadre[data-theme="light"] .ve-gem { box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(13,15,20,.22); } /* ── La vue 2D : la grille sur la page perle ── */ html.arbre-cadre[data-theme="light"] :is(.arbre2d-overlay, .a2d-canvas, .a2d-belt-strip) { background:#F5F5F7!important; color:#0D0F14; } html.arbre-cadre[data-theme="light"] .a2d-strip-hairline { background:rgba(13,15,20,.10); } html.arbre-cadre[data-theme="light"] .a2d-strip-divider { background:rgba(13,15,20,.16); } html.arbre-cadre[data-theme="light"] .a2d-strip-tier-labels { color:#6E717B; } html.arbre-cadre[data-theme="light"] .a2d-swatch { box-shadow:0 0 0 1px rgba(13,15,20,.22),inset 0 1px 0 rgba(255,255,255,.6)!important; } html.arbre-cadre[data-theme="light"] .a2d-kihap-line { background:linear-gradient(180deg,#C8372D 0%,rgba(200,55,45,.10) 100%)!important; } html.arbre-cadre[data-theme="light"] .a2d-kihap-pill { padding:5px 9px!important; background:#C8372D!important; color:#FFFFFF!important; font-family:'Inter',sans-serif!important; font-style:normal; font-weight:600; letter-spacing:.7px!important; clip-path:var(--c3); } html.arbre-cadre[data-theme="light"] :is(.a2d-ll-hangul, .a2d-ll-latin) { color:#0D0F14!important; } html.arbre-cadre[data-theme="light"] .a2d-ll-sub { color:#6E717B; } html.arbre-cadre[data-theme="light"] .a2d-ll-tick { background:#C8372D!important; opacity:1!important; } /* les cartes : le fond de la carte porte le trait, ::before repose le blanc 1 px en dedans (la recette du cadre) */ html.arbre-cadre[data-theme="light"] .a2d-node { background:rgba(13,15,20,.20)!important; color:#0D0F14!important; } html.arbre-cadre[data-theme="light"] .a2d-node::before { background:#FFFFFF; } html.arbre-cadre[data-theme="light"] .a2d-node.current { background:#C8372D!important; color:#0D0F14!important; } html.arbre-cadre[data-theme="light"] .a2d-node.current::before { inset:1.5px; background:#FFFFFF; } html.arbre-cadre[data-theme="light"] .a2d-node.next { background:rgba(13,15,20,.40)!important; color:#0D0F14!important; } html.arbre-cadre[data-theme="light"] .a2d-node.lock { background:rgba(13,15,20,.09)!important; color:#6E717B!important; } html.arbre-cadre[data-theme="light"] .a2d-node.lock::before { background:#F0F0F3; } html.arbre-cadre[data-theme="light"] .a2d-footer { color:#6E717B; } html.arbre-cadre[data-theme="light"] .a2d-legend:is(.done, .free) .a2d-legend-dot { background:#B08433!important; } html.arbre-cadre[data-theme="light"] .a2d-legend.current .a2d-legend-dot { background:#C8372D!important; box-shadow:none!important; } html.arbre-cadre[data-theme="light"] .a2d-legend.next .a2d-legend-dot { background:transparent!important; border:1px dashed #6E717B!important; } html.arbre-cadre[data-theme="light"] .a2d-legend.lock .a2d-legend-dot { background:#A2A5AD!important; } /* ── La fiche d'une technique (arbre/essai-b.js) : carte blanche, l'action au vermillon ── */ html.arbre-cadre[data-theme="light"] .eb-voile { background:radial-gradient(ellipse var(--eb-rx,200px) var(--eb-ry,120px) at var(--eb-x,50%) var(--eb-y,50%), rgba(245,245,247,0) 0%,rgba(245,245,247,0) 42%,rgba(245,245,247,.82) 100%); } html.arbre-cadre[data-theme="light"] .eb-trace :is(polygon, path) { stroke:#0D0F14; } html.arbre-cadre[data-theme="light"] .eb-fiche { color:#0D0F14; filter:drop-shadow(0 1px 1px rgba(13,15,20,.05)) drop-shadow(0 18px 34px rgba(13,15,20,.16)); } html.arbre-cadre[data-theme="light"] .eb-corps { background:#FFFFFF; } html.arbre-cadre[data-theme="light"] .eb-corps::after { display:none; } html.arbre-cadre[data-theme="light"] .eb-photos, html.arbre-cadre[data-theme="light"] .eb-photos figure { background:#EAEAEE; } html.arbre-cadre[data-theme="light"] .eb-photos figcaption { color:#FFFFFF; letter-spacing:.7px; } html.arbre-cadre[data-theme="light"] .eb-nom { color:#0D0F14; } html.arbre-cadre[data-theme="light"] .eb-meta { color:#6E717B; } html.arbre-cadre[data-theme="light"] .eb-meta .eb-grade { color:#0D0F14; } html.arbre-cadre[data-theme="light"] .eb-gem { box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(13,15,20,.22); } html.arbre-cadre[data-theme="light"] .eb-losange { background:#A2A5AD; opacity:1; } html.arbre-cadre[data-theme="light"] .eb-lbl { letter-spacing:.7px; color:#6E717B; } html.arbre-cadre[data-theme="light"] .eb-puce { background:#EAEAEE; color:#0D0F14; clip-path:var(--c6); } html.arbre-cadre[data-theme="light"] .eb-puce::before { display:none; } html.arbre-cadre[data-theme="light"] .eb-puce i { color:#6E717B; } html.arbre-cadre[data-theme="light"] .eb-puce:is(:hover, :focus-visible) { background:#0D0F14; color:#FFFFFF; } html.arbre-cadre[data-theme="light"] .eb-puce:is(:hover, :focus-visible) i { color:#FFFFFF; } html.arbre-cadre[data-theme="light"] .eb-lien { height:48px; background:#C8372D; color:#FFFFFF; font:600 15px/1 'Inter',system-ui,sans-serif; letter-spacing:-.2px; clip-path:var(--c10); } html.arbre-cadre[data-theme="light"] .eb-fermer { width:36px; height:36px; background:rgba(255,255,255,.92); color:#0D0F14; clip-path:var(--c6); } html.arbre-cadre[data-theme="light"] .eb-fermer::before { display:none; } html.arbre-cadre[data-theme="light"] .eb-fermer:is(:hover, :focus-visible) { background:#FFFFFF; } /* ── Le volet (la fiche de la vue 2D) ── */ html.arbre-cadre[data-theme="light"] .panel { background:#FFFFFF!important; border-left:0!important; color:#0D0F14; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; box-shadow:-10px 0 30px rgba(13,15,20,.12); } html.arbre-cadre[data-theme="light"] .panel::after { display:none; } html.arbre-cadre[data-theme="light"] .panel .close { background:#EAEAEE!important; color:#0D0F14!important; clip-path:var(--c6); } html.arbre-cadre[data-theme="light"] .panel .close::before { display:none; } html.arbre-cadre[data-theme="light"] .panel .close:hover { background:#0D0F14!important; color:#FFFFFF!important; } html.arbre-cadre[data-theme="light"] .panel .ctx { letter-spacing:.7px; color:#6E717B!important; } html.arbre-cadre[data-theme="light"] .panel .ctx .swatch { box-shadow:0 0 0 1px rgba(13,15,20,.22); } html.arbre-cadre[data-theme="light"] .panel h2 { color:#0D0F14!important; } html.arbre-cadre[data-theme="light"] .panel .hangul { color:#6E717B!important; } html.arbre-cadre[data-theme="light"] :is(.panel .pill, .pill) { clip-path:var(--c3); } html.arbre-cadre[data-theme="light"] .pill.kihap { background:#C8372D!important; color:#FFFFFF!important; } html.arbre-cadre[data-theme="light"] .pill.next { background:#0D0F14!important; color:#FFFFFF!important; } html.arbre-cadre[data-theme="light"] .pill.done { background:rgba(176,132,51,.14)!important; color:#8A6521!important; } html.arbre-cadre[data-theme="light"] :is(.pill.lock, .pill.cat) { background:#EAEAEE!important; color:#4A4D57!important; } html.arbre-cadre[data-theme="light"] :is(.pill.lock, .pill.cat)::before { display:none; } html.arbre-cadre[data-theme="light"] .panel .p-photo img { box-shadow:none; } html.arbre-cadre[data-theme="light"] .panel .p-photo figcaption { color:#FFFFFF; } html.arbre-cadre[data-theme="light"] .panel .grid .cell { background:#F0F0F3; border-color:transparent; } html.arbre-cadre[data-theme="light"] .panel .grid .lbl { letter-spacing:.7px; color:#6E717B!important; } html.arbre-cadre[data-theme="light"] .panel .grid .val { color:#0D0F14!important; } html.arbre-cadre[data-theme="light"] .panel .prereqs h3 { letter-spacing:.7px; color:#6E717B!important; } html.arbre-cadre[data-theme="light"] .panel .prereqs .chip { background:#EAEAEE!important; color:#0D0F14!important; clip-path:var(--c6); } html.arbre-cadre[data-theme="light"] .panel .prereqs .chip::before { display:none; } html.arbre-cadre[data-theme="light"] .panel .prereqs .chip:hover { background:#0D0F14!important; color:#FFFFFF!important; } html.arbre-cadre[data-theme="light"] :is(.panel .cta a, .panel .cta button) { font:600 15px 'Inter',sans-serif!important; letter-spacing:-.2px; clip-path:var(--c10); } html.arbre-cadre[data-theme="light"] .panel .cta .primary { background:#C8372D!important; color:#FFFFFF!important; } html.arbre-cadre[data-theme="light"] .panel .cta .ghost { background:#EAEAEE!important; color:#0D0F14!important; } html.arbre-cadre[data-theme="light"] .panel .cta .ghost::before { display:none; } /* sur un écran tactile le volet monte du bas : ses coins du haut coupés à 14, sa poignée grise */ @media (max-width:720px), (pointer:coarse) { html.arbre-cadre[data-theme="light"] .panel { box-shadow:0 -8px 26px rgba(13,15,20,.16); } html.arbre-cadre[data-theme="light"] .panel::before { background:#D5D6DC; } }