/* ========================================================================== Krinein — Design System (refonte 2026) « La culture au crible » Chargé APRÈS bootstrap.css : ne style que les composants préfixés .kr-* ========================================================================== */ /* Inter — auto-hébergé (SIL OFL), variable, sous-ensemble latin */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-var.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-var-italic.woff2") format("woff2"); } :root { /* Couleur signature */ --kr-primary: #6d28d9; /* violet */ --kr-primary-600: #7c3aed; --kr-primary-700: #5b21b6; --kr-primary-050: #f5f3ff; /* fond violet très clair (newsletter) */ --kr-on-primary: #ffffff; /* Neutres (mode clair) */ --kr-bg: #ffffff; --kr-surface: #ffffff; --kr-surface-2: #f7f7f8; /* fonds de sections / cartes secondaires */ --kr-border: #e6e6ea; --kr-text: #17171c; /* titres / texte fort */ --kr-text-2: #4b4b55; /* texte courant */ --kr-text-3: #75757f; /* métadonnées (AA : 4,56:1 sur blanc ; #8a8a97 était à 3,41) */ /* Notes /10 */ --kr-score-good: #16a34a; --kr-score-mid: #6d28d9; --kr-score-low: #dc2626; /* Catégories (badges) */ --kr-cat-cinema: #e11d48; --kr-cat-series: #2563eb; --kr-cat-manga: #7c3aed; --kr-cat-bd: #0d9488; --kr-cat-livres: #d97706; --kr-cat-jv: #059669; --kr-cat-musique: #db2777; --kr-cat-sortir: #ea580c; --kr-cat-jds: #0891b2; --kr-cat-sciences: #4f46e5; /* Typo */ --kr-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Rythme */ --kr-radius: 12px; --kr-radius-s: 8px; --kr-gap: 24px; --kr-maxw: 1200px; --kr-header-h: 72px; --kr-shadow: 0 1px 2px rgba(20,20,30,.04), 0 6px 20px rgba(20,20,30,.06); /* Liens-texte et étoiles : le violet dense passe en clair mais pas en dark (2,4:1) ; le dark surcharge ces trois tokens (audit 12 juil). */ --kr-link: var(--kr-primary); --kr-star-fill: var(--kr-primary); --kr-star-rail: var(--kr-border); } html[data-theme="dark"] { --kr-bg: #0f0f14; --kr-surface: #17171f; --kr-surface-2: #1d1d27; --kr-border: #2a2a36; --kr-text: #f4f4f7; --kr-text-2: #c3c3cf; --kr-text-3: #8a8a99; --kr-primary-050: #1e1830; --kr-shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.4); --kr-link: #a78bfa; /* AA 7,0:1 sur --kr-bg (le violet dense était à 2,4) */ --kr-star-fill: #a78bfa; --kr-star-rail: #3a3a4c; /* rail vide distinct du remplissage (était 1,99:1) */ } /* ---- Base : appliquée seulement sous .kr-scope (le des pages refondues) ---- */ body.kr-scope { margin: 0; background: var(--kr-bg); color: var(--kr-text-2); font-family: var(--kr-font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .kr-scope *, .kr-scope *::before, .kr-scope *::after { box-sizing: border-box; } :where(.kr-scope h1, .kr-scope h2, .kr-scope h3, .kr-scope h4, .kr-scope p, .kr-scope ul, .kr-scope ol, .kr-scope figure) { margin: 0; padding: 0; } :where(.kr-scope ul, .kr-scope ol) { list-style: none; } .kr-scope img { max-width: 100%; height: auto; } .kr-container { max-width: var(--kr-maxw); margin: 0 auto; padding: 0 24px; } /* ========================================================================== HEADER ========================================================================== */ header.main { all: unset; } /* neutralise l'ancien style */ .kr-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--kr-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--kr-border); } .kr-header__bar { max-width: var(--kr-maxw); margin: 0 auto; height: var(--kr-header-h); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* Logo + baseline */ .kr-brand { display: flex; flex-direction: column; justify-content: center; text-decoration: none; flex: 0 0 auto; } .kr-brand__mark { height: 26px; width: auto; display: block; align-self: flex-start; color: var(--kr-text); } .kr-brand__mark .kr-dot { fill: var(--kr-primary); } .kr-brand__base { margin-top: 3px; font-size: 8.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kr-text-3); white-space: nowrap; } /* Nav principale — 2e étage, pleine largeur */ .kr-nav { border-top: 1px solid var(--kr-border); } .kr-nav ul { list-style: none; margin: 0 auto; max-width: var(--kr-maxw); padding: 4px 20px; display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; } .kr-nav li + li::before { content: none; } /* neutralise l'ancien "nav li+li:before { content:' / ' }" */ .kr-nav a { display: block; padding: 10px 13px; border-radius: 8px; color: var(--kr-text-2); text-decoration: none; font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: color .15s, background .15s; } .kr-nav a:hover { color: var(--kr-text); background: var(--kr-surface-2); } .kr-nav li.is-active a { color: var(--kr-primary); } .kr-nav li.is-active a { position: relative; } .kr-nav li.is-active a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--kr-primary); } /* Actions (recherche, thème, compte) */ .kr-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } .kr-iconbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--kr-text-2); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; } .kr-iconbtn:hover { background: var(--kr-surface-2); color: var(--kr-text); } .kr-iconbtn svg { width: 20px; height: 20px; } .kr-iconbtn--search { border: 1px solid var(--kr-border); } .kr-actions .kr-iconbtn--round { padding: 0; width: 40px; justify-content: center; } .kr-theme-toggle .kr-moon { display: inline; } .kr-theme-toggle .kr-sun { display: none; } html[data-theme="dark"] .kr-theme-toggle .kr-moon { display: none; } html[data-theme="dark"] .kr-theme-toggle .kr-sun { display: inline; } /* Burger (mobile) */ .kr-burger { display: none; } /* ========================================================================== COMPOSANTS RÉUTILISABLES ========================================================================== */ /* Badge catégorie */ .kr-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--kr-primary); } /* Badge « Actualité » (chantier AF) : distinct des badges rubrique (violet plein). Pastille sombre translucide + liseré violet -> lisible sur n'importe quelle image, même en dark. */ .kr-badge--actu { background: rgba(20, 20, 28, .72); color: #fff; border: 1px solid var(--kr-primary); padding: 3px 9px; } /* Pastille de note /10 */ .kr-score { display: inline-flex; align-items: baseline; gap: 1px; padding: 6px 10px; border-radius: 8px; background: var(--kr-primary); color: #fff; font-weight: 800; line-height: 1; } .kr-score b { font-size: 20px; } .kr-score span { font-size: 12px; opacity: .8; font-weight: 700; } .kr-score[data-tone="good"] { background: var(--kr-score-good); } .kr-score[data-tone="low"] { background: var(--kr-score-low); } /* Boutons */ .kr-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 10px; border: 0; background: var(--kr-primary); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s, transform .05s; } .kr-btn:hover { background: var(--kr-primary-700); color: #fff; } .kr-btn:active { transform: translateY(1px); } .kr-btn--ghost { background: transparent; color: var(--kr-primary); border: 1px solid var(--kr-border); } .kr-btn--ghost:hover { background: var(--kr-surface-2); color: var(--kr-primary); } .kr-link { color: var(--kr-primary); font-weight: 600; text-decoration: none; } .kr-link:hover { text-decoration: underline; } /* Titre de section */ .kr-section-title { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--kr-text); margin: 56px 0 24px; } /* Notes en étoiles — remplissage précis au demi-point (note/10) via masque SVG. Ex : 5/10 -> --r:50% -> 2,5 étoiles pile. */ .kr-stars { --sw: 16px; --r: 0%; display: inline-block; vertical-align: middle; position: relative; width: calc(var(--sw) * 5); height: var(--sw); background-color: var(--kr-star-rail); -webkit-mask: url("/images/star5.svg") 0 0 / calc(var(--sw) * 5) var(--sw) no-repeat; mask: url("/images/star5.svg") 0 0 / calc(var(--sw) * 5) var(--sw) no-repeat; } .kr-stars::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: var(--r); background-color: var(--kr-star-fill); -webkit-mask: url("/images/star5.svg") 0 0 / calc(var(--sw) * 5) var(--sw) no-repeat; mask: url("/images/star5.svg") 0 0 / calc(var(--sw) * 5) var(--sw) no-repeat; } .kr-stars--sm { --sw: 13px; } /* Windows High Contrast : les background-color sont forcés, le masque devient invisible. On reprend la main (forced-color-adjust) avec des couleurs système : rail grisé, remplissage au contraste du texte. */ @media (forced-colors: active) { .kr-stars { forced-color-adjust: none; background-color: GrayText; } .kr-stars::after { background-color: CanvasText; } } .kr-section-title::before { content:""; width: 4px; height: 22px; border-radius: 3px; background: var(--kr-primary); } /* ========================================================================== FOOTER ========================================================================== */ footer .kr-footer, .kr-footer { background: var(--kr-primary-700); color: #fff; margin-top: 56px; } .kr-footer__inner { max-width: var(--kr-maxw); margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .kr-footer__social { display: flex; gap: 14px; } .kr-footer__social a { color: rgba(255,255,255,.85); display: inline-flex; } .kr-footer__social a:hover { color: #fff; } .kr-footer__social svg { width: 20px; height: 20px; } .kr-footer__nav { display: flex; gap: 8px 22px; flex-wrap: wrap; flex: 1 1 auto; justify-content: center; list-style: none; margin: 0; padding: 0; } .kr-footer__nav a { color: rgba(255,255,255,.9); text-decoration: none; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } .kr-footer__nav a:hover { color: #fff; text-decoration: underline; } .kr-footer__brand { font-weight: 800; letter-spacing: .06em; color: #fff; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 960px) { .kr-nav { overflow: hidden; max-height: 0; border-top: 0; transition: max-height .25s ease; } .kr-nav.is-open { max-height: 70vh; overflow-y: auto; border-top: 1px solid var(--kr-border); } .kr-nav ul { flex-direction: column; padding: 8px 16px 16px; gap: 2px; } .kr-nav a { padding: 12px; font-size: 16px; } .kr-nav li.is-active a::after { display: none; } .kr-burger { display: inline-flex; } .kr-iconbtn--search span { display: none; } .kr-footer__inner { flex-direction: column; text-align: center; } } @media (min-width: 961px) { .kr-burger { display: none; } } /* ≤480px : le header ne rétrécissait pas sous 397px -> scroll horizontal global (audit 12 juil) */ @media (max-width: 480px) { .kr-header__bar { padding: 0 12px; gap: 8px; } .kr-brand__base { display: none; } .kr-actions { gap: 4px; } .kr-iconbtn--round { width: 36px; height: 36px; } } /* ========================================================================== RECHERCHE — command palette (⌘K) ========================================================================== */ html.kr-cmdk-open { overflow: hidden; } .kr-cmdk[hidden] { display: none; } /* sinon le display:flex ci-dessous écrase l'attribut hidden -> backdrop invisible qui capte tous les clics */ .kr-cmdk { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; } .kr-cmdk__backdrop { position: absolute; inset: 0; background: rgba(15,15,22,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s ease; } .kr-cmdk.is-open .kr-cmdk__backdrop { opacity: 1; } .kr-cmdk__dialog { position: relative; width: 100%; max-width: 640px; background: var(--kr-surface); border: 1px solid var(--kr-border); border-radius: 16px; box-shadow: 0 24px 64px rgba(15,15,25,.30), 0 4px 12px rgba(15,15,25,.12); overflow: hidden; display: flex; flex-direction: column; max-height: 72vh; transform: translateY(-10px) scale(.985); opacity: 0; transition: transform .2s cubic-bezier(.16,1,.3,1), opacity .18s ease; } .kr-cmdk.is-open .kr-cmdk__dialog { transform: none; opacity: 1; } .kr-cmdk__head { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--kr-border); flex: 0 0 auto; } .kr-cmdk__icon { width: 20px; height: 20px; color: var(--kr-text-3); flex: 0 0 auto; } .kr-cmdk__input { flex: 1 1 auto; border: 0; background: none; outline: none; font-family: inherit; font-size: 17px; color: var(--kr-text); padding: 4px 0; min-width: 0; } .kr-cmdk__input::placeholder { color: var(--kr-text-3); } .kr-cmdk__spin { width: 16px; height: 16px; border: 2px solid var(--kr-border); border-top-color: var(--kr-primary); border-radius: 50%; animation: kr-spin .6s linear infinite; flex: 0 0 auto; } @keyframes kr-spin { to { transform: rotate(360deg); } } .kr-cmdk__esc { border: 1px solid var(--kr-border); background: var(--kr-surface-2); border-radius: 6px; padding: 3px 7px; cursor: pointer; color: var(--kr-text-3); flex: 0 0 auto; line-height: 1; } .kr-cmdk__esc kbd { font: 600 11px/1 var(--kr-font); } .kr-cmdk__results { overflow-y: auto; flex: 1 1 auto; padding: 0; overscroll-behavior: contain; } .kr-cmdk__filters { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; background: var(--kr-surface); border-bottom: 1px solid var(--kr-border); } .kr-cmdk__chip { border: 1px solid var(--kr-border); background: var(--kr-surface); color: var(--kr-text-2); border-radius: 20px; padding: 5px 11px; font: 600 12.5px/1 var(--kr-font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s, color .12s; } .kr-cmdk__chip:hover { border-color: var(--kr-text-3); color: var(--kr-text); } .kr-cmdk__chip.is-on { background: var(--kr-primary); border-color: var(--kr-primary); color: #fff; } .kr-cmdk__chipn { font-size: 11px; opacity: .75; } .kr-cmdk__chip.is-on .kr-cmdk__chipn { opacity: .9; } .kr-cmdk__list { padding: 6px 8px 8px; } .kr-cmdk__type { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--kr-primary); } .kr-cmdk__type.is-forum { color: var(--kr-text-3); } .kr-cmdk__grouplabel { display: flex; align-items: center; gap: 8px; padding: 12px 10px 6px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--kr-text-3); } .kr-cmdk__count { background: var(--kr-surface-2); color: var(--kr-text-3); border-radius: 20px; padding: 1px 7px; font-size: 10px; font-weight: 700; } .kr-cmdk__row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; text-decoration: none; scroll-margin: 10px; } .kr-cmdk__row.is-active { background: var(--kr-primary-050); } .kr-cmdk__row.is-active .kr-cmdk__go { opacity: 1; transform: none; } .kr-cmdk__media { position: relative; width: 40px; height: 52px; border-radius: 6px; overflow: hidden; flex: 0 0 auto; background: var(--kr-surface-2); display: flex; align-items: center; justify-content: center; } .kr-cmdk__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .kr-cmdk__media.is-ph { color: var(--kr-primary); background: var(--kr-primary-050); } .kr-cmdk__media.is-ph svg { width: 20px; height: 20px; } .kr-cmdk__media.is-forum { border-radius: 50%; width: 40px; height: 40px; } .kr-cmdk__media.is-recent { border-radius: 50%; width: 34px; height: 34px; color: var(--kr-text-3); background: var(--kr-surface-2); } .kr-cmdk__rowbody { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; } .kr-cmdk__rowtitle { font-size: 15px; font-weight: 700; color: var(--kr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kr-cmdk__rowtitle mark, .kr-cmdk__rowexc mark { background: none; color: var(--kr-primary); font-weight: 800; } .kr-cmdk__rowmeta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--kr-text-3); } .kr-cmdk__badge { padding: 2px 7px; font-size: 10px; } .kr-cmdk__note { color: var(--kr-text-3); font-weight: 600; } .kr-cmdk__author { color: var(--kr-text-2); font-weight: 600; } .kr-cmdk__rowexc { font-size: 12.5px; color: var(--kr-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kr-cmdk__go { width: 18px; height: 18px; color: var(--kr-primary); flex: 0 0 auto; opacity: 0; transform: translateX(-4px); transition: .15s; } .kr-cmdk__empty, .kr-cmdk__hint { padding: 40px 20px; text-align: center; color: var(--kr-text-3); } .kr-cmdk__emptyt { font-size: 15px; font-weight: 700; color: var(--kr-text-2); } .kr-cmdk__emptys { font-size: 13px; margin-top: 4px; } .kr-cmdk__hint { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 14px; line-height: 1.5; } .kr-cmdk__hintk { font: 600 12px/1 var(--kr-font); color: var(--kr-text-3); border: 1px solid var(--kr-border); background: var(--kr-surface-2); border-radius: 6px; padding: 6px 9px; } .kr-cmdk__skel { display: flex; align-items: center; gap: 12px; padding: 9px 10px; animation: kr-pulse 1.2s ease-in-out infinite; } .kr-cmdk__skelmedia { width: 40px; height: 52px; border-radius: 6px; background: var(--kr-surface-2); flex: 0 0 auto; } .kr-cmdk__skellines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; } .kr-cmdk__skellines span { height: 10px; border-radius: 5px; background: var(--kr-surface-2); } .kr-cmdk__skellines span:first-child { width: 55%; } .kr-cmdk__skellines span:last-child { width: 32%; } @keyframes kr-pulse { 50% { opacity: .45; } } .kr-cmdk__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--kr-border); flex: 0 0 auto; } .kr-cmdk__hints { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--kr-text-3); } .kr-cmdk__hints kbd { font: 600 11px/1 var(--kr-font); border: 1px solid var(--kr-border); background: var(--kr-surface-2); border-radius: 4px; padding: 3px 5px; min-width: 15px; text-align: center; } .kr-cmdk__hints span { margin-right: 4px; } .kr-cmdk__all { font-size: 13px; font-weight: 700; color: var(--kr-primary); text-decoration: none; white-space: nowrap; } .kr-cmdk__all:hover { text-decoration: underline; } .kr-cmdk__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Recherches récentes : suppression en un clic (croix par ligne + « Tout effacer ») */ .kr-cmdk__row--recent { cursor: pointer; } .kr-cmdk__wipe { margin-left: auto; border: 0; background: none; padding: 2px 4px; border-radius: 6px; font: inherit; color: var(--kr-text-3); cursor: pointer; } .kr-cmdk__wipe:hover { color: var(--kr-primary); } .kr-cmdk__del { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--kr-text-3); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; } .kr-cmdk__del svg { width: 14px; height: 14px; } .kr-cmdk__row--recent:hover .kr-cmdk__del, .kr-cmdk__row--recent.is-active .kr-cmdk__del, .kr-cmdk__del:focus-visible { opacity: 1; } .kr-cmdk__del:hover { background: var(--kr-border); color: var(--kr-text); } @media (hover: none) { .kr-cmdk__del { opacity: 1; } } /* tactile : pas de survol, la croix reste visible */ .kr-iconbtn__kbd { margin-left: 6px; font: 600 11px/1 var(--kr-font); color: var(--kr-text-3); border: 1px solid var(--kr-border); background: var(--kr-surface-2); border-radius: 5px; padding: 3px 5px; } @media (prefers-reduced-motion: reduce) { .kr-cmdk__backdrop, .kr-cmdk__dialog, .kr-cmdk__go { transition: none; } .kr-cmdk__skel, .kr-cmdk__spin { animation: none; } } @media (max-width: 900px) { .kr-iconbtn__kbd { display: none; } } @media (max-width: 560px) { .kr-cmdk { padding: 0; } .kr-cmdk__dialog { max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; } } /* ========================================================================== HOME ========================================================================== */ .kr-home { max-width: var(--kr-maxw); margin: 0 auto; padding: 32px 24px 0; } .kr-home__top { display: grid; grid-template-columns: 1fr 340px; gap: var(--kr-gap); align-items: start; } /* Hero */ .kr-hero { position: relative; border-radius: var(--kr-radius); overflow: hidden; min-height: 380px; display: flex; align-items: flex-end; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--kr-primary-700) 0%, #2a1650 45%, #14141c 100%); } .kr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,15,0) 32%, rgba(10,10,15,.5) 70%, rgba(10,10,15,.92) 100%), linear-gradient(72deg, rgba(10,10,15,.62) 0%, rgba(10,10,15,.18) 42%, rgba(10,10,15,0) 64%); } .kr-hero__body { position: relative; z-index: 1; width: 100%; max-width: 620px; box-sizing: border-box; padding: 32px; text-shadow: 0 1px 10px rgba(0,0,0,.35); } .kr-hero__title { font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; margin: 14px 0 12px; color: #fff; } .kr-hero__sub { font-size: 17px; color: rgba(255,255,255,.88); margin: 0 0 20px; } .kr-hero .kr-badge { background: var(--kr-primary); } @media (max-width: 600px) { .kr-hero { min-height: 320px; } .kr-hero__body { padding: 20px 20px 22px; } .kr-hero__title { font-size: 27px; } .kr-hero__sub { font-size: 15px; margin-bottom: 16px; } } /* Sidebar « les plus lues » */ .kr-panel { background: var(--kr-surface); border: 1px solid var(--kr-border); border-radius: var(--kr-radius); padding: 20px; box-shadow: var(--kr-shadow); } .kr-panel__title { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kr-text); margin: 0 0 4px; } .kr-rank { list-style: none; margin: 8px 0 0; padding: 0; } .kr-rank li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--kr-border); } .kr-rank li:first-child { border-top: 0; } .kr-rank__n { font-size: 20px; font-weight: 800; color: var(--kr-text-3); width: 24px; flex: 0 0 auto; font-variant-numeric: tabular-nums; line-height: 1.1; } .kr-rank li:first-child .kr-rank__n { font-size: 30px; font-weight: 900; background: linear-gradient(135deg, var(--kr-primary), var(--kr-primary-700)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .kr-rank__body { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; } .kr-rank a { color: var(--kr-text); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.3; } .kr-rank li:first-child a { font-size: 16px; font-weight: 700; } .kr-rank a:hover { color: var(--kr-primary); } /* Grille de cartes critiques */ .kr-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 24px; } .kr-card { display: flex; flex-direction: column; text-decoration: none; min-width: 0; } .kr-card__media { position: relative; border-radius: var(--kr-radius); overflow: hidden; aspect-ratio: 4/3; background: var(--kr-surface-2); } .kr-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .kr-card__badge { position: absolute; top: 10px; left: 10px; } .kr-card__oc { display: block; margin-top: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--kr-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kr-card__title { font-size: 17px; font-weight: 700; color: var(--kr-text); line-height: 1.25; margin: 12px 0 0; } .kr-card__oc + .kr-card__title { margin-top: 3px; } .kr-card:hover .kr-card__title { color: var(--kr-primary); } .kr-card__rating { margin: 8px 0 10px; } .kr-card__rating .kr-stars { --sw: 19px; } .kr-card__excerpt { font-size: 14px; color: var(--kr-text-2); margin: 0 0 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .kr-card__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; } .kr-avatar { position: relative; width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--kr-primary-050); color: var(--kr-primary); font-size: 12px; font-weight: 800; overflow: hidden; } .kr-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Avatar du forum sur le bouton compte : par-dessus l'icône SVG, fallback si l'image échoue (onerror) */ .kr-user__btn { position: relative; } .kr-user__ava { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; } .kr-card__meta { line-height: 1.25; } .kr-card__author { font-size: 13px; font-weight: 700; color: var(--kr-text); } .kr-card__date { font-size: 12px; color: var(--kr-text-3); } /* Newsletter */ .kr-newsletter { background: var(--kr-primary-050); border-radius: var(--kr-radius); padding: 32px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 60px; } .kr-newsletter__txt { flex: 1 1 320px; } .kr-newsletter h3 { font-size: 20px; font-weight: 800; color: var(--kr-text); margin: 0 0 6px; } .kr-newsletter p { margin: 0; color: var(--kr-text-2); } .kr-newsletter form { display: flex; gap: 10px; flex: 1 1 320px; flex-wrap: wrap; } .kr-newsletter input[type="email"] { flex: 1 1 auto; height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--kr-border); background: var(--kr-bg); color: var(--kr-text); font-family: inherit; font-size: 15px; } .kr-newsletter .kr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .kr-newsletter__msg { flex-basis: 100%; margin: 2px 0 0; font-size: 14px; font-weight: 600; } .kr-newsletter__msg.is-ok { color: #15803d; } .kr-newsletter__msg.is-err { color: #dc2626; } html[data-theme="dark"] .kr-newsletter__msg.is-ok { color: #4ade80; } html[data-theme="dark"] .kr-newsletter__msg.is-err { color: #f87171; } @media (max-width: 960px) { .kr-home__top { grid-template-columns: 1fr; } .kr-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .kr-cards { grid-template-columns: 1fr; } } /* Dossiers de fond (bande de 3) */ .kr-dossiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kr-gap); } .kr-dossier { position: relative; border-radius: var(--kr-radius); overflow: hidden; min-height: 220px; display: flex; align-items: flex-end; text-decoration: none; background: #1a1a22; } .kr-dossier img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .kr-dossier:hover img { transform: scale(1.05); } .kr-dossier::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,15,.05), rgba(10,10,15,.85)); } .kr-dossier__body { position: relative; z-index: 1; padding: 20px; color: #fff; } .kr-dossier__title { font-size: 20px; font-weight: 800; line-height: 1.2; color: #fff; margin-bottom: 8px; } .kr-dossier__cta { font-size: 14px; font-weight: 700; color: #fff; opacity: .9; } @media (max-width: 960px) { .kr-dossiers { grid-template-columns: 1fr; } } /* Rank : étoiles sous le titre (palmarès typographique) */ .kr-rank__body .kr-stars { align-self: flex-start; } /* Entête de section avec lien "voir tout" */ .kr-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 56px 0 24px; } .kr-section-head .kr-section-title { margin: 0; } .kr-section-more { font-size: 14px; font-weight: 600; color: var(--kr-primary); text-decoration: none; white-space: nowrap; } .kr-section-more:hover { text-decoration: underline; } /* ========================================================================== SECTIONS ÉDITORIALES (Choix de la rédac / Édito / Chroniques / Tribune) ========================================================================== */ .kr-eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kr-primary); margin-bottom: 10px; } /* Choix de la rédaction (bande) */ .kr-choix { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } .kr-choix__item { text-decoration: none; display: block; } .kr-choix__media { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 3/4; background: var(--kr-surface-2); } .kr-choix__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .kr-choix__item:hover .kr-choix__media img { transform: scale(1.05); } .kr-choix__badge { position: absolute; top: 8px; left: 8px; font-size: 9px; padding: 3px 6px; } .kr-choix__name { font-size: 13.5px; font-weight: 700; color: var(--kr-text); margin: 10px 0 5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kr-choix__item:hover .kr-choix__name { color: var(--kr-primary); } /* Zone éditoriale */ .kr-editorial { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--kr-gap); margin-top: 56px; } .kr-edito, .kr-tribune, .kr-chroniques { background: var(--kr-surface-2); border: 1px solid var(--kr-border); border-radius: var(--kr-radius); padding: 26px; box-shadow: none; } .kr-edito__title, .kr-tribune__title { font-size: 20px; font-weight: 800; color: var(--kr-text); margin-bottom: 10px; line-height: 1.2; } .kr-edito p, .kr-tribune p { color: var(--kr-text-2); font-size: 15px; } .kr-edito__sign { margin-top: 14px !important; font-weight: 700; color: var(--kr-text); font-style: italic; } .kr-tribune .kr-btn { margin-top: 18px; } .kr-edito__more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--kr-primary); text-decoration: none; } .kr-edito__more:hover { text-decoration: underline; } /* « Ce soir à la télé » compact dans la 3e colonne de la bande */ .kr-editorial__tv .kr-tvw { margin: 0; height: 100%; } .kr-editorial__tv .kr-section-head { margin: 0 0 6px; } .kr-editorial__tv .kr-section-title { font-size: 20px; } .kr-editorial__tv .kr-tvw__list { grid-template-columns: 1fr; gap: 0; } .kr-editorial__tv .kr-tvw__item { border-top: 1px solid var(--kr-border); padding: 10px 0; } .kr-editorial__tv .kr-tvw__item:first-child { border-top: 0; padding-top: 2px; } .kr-editorial__tv .kr-tvw__item:nth-child(n+4) { display: none; } .kr-chro { display: flex; flex-direction: column; margin-top: 6px; } .kr-chro li { border-top: 1px solid var(--kr-border); } .kr-chro li:first-child { border-top: 0; } .kr-chro a { display: block; padding: 12px 0; text-decoration: none; } .kr-chro a:hover strong { color: var(--kr-primary); } .kr-chro strong { display: block; font-size: 15px; color: var(--kr-text); font-weight: 700; } .kr-chro span { display: block; font-size: 13px; color: var(--kr-text-3); margin-top: 2px; } @media (max-width: 960px) { .kr-choix { grid-template-columns: repeat(3, 1fr); } .kr-editorial { grid-template-columns: 1fr; } } @media (max-width: 560px) { .kr-choix { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== TOOLTIP RICHE (survol des cartes) ========================================================================== */ .kr-tipsrc { display: none; } .kr-tip { position: fixed; z-index: 300; width: 330px; background: var(--kr-surface); border: 1px solid var(--kr-border); border-radius: 14px; padding: 16px 18px; box-shadow: 0 4px 10px rgba(20,20,30,.08), 0 18px 50px rgba(20,20,30,.18); pointer-events: none; opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .16s ease, transform .16s ease; } .kr-tip.is-on { opacity: 1; transform: translateY(0) scale(1); } .kr-tip--below.is-on { transform: translateY(0) scale(1); } .kr-tip--below { transform: translateY(-6px) scale(.98); } .kr-tip__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .kr-tip__type { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--kr-text-3); } .kr-tip__date { margin-left: auto; font-size: 12px; color: var(--kr-text-3); } .kr-tip__oc { font-size: 12.5px; font-weight: 700; color: var(--kr-primary); margin-bottom: 2px; } .kr-tip__title { font-size: 17px; font-weight: 800; color: var(--kr-text); line-height: 1.25; } .kr-tip__note { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; } .kr-tip__note b { font-size: 15px; font-weight: 800; color: var(--kr-text); } .kr-tip__note b span { font-size: 11px; color: var(--kr-text-3); font-weight: 700; } .kr-tip__exc { font-size: 13.5px; line-height: 1.55; color: var(--kr-text-2); margin: 10px 0 0; } .kr-tip__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kr-border); font-size: 12.5px; font-weight: 600; color: var(--kr-text-3); } .kr-tip__cta { color: var(--kr-primary); font-weight: 700; margin-left: auto; } /* ========================================================================== PAGE ARTICLE (reskin par-dessus l'ancien layout .wrapper/.left/.right) ========================================================================== */ .kr-artpage .wrapper { margin: 28px auto 0; max-width: var(--kr-maxw); padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; text-align: left; } .kr-artpage .left { float: none; width: auto; max-width: 720px; min-width: 0; padding: 0; } .kr-artpage .right { width: auto; font-size: inherit; margin: 0; column-count: auto; -webkit-column-count: auto; -moz-column-count: auto; display: flex; flex-direction: column; } /* permet de réordonner les panneaux du rail */ /* le legacy bootstrap posait .right{margin-left:60%;column-count:2} → rail réel 152px au lieu des 380px de la grille ; neutralisé ci-dessus (fiches OC ET pages article) */ .kr-artpage .right .box { max-width: none; } .kr-artpage .right .kr-alsoread { order: 1; } /* « À lire aussi » passe sous la fiche technique */ .kr-artpage .photos, .kr-artpage .commentaires, .kr-artpage .kr-reco { grid-column: 1 / -1; } /* Bloc « X sur Krinein » (biographies type 8/9) : porté depuis l'ancien bootstrap.css retiré des gabarits article/oc/tv (perf, audit SEO f21). Rendu identique, source unique. */ /* Bloc « X sur Krinein » : ancien fond noir legacy → section claire cohérente + vraie grille d'affiches (ratio uniforme via aspect-ratio, fini les colonnes CSS bancales). Audit UX. */ .kr-artpage .photos { background: var(--kr-surface-2); border: 1px solid var(--kr-border); border-radius: var(--kr-radius); padding: 22px 24px 8px; margin-top: 40px; } .kr-artpage .titrePhoto { color: var(--kr-text); font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 18px; padding: 0; } .kr-artpage .photo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 18px; column-count: auto; -webkit-column-count: auto; } .kr-artpage .photo img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; margin: 0 0 8px; box-shadow: var(--kr-shadow); background: var(--kr-surface); } .kr-artpage .it { break-inside: avoid; margin: 0; line-height: 1.25; font-size: 13.5px; font-weight: 600; color: var(--kr-text-2); display: block; } .kr-artpage .it a { color: var(--kr-text); text-decoration: none; } .kr-artpage .it a:hover { color: var(--kr-primary); } @media (max-width: 900px) { .kr-artpage .photo { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .kr-artpage .photo { grid-template-columns: repeat(2, 1fr); } } /* Recommandations (bas d'article) — module compact horizontal, distinct des cartes éditoriales */ .kr-reco { margin-top: 40px; background: var(--kr-surface-2); border: 1px solid var(--kr-border); border-radius: var(--kr-radius); padding: 18px 22px 8px; } .kr-reco__label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--kr-primary); margin-bottom: 4px; } .kr-reco__label svg { width: 15px; height: 15px; } .kr-reco__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } @media (max-width: 700px) { .kr-reco__list { grid-template-columns: 1fr; } } .kr-rcard { display: flex; gap: 14px; align-items: center; text-decoration: none; padding: 13px 0; border-top: 1px solid var(--kr-border); } .kr-reco__list .kr-rcard:nth-child(1), .kr-reco__list .kr-rcard:nth-child(2) { border-top: 0; } @media (max-width: 700px) { .kr-reco__list .kr-rcard:nth-child(2) { border-top: 1px solid var(--kr-border); } } .kr-rcard__media { position: relative; width: 46px; height: 60px; border-radius: 6px; overflow: hidden; flex: 0 0 auto; background: var(--kr-primary-050); box-shadow: 0 1px 3px rgba(20,20,30,.12); } /* placeholder : plus de carré blanc vide quand l'image manque (l'img le recouvre en chargeant) */ .kr-rcard__media::before { content: "★"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--kr-link); opacity: .45; } .kr-rcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .kr-rcard__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .kr-rcard__cat { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--kr-text-3); } .kr-rcard__year { font-weight: 600; } .kr-rcard__year::before { content: "· "; } .kr-rcard__title { font-size: 14px; font-weight: 700; color: var(--kr-text); line-height: 1.25; } .kr-rcard:hover .kr-rcard__title { color: var(--kr-primary); } .kr-rcard .kr-stars { --sw: 13px; } /* En-tête d'article */ .kr-arthead__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .kr-arthead__type { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--kr-text-3); } .kr-arthead__oc { font-size: 14px; font-weight: 700; color: var(--kr-link); margin-bottom: 4px; } .kr-artpage h1, .kr-arthead__title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--kr-text); margin: 0 0 14px; } .kr-arthead__byline { font-size: 14px; color: var(--kr-text-3); margin-bottom: 22px; } .kr-arthead__byline a { color: var(--kr-text-2); font-weight: 600; text-decoration: none; } .kr-arthead__byline a:hover { color: var(--kr-primary); } .kr-arthead__maj { font-style: italic; } /* Verdict */ .kr-verdict { background: var(--kr-surface-2); border: 1px solid var(--kr-border); border-left: 4px solid var(--kr-primary); border-radius: var(--kr-radius); padding: 18px 22px; margin: 0 0 8px; } .kr-verdict__score { display: flex; align-items: center; gap: 12px; } .kr-verdict__score .kr-stars { --sw: 22px; } .kr-verdict__smiley { width: 48px; height: 48px; flex: 0 0 auto; } .kr-verdict__score b { font-size: 22px; font-weight: 800; color: var(--kr-text); } .kr-verdict__score b span { font-size: 13px; color: var(--kr-text-3); } .kr-verdict__txt { margin: 10px 0 0; font-size: 15.5px; font-weight: 600; color: var(--kr-text); } .kr-verdict__link { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--kr-primary); text-decoration: none; } .kr-verdict__link:hover { text-decoration: underline; } /* Confort de lecture */ .kr-artpage article { font-size: 17px; line-height: 1.75; color: var(--kr-text-2); margin: 0 0 56px; } .kr-artpage article p { margin: 0 0 18px; } .kr-artpage .chapo { font-size: 19px; line-height: 1.6; font-weight: 600; font-style: normal; color: var(--kr-text); margin: 26px 0 22px; } .kr-artpage article img { border-radius: var(--kr-radius); height: auto; } /* exception vignettes cover : la règle ci-dessus (0-1-2) battait leurs règles (0-1-1) — sur la fiche OC (reco « même esprit », critiques) l'image restait en haut du cadre à hauteur naturelle, étoile placeholder apparente ; même piège que la byline plus bas */ .kr-artpage article .kr-rcard__media img, .kr-artpage article .kr-occrit__media img, .kr-artpage article .kr-avatar img { height: 100%; border-radius: 0; } .kr-artpage .imgc { text-align: right; color: var(--kr-text-3); font-size: 13px; } .kr-artpage article h2 { font-size: 23px; font-weight: 800; color: var(--kr-text); margin: 34px 0 14px; column-span: none; } .kr-artpage article a { color: var(--kr-link); } /* la byline reste grise : .kr-artpage article a (0-1-2) battait .kr-arthead__byline a (audit) */ .kr-artpage .kr-arthead__byline a { color: var(--kr-text-2); } .kr-artpage article em { font-style: italic; } .kr-artpage article strong { font-weight: 700; } /* Sidebar : les vieilles .box deviennent des panneaux */ .kr-artpage .right .box, .kr-artpage .right .listeF { display: block; background: var(--kr-surface); border: 1px solid var(--kr-border); border-radius: var(--kr-radius); padding: 18px 20px; margin: 0 0 18px; box-shadow: var(--kr-shadow); } .kr-artpage .right .listeF .box { border: 0; box-shadow: none; padding: 0; margin: 0; } .kr-artpage .right .titre { width: auto; max-width: none; background: none; color: var(--kr-text); padding: 0 0 10px; margin: 0 0 12px; text-align: left; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--kr-border); } .kr-artpage .right ul { margin: 0; } .kr-artpage .right li { line-height: 1.45; margin: 0 0 10px; max-width: none; clear: none; font-size: 14.5px; } .kr-artpage .right li a { color: var(--kr-text-2); text-decoration: none; font-weight: 600; } .kr-artpage .right li a:hover { color: var(--kr-primary); } .kr-artpage .right .none, .kr-artpage .right .ftnone { display: none; } .kr-artpage .right img { border-radius: 8px; height: auto; } @media (max-width: 960px) { .kr-artpage .wrapper { grid-template-columns: 1fr; gap: 0; } } /* Finitions page article */ .kr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px !important; } .kr-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--kr-surface-2); border: 1px solid var(--kr-border); color: var(--kr-text-3); } .kr-artpage .right .box.co { display: none; } /* coquille vide legacy */ .kr-artpage .right .listeF::before { content: "Informations"; display: block; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kr-text); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--kr-border); } .kr-artpage .right .listeF .titre { border-bottom: 0; padding-bottom: 2px; margin-bottom: 4px; color: var(--kr-text-3); font-size: 11.5px; } /* Clamp des listes longues de la fiche technique (Acteurs, Musiciens…) : 6 items + « + N autres » (bouton révélé par le handler data-kr-open partagé avec la fiche œuvre). Audit UX. */ .kr-artpage .right .listeF ul.kr-ftclamp:not(.is-open) li:nth-child(n+7) { display: none; } .kr-artpage .right .listeF .kr-ftmore { margin: 4px 0 2px; padding: 0; background: none; border: 0; color: var(--kr-primary); font-weight: 700; font-size: 12.5px; cursor: pointer; text-align: left; } .kr-artpage .right .listeF .kr-ftmore:hover { text-decoration: underline; } /* Avatars de la fiche technique (page article + fiche œuvre) : photo de la fiche liée cadrée sur le visage (object-position précalculé, cf search-index/face-focus.swift), initiales en repli. Le parent rond clippe la photo (overflow), pas besoin de radius sur l'img. */ .kr-ftava { position: relative; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--kr-surface-2); border: 1px solid var(--kr-border); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; } .kr-ftava i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--kr-text-3); } .kr-ftava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .kr-artpage .right .listeF li.kr-ftrow { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; min-height: 36px; } .kr-artpage .right .listeF li.kr-ftrow > a { display: flex; align-items: center; gap: 10px; min-width: 0; } .kr-artpage .right .listeF li.kr-ftrow a:hover .kr-ftava { border-color: var(--kr-primary); } .kr-ocft__list li.kr-ftrow { display: flex; align-items: center; gap: 8px; padding: 2px 0; } .kr-ocft__list li.kr-ftrow > a { display: flex; align-items: center; gap: 8px; min-width: 0; } .kr-ocft__list li.kr-ftrow .kr-ftava { flex-basis: 26px; width: 26px; height: 26px; } .kr-ocft__list li.kr-ftrow .kr-ftava i { font-size: 9px; } .kr-ocft__list li.kr-ftrow a:hover .kr-ftava { border-color: var(--kr-primary); } .kr-artpage article p { margin-bottom: 20px; } /* À lire aussi */ .kr-alsoread li { margin-bottom: 14px; } .kr-alsoread__meta { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kr-text-3); margin-right: 8px; } .kr-alsoread .kr-stars { vertical-align: -2px; } /* Fix : badge lisible partout (la regle article a {color:violet} l'ecrasait) */ .kr-artpage article a.kr-badge, .kr-badge { color: #fff; } /* Fil d'Ariane */ .kr-crumb { font-size: 13px; color: var(--kr-text-3); margin: 0 0 16px; } .kr-crumb a { color: var(--kr-text-3); text-decoration: none; } .kr-crumb a:hover { color: var(--kr-primary); } /* En-tete hero (couverture en fond) */ .kr-arthead--hero { position: relative; border-radius: var(--kr-radius); overflow: hidden; margin-bottom: 26px; background: #14141c; } .kr-arthead__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .kr-arthead--hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,16,.18), rgba(10,10,16,.55) 55%, rgba(10,10,16,.92)); } .kr-arthead__inner { position: relative; z-index: 1; } .kr-arthead--hero .kr-arthead__inner { padding: 150px 32px 24px; } .kr-arthead--hero .kr-arthead__title, .kr-arthead--hero .kr-arthead__oc { color: #fff; } .kr-arthead--hero .kr-arthead__oc { opacity: .9; } .kr-arthead--hero .kr-arthead__type { color: rgba(255,255,255,.75); } .kr-arthead--hero .kr-arthead__byline { color: rgba(255,255,255,.75); margin-bottom: 16px; } .kr-arthead--hero .kr-arthead__byline a { color: #fff; } .kr-arthead--hero .kr-verdict { background: rgba(20,20,28,.72); backdrop-filter: blur(4px); border-color: rgba(255,255,255,.14); } .kr-arthead--hero .kr-verdict__txt { color: #fff; } /* Lettrine + exergue */ .kr-artpage .chapo + p::first-letter { float: left; font-size: 58px; line-height: .85; font-weight: 800; color: var(--kr-primary); padding: 6px 10px 0 0; } .kr-artpage article blockquote { margin: 26px 0; padding: 6px 0 6px 22px; border-left: 4px solid var(--kr-primary); font-size: 20px; font-weight: 700; line-height: 1.45; color: var(--kr-primary); quotes: none; } /* A lire aussi : vignettes */ .kr-alsoread__item { display: flex; gap: 12px; align-items: flex-start; } .kr-alsoread__img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; } .kr-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } /* Fiche produit : liste des critiques */ .kr-oclist { margin: 0 0 32px; } .kr-oclist__item { padding: 12px 0; border-bottom: 1px solid var(--kr-border); } .kr-oclist__item a { font-weight: 700; color: var(--kr-text); text-decoration: none; } .kr-oclist__item a:hover { color: var(--kr-primary); } .kr-oclist__meta { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kr-text-3); margin: 0 8px; } /* Pages listes / archives */ .kr-artpage #archives, .kr-artpage .navigation { grid-column: 1 / -1; } .kr-artpage .listeAlphabetique li { display: inline-block; margin: 0 4px 6px 0; } .kr-artpage .listeAlphabetique a { display: inline-block; min-width: 30px; padding: 5px 9px; text-align: center; border: 1px solid var(--kr-border); border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--kr-text-2); text-decoration: none; } .kr-artpage .listeAlphabetique a:hover { color: #fff; background: var(--kr-primary); border-color: var(--kr-primary); } .kr-artpage #left h1, .kr-artpage .left h1 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; color: var(--kr-text); margin: 0 0 18px; } /* ---- Menu utilisateur (header) ---- */ .kr-user { position: relative; } .kr-user__btn { position: relative; } .kr-user__dot { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px var(--kr-bg); } .kr-user__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 95; min-width: 232px; background: var(--kr-surface); border: 1px solid var(--kr-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 20, 30, .14); padding: 6px; } .kr-user__menu > a, .kr-user__menu > button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--kr-text-2); cursor: pointer; text-decoration: none; } .kr-user__menu > a:hover, .kr-user__menu > button:hover { background: var(--kr-surface-2); color: var(--kr-text); } .kr-user__menu > .kr-user__logout { color: var(--kr-score-low); } .kr-user__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; border-bottom: 1px solid var(--kr-border); margin-bottom: 6px; } .kr-user__head .kr-avatar { width: 34px; height: 34px; font-size: 14px; } .kr-user__id strong { display: block; font-size: 14px; color: var(--kr-text); line-height: 1.25; } .kr-user__live { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #16a34a; } .kr-user__live i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: kr-live 2.4s ease-in-out infinite; } @keyframes kr-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .38); } 50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); } } /* ---- Modale (connexion) ---- */ .kr-noscroll { overflow: hidden; } .kr-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; } .kr-modal[hidden] { display: none; } .kr-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 12, 26, .55); backdrop-filter: blur(3px); } .kr-modal__card { position: relative; width: 100%; max-width: 400px; box-sizing: border-box; background: var(--kr-surface); border: 1px solid var(--kr-border); border-radius: 16px; padding: 28px; box-shadow: 0 24px 64px rgba(10, 8, 20, .35); } .kr-modal__close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--kr-text-3); font-size: 22px; line-height: 1; cursor: pointer; } .kr-modal__close:hover { background: var(--kr-surface-2); color: var(--kr-text); } .kr-modal__title { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--kr-text); } .kr-modal__sub { margin: 0 0 18px; font-size: 13.5px; color: var(--kr-text-3); } .kr-field { display: block; margin-bottom: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--kr-text-2); } .kr-field input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; height: 42px; padding: 0 12px; border: 1px solid var(--kr-border); border-radius: 10px; background: var(--kr-bg); color: var(--kr-text); font-family: inherit; font-size: 15px; font-weight: 500; } .kr-field input:focus { outline: none; border-color: var(--kr-primary); box-shadow: 0 0 0 3px var(--kr-primary-050); } .kr-modal__err { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--kr-score-low); } .kr-modal__submit { width: 100%; justify-content: center; } .kr-modal__links { display: flex; gap: 8px; justify-content: center; margin: 14px 0 0; font-size: 13px; color: var(--kr-text-3); } .kr-modal__links a { color: var(--kr-text-2); font-weight: 600; text-decoration: none; } .kr-modal__links a:hover { color: var(--kr-primary); } /* ---- Menu contextuel du logo (téléchargement identité) ---- */ .kr-logomenu { position: absolute; z-index: 200; min-width: 240px; background: var(--kr-surface); border: 1px solid var(--kr-border); border-radius: 12px; box-shadow: 0 14px 36px rgba(20, 20, 30, .18); padding: 6px; } .kr-logomenu[hidden] { display: none; } .kr-logomenu__t { margin: 4px 10px 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kr-text-3); } .kr-logomenu a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--kr-text-2); text-decoration: none; } .kr-logomenu a:hover { background: var(--kr-surface-2); color: var(--kr-primary); } .kr-logomenu a:first-of-type { color: var(--kr-primary); } .kr-logomenu__ic { font-size: 15px; } /* ========================================================================== PAGES LISTING « Voir tout » (critiques.php, dossiers.php) : filtres + pagination ========================================================================== */ .kr-listing { padding-bottom: 64px; } .kr-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--kr-text-3); margin-top: 4px; } .kr-crumbs a { color: var(--kr-text-2); text-decoration: none; font-weight: 600; } .kr-crumbs a:hover { color: var(--kr-primary); } .kr-crumbs__cur { color: var(--kr-text-3); } .kr-listing__head { margin: 14px 0 22px; } .kr-listing__title { font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; color: var(--kr-text); line-height: 1.1; } .kr-listing__sub { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--kr-text-3); } /* Filtres par rubrique (chips) */ .kr-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .kr-chip { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--kr-border); background: var(--kr-surface); color: var(--kr-text-2); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .kr-chip:hover { border-color: var(--kr-primary); color: var(--kr-primary); background: var(--kr-primary-050); } .kr-chip.is-active { background: var(--kr-primary); border-color: var(--kr-primary); color: var(--kr-on-primary); } /* Pagination */ .kr-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 48px; } .kr-page { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--kr-border); background: var(--kr-surface); color: var(--kr-text-2); font-size: 14px; font-weight: 600; text-decoration: none; } .kr-page:hover { border-color: var(--kr-primary); color: var(--kr-primary); background: var(--kr-primary-050); } .kr-page.is-active { background: var(--kr-primary); border-color: var(--kr-primary); color: var(--kr-on-primary); } .kr-page--dots { border: 0; background: none; min-width: 24px; color: var(--kr-text-3); } .kr-page--nav { font-weight: 700; } .kr-empty { padding: 48px 0; text-align: center; color: var(--kr-text-3); font-size: 16px; } /* Icône « accueil » en tête des rubriques du header (comme le forum) */ .kr-nav__home a { display: inline-flex; align-items: center; } .kr-nav__home svg { width: 18px; height: 18px; } /* Barre d'admin (.footpanel, équipe connectée) : l'ancien CSS ciblait #footpanel (l'ID), la classe des pages refondues n'avait AUCUN style → liste à puces brute en bas de page. Refonte : barre fixe sombre, pilules, action d'édition en violet, scroll horizontal mobile. */ body.kr-scope:has(.footpanel) { padding-bottom: 60px; } .kr-scope .footpanel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px; list-style: none; background: #17171c; border-top: 1px solid rgba(255,255,255,.08); overflow-x: auto; white-space: nowrap; } .kr-scope .footpanel::before { content: "Admin"; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8a8a97; margin-right: 6px; flex: none; } .kr-scope .footpanel li { display: contents; } .kr-scope .footpanel a { flex: none; display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: #e8e8ee; font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1.2; } .kr-scope .footpanel a:hover { background: var(--kr-primary); color: #fff; } .kr-scope .footpanel a[title="editer"] { background: var(--kr-primary); color: #fff; } .kr-scope .footpanel a[title="editer"]:hover { background: var(--kr-primary-600); } .kr-scope .footpanel a.team { margin-left: auto; } html[data-theme="dark"] .kr-scope .footpanel { background: #101016; } /* Compteur (notifications / MP) sur les icônes rondes du header — connecté */ .kr-hasbadge { position: relative; } .kr-count { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--kr-primary); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--kr-bg); } /* ========================================================================== PAGE DE RECHERCHE DÉDIÉE (/recherche.php) ========================================================================== */ .kr-searchpage { max-width: 860px; margin: 0 auto; padding: 40px 24px 24px; } .kr-searchpage__hero { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; background: var(--kr-surface); border: 1px solid var(--kr-border); border-radius: 14px; box-shadow: var(--kr-shadow); } .kr-searchpage__icon { width: 22px; height: 22px; color: var(--kr-text-3); flex: 0 0 auto; } .kr-searchpage__hero input { flex: 1 1 auto; border: 0; background: none; outline: none; font-family: inherit; font-size: 18px; color: var(--kr-text); min-width: 0; padding: 10px 0; } .kr-searchpage__hero input::placeholder { color: var(--kr-text-3); } .kr-searchpage__hero .kr-btn { flex: 0 0 auto; } .kr-searchpage__hint { margin: 40px 4px; color: var(--kr-text-2); font-size: 16px; line-height: 1.6; } .kr-searchpage__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 6px; } .kr-searchpage__tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 22px; border: 1px solid var(--kr-border); background: var(--kr-surface); color: var(--kr-text-2); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .12s, border-color .12s, color .12s; } .kr-searchpage__tab:hover { border-color: var(--kr-text-3); color: var(--kr-text); } .kr-searchpage__tab.is-on { background: var(--kr-primary); border-color: var(--kr-primary); color: #fff; } .kr-searchpage__tabn { font-size: 12px; opacity: .8; } .kr-searchpage__count { margin: 16px 4px 18px; color: var(--kr-text-3); font-size: 14px; } .kr-searchpage__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .kr-sr { display: flex; gap: 16px; padding: 14px 14px; border-radius: 12px; text-decoration: none; border: 1px solid transparent; transition: background .12s, border-color .12s; } .kr-sr:hover { background: var(--kr-surface-2); border-color: var(--kr-border); } .kr-sr__media { position: relative; width: 56px; height: 74px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; background: var(--kr-primary-050); color: var(--kr-primary); display: flex; align-items: center; justify-content: center; } .kr-sr__media svg { width: 26px; height: 26px; } .kr-sr__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .kr-sr__media.is-forum { border-radius: 50%; width: 56px; height: 56px; align-self: center; color: var(--kr-text-3); background: var(--kr-surface-2); } .kr-sr__body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; } .kr-sr__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--kr-text-3); } .kr-sr__type { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--kr-primary); } .kr-sr__type.is-forum { color: var(--kr-text-3); } .kr-sr__badge { padding: 2px 8px; font-size: 10px; } .kr-sr__note { color: var(--kr-text-3); font-weight: 600; } .kr-sr__author { color: var(--kr-text-2); font-weight: 600; } .kr-sr__title { font-size: 17px; font-weight: 700; color: var(--kr-text); line-height: 1.3; } .kr-sr:hover .kr-sr__title { color: var(--kr-primary); } .kr-sr__exc { font-size: 14px; color: var(--kr-text-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kr-searchpage .kr-pagination { margin: 32px 0 8px; } @media (max-width: 560px) { .kr-searchpage { padding: 24px 16px; } .kr-searchpage__hero .kr-btn { display: none; } .kr-sr__media { width: 46px; height: 62px; } .kr-sr__media.is-forum { width: 46px; height: 46px; } } /* ===================================================================== FICHE OC (item C, 11 juil) — hub de l'œuvre « l'article se lit en colonne, la fiche se parcourt en pleine largeur » ===================================================================== */ /* bandes pleine largeur dans la grille kr-artpage */ .kr-ocpage .wrapper > .kr-ocband { grid-column: 1 / -1; min-width: 0; } .kr-ocband__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 34px 0 16px; } .kr-ocband__head .kr-section-title { margin: 0; } .kr-ocband__count { font-size: 12.5px; color: var(--kr-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; } /* pas de lettrine ni de gabarit editorial sur le résumé de fiche */ .kr-ocresume { font-size: 15.5px; line-height: 1.7; color: var(--kr-text-2); max-width: 66ch; } .kr-ocresume p { margin: 0 0 12px; } /* ---------- hero ---------- */ .kr-ochero { position: relative; border-radius: var(--kr-radius); overflow: hidden; isolation: isolate; background: #17131f; } .kr-ochero__bg { position: absolute; inset: -40px; z-index: -2; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; object-position: center 30%; filter: blur(26px) saturate(1.15); transform: scale(1.12); } .kr-ochero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,10,26,.66), rgba(8,6,18,.88)); } .kr-ochero__in { display: flex; gap: 26px; padding: 28px; align-items: flex-end; } .kr-ochero__poster { flex: 0 0 168px; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.45); } .kr-ochero__poster img { width: 100%; height: 100%; object-fit: cover; display: block; } .kr-ochero__body { min-width: 0; flex: 1; } .kr-ochero .kr-arthead__type { color: rgba(255,255,255,.78); text-shadow: 0 1px 8px rgba(0,0,0,.65); } /* .kr-ochero en préfixe : bat .kr-artpage h1 (0,1,1) qui remettait le titre en sombre */ .kr-ochero .kr-ochero__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; margin: 8px 0 10px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.55); } .kr-ochero__chips { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13.5px; color: rgba(255,255,255,.92); margin-bottom: 14px; text-shadow: 0 1px 8px rgba(0,0,0,.65); } .kr-ochero__chips i { font-style: normal; color: rgba(255,255,255,.4); } .kr-ochero .kr-verdict { display: inline-block; background: rgba(14,12,24,.82); backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,.16); margin: 0; } .kr-ochero .kr-verdict__txt { color: #fff; } /* Carte verdict toujours sombre → lien « Lire la critique » en violet clair accessible (comme --kr-link en thème sombre) : le violet dense n'atteignait que ~2,4:1. */ .kr-ochero .kr-verdict__link { color: #a78bfa; } .kr-ochero .kr-verdict__link:hover { color: #c4b5fd; text-decoration: underline; } .kr-ochero--noposter { background: var(--kr-surface-2); } .kr-ochero--noposter::before { display: none; } .kr-ochero--noposter .kr-ochero__title { color: var(--kr-text); text-shadow: none; } .kr-ochero--noposter .kr-ochero__chips { color: var(--kr-text-2); } .kr-ochero--noposter .kr-ochero__chips i { color: var(--kr-text-3); } .kr-ochero--noposter .kr-arthead__type { color: var(--kr-text-3); } .kr-ochero--noposter .kr-verdict { background: var(--kr-surface); border-color: var(--kr-border); } .kr-ochero--noposter .kr-verdict__txt { color: var(--kr-text); } .kr-ochero--noposter .kr-verdict__link { color: var(--kr-primary); } /* carte claire → violet dense OK */ @media (max-width: 700px) { .kr-ochero__in { gap: 14px; padding: 18px; } .kr-ochero__poster { flex-basis: 104px; } .kr-ochero__title { font-size: 24px; } .kr-ochero__chips { font-size: 12px; } } /* ---------- cartes critiques ---------- */ .kr-occrits { display: flex; flex-direction: column; gap: 12px; } .kr-occrit { display: flex; gap: 16px; align-items: center; background: var(--kr-surface-2); border: 1px solid var(--kr-border); border-radius: var(--kr-radius); padding: 14px; text-decoration: none; } .kr-occrit:hover { border-color: var(--kr-primary); } .kr-occrit__media { flex: 0 0 92px; aspect-ratio: 8 / 5; border-radius: 8px; overflow: hidden; background: var(--kr-surface); } .kr-occrit__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .kr-occrit__media--none { display: none; } .kr-occrit__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .kr-occrit__type { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kr-primary); } .kr-occrit__title { font-size: 15.5px; font-weight: 800; color: var(--kr-text); line-height: 1.3; } .kr-occrit:hover .kr-occrit__title { color: var(--kr-primary); } .kr-occrit__punch { font-size: 13px; color: var(--kr-text-2); font-style: italic; } .kr-occrit__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--kr-text-3); margin-top: 2px; } /* ---------- fiche technique (rail) ---------- */ .kr-ocft { background: var(--kr-surface-2); border: 1px solid var(--kr-border); border-radius: var(--kr-radius); overflow: hidden; } .kr-ocft summary { cursor: pointer; list-style: none; padding: 13px 18px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kr-text-3); display: flex; justify-content: space-between; align-items: center; } .kr-ocft summary::-webkit-details-marker { display: none; } .kr-ocft summary::after { content: "▾"; color: var(--kr-text-3); } .kr-ocft[open] summary::after { content: "▴"; } .kr-ocft summary:hover { color: var(--kr-primary); } .kr-ocft__in { padding: 2px 18px 14px; border-top: 1px solid var(--kr-border); } /* rangée compacte : label à gauche, valeurs à droite (le rail ne doit pas creuser la page) */ .kr-ocft__group { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 12px; padding: 8px 0 6px; } .kr-ocft__group + .kr-ocft__group { border-top: 1px solid var(--kr-border); } .kr-ocft__label { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kr-text-3); margin: 0; padding-top: 2px; line-height: 1.4; } .kr-ocft__list { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.45; } .kr-ocft__list li { padding: 1px 0; color: var(--kr-text); font-weight: 500; } .kr-ocft__group .kr-ocft__more { grid-column: 2; justify-self: start; } .kr-ocft__list a { color: var(--kr-primary); text-decoration: none; font-weight: 600; } .kr-ocft__list a:hover { text-decoration: underline; } .kr-ocft__list--clamp:not(.is-open) li:nth-child(n+7) { display: none; } .kr-ocft__more { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--kr-primary); cursor: pointer; } .kr-ocft__more:hover { text-decoration: underline; } /* ---------- galerie ---------- */ .kr-ocgal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .kr-ocgal a { position: relative; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: var(--kr-surface-2); display: block; } .kr-ocgal a img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; } .kr-ocgal a:hover img { transform: scale(1.05); } .kr-ocgal:not(.is-open) > a:nth-child(n+6) { display: none; } .kr-ocgal.is-open .kr-ocgal__more { display: none; } .kr-ocgal__more { aspect-ratio: 4 / 3; border: 0; border-radius: 9px; cursor: pointer; background: linear-gradient(160deg, var(--kr-primary), var(--kr-primary-700)); color: #fff; font: inherit; font-size: 14px; font-weight: 800; } .kr-ocgal__more:hover { filter: brightness(1.08); } @media (max-width: 700px) { .kr-ocgal { grid-template-columns: repeat(3, 1fr); } .kr-ocgal:not(.is-open) > a:nth-child(n+6) { display: none; } } @media (prefers-reduced-motion: reduce) { .kr-ocgal a img { transition: none; } } /* lightbox galerie (vanilla, dialog natif) */ /* le dialog EST le voile plein écran (le rendu du ::backdrop seul est capricieux) */ .kr-lbx { border: 0; padding: 0; background: rgba(10,8,18,.92); width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; } .kr-lbx[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; } .kr-lbx::backdrop { background: rgba(10,8,18,.6); } .kr-lbx img { max-width: 92vw; max-height: 84vh; display: block; border-radius: 8px; } .kr-lbx figcaption { color: rgba(255,255,255,.85); font-size: 13px; text-align: center; padding: 10px 6px 0; } .kr-lbx__nav { position: fixed; top: 50%; transform: translateY(-50%); border: 0; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; } .kr-lbx__nav:hover { background: rgba(255,255,255,.28); } .kr-lbx__nav--prev { left: 18px; } .kr-lbx__nav--next { right: 18px; } .kr-lbx__close { position: fixed; top: 16px; right: 18px; border: 0; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; line-height: 1; } .kr-lbx__close:hover { background: rgba(255,255,255,.28); } /* ---------- vidéos ---------- */ .kr-ocvids { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .kr-ocvid { margin: 0; } .kr-ocvid video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--kr-radius); background: #000; display: block; } .kr-ocvid figcaption { font-size: 13px; font-weight: 600; color: var(--kr-text-2); padding-top: 8px; } @media (max-width: 700px) { .kr-ocvids { grid-template-columns: 1fr; } } /* ---------- autour de l'œuvre / presse ---------- */ .kr-ocnews { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } .kr-ocnews a { display: flex; align-items: baseline; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--kr-border); text-decoration: none; min-width: 0; } .kr-ocnews a:nth-child(1), .kr-ocnews a:nth-child(2) { border-top: 0; } .kr-ocnews__type { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--kr-text-3); } .kr-ocnews__title { font-size: 13.5px; font-weight: 600; color: var(--kr-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kr-ocnews a:hover .kr-ocnews__title { color: var(--kr-primary); } .kr-ocnews__date { margin-left: auto; flex: 0 0 auto; font-size: 11.5px; color: var(--kr-text-3); font-variant-numeric: tabular-nums; } @media (max-width: 700px) { .kr-ocnews { grid-template-columns: 1fr; } .kr-ocnews a:nth-child(2) { border-top: 1px solid var(--kr-border); } } /* ---------- baromètre lecteurs ---------- */ :root { --kr-baro-super: #6d28d9; --kr-baro-top: #a78bfa; --kr-baro-bof: #cbc7dd; --kr-baro-flop: #8d87a3; } html[data-theme="dark"] { --kr-baro-super: #8b5cf6; --kr-baro-top: #a78bfa; --kr-baro-bof: #3a3a4c; --kr-baro-flop: #565064; } .kr-ocbaro { background: var(--kr-surface-2); border: 1px solid var(--kr-border); border-radius: var(--kr-radius); padding: 18px 20px; } .kr-ocbaro__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .kr-ocbaro__row .kr-stars { --sw: 18px; } .kr-ocbaro__score { font-size: 19px; font-weight: 900; color: var(--kr-text); } .kr-ocbaro__score span { font-size: 13px; font-weight: 600; color: var(--kr-text-3); } .kr-ocbaro__dist { display: grid; gap: 5px; max-width: 420px; } .kr-ocbaro__distrow { display: grid; grid-template-columns: 40px 1fr 44px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--kr-text-2); } .kr-ocbaro__distrow i { font-style: normal; } .kr-ocbaro__distlabel { white-space: nowrap; font-variant-numeric: tabular-nums; } .kr-ocbaro__distbar { display: block; height: 9px; border-radius: 99px; background: var(--kr-border); overflow: hidden; } .kr-ocbaro__distbar b { display: block; height: 100%; background: var(--kr-primary); border-radius: 99px; } .kr-ocbaro__distn { text-align: right; font-variant-numeric: tabular-nums; } /* saga : plafond d'affichage (familles géantes type Marvel : 110 œuvres) */ .kr-reco__list--clamp:not(.is-open) .kr-rcard:nth-child(n+11) { display: none; } .kr-reco__more { display: inline-block; margin: 4px 0 12px; } /* critiques multiples (séries manga : jusqu'à 15) : 6 visibles + bouton */ .kr-occrits--clamp:not(.is-open) .kr-occrit:nth-child(n+7) { display: none; } .kr-occrits__more { display: inline-block; margin-top: 10px; } .kr-section-title .kr-ocband__count { font-weight: 600; margin-left: 6px; } /* vote lecteurs (étoiles 1..5, connectés) */ .kr-ocbaro__vote { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kr-border); } .kr-ocbaro__votelabel { font-size: 12.5px; font-weight: 700; color: var(--kr-text-2); } .kr-ocvote { display: inline-flex; gap: 2px; } .kr-ocvote__star { font: inherit; font-size: 26px; line-height: 1; background: none; border: 0; padding: 0 3px; color: var(--kr-border); cursor: pointer; transition: color .12s, transform .12s; } .kr-ocvote__star.is-on { color: var(--kr-primary); } .kr-ocvote:hover .kr-ocvote__star { color: var(--kr-primary); } .kr-ocvote .kr-ocvote__star:hover ~ .kr-ocvote__star { color: var(--kr-border); } .kr-ocvote__star:hover { transform: scale(1.15); } .kr-ocbaro__login { font: inherit; font-size: 13px; font-weight: 700; color: var(--kr-primary); background: var(--kr-surface); border: 1px solid var(--kr-border); border-radius: 99px; padding: 8px 16px; cursor: pointer; } .kr-ocbaro__login:hover { border-color: var(--kr-primary); } .kr-ocbaro__votemsg { font-size: 12.5px; font-weight: 600; color: var(--kr-text-2); } .kr-ocbaro__votemsg.is-ok { color: var(--kr-score-good); } .kr-ocbaro__empty { margin: 0 0 4px; font-size: 14px; color: var(--kr-text-2); } .kr-ocbaro__admin { margin-top: 14px; font-size: 13px; color: var(--kr-text-2); } .kr-ocbaro__admin summary { cursor: pointer; font-weight: 700; } .kr-ocbaro__admin ul { margin: 8px 0 0; padding-left: 18px; max-height: 220px; overflow-y: auto; } /* note des lecteurs dans le verdict d'article */ .kr-verdict__lecteurs { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--kr-text-2); } .kr-verdict__lecteurs strong { color: var(--kr-text); } .kr-stars--sm { --sw: 13px; } /* ligne « figure dans nos 4 étoiles et plus / critiques assassines » : maillage discret du verdict vers les vitrines, l'anchor seul porte la couleur */ .kr-verdict__vitrine { margin: 8px 0 0; font-size: 13px; color: var(--kr-text-2); } .kr-verdict__vitrine a { color: var(--kr-primary); font-weight: 600; text-decoration: none; } .kr-verdict__vitrine a:hover { text-decoration: underline; } /* « Autour de l'œuvre » en colonne principale : une seule colonne, titres non tronqués */ .kr-ocnews--col { grid-template-columns: 1fr; } .kr-ocnews--col a:nth-child(2) { border-top: 1px solid var(--kr-border); } .kr-ocnews--col .kr-ocnews__title { white-space: normal; } /* vidéo = façade cliquable vers YouTube (aucun embed tiers, aucun hébergement) */ .kr-ocvid--ext { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--kr-radius); overflow: hidden; background: #17131f; } .kr-ocvid--ext img { width: 100%; height: 100%; object-fit: cover; display: block; } .kr-ocvid--ext::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,6,16,.74)); } .kr-ocvid__play { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; background: var(--kr-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.4); transition: transform .15s; } .kr-ocvid__play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; } .kr-ocvid--ext:hover .kr-ocvid__play { transform: translate(-50%,-50%) scale(1.08); } @media (prefers-reduced-motion: reduce) { .kr-ocvid__play { transition: none; } } .kr-ocvid__title { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 11px; color: #fff; font-size: 13px; font-weight: 700; } /* flash de mise à jour du score après un vote */ .kr-ocbaro__score.is-flash { animation: krBaroFlash .9s ease; } @keyframes krBaroFlash { 0% { color: var(--kr-primary); transform: scale(1.15); } 100% { color: inherit; transform: none; } } .kr-ocbaro__score { display: inline-block; transform-origin: left center; } @media (prefers-reduced-motion: reduce) { .kr-ocbaro__score.is-flash { animation: none; } } /* ============ Programme TV (grille TNT, onglets par chaîne) ============ */ .kr-tv { margin: 22px 0; } .kr-tv__date { margin-top: 4px; } .kr-tv__intro { color: var(--kr-text-2); } .kr-tv__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .kr-tv__tab { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--kr-text-2); background: var(--kr-surface-2); border: 1px solid var(--kr-border); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .kr-tv__tab:hover { border-color: var(--kr-primary); color: var(--kr-primary); } .kr-tv__tab:focus-visible { outline: 2px solid var(--kr-primary); outline-offset: 2px; } .kr-tv__tab.is-active { background: var(--kr-primary); border-color: var(--kr-primary); color: var(--kr-on-primary); } /* mobile : une seule rangée qui défile au lieu de 5 rangées avant le contenu */ @media (max-width: 840px) { .kr-tv__tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 8px; } .kr-tv__tab { flex: 0 0 auto; scroll-snap-align: start; } } .kr-tv__panel { border: 1px solid var(--kr-border); border-radius: 12px; background: var(--kr-surface); padding: 6px 18px 10px; } /* même piège que .kr-cmdk : le reset bootstrap `section{display:block}` écrase l'attribut hidden */ .kr-tv__panel[hidden] { display: none; } .kr-tv .kr-tv__panel .kr-tv__chname { margin: 12px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kr-text-3); } /* spécificité renforcée : les règles article/p de .kr-artpage posent margin-bottom 56/20px */ .kr-tv .kr-tv__panel .kr-tv__item { display: flex; gap: 16px; align-items: baseline; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--kr-border); } .kr-tv .kr-tv__panel .kr-tv__item:last-child { border-bottom: 0; } .kr-tv .kr-tv__panel .kr-tv__time { flex: 0 0 52px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--kr-text); font-size: 15px; } .kr-tv__body { min-width: 0; } .kr-tv .kr-tv__panel .kr-tv__title { margin: 0; font-size: 15.5px; line-height: 1.35; color: var(--kr-text); } .kr-tv .kr-tv__panel .kr-tv__meta { margin: 2px 0 0; font-size: 13px; color: var(--kr-text-2); } /* badges catégorie (Film / Série / Doc) — mêmes teintes que les badges de rubrique */ .kr-tv__cat { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 2px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--kr-text-3); } .kr-tv__cat[data-tvcat="film"] { background: var(--kr-cat-cinema); } .kr-tv__cat[data-tvcat="serie"] { background: var(--kr-cat-series); } .kr-tv__cat[data-tvcat="doc"] { background: var(--kr-cat-bd); } /* météo / JT / services : atténués ; déjà diffusé : estompé ; en cours : mis en avant */ .kr-tv .kr-tv__panel .kr-tv__item--minor { opacity: .62; } .kr-tv .kr-tv__panel .kr-tv__item.is-past { opacity: .42; } .kr-tv .kr-tv__panel .kr-tv__item.is-now { box-shadow: inset 3px 0 0 var(--kr-primary); padding-left: 12px; opacity: 1; } .kr-tv .kr-tv__panel .kr-tv__item.is-now .kr-tv__time { color: var(--kr-primary); font-weight: 700; } .kr-tv .kr-tv__panel .kr-tv__item.is-now .kr-tv__title::after { content: "En ce moment"; display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--kr-on-primary); background: var(--kr-primary); } .kr-tv__empty { margin: 22px 0; padding: 16px 18px; border: 1px solid var(--kr-border); border-radius: 12px; background: var(--kr-surface-2); color: var(--kr-text-2); } /* lien « Notre critique » sur la grille TV */ .kr-tv .kr-tv__panel .kr-tv__crit { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--kr-primary); text-decoration: none; } .kr-tv .kr-tv__panel .kr-tv__crit:hover { text-decoration: underline; } /* widget « Ce soir à la télé » (rubrique Séries & TV) : cartes affiche + note */ .kr-tvw { margin: 26px 0; padding: 16px 18px 18px; border: 1px solid var(--kr-border); border-radius: 12px; background: var(--kr-surface-2); } .kr-tvw .kr-section-head { margin: 0 0 12px; } .kr-tvw__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 22px; margin: 0; padding: 0; list-style: none; } .kr-tvw__item { min-width: 0; } .kr-tvw__card { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; } .kr-tvw__poster { flex: 0 0 46px; width: 46px; height: 65px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.18); } .kr-tvw__body { min-width: 0; } .kr-tvw__slot { display: block; font-size: 12px; font-weight: 600; color: var(--kr-text-3); margin-bottom: 1px; } .kr-tvw__title { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--kr-text); } a.kr-tvw__card:hover .kr-tvw__title { color: var(--kr-primary); } .kr-tvw__note { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; color: var(--kr-text-2); } .kr-tvw__note b { color: var(--kr-text); font-weight: 700; } /* page programme TV : pleine largeur, chaînes en colonne sticky (desktop) */ .kr-tvpage .wrapper { grid-template-columns: minmax(0,1fr); } /* bootstrap pose .left{width:66%;max-width:900px} — on libère toute la largeur */ .kr-tvpage .left { width: auto; max-width: none; min-width: 0; } @media (min-width: 841px) { .kr-tvpage .kr-tv { display: grid; grid-template-columns: 235px minmax(0,1fr); gap: 24px; align-items: start; } .kr-tvpage .kr-tv__tabs { flex-direction: column; flex-wrap: nowrap; gap: 3px; margin: 0; position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; padding-right: 6px; } .kr-tvpage .kr-tv__tab { text-align: left; border-radius: 8px; padding: 7px 12px; font-size: 14px; background: transparent; border-color: transparent; } .kr-tvpage .kr-tv__tab:hover { background: var(--kr-surface-2); color: var(--kr-text); border-color: transparent; } .kr-tvpage .kr-tv__tab.is-active { background: var(--kr-primary); border-color: var(--kr-primary); color: var(--kr-on-primary); } .kr-tvpage .kr-tv__panel { grid-column: 2; grid-row: 1; } } /* pages chaîne /programme-tv/{slug}/ (chantier SEO f21) : grille SANS colonne d'onglets (annule la grid 2 colonnes du hub) + lien vers la page chaîne */ .kr-tvpage .kr-tv--solo { display: block; } .kr-tvpage .kr-tv--solo .kr-tv__panel { grid-column: auto; grid-row: auto; } .kr-tv .kr-tv__panel .kr-tv__chlink { margin: 10px 0 6px; font-size: 13.5px; } .kr-tv .kr-tv__panel .kr-tv__chlink a { font-weight: 600; color: var(--kr-primary); text-decoration: none; } .kr-tv .kr-tv__panel .kr-tv__chlink a:hover { text-decoration: underline; } .kr-tvchips { margin: 30px 0 10px; } .kr-tvchips .kr-section-title { margin-bottom: 10px; } /* « Les choix de Krinein ce soir » (hub) + « Bientôt sur {chaîne} » (pages chaîne) : mêmes cartes que le widget home, en pleine page */ .kr-tvchoix-wrap { margin: 26px 0; padding: 16px 18px 18px; border: 1px solid var(--kr-border); border-radius: 12px; background: var(--kr-surface-2); } .kr-tvchoix-wrap .kr-section-title { margin: 0 0 2px; } .kr-tvchoix__intro { margin: 0 0 14px; font-size: 13.5px; color: var(--kr-text-2); } .kr-tvchoix { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 22px; margin: 0; padding: 0; list-style: none; } .kr-tvchoix__item { min-width: 0; } .kr-tvchoix__card { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; } .kr-tvchoix__poster { flex: 0 0 52px; width: 52px; height: 74px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.18); } .kr-tvchoix__body { min-width: 0; } .kr-tvchoix__slot { display: block; font-size: 12px; font-weight: 600; color: var(--kr-text-3); margin-bottom: 1px; } .kr-tvchoix__title { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--kr-text); } a.kr-tvchoix__card:hover .kr-tvchoix__title { color: var(--kr-primary); } .kr-tvchoix__note { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; color: var(--kr-text-2); } .kr-tvchoix__note b { color: var(--kr-text); font-weight: 700; } /* chapeau de rubrique (Sortir : le verbe promet un agenda, le chapeau cadre) */ .kr-rubchapo { margin: 0 0 18px; font-size: 14.5px; color: var(--kr-text-2); } .kr-rubchapo strong { color: var(--kr-text); } .kr-rubchapo a { color: var(--kr-primary); text-decoration: none; } .kr-rubchapo a:hover { text-decoration: underline; } /* séparateur nav avant Forum (frontière éditorial / communauté) */ .kr-nav .kr-nav__sep { margin-left: 12px; padding-left: 16px; border-left: 1px solid var(--kr-border); } /* ========================================= Avatars auteurs (byline) ; les commentaires ont été SUPPRIMÉS du site (décision Guillaume) ========================================= */ .kr-byline__avatars { display: inline-flex; vertical-align: middle; margin-right: 8px; } .kr-byline__avatars .kr-avatar:not(:first-child) { margin-left: -8px; } .kr-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--kr-surface-2); color: var(--kr-primary); font-size: 13px; font-weight: 700; overflow: hidden; border: 2px solid var(--kr-surface); flex: none; } .kr-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Rappel du verdict en fin de critique/test long (audit 12 juil) */ .kr-verdict--end { margin: 36px 0 8px; } /* ========================================= Archives A-Z (listeArticles refondu, 12 juil) ========================================= */ .kr-azletters { display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0 8px; } .kr-azletters__l { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--kr-border); color: var(--kr-text-2); font-weight: 700; font-size: 14px; text-decoration: none; } .kr-azletters__l:hover { border-color: var(--kr-primary); color: var(--kr-link); background: var(--kr-primary-050); } .kr-azletters__l.is-active { background: var(--kr-primary); border-color: var(--kr-primary); color: var(--kr-on-primary); } .kr-azgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 22px 0 8px; } .kr-azgrid__cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 10px; border: 1px solid var(--kr-border); border-radius: var(--kr-radius); background: var(--kr-surface); text-decoration: none; transition: border-color .12s ease, transform .12s ease; } .kr-azgrid__cell:hover { border-color: var(--kr-primary); transform: translateY(-2px); } .kr-azgrid__letter { font-size: 26px; font-weight: 800; color: var(--kr-link); } .kr-azgrid__count { font-size: 12.5px; color: var(--kr-text-3); } .kr-aztri { margin: 14px 0 4px; font-size: 13.5px; color: var(--kr-text-3); } .kr-aztri a { color: var(--kr-link); text-decoration: none; } .kr-aztri a.is-active { font-weight: 700; text-decoration: underline; } .kr-azempty { color: var(--kr-text-2); margin: 24px 0; } .kr-azlist { list-style: none; margin: 10px 0 0; padding: 0; } /* DOM massif des pages lettre (jusqu'à ~900 items) : le navigateur saute le layout/paint des lignes hors écran SANS les retirer du HTML (DOM et SEO intacts, aucune pagination d'URL). Progressif (ignoré si non supporté). Audit SEO f21. */ .kr-azlist__item { content-visibility: auto; contain-intrinsic-size: auto 46px; } .kr-azlist__item { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 2px; border-top: 1px solid var(--kr-border); } .kr-azlist__title { color: var(--kr-text); font-weight: 600; text-decoration: none; min-width: 0; } .kr-azlist__title:hover { color: var(--kr-link); } .kr-azlist__meta { display: inline-flex; align-items: center; gap: 10px; flex: none; font-size: 12.5px; color: var(--kr-text-3); } .kr-azlist__type { text-transform: uppercase; font-weight: 700; letter-spacing: .04em; font-size: 10.5px; } @media (max-width: 640px) { .kr-azlist__item { flex-direction: column; gap: 3px; align-items: flex-start; } } /* ========================================= Images du corps d'article (spans legacy imgg/imgd/imgc, 12 juil) L'ancien style bootstrap (float 35 %, légende #999 italique) créait des décrochages : légendes flottantes, trous avant les images à droite, image qui déborde en fin d'article, rien de prévu en mobile. ========================================= */ .kr-artpage .imgg, .kr-artpage .imgd { display: block; width: 40%; min-width: 180px; margin: 6px 0 16px; font-size: 12.5px; color: var(--kr-text-3); text-align: right; font-style: normal; line-height: 1.4; } .kr-artpage .imgg { float: left; margin-right: 22px; } .kr-artpage .imgd { float: right; margin-left: 22px; } .kr-artpage .imgg img, .kr-artpage .imgd img { width: 100%; height: auto; display: block; border-radius: 10px; margin-bottom: 4px; } .kr-artpage .imgc img { border-radius: 10px; } .kr-artpage article p:empty { display: none; } /* les

vides legacy creusaient des trous à côté des floats */ .kr-artpage article::after { content: ""; display: block; clear: both; } /* une image flottée ne déborde plus de l'article */ @media (max-width: 640px) { .kr-artpage .imgg, .kr-artpage .imgd { float: none; width: 100%; min-width: 0; margin: 14px 0; } } /* -------------------------------------------------------------------------- Page 404 / 410 (404.php) : hero centré + sélection de lectures -------------------------------------------------------------------------- */ .kr-404 { max-width: 760px; margin: 0 auto; padding: 56px 24px 32px; } .kr-404__hero { text-align: center; } .kr-404__code { margin: 0; font-size: clamp(88px, 20vw, 150px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--kr-text); } .kr-404__code i { display: inline-block; width: .12em; height: .12em; border-radius: .028em; background: var(--kr-primary-600); margin-left: .05em; } /* le point du logo */ .kr-404 h1 { margin: 16px 0 10px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--kr-text); } .kr-404__lead { max-width: 540px; margin: 0 auto; color: var(--kr-text-2); font-size: 16px; line-height: 1.65; } .kr-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; } .kr-404__reco { margin-top: 48px; } /* ============================================================================ PAGE AUTEUR (/auteur/{id}-{slug}/) — hub E-E-A-T (audit SEO f21) ============================================================================ */ .kr-authhead { display: flex; align-items: center; gap: 22px; margin: 6px 0 30px; padding-bottom: 26px; border-bottom: 1px solid var(--kr-border); } .kr-authhead__avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: none; background: var(--kr-primary-050); border: 2px solid var(--kr-border); } .kr-authhead__ini { display: inline-flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: var(--kr-primary); border-color: var(--kr-primary-050); } .kr-authhead__kicker { margin: 0 0 3px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--kr-primary); } .kr-authhead__name { margin: 0 0 7px; font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--kr-text); } .kr-authhead__stats { margin: 0 0 9px; color: var(--kr-text-2); font-size: 15px; line-height: 1.5; } .kr-authhead__stats strong { color: var(--kr-text); font-weight: 700; } .kr-authhead__bio { margin: 0 0 12px; max-width: 640px; color: var(--kr-text); font-size: 15px; line-height: 1.62; } .kr-authhead__forum { font-size: 14px; font-weight: 600; color: var(--kr-primary); text-decoration: none; } .kr-authhead__forum:hover { text-decoration: underline; } .kr-authhead__page { color: var(--kr-text-3); font-weight: 600; font-size: .8em; } .kr-auteur .kr-filters { margin: 2px 0 22px; } .kr-chip__n { margin-left: 5px; opacity: .5; font-weight: 600; font-size: .82em; } .kr-chip.is-active .kr-chip__n { opacity: .8; } @media (max-width: 560px) { .kr-authhead { flex-direction: column; align-items: flex-start; gap: 14px; } } /* ========================================================================== « Les mieux notés » + « Critiques assassines » (chantier notes, juil 2026) ========================================================================== */ /* Badge année sur jaquette : pastille sombre translucide (lisible sur toute image, deux thèmes), sans liseré : c'est de l'information de contexte, pas un signal. */ .kr-badge--year { background: rgba(20, 20, 28, .72); color: #fff; padding: 3px 8px; letter-spacing: .05em; } /* Grille des pages liste : 5 colonnes (jaquettes ~215px, plus généreuses que les 6 de la home). minmax(0, 1fr) obligatoire : 1fr nu a un minimum au min-content, et le contain-intrinsic-size initialement posé ici (copié de kr-azlist__item) déclarait 340px de largeur intrinsèque sur CHAQUE case => colonnes calculées à 340px dans un conteneur de 1152px, la grille débordait. content-visibility retiré : la technique ne vaut que pour des lignes pleine largeur, et 24 jaquettes/page n'en ont pas besoin. */ .kr-choix--best { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 20px; } @media (max-width: 960px) { .kr-choix--best { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .kr-choix--best { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Punchline de carte (slogan) : l'ADN critique sous la note, clampé 2 lignes. */ .kr-best__punch { font-size: 13px; color: var(--kr-text-2); font-style: italic; margin: 6px 0 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Intertitre de décennie inséré au fil du flux date desc : la page se remonte comme le temps. */ .kr-best__era { margin: 36px 0 16px; } /* Note de bas de page vers l'inverse (mieux notés <-> assassines) : trouvable par le lecteur engagé qui a scrollé, invisible pour les autres. --kr-text-3 est calibré AA. */ .kr-best__flip { text-align: center; margin: 40px 0 8px; font-size: 14px; color: var(--kr-text-3); } .kr-best__flip a { color: var(--kr-primary); text-decoration: none; font-weight: 600; } .kr-best__flip a:hover { text-decoration: underline; } /* Rangée « critique assassine » : la punchline mène, l'œuvre et les étoiles signent. Cette page se lit, elle ne se shoppe pas : liste verticale, pas de jaquettes. */ .kr-kill { display: block; text-decoration: none; padding: 20px 0; border-bottom: 1px solid var(--kr-border); } .kr-kill__punch { font-size: 17px; font-style: italic; color: var(--kr-text); margin: 0 0 10px; line-height: 1.45; } .kr-kill:hover .kr-kill__punch { color: var(--kr-primary); } .kr-kill__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; color: var(--kr-text-3); } .kr-kill__oc { font-weight: 700; color: var(--kr-text-2); } .kr-kill__note { font-weight: 600; } .kr-killwrap { max-width: 780px; } /* ---------- Pages genre + chips genre cliquables (audit genres f54, vague 2) ---------- */ .kr-ochero__chips a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 2px; } .kr-ochero__chips a:hover { text-decoration-color: currentColor; } .kr-ochero--noposter .kr-ochero__chips a { text-decoration-color: var(--kr-text-3); } .kr-listing__desc { max-width: 70ch; color: var(--kr-text-2); margin-top: 10px; } .kr-listing__desc p { margin: 0; } .kr-genregrid { margin-top: 6px; } .kr-genregrid__year { font-weight: 400; color: var(--kr-text-3); font-size: 12px; } .kr-genrepages { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 28px 0 8px; } .kr-genrepages a, .kr-genrepages span { min-width: 34px; padding: 6px 10px; text-align: center; border-radius: 8px; font-size: 14px; text-decoration: none; color: var(--kr-text-2); background: var(--kr-surface-2); } .kr-genrepages a:hover { color: #fff; background: var(--kr-primary); } .kr-genrepages .is-active { color: #fff; background: var(--kr-primary); font-weight: 700; } .kr-genrepages span[aria-hidden] { background: transparent; min-width: 0; padding: 6px 2px; color: var(--kr-text-3); } .kr-genreautres { margin-top: 36px; } .kr-genreautres__n { opacity: .6; font-size: .85em; font-weight: 400; } /* ============================================================ Temps réel (chantier H) : notifications .kr-notif Toasts « vient de paraître » (broadcast) + « message privé » (ciblé), rendus par le module Temps réel de krinein-ui.js (serveur ws.*). Volontairement HORS .kr-scope : le forum phpBB les affiche aussi (bloc à recopier dans krinein-override.css côté forum, qui ne charge pas ce fichier). Tokens partout -> dark mode automatique. ============================================================ */ .kr-notifs { position: fixed; right: 24px; bottom: 24px; z-index: 110; /* > header 100, < modale 120/cmdk 200 */ display: flex; flex-direction: column; gap: 10px; width: 360px; max-width: calc(100vw - 24px); pointer-events: none; /* le conteneur vide ne doit jamais avaler un clic */ } body.kr-scope:has(.footpanel) .kr-notifs { bottom: 84px; } /* barre équipe fixe (60px) */ /* Slot en grid 1fr->0fr : la pile se resserre sans saut quand un toast part */ .kr-notif__slot { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s ease; } .kr-notif__slot.is-closing { grid-template-rows: 0fr; } .kr-notif { position: relative; display: flex; gap: 12px; align-items: flex-start; min-height: 0; overflow: hidden; box-sizing: border-box; background: var(--kr-surface); border: 1px solid var(--kr-border); border-radius: var(--kr-radius); padding: 12px 14px; box-shadow: 0 4px 10px rgba(20,20,30,.08), 0 18px 50px rgba(20,20,30,.18); font-family: var(--kr-font); color: var(--kr-text); pointer-events: auto; opacity: 0; transform: translateY(12px); transition: opacity .18s ease, transform .2s cubic-bezier(.16,1,.3,1); } .kr-notif[hidden] { display: none; } .kr-notif.is-show { opacity: 1; transform: translateY(0); } .kr-notif:focus-within { border-color: var(--kr-link); } html[data-theme="dark"] .kr-notif { box-shadow: 0 4px 10px rgba(0,0,0,.35), 0 18px 50px rgba(0,0,0,.55); } .kr-notif__media { position: relative; flex: 0 0 auto; width: 48px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--kr-primary-050); } .kr-notif__media::before { content: "★"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--kr-link); opacity: .45; } .kr-notif__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .kr-notif__media--avatar { width: 40px; height: 40px; border-radius: 50%; } .kr-notif__media--avatar::before { content: attr(data-i); font-size: 16px; font-weight: 700; opacity: .75; } .kr-notif__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .kr-notif__kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .kr-notif__kicker .kr-badge { padding: 2px 7px; font-size: 10px; border-radius: 5px; } .kr-notif__label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kr-text-3); } .kr-notif__oc { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kr-notif__title { font-size: 13.5px; font-weight: 600; color: var(--kr-text-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kr-notif__title--main { color: var(--kr-text); font-weight: 700; font-size: 14.5px; } .kr-notif__cta { font-size: 12.5px; font-weight: 700; color: var(--kr-link); text-decoration: none; margin-top: 2px; } .kr-notif__cta::after { content: ""; position: absolute; inset: 0; } /* tout le toast est cliquable */ .kr-notif__close { position: relative; z-index: 1; /* au-dessus du lien étiré */ flex: 0 0 auto; width: 32px; height: 32px; margin: -6px -8px 0 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--kr-text-3); border-radius: 8px; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; } .kr-notif__close:hover { background: var(--kr-border); color: var(--kr-text); } @media (max-width: 560px) { .kr-notifs { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-width: none; } } /* Pastille MP : pop unique à l'incrément temps réel (jamais de pulsation continue) */ @keyframes kr-countpop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } } .kr-count.is-pop { animation: kr-countpop .3s cubic-bezier(.16,1,.3,1); } @media (prefers-reduced-motion: reduce) { .kr-notif { transform: none; transition: opacity .15s ease; } .kr-notif__slot { transition: none; } .kr-count.is-pop { animation: none; } } /* Tant qu'un toast est affiché, la pile entière (gaps compris) capte le pointeur : le survol ne passe plus au travers vers les cartes/liens en dessous. Vide, le conteneur reste transparent aux clics (pointer-events:none plus haut). */ .kr-notifs:has(.kr-notif) { pointer-events: auto; }