/*
Theme Name: Child Origines
Description: Thème enfant de Madara — habillage sombre « OriList » : accueil, catalogue, fiche œuvre, lecture, espace membre et pages d'archive redessinés. Fonctionne avec le plugin « OriList — Communauté ». Le thème enfant livré avec Madara reste installé de son côté, intact.
Author: Origines
Author URI: https://mangas-origines.fr/
Template: madara
Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Version: 2.5.0
*/
/* ==========================================================================
ORILIST-INSPIRED MODERN DARK SKIN
Palette, typographie et animations inspirées d'orilist.fr
--------------------------------------------------------------------------
TABLE DES MATIÈRES
1. Design tokens (variables)
2. Base : fond, texte, typo
3. Header & navigation
4. Cartes manga (archives / accueil)
5. Badges & chips
6. Titres de sections & widgets
7. Boutons
8. Fiche manga (single)
9. Liste des chapitres
10. Lecteur de chapitres
11. Sidebar & widgets
12. Pagination
13. Footer
14. Formulaires, recherche & modales
15. Scrollbar & sélection
16. Animations (reveal au scroll, hover)
17. Accessibilité (reduced motion) & responsive
========================================================================== */
/* --------------------------------------------------------------------------
1. DESIGN TOKENS
-------------------------------------------------------------------------- */
:root {
/* Surcharge des variables Madara */
--primary-color: var(--ori-accent);
--secondary-color: var(--ori-accent-2);
--border-dark-color: rgba(255, 255, 255, 0.10);
--border-light-color: rgba(255, 255, 255, 0.07);
/* Tokens OriList — fond quasi-noir #08080a (le noir pur pique les yeux) */
--ori-bg-page: #08080a;
/* le meme fond en composantes : les degrades qui doivent finir sur la page
en ont besoin pour poser leurs etapes translucides. Une peau qui change
--ori-bg-page doit changer celui-ci avec. */
--ori-bg-page-rgb: 8, 8, 10;
--ori-bg-app: #08080a;
--ori-bg-elev: #0f1014;
--ori-bg-card: #0f1014;
--ori-bg-card-hover: #16171d;
--ori-veil: rgba(6, 9, 14, 0.72);
--ori-border-1: rgba(255, 255, 255, 0.06);
--ori-border-2: rgba(255, 255, 255, 0.10);
--ori-text-1: #eaf0f7;
--ori-text-2: #cfd8e6;
--ori-text-3: #b7c4d6;
--ori-muted: #8b97a9;
--ori-faint: #6b7688;
/* ---- teinte d'accent ----------------------------------------------
Tout l'accent du site descend de ces sept lignes. Pour rhabiller un
site, on ne redéclare qu'elles (voir assets/css/peau-rouge.css).
« -rgb » porte la même couleur en composantes : les voiles translucides
s'écrivent rgba(var(--ori-accent-rgb), 0.14) et suivent la teinte. */
--ori-accent-rgb: 61, 139, 255; /* la teinte, en composantes */
--ori-accent-clair-rgb: 143, 192, 255; /* texte d'accent sur fond sombre */
--ori-accent-vif-rgb: 127, 176, 255; /* aplats clairs : barres, pastilles */
--ori-accent: rgb(var(--ori-accent-rgb));
--ori-accent-clair: rgb(var(--ori-accent-clair-rgb));
--ori-accent-vif: rgb(var(--ori-accent-vif-rgb));
--ori-accent-2: #7a5bd8; /* la seconde teinte du dégradé */
--ori-accent-soft: rgba(var(--ori-accent-rgb), 0.14);
--ori-link: var(--ori-accent-clair);
--ori-cyan: #8fd0ff; /* le badge « % de match » */
/* Le bouton Discord et la pastille vers le site jumeau ne suivent pas
forcement l'accent : sur un site rouge, un Discord rouge se confond avec
les boutons d'action, et une pastille « SFW » rose contredit son sens. */
--ori-discord-texte: var(--ori-accent-clair);
--ori-jumeau-rgb: var(--ori-heart-rgb);
--ori-jumeau-clair: var(--ori-heart-clair);
--ori-gold: #f0d49a;
--ori-star: #e8c26b;
--ori-violet: #8b5cf6;
/* le rose des favoris et des « j'aime » : indépendant de l'accent, pour
qu'un site rouge ne fonde pas ses cœurs dans sa propre teinte */
--ori-heart-rgb: 255, 107, 129;
--ori-heart: rgb(var(--ori-heart-rgb));
--ori-heart-clair: #ff8095;
--ori-heart-fonce: #eb3349;
--ori-grad: linear-gradient(135deg, var(--ori-accent), var(--ori-accent-2));
--ori-r-card: 13px;
--ori-r-cover: 11px;
--ori-r-chip: 8px;
--ori-font-display: "Open Sans", system-ui, sans-serif;
--ori-font-body: "Open Sans", system-ui, sans-serif;
/* les contrôles natifs (cases, curseurs, sélection) suivent la teinte,
et le navigateur sait qu'il dessine sur fond sombre */
accent-color: var(--ori-accent);
color-scheme: dark;
--ori-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* pour les mouvements lents ou l'on doit voir la duree (zoom d'une cover) */
--ori-ease-doux: cubic-bezier(0.22, 0.61, 0.36, 1);
--ori-ease-bounce: cubic-bezier(0.34, 1.45, 0.64, 1);
--ori-shadow-card: 0 10px 30px -12px rgba(0, 0, 0, 0.65);
--ori-shadow-pop: 0 18px 45px -15px rgba(0, 0, 0, 0.8);
}
/* --------------------------------------------------------------------------
2. BASE
-------------------------------------------------------------------------- */
body {
background: var(--ori-bg-page) !important;
color: var(--ori-text-2);
font-family: var(--ori-font-body) !important;
font-size: 14px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
.wrap,
.body-wrap,
.site-content,
.content-area,
.c-page-content {
background: transparent !important;
}
/* les zones de widgets peuvent recevoir un fond et des espacements inline
(réglages de page Madara, ex. #000 sur l'accueil) : le !important reprend
la main pour un fond uniforme et des sections resserrées */
.c-sidebar.c-top-sidebar,
.c-sidebar.c-top-second-sidebar,
.c-sidebar.c-bottom-sidebar {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.c-sidebar .widget {
margin-bottom: 0 !important;
}
/* bouton « remonter en haut » : au style du site, et au-dessus de la
bottom nav sur mobile */
.go-to-top {
width: 42px !important;
height: 42px !important;
display: flex;
align-items: center;
justify-content: center;
background: rgba(8, 8, 10, 0.8) !important;
border: 1px solid var(--ori-border-2) !important;
border-radius: 50% !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--ori-text-2) !important;
box-shadow: var(--ori-shadow-card);
right: 18px !important;
bottom: 18px !important;
transform: none !important;
}
.go-to-top i {
font-size: 16px !important;
line-height: 1 !important;
color: inherit !important;
}
.go-to-top:hover {
background: rgba(255, 255, 255, 0.14) !important;
color: #fff !important;
}
@media (max-width: 900px) {
.go-to-top {
right: 12px !important;
bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
}
/* sur la fiche œuvre, la barre d'actions fixe occupe déjà cette zone */
.single-wp-manga .go-to-top {
bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* en-tête des pages recherche/archive : fond plat au lieu de l'image */
.c-search-header__wrapper {
background: var(--ori-bg-app) !important;
}
/* fiche œuvre : fond plat (l'image de texture du thème est retirée) */
.profile-manga {
background-image: none !important;
}
/* halo décoratif discret en haut de page */
.body-wrap {
position: relative;
}
.body-wrap::before {
content: "";
position: absolute;
top: -220px;
left: 50%;
transform: translateX(-50%);
width: 900px;
height: 420px;
background: radial-gradient(closest-side, rgba(var(--ori-accent-rgb), 0.12), transparent 70%);
pointer-events: none;
z-index: 0;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.post-title,
.widget-title,
.heading {
font-family: var(--ori-font-display) !important;
color: var(--ori-text-1);
letter-spacing: -0.01em;
}
a {
color: var(--ori-link);
transition: color 0.25s var(--ori-ease-out);
}
a:hover {
color: var(--ori-accent);
text-decoration: none;
}
/* --------------------------------------------------------------------------
3. HEADER & NAVIGATION
-------------------------------------------------------------------------- */
.site-header {
background: transparent;
}
/* NB : pas de backdrop-filter directement sur .c-header__top — il créerait un
contexte d'empilement qui piègerait la palette de recherche (position:fixed).
Le flou est porté par un ::before. */
.site-header .c-header__top {
position: relative;
background: transparent !important;
border-bottom: 1px solid var(--ori-border-1);
box-shadow: none;
}
.site-header .c-header__top::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(8, 8, 10, 0.82);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
z-index: -1;
pointer-events: none;
}
.c-sub-header-nav {
background: rgba(8, 8, 10, 0.82) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
border-bottom: 1px solid var(--ori-border-1);
box-shadow: none;
transition: background 0.4s var(--ori-ease-out), box-shadow 0.4s var(--ori-ease-out);
}
/* Le fil d'Ariane de Madara, sous l'en-tête : il répète une navigation qu'on a
déjà, et pousse le contenu de 40 px vers le bas sur toutes les pages. */
.site-header .c-sub-header-nav.with-border {
display: none;
}
/* barre de nav collante compactée au scroll (classe posée en JS) */
.c-sub-header-nav.ori-scrolled {
background: rgba(8, 8, 10, 0.92) !important;
box-shadow: 0 8px 30px -14px rgba(0, 0, 0, 0.8);
}
/* ==========================================================================
NAVBAR — réplique exacte du header OriList (src/components/Nav.jsx + base.css)
logo | navlinks (pastilles) | espace | Contribuer | loupe ronde | pastille avatar
========================================================================== */
/* structure flex de la barre */
@media (min-width: 769px) {
.main-navigation .main-navigation_wrap {
display: flex;
align-items: center;
gap: 20px;
/* le thème met padding 35px 0 → barre de 115px ; OriList fait 66px */
padding: 0 !important;
min-height: 0;
height: 64px;
}
.main-navigation .main-navigation_wrap .main-menu {
float: none;
margin-left: 6px;
}
.main-navigation .main-navigation_wrap .search-navigation {
float: none;
}
.ori-spacer {
flex: 1;
}
/* le thème force `.main-navigation_wrap > * { display: inline-block }`
(spécificité 0,3,0) : on repasse au-dessus pour nos éléments flex */
.site-header .main-navigation .main-navigation_wrap > .ori-actions {
display: flex;
}
.site-header .main-navigation .main-navigation_wrap > .ori-contrib {
display: inline-flex;
}
.site-header .main-navigation .main-navigation_wrap > .ori-login {
display: flex;
}
}
/* navlinks : pastilles, hover scale, actif = fond blanc 6% (base.css .navlink) */
.main-navigation .main-menu > ul {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
flex-wrap: nowrap; /* la classe Bootstrap .nav force wrap */
}
.main-navigation .main-menu > ul > li {
float: none;
margin: 0;
}
.main-navigation .main-menu ul li a {
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 14px;
color: var(--ori-muted) !important;
line-height: 1.4;
position: relative;
transition: color 0.6s ease, background 0.6s ease, transform 0.22s var(--ori-ease-out);
}
.main-navigation .main-menu > ul > li > a {
display: inline-block;
padding: 7px 12px;
border-radius: 10px;
white-space: nowrap;
}
.main-navigation .main-menu > ul > li:hover > a {
color: var(--ori-text-1) !important;
background: rgba(255, 255, 255, 0.08) !important;
transform: scale(1.06);
}
.main-navigation .main-menu > ul > li > a:active {
transform: scale(0.93);
}
.main-navigation .main-menu > ul > li.current-menu-item > a,
.main-navigation .main-menu > ul > li.current_page_item > a {
color: #fff !important;
background: rgba(255, 255, 255, 0.06) !important;
}
/* lien Premium : ajouter la classe CSS "navlink-prem" à l'élément de menu WP */
.main-navigation .main-menu > ul > li.navlink-prem > a {
color: #a78bfa !important;
font-weight: 800;
}
.main-navigation .main-menu > ul > li.navlink-prem:hover > a {
background: rgba(139, 92, 246, 0.12) !important;
color: #a78bfa !important;
}
.main-navigation .main-menu > ul > li.navlink-prem.current-menu-item > a {
background: rgba(139, 92, 246, 0.1) !important;
}
/* bouton Contribuer : capsule bleue + balayage lumineux + étoile qui tourne */
.ori-contrib {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 7px;
flex: none;
padding: 8px 15px;
border-radius: 999px;
background: rgba(var(--ori-accent-rgb), 0.1);
border: 1px solid rgba(var(--ori-accent-rgb), 0.32);
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 12.5px;
transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}
.ori-contrib::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -60%;
width: 45%;
background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.22), transparent);
transform: skewX(-20deg);
animation: ori-contrib-shine 3.4s ease-in-out infinite;
pointer-events: none;
}
@keyframes ori-contrib-shine {
0% { left: -60%; }
55%, 100% { left: 130%; }
}
.ori-contrib:hover {
background: rgba(var(--ori-accent-rgb), 0.17);
border-color: rgba(var(--ori-accent-rgb), 0.55);
box-shadow: 0 0 16px rgba(var(--ori-accent-rgb), 0.35);
}
.ori-contrib-txt {
color: var(--ori-discord-texte);
}
.ori-contrib-ico {
color: var(--ori-discord-texte);
flex: none;
transition: transform 0.22s var(--ori-ease-out);
}
.ori-contrib:hover .ori-contrib-ico {
transform: scale(1.15);
}
/* variante Discord (blurple officiel) du bouton capsule */
.ori-nav-discord {
background: rgba(88, 101, 242, 0.12);
border-color: rgba(88, 101, 242, 0.38);
}
.ori-nav-discord .ori-contrib-txt,
.ori-nav-discord .ori-contrib-ico {
color: var(--ori-discord-texte);
}
.ori-nav-discord:hover {
background: rgba(88, 101, 242, 0.2);
border-color: rgba(88, 101, 242, 0.6);
box-shadow: 0 0 16px rgba(88, 101, 242, 0.35);
}
/* loupe : bouton rond 40px (base.css .header-search) */
.search-navigation .open-search-main-menu {
display: flex !important;
align-items: center;
justify-content: center;
width: 40px !important;
height: 40px !important;
line-height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid var(--ori-border-2);
color: var(--ori-muted) !important;
font-size: 17px;
transition: background 0.6s ease, color 0.6s ease, transform 0.22s var(--ori-ease-out), box-shadow 0.6s ease;
}
.search-navigation .open-search-main-menu:hover {
background: rgba(255, 255, 255, 0.16) !important;
color: #fff !important;
transform: scale(1.1);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}
.search-navigation .open-search-main-menu:active {
transform: scale(0.9);
}
/* pastille compte : avatar dans une capsule (base.css .header-actions) */
.ori-actions {
display: flex;
align-items: center;
gap: 8px;
flex: none;
padding: 3px 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--ori-border-2);
transition: background 0.6s ease, border-color 0.6s ease;
}
.ori-actions:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.ori-profil-wrap {
position: relative;
flex: none;
display: flex;
}
.ori-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
background: var(--ori-grad);
display: flex;
align-items: center;
justify-content: center;
flex: none;
border: none;
padding: 0;
cursor: pointer;
transition: transform 0.22s var(--ori-ease-out), box-shadow 0.6s ease;
}
.ori-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
.ori-actions .ori-avatar:hover {
transform: scale(1.12);
box-shadow: 0 0 0 3px rgba(var(--ori-accent-vif-rgb), 0.35);
}
.ori-actions .ori-avatar:active {
transform: scale(0.9);
}
.ori-avatar-sm {
width: 34px;
height: 34px;
cursor: default;
}
/* menu du compte (au clic — base.css .header-menu) */
.ori-menu {
position: absolute;
top: calc(100% + 16px);
right: 0;
z-index: 400;
width: 236px;
padding: 8px;
border-radius: 14px;
background: #0f1014;
border: 1px solid var(--ori-border-2);
box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.8);
animation: ori-menu-in 0.18s var(--ori-ease-out);
}
.ori-menu[hidden] {
display: none;
}
@keyframes ori-menu-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.ori-menu-tete {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px 12px;
border-bottom: 1px solid var(--ori-border-1);
margin-bottom: 6px;
}
.ori-menu-nom {
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13.5px;
color: var(--ori-text-1);
}
.ori-menu-role {
font-family: var(--ori-font-body);
font-weight: 500;
font-size: 11px;
color: var(--ori-faint);
}
.ori-menu-item {
display: block;
width: 100%;
text-align: left;
padding: 9px 10px;
border: none;
background: none;
border-radius: 9px;
color: var(--ori-text-2) !important;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 13px;
}
.ori-menu-item:hover {
background: rgba(255, 255, 255, 0.06);
color: #fff !important;
}
.ori-menu-item.ori-danger {
color: var(--ori-heart-clair) !important;
}
.ori-menu-item.ori-danger:hover {
background: rgba(var(--ori-heart-rgb), 0.12);
}
/* cloche de notifications (base.css .header-bell / .header-notif) :
nouveaux chapitres des œuvres en bookmark */
.ori-notif-wrap {
position: relative;
flex: none;
display: flex;
}
.ori-bell {
position: relative;
display: flex;
padding: 5px;
background: none;
border: none;
border-radius: 50%;
color: #b7c4d6;
cursor: pointer;
transition: background 0.6s ease, transform 0.22s var(--ori-ease-out);
}
.ori-bell:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
transform: scale(1.15);
}
.ori-bell:active {
transform: scale(0.88);
}
/* cloche active (panneau ouvert) : jaune + petit balancement */
.ori-bell.on svg {
stroke: var(--ori-star);
transform-origin: top center;
animation: ori-bell-ring 0.65s var(--ori-ease-bounce);
}
@keyframes ori-bell-ring {
0% { transform: rotate(0); }
25% { transform: rotate(16deg); }
50% { transform: rotate(-12deg); }
75% { transform: rotate(7deg); }
100% { transform: rotate(0); }
}
/* compteur de nouveaux chapitres, collé à la cloche (plafonné à « 9+ ») */
.ori-bell-dot {
position: absolute;
top: -1px;
right: -3px;
display: flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 4px;
box-sizing: border-box;
border-radius: 999px;
background: var(--ori-heart);
border: 2px solid var(--ori-bg-app);
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 9.5px;
line-height: 1;
color: #fff;
}
.ori-bell-dot[hidden] {
display: none;
}
.ori-notif {
position: absolute;
top: calc(100% + 18px);
right: 0;
z-index: 400;
width: 320px;
padding: 8px;
border-radius: 14px;
background: #0f1014;
border: 1px solid var(--ori-border-2);
box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.8);
animation: ori-menu-in 0.18s var(--ori-ease-out);
text-align: left;
}
.ori-notif[hidden] {
display: none;
}
.ori-notif-tete {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px 10px;
}
.ori-notif-tete span:first-child {
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 14px;
color: #fff;
}
.ori-notif-tag {
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 10px;
color: var(--ori-accent-clair);
background: rgba(var(--ori-accent-rgb), 0.16);
padding: 2px 7px;
border-radius: 6px;
}
.ori-notif-tag[hidden] {
display: none;
}
.ori-notif-liste {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 320px;
overflow-y: auto;
}
.ori-notif-item {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 10px;
border-radius: 10px;
text-decoration: none;
}
.ori-notif-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.ori-notif-txt {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12.5px;
line-height: 1.4;
color: var(--ori-text-2);
}
.ori-notif-txt em {
font-style: normal;
font-weight: 500;
font-size: 11px;
color: var(--ori-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ori-notif-t {
font-style: normal;
font-weight: 600;
font-size: 10.5px;
color: #5b6577;
margin-top: 1px;
}
.ori-notif-neuf {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ori-accent-vif);
margin-right: 6px;
vertical-align: 1px;
}
/* bouton « Lire › » */
.ori-notif-plus {
flex: none;
align-self: center;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 5px 10px;
border-radius: 8px;
background: rgba(var(--ori-accent-rgb), 0.12);
border: 1px solid rgba(var(--ori-accent-rgb), 0.3);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 11px;
color: var(--ori-accent-clair);
white-space: nowrap;
transition: background 0.25s var(--ori-ease-out), color 0.25s var(--ori-ease-out);
}
.ori-notif-item:hover .ori-notif-plus {
background: rgba(var(--ori-accent-rgb), 0.22);
color: #fff;
}
.ori-notif-plus svg {
transition: transform 0.22s var(--ori-ease-out);
}
.ori-notif-item:hover .ori-notif-plus svg {
transform: translateX(2px);
}
.ori-notif-vide {
padding: 18px 10px;
text-align: center;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12px;
color: var(--ori-faint);
}
/* pied du panneau : « Tout supprimer » à gauche, « Fermer » à droite */
.ori-notif-pied {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid var(--ori-border-1);
}
.ori-notif-pied button {
padding: 9px 10px;
border: none;
border-radius: 9px;
background: none;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12px;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease;
}
.ori-notif-fermer {
color: var(--ori-link);
}
.ori-notif-fermer:hover {
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
.ori-notif-vider {
color: var(--ori-faint);
}
.ori-notif-vider:hover {
background: rgba(var(--ori-heart-rgb), 0.12);
color: var(--ori-heart-clair);
}
/* visiteur non connecté : rond avec icône personne (base.css .header-login) */
.ori-login {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--ori-border-2);
transition: background 0.6s ease, transform 0.22s var(--ori-ease-out), box-shadow 0.6s ease;
}
.ori-login:hover {
background: rgba(255, 255, 255, 0.16);
transform: scale(1.1);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}
/* Dans la capsule, a cote de la cloche, le bouton de connexion prend la place
et la taille de l'avatar : sans quoi le visiteur voit deux gros ronds a
bordure la ou le membre voit une pastille compacte. */
.ori-actions .ori-login {
width: 30px;
height: 30px;
border: 0;
background: rgba(255, 255, 255, 0.12);
}
.ori-actions .ori-login:hover {
background: rgba(255, 255, 255, 0.22);
transform: none;
box-shadow: none;
}
.ori-actions .ori-login svg {
width: 16px;
height: 16px;
}
/* sur mobile, ces éléments sont masqués (le menu mobile Madara prend le relais) */
@media (max-width: 768px) {
.site-header .main-navigation .main-navigation_wrap > .ori-actions,
.site-header .main-navigation .main-navigation_wrap > .ori-contrib,
.site-header .main-navigation .main-navigation_wrap > .ori-spacer,
.site-header .main-navigation .main-navigation_wrap > .ori-login {
display: none;
}
}
/* barre de navigation principale : remplace le bandeau dégradé plein
(injecté par le CSS dynamique de Madara) par le verre sombre */
.site-header .main-navigation.style-1,
.site-header .main-navigation {
background: rgba(8, 8, 10, 0.85) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
border-bottom: 1px solid var(--ori-border-1);
/* au-dessus de la sous-barre (z-index 99) pour que le menu du compte
ne passe pas derrière, mais sous les modales Bootstrap (1050) */
position: relative;
z-index: 100;
}
/* sous-menus */
.main-navigation .main-menu ul ul.children,
.main-navigation .main-menu ul ul.sub-menu {
background: var(--ori-bg-elev) !important;
border: 1px solid var(--ori-border-1);
border-radius: var(--ori-r-chip);
box-shadow: var(--ori-shadow-pop);
overflow: hidden;
padding: 6px;
}
.main-navigation .main-menu ul ul.children > li > a,
.main-navigation .main-menu ul ul.sub-menu > li > a {
color: var(--ori-text-3) !important;
border: 0 !important;
border-radius: 6px;
transition: background 0.2s var(--ori-ease-out), color 0.2s var(--ori-ease-out);
}
.main-navigation .main-menu ul ul.children > li > a:hover,
.main-navigation .main-menu ul ul.sub-menu > li > a:hover {
background: var(--ori-bg-card-hover) !important;
color: var(--ori-text-1) !important;
}
/* ==========================================================================
HERO « À LA UNE » — réplique de la section ac-spot d'OriList (accueil.css)
3 tuiles : cover en fond + voile + badge doré + titre + méta
========================================================================== */
.ori-spot-wrap {
padding-top: 4px;
}
/* ---- mécanique commune des rails (base.css .rail d'OriList) :
scroll horizontal + snap, scrollbar masquée, glisser-défiler à la souris,
fondu des bords, flèches en survol (classes fade-g/fade-d posées en JS) ---- */
.ori-rail-wrap {
position: relative;
}
.ori-rail {
display: flex;
gap: 16px;
overflow-x: auto;
/* Un conteneur qui defile horizontalement rogne aussi la verticale : la
carte qui se souleve au survol se faisait couper par le haut, ombre
comprise. On lui reserve la place, et la marge negative rend au rail son
espacement d'origine. */
overflow-y: hidden;
scrollbar-width: none;
scroll-snap-type: x proximity;
padding-top: 10px;
padding-bottom: 22px;
margin-top: -10px;
margin-bottom: -18px;
}
.ori-rail::-webkit-scrollbar {
display: none;
}
.ori-rail > * {
flex: none;
scroll-snap-align: start;
}
.ori-rail img {
-webkit-user-drag: none;
user-select: none;
}
@media (min-width: 901px) {
.ori-rail {
cursor: grab;
--fondu: 72px;
}
.ori-rail.grabbing {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
.ori-rail.grabbing > * {
pointer-events: none;
}
.ori-rail.fade-d {
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fondu)), transparent 100%);
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fondu)), transparent 100%);
}
.ori-rail.fade-g {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fondu), #000 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--fondu), #000 100%);
}
.ori-rail.fade-g.fade-d {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%);
}
}
.ori-rail-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--ori-border-2);
background: rgba(10, 14, 21, 0.78);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--ori-text-2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.22s var(--ori-ease-out);
}
.ori-rail-wrap:hover .ori-rail-btn {
opacity: 1;
}
.ori-rail-btn:hover {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.ori-rail-btn:active {
transform: translateY(-50%) scale(0.9);
}
.ori-rail-btn.prev {
left: -14px;
}
.ori-rail-btn.next {
right: -14px;
}
.ori-rail-btn[disabled] {
opacity: 0 !important;
pointer-events: none;
}
@media (max-width: 900px) {
.ori-rail-btn {
display: none;
}
}
/* le hero est un rail : 3 tuiles visibles, 6 au total */
.ori-spot {
margin: 22px 0 0;
}
@media (min-width: 901px) {
.ori-spot > .ori-spot-tile {
flex: 0 0 calc((100% - 32px) / 3);
}
}
.ori-spot-tile {
position: relative;
display: block;
height: 340px;
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--ori-border-1);
transition: transform 0.6s var(--ori-ease-out);
}
.ori-spot-tile:hover {
transform: translateY(-4px);
}
.ori-spot-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
display: block;
z-index: 1;
}
/* Une extension d'optimisation d'images (conversion AVIF ou WebP) enveloppe
les ![]()
dans un et lui recopie leur classe. « object-fit » n'a
alors plus aucune prise — un n'est pas un élément remplacé — et
l'image reprend sa taille naturelle : elle n'occupait plus tout le cadre et
laissait une bande sombre sous les couvertures. On habille donc aussi
l'image réelle, pour le cas où la classe atterrit sur l'enveloppe. */
.ori-spot-img > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: inherit;
}
.ori-spot-veil {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background: linear-gradient(180deg, rgba(10, 14, 21, 0.1) 0%, rgba(10, 14, 21, 0) 32%, rgba(10, 14, 21, 0.5) 66%, rgba(10, 14, 21, 0.92) 100%);
}
.ori-spot-body {
position: absolute;
z-index: 3;
left: 0;
right: 0;
bottom: 0;
padding: 22px 22px 20px;
}
.ori-une {
display: inline-block;
padding: 5px 11px;
border-radius: 8px;
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 10px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ori-bg-app);
background: var(--ori-gold);
margin-bottom: 12px;
}
.ori-spot-titre {
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 26px;
line-height: 1.08;
color: #fff;
letter-spacing: -0.4px;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ori-spot-meta {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12.5px;
color: #dbe4f0;
}
.ori-note {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--ori-gold);
}
.ori-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: #5b6577;
flex: none;
}
/* le drapeau colle a son libelle */
.ori-spot-type {
display: inline-flex;
align-items: center;
gap: 5px;
}
.ori-spot-type .ori-flag {
width: 13px;
height: 13px;
flex: none;
}
.ori-spot-genres {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* « rayon » au survol : un reflet diagonal balaie la tuile une seule fois
(pas de transition au dé-survol → reset instantané, comme sur OriList) */
@media (hover: hover) and (min-width: 901px) {
.ori-spot-tile::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
pointer-events: none;
background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.12) 47%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.12) 53%, transparent 60%);
background-size: 250% 100%;
background-position: 150% 0;
}
.ori-spot-tile:hover::after {
background-position: -60% 0;
transition: background-position 1.6s var(--ori-ease-out);
}
}
/* mobile : rail scrollable avec snap */
@media (max-width: 900px) {
.ori-spot {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
scroll-snap-type: x mandatory;
margin: 8px 0 0;
padding: 0 0 2px;
}
.ori-spot::-webkit-scrollbar {
display: none;
}
.ori-spot-tile {
flex: 0 0 86%;
height: 230px;
scroll-snap-align: start;
}
.ori-spot-titre {
font-size: 22px;
}
}
/* l'ancien slider du haut de l'accueil est remplacé par le hero */
.home .c-sidebar.c-top-sidebar {
display: none;
}
/* ==========================================================================
SECTION « REPRENDRE MA LECTURE » — rail de cartes mini-cover + progression
(réplique .ac-resume d'OriList)
========================================================================== */
.ori-resume-wrap {
margin: 18px 0 0;
}
.ori-resume {
display: flex;
width: 320px;
gap: 14px;
padding: 12px;
border-radius: 14px;
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
transition: transform 0.6s var(--ori-ease-out), background 0.3s var(--ori-ease-out), border-color 0.3s var(--ori-ease-out);
}
.ori-resume:hover {
transform: translateY(-4px);
background: var(--ori-bg-card-hover);
border-color: rgba(var(--ori-accent-rgb), 0.3);
}
.ori-resume-cover {
position: relative;
width: 60px;
height: 84px;
flex: none;
border-radius: 9px;
overflow: hidden;
background: var(--ori-grad);
display: block;
}
.ori-resume-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ori-resume-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.ori-resume-title {
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 14px;
color: var(--ori-text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ori-resume-meta {
font-family: var(--ori-font-body);
font-weight: 500;
font-size: 11.5px;
color: var(--ori-muted);
margin: 4px 0 8px;
}
.ori-progress {
display: block;
height: 5px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.ori-progress > i {
display: block;
height: 100%;
border-radius: 3px;
background: var(--ori-accent);
}
@media (max-width: 900px) {
.ori-resume {
width: 280px;
}
}
/* ==========================================================================
SECTION « RECOMMANDATIONS POUR VOUS » — affinité par genres + % de match
========================================================================== */
.ori-recos-wrap {
margin: 18px 0 0;
}
.ori-sec-sub {
margin: -8px 0 14px;
font-family: var(--ori-font-body);
font-weight: 500;
font-size: 12px;
color: var(--ori-faint);
}
/* badge % de match (style .badge.match d'OriList : texte sombre sur cyan) */
.ori-reco-match {
position: absolute;
top: 6px;
left: 6px;
z-index: 2;
display: inline-flex;
align-items: center;
padding: 3px 7px;
border-radius: 6px;
background: var(--ori-cyan);
color: #0a0e15;
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 10px;
}
@media (max-width: 900px) {
.ori-recos-wrap {
margin-top: 22px;
}
.ori-recos-wrap .container {
padding-left: 16px;
padding-right: 16px;
}
}
/* ==========================================================================
SECTION « TENDANCES » — rail de couvertures avec gros numéros (1 à 10)
Widget « OriList — Tendances » + shortcode [ori_tendances]
========================================================================== */
.ori-sec-head {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 16px;
}
.ori-sec-title {
font-family: var(--ori-font-display) !important;
font-weight: 700;
font-size: 22px;
color: var(--ori-text-1) !important;
margin: 0;
padding: 0;
}
.ori-tend-wrap {
margin: 18px 0 0;
}
.ori-tend-card {
display: block;
width: 200px;
}
.ori-tend-visual {
position: relative;
display: block;
height: 212px;
}
/* le gros numéro : chiffre creux (contour) derrière la couverture */
.ori-tend-num {
position: absolute;
left: -2px;
bottom: -8px;
z-index: 1;
font-family: var(--ori-font-display);
font-weight: 800;
font-size: 108px;
line-height: 1;
letter-spacing: -6px;
color: var(--ori-bg-page);
-webkit-text-stroke: 2px rgba(var(--ori-accent-clair-rgb), 0.75);
pointer-events: none;
}
.ori-tend-num.first {
-webkit-text-stroke: 2px rgba(232, 194, 107, 0.9);
}
/* Au-dela de 9, le nombre deborde de la gouttiere laissee par la couverture.
Plutot que de le rapetisser — il jurerait avec les neuf autres — on le fait
passer par-dessus : meme corps, meme graisse, il mord simplement sur
l'illustration. */
.ori-tend-num.est-double {
z-index: 3;
}
.ori-tend-cover {
position: absolute;
right: 0;
top: 0;
z-index: 2;
display: block;
width: 148px;
height: 100%;
border-radius: 13px;
overflow: hidden;
border: 1px solid var(--ori-border-1);
box-shadow: var(--ori-shadow-card);
background: var(--ori-bg-card);
transition: border-color 0.35s var(--ori-ease-out), box-shadow 0.35s var(--ori-ease-out);
}
.ori-tend-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.55s var(--ori-ease-doux);
}
.ori-tend-card {
transition: transform 0.6s var(--ori-ease-out);
}
.ori-tend-card:hover {
transform: translateY(-4px);
}
.ori-tend-card:hover .ori-tend-cover {
border-color: rgba(var(--ori-accent-rgb), 0.45);
box-shadow: 0 18px 40px -14px rgba(var(--ori-accent-rgb), 0.25), var(--ori-shadow-pop);
}
.ori-tend-card:hover .ori-tend-cover img {
transform: scale(1.075);
}
.ori-tend-note {
position: absolute;
bottom: 6px;
right: 6px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
border-radius: 6px;
background: rgba(6, 9, 14, 0.8);
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 11px;
color: var(--ori-gold);
}
.ori-tend-title {
display: block;
margin: 10px 0 0 52px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13px;
color: var(--ori-text-1);
transition: color 0.3s var(--ori-ease-doux);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ori-tend-sub {
display: block;
margin-left: 52px;
font-family: var(--ori-font-body);
font-weight: 500;
font-size: 11px;
color: var(--ori-muted);
}
@media (max-width: 900px) {
/* le bloc Tendances avait ses propres marges, plus larges que celles des
autres sections : son titre ne s'alignait pas avec les leurs */
.ori-tend-wrap .ori-sec-head {
margin-bottom: 12px;
}
.ori-tend-card {
width: 156px;
}
.ori-tend-visual {
height: 160px;
}
.ori-tend-cover {
width: 108px;
}
.ori-tend-num {
font-size: 54px;
letter-spacing: -2px;
left: 2px;
bottom: -2px;
}
.ori-tend-title,
.ori-tend-sub {
margin-left: 44px;
}
}
/* ==========================================================================
SECTION « AJOUTS RÉCENTS » — rail de cartes couverture (réplique .ac-card)
Widget « OriList — Ajouts récents » + shortcode [ori_ajouts]
========================================================================== */
.ori-ajouts-wrap {
margin: 18px 0 0;
}
/* « Tout voir » : une pastille, pas un lien avec une fleche tapee au clavier */
.ori-sec-more {
display: inline-flex;
align-items: center;
gap: 5px;
flex: none;
padding: 7px 13px 7px 15px;
border-radius: 999px;
border: 1px solid var(--ori-border-1);
background: rgba(255, 255, 255, 0.04);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12.5px;
color: var(--ori-text-2) !important;
transition: background 0.25s var(--ori-ease-doux), border-color 0.25s var(--ori-ease-doux), color 0.25s var(--ori-ease-doux);
}
.ori-sec-more:hover {
background: var(--ori-accent-soft);
border-color: rgba(var(--ori-accent-rgb), 0.42);
color: var(--ori-accent-clair) !important;
}
.ori-sec-more-fl {
flex: none;
transition: transform 0.25s var(--ori-ease-doux);
}
.ori-sec-more:hover .ori-sec-more-fl {
transform: translateX(2px);
}
.ori-card {
display: block;
width: 152px;
transition: transform 0.6s var(--ori-ease-out);
}
.ori-card:hover {
transform: translateY(-4px);
}
.ori-card-cover {
position: relative;
display: block;
width: 100%;
height: 213px;
border-radius: 13px;
overflow: hidden;
border: 1px solid var(--ori-border-1);
background: var(--ori-bg-card);
box-shadow: var(--ori-shadow-card);
transition: border-color 0.35s var(--ori-ease-out), box-shadow 0.35s var(--ori-ease-out);
}
.ori-card:hover .ori-card-cover {
border-color: rgba(var(--ori-accent-rgb), 0.45);
box-shadow: 0 18px 40px -14px rgba(var(--ori-accent-rgb), 0.25), var(--ori-shadow-pop);
}
.ori-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Pas --ori-ease-out ici : cette courbe atteint 90 % de sa course dans le
premier quart du temps. Sur un zoom de 5 %, l'oeil ne voit pas un
mouvement, il voit un saut. Une courbe reguliere rend la duree lisible. */
transition: transform 0.55s var(--ori-ease-doux);
}
.ori-card:hover .ori-card-cover img {
transform: scale(1.075);
}
.ori-card-note {
position: absolute;
bottom: 6px;
right: 6px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
border-radius: 6px;
background: rgba(6, 9, 14, 0.8);
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 11px;
color: var(--ori-gold);
}
.ori-card-title {
display: block;
margin-top: 8px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13px;
color: var(--ori-text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.3s var(--ori-ease-doux);
}
.ori-card:hover .ori-card-title,
.ori-tend-card:hover .ori-tend-title {
color: var(--ori-accent-clair);
}
/* Un reflet traverse la cover au survol, une seule fois. C'est la meme
signature que le bouton Discord, en beaucoup plus discret : il passe en
0,7 s et ne revient pas tant qu'on ne ressort pas de la carte. */
.ori-card-cover::after,
.ori-tend-cover::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -75%;
width: 55%;
z-index: 3;
background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.13), transparent);
transform: skewX(-18deg);
pointer-events: none;
opacity: 0;
}
.ori-card:hover .ori-card-cover::after,
.ori-tend-card:hover .ori-tend-cover::after {
opacity: 1;
animation: ori-card-reflet 0.7s var(--ori-ease-doux);
}
@keyframes ori-card-reflet {
from { left: -75%; }
to { left: 130%; }
}
.ori-card-sub {
display: block;
font-family: var(--ori-font-body);
font-weight: 500;
font-size: 11px;
color: var(--ori-muted);
}
/* badge de type (Manga / Manhwa / Manhua) en haut à gauche des covers :
neutre (style .badge.dark d'OriList) + petit drapeau du pays d'origine */
.ori-badge {
position: absolute;
top: 6px;
left: 6px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
border-radius: 6px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 8px;
letter-spacing: 0.06em;
text-transform: uppercase;
background: rgba(6, 9, 14, 0.72);
color: var(--ori-text-2);
}
.ori-flag {
display: block;
border-radius: 2px;
flex: none;
}
/* chips « chapitre » pleine largeur + bloc arrondi à droite
(flamme si récent, sinon la date de publication) */
.ori-chap-row {
display: flex;
align-items: stretch;
gap: 5px;
margin-top: 6px;
}
.ori-card-title + .ori-chap-row {
margin-top: 8px;
}
.ori-chap {
flex: 1;
min-width: 0;
display: block;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ori-border-1);
border-radius: 999px;
padding: 4px 11px;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 11.5px;
color: var(--ori-text-3) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background 0.25s var(--ori-ease-out), border-color 0.25s var(--ori-ease-out), color 0.25s var(--ori-ease-out);
}
/* deux libelles, un seul visible : la forme longue sur grand ecran, la forme
abregee des que la carte se resserre (cf. madara_child_chapitre_court) */
.ori-chap-court {
display: none;
}
.ori-chap:hover {
background: var(--ori-accent-soft);
border-color: rgba(var(--ori-accent-rgb), 0.4);
color: var(--ori-link) !important;
}
.ori-chap-meta {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ori-border-1);
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 10px;
color: var(--ori-faint);
white-space: nowrap;
}
.ori-chap-meta.is-new {
background: rgba(255, 138, 61, 0.1);
border-color: rgba(255, 138, 61, 0.3);
}
.ori-flame {
flex: none;
color: #ff8a3d;
filter: drop-shadow(0 0 4px rgba(255, 138, 61, 0.55));
animation: ori-flame-pulse 1.6s ease-in-out infinite;
transform-origin: center bottom;
}
@keyframes ori-flame-pulse {
0%, 100% { transform: scale(0.92); opacity: 0.85; }
50% { transform: scale(1.1); opacity: 1; }
}
/* cœur « Favoris » dans le contrôle segmenté : s'anime au clic */
.ori-seg .ori-seg-fav {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
}
.ori-seg .ori-seg-fav.on {
background: rgba(var(--ori-heart-rgb), 0.14);
color: var(--ori-heart);
}
.ori-seg .ori-seg-fav.on svg {
fill: var(--ori-heart);
stroke: var(--ori-heart);
animation: ori-heart-pop 0.45s var(--ori-ease-bounce);
}
@keyframes ori-heart-pop {
0% { transform: scale(0.6); }
55% { transform: scale(1.35); }
100% { transform: scale(1); }
}
/* squelettes de chargement (shimmer, port du .skeleton d'OriList) —
affichés pendant les chargements AJAX du listing */
.ori-skel {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border-radius: 13px;
display: block;
}
.ori-skel::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
animation: ori-skel-slide 1.2s infinite;
}
@keyframes ori-skel-slide {
to { transform: translateX(100%); }
}
.ori-card-skel .ori-skel-cover {
aspect-ratio: 152 / 213;
}
.ori-card-skel .ori-skel-line {
height: 12px;
margin-top: 9px;
border-radius: 6px;
width: 75%;
}
.ori-card-skel .ori-skel-line.courte {
width: 45%;
height: 10px;
}
/* chapitres récents fantômes (mêmes gabarits que .ori-chap-row) */
.ori-card-skel .ori-skel-chap {
display: flex;
align-items: stretch;
gap: 5px;
margin-top: 6px;
}
.ori-card-skel .ori-skel-chap > .ori-skel {
flex: 1;
height: 24px;
border-radius: 999px;
}
.ori-card-skel .ori-skel-chap > .ori-skel.courte {
flex: none;
width: 38px;
}
/* squelette de ligne : résultats de la palette de recherche et panneau de
notifications, le temps de la requête */
.ori-skel-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
}
.ori-skel-row .ori-skel-mini {
flex: none;
width: 34px;
height: 46px;
border-radius: 7px;
}
.ori-skel-row .ori-skel-txt {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.ori-skel-row .ori-skel-l1 {
height: 11px;
width: 62%;
border-radius: 6px;
}
.ori-skel-row .ori-skel-l2 {
height: 9px;
width: 38%;
border-radius: 6px;
}
/* squelette de visuel : le JS pose un placeholder shimmer dans chaque
conteneur de cover (hero, Reprendre, Recos, Tendances, Ajouts, Sorties
récentes, catalogue, fiche) tant que l'image n'est pas décodée, puis
l'image apparaît en fondu par-dessus */
/* NB : le `position: relative` nécessaire au placeholder est posé par le JS,
et seulement si le conteneur est encore en position statique — .ori-tend-cover
est en absolute et le forcer en relative écrasait le gros numéro Tendances */
.ori-skel-ph {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
border-radius: inherit;
transition: opacity 0.45s var(--ori-ease-out);
}
/* pas de position/z-index ici : certaines covers (le hero) positionnent déjà
leur image, on ne touche qu'à l'opacité. Le masquage est instantané (sinon
une image déjà en cache clignoterait), seule l'apparition est en fondu. */
.ori-imgskel img {
opacity: 0;
}
/* Attention au raccourci `transition` : declare seul, il ecrase celui pose
plus haut sur .ori-card-cover img et supprime l'animation du zoom au survol.
Toutes les covers passent par ce squelette, donc tout le site etait touche :
la cover sautait de son etat A a son etat B sans transition. */
.ori-imgskel.ori-img-ok img {
opacity: 1;
transition: opacity 0.5s var(--ori-ease-out), transform 0.55s var(--ori-ease-doux);
}
.ori-imgskel.ori-img-ok .ori-skel-ph {
opacity: 0;
}
/* image en erreur : fond neutre figé, ni shimmer ni icône cassée */
.ori-imgskel.ori-img-ko .ori-skel-ph::after {
content: none;
}
/* carte en attente : ses chapitres récents (numéro + date) passent aussi en
squelette, pour que toute la carte se charge d'un bloc */
.ori-card-attente .ori-chap,
.ori-card-attente .ori-chap-meta {
position: relative;
overflow: hidden;
color: transparent !important;
background: rgba(255, 255, 255, 0.05) !important;
border-color: transparent !important;
}
.ori-card-attente .ori-chap-meta svg {
visibility: hidden;
}
.ori-card-attente .ori-chap::after,
.ori-card-attente .ori-chap-meta::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
animation: ori-skel-slide 1.2s infinite;
}
/* squelette du bloc « Chapitres » de la fiche : la liste arrive en AJAX
(Madara n'affiche qu'un spinner puis fait apparaître le bloc d'un coup) */
#manga-chapters-holder > .fas,
#manga-chapters-holder > .loader-inner {
display: none !important;
}
/* Le sablier de WP Manga tourne dès le premier rendu, bien avant que notre JS
ne soit exécuté. On l'éteint, et le conteneur patiente tout seul en attendant
soit le squelette détaillé, soit la liste. */
#manga-chapters-holder .fa-spinner,
#manga-chapters-holder .fas {
display: none !important;
}
#manga-chapters-holder:not(:has(.ori-chl)):not(:has(.ori-chl-skel)) {
display: block;
min-height: 420px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
position: relative;
overflow: hidden;
}
#manga-chapters-holder:not(:has(.ori-chl)):not(:has(.ori-chl-skel))::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
animation: ori-skel-slide 1.35s infinite;
}
.ori-chl-skel {
/* pas de cadre : la carte « Chapitres » le porte déjà */
padding: 0;
}
.ori-chl-skel .ori-skel {
border-radius: 6px;
}
.ori-chl-skel-outils {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.ori-chl-skel-outils .o1 {
flex: 1;
height: 40px;
border-radius: 10px;
}
.ori-chl-skel-outils .o3 {
width: 54px;
height: 12px;
}
.ori-chl-skel-outils .o2 {
width: 132px;
height: 38px;
border-radius: 10px;
}
.ori-chl-skel-jauge {
height: 4px;
border-radius: 3px;
margin-bottom: 4px;
}
.ori-chl-skel-ligne {
display: flex;
align-items: center;
gap: 14px;
padding: 15px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ori-chl-skel-ligne:last-child {
border-bottom: 0;
}
/* les blocs reprennent les mesures réelles d'une ligne de chapitre */
.ori-chl-skel-ligne .c {
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
}
.ori-chl-skel-ligne .t {
flex: none;
width: 46px;
height: 40px;
border-radius: 10px;
}
.ori-chl-skel-ligne .n {
flex: 1;
max-width: 200px;
height: 13px;
}
.ori-chl-skel-ligne .e {
flex: none;
width: 62px;
height: 18px;
border-radius: 999px;
}
.ori-chl-skel-ligne .d {
margin-left: auto;
width: 78px;
height: 11px;
}
@media (max-width: 900px) {
.ori-chl-skel-ligne .d,
.ori-chl-skel-outils .o3 {
display: none;
}
.ori-chl-skel-outils {
flex-wrap: wrap;
}
.ori-chl-skel-outils .o1 {
flex: 1 0 100%;
}
}
/* portrait rond : le squelette suit la forme */
.ori-cm-avatar.ori-imgskel,
.ori-coms-moi.ori-imgskel {
border-radius: 50%;
overflow: hidden;
}
/* sans animation : pas de fondu ni de balayage, juste le fond neutre */
@media (prefers-reduced-motion: reduce) {
.ori-card:hover .ori-card-cover::after,
.ori-tend-card:hover .ori-tend-cover::after {
animation: none;
opacity: 0;
}
.ori-card:hover .ori-card-cover img,
.ori-tend-card:hover .ori-tend-cover img {
transform: none;
}
.ori-imgskel.ori-img-ok img,
.ori-skel-ph {
transition: none;
}
.ori-skel::after,
#manga-chapters-holder:not(:has(.ori-chl)):not(:has(.ori-chl-skel))::after {
animation: none;
}
}
/* bloc pub inséré toutes les 12 œuvres (option Advertising du thème) */
.ori-listing-pub {
grid-column: 1 / -1;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
overflow: hidden;
}
@media (max-width: 900px) {
.ori-card {
width: 100px;
}
.ori-card-cover {
height: 140px;
border-radius: 11px;
}
.ori-card-title {
font-weight: 600;
font-size: 11px;
margin-top: 6px;
}
.ori-card-sub {
font-size: 9.5px;
}
}
/* dans une zone de widgets Madara : pas de fond carte autour de nos sections */
.widget[id*="madara_child_"] {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
/* ==========================================================================
LISTING « SORTIES RÉCENTES » (accueil) — filtres + grille + scroll infini
========================================================================== */
.ori-listing-wrap {
margin: 18px 0 24px;
}
/* barre de filtres : pastille Favoris + contrôle segmenté */
.ori-filtres {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 18px;
flex-wrap: wrap;
}
.ori-filtre-fav {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 15px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ori-border-2);
color: var(--ori-text-2);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background 0.3s var(--ori-ease-out), border-color 0.3s var(--ori-ease-out), color 0.3s var(--ori-ease-out), transform 0.22s var(--ori-ease-out);
}
.ori-filtre-fav:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
transform: scale(1.04);
}
.ori-filtre-fav.on {
background: var(--ori-accent-soft);
border-color: rgba(var(--ori-accent-rgb), 0.55);
color: #fff;
}
.ori-seg {
display: inline-flex;
gap: 4px;
padding: 4px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ori-border-1);
border-radius: 12px;
}
/* Sur telephone, la rangee de filtres deborde des qu'il y en a plus de trois.
Elle glisse au doigt plutot que de passer a la ligne, et le libelle
« Favoris » cede la place a son seul coeur : il se lit tout aussi bien. */
@media (max-width: 640px) {
.ori-filtres {
overflow-x: auto;
scrollbar-width: none;
margin: 0 -16px;
padding: 0 16px;
}
.ori-filtres::-webkit-scrollbar {
display: none;
}
.ori-seg {
flex-wrap: nowrap;
}
.ori-seg button {
white-space: nowrap;
padding: 7px 11px;
}
}
.ori-seg button {
padding: 7px 14px;
border: 0;
border-radius: 9px;
background: none;
color: var(--ori-muted);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background 0.3s var(--ori-ease-out), color 0.3s var(--ori-ease-out), transform 0.22s var(--ori-ease-out);
}
.ori-seg button:hover {
color: #fff;
transform: scale(1.05);
}
.ori-seg button:active {
transform: scale(0.94);
}
.ori-seg button.on {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
/* séparateur vertical après « Tout » (hauteur partielle) */
.ori-seg-sep {
width: 1px;
height: 16px;
align-self: center;
background: var(--ori-border-2);
border-radius: 1px;
margin: 0 2px;
}
/* grille : cartes fluides */
.ori-listing-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
gap: 22px 16px;
}
.ori-listing-grid .ori-card {
width: auto;
}
.ori-listing-grid .ori-card-cover {
height: auto;
aspect-ratio: 152 / 213;
}
.ori-listing-grid.is-loading {
opacity: 0.55;
pointer-events: none;
transition: opacity 0.2s ease;
}
.ori-listing-vide {
grid-column: 1 / -1;
padding: 40px 0;
text-align: center;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 13px;
color: var(--ori-faint);
}
/* bouton « Voir plus » (masqué quand tout est chargé) */
.ori-listing-foot {
display: flex;
justify-content: center;
margin-top: 26px;
}
.ori-listing-foot.is-done {
display: none;
}
.ori-voir-plus {
padding: 12px 34px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ori-border-2);
color: var(--ori-text-2);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background 0.3s var(--ori-ease-out), border-color 0.3s var(--ori-ease-out), color 0.3s var(--ori-ease-out), transform 0.22s var(--ori-ease-out);
}
.ori-voir-plus:hover {
background: var(--ori-accent-soft);
border-color: rgba(var(--ori-accent-rgb), 0.55);
color: #fff;
transform: scale(1.04);
}
.ori-voir-plus[disabled] {
opacity: 0.6;
pointer-events: none;
}
@media (max-width: 900px) {
.ori-listing-grid {
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
gap: 16px 12px;
}
}
/* l'ancien listing Madara de l'accueil est remplacé par nos sections */
.home .site-content .c-page-content {
display: none;
}
/* --------------------------------------------------------------------------
4. CARTES MANGA
-------------------------------------------------------------------------- */
.page-item-detail {
border-radius: var(--ori-r-card);
transition: transform 0.45s var(--ori-ease-bounce);
}
.page-item-detail:hover {
transform: translateY(-5px);
}
.page-item-detail .item-thumb {
border-radius: var(--ori-r-cover);
overflow: hidden;
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
box-shadow: var(--ori-shadow-card);
transition: border-color 0.35s var(--ori-ease-out), box-shadow 0.35s var(--ori-ease-out);
}
.page-item-detail:hover .item-thumb {
border-color: rgba(var(--ori-accent-rgb), 0.45);
box-shadow: 0 18px 40px -14px rgba(var(--ori-accent-rgb), 0.25), var(--ori-shadow-pop);
}
.page-item-detail .item-thumb img {
border-radius: 0;
transition: transform 0.7s var(--ori-ease-out), filter 0.5s var(--ori-ease-out);
will-change: transform;
}
.page-item-detail:hover .item-thumb img {
transform: scale(1.06);
filter: brightness(1.06);
}
.page-item-detail .item-summary .post-title h3,
.page-item-detail .item-summary .post-title .h5 {
font-size: 14px;
font-weight: 700;
line-height: 1.35;
}
.page-item-detail .item-summary .post-title a {
color: var(--ori-text-1) !important;
transition: color 0.25s var(--ori-ease-out);
}
.page-item-detail .item-summary .post-title a:hover {
color: var(--ori-link) !important;
}
/* liste des derniers chapitres sous la carte */
.list-chapter .chapter-item,
.page-item-detail .chapter-item {
background: transparent;
border: 0;
}
.page-item-detail .chapter-item .chapter a,
.list-chapter .chapter-item .chapter a {
display: inline-block;
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: 999px;
padding: 2px 10px;
font-size: 11.5px;
font-weight: 600;
color: var(--ori-text-3) !important;
transition: background 0.25s var(--ori-ease-out), border-color 0.25s var(--ori-ease-out), color 0.25s var(--ori-ease-out);
}
.page-item-detail .chapter-item .chapter a:hover,
.list-chapter .chapter-item .chapter a:hover {
background: var(--ori-accent-soft);
border-color: rgba(var(--ori-accent-rgb), 0.4);
color: var(--ori-link) !important;
}
.page-item-detail .chapter-item .post-on,
.list-chapter .chapter-item .post-on {
color: var(--ori-faint);
font-size: 11px;
}
/* notes / étoiles */
.score,
.post-total-rating .score,
.rating i,
.post-total-rating i,
i.ion-md-star,
i.ion-ios-star,
.ratings_stars,
.fa-star {
color: var(--ori-star) !important;
}
/* Madara dessine ses étoiles avec une police d'icônes. Plutôt que de reprendre
chacun de ses gabarits — et de tout reperdre à la prochaine mise à jour — on
éteint le glyphe et on peint l'étincelle au masque : ça couvre aussi les
notes redessinées en AJAX après un vote. */
i.ion-md-star::before,
i.ion-md-star-outline::before,
i.ion-md-star-half::before,
i.ion-ios-star::before,
i.ion-ios-star-outline::before,
i.ion-ios-star-half::before,
.ratings_stars::before,
.fa-star::before,
.fa-star-o::before,
.fa-star-half-o::before,
.fa-star-half-full::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.12em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6c.9 5.5 5 9.6 10.5 10.4-5.5.9-9.6 5-10.5 10.4-.9-5.5-5-9.6-10.5-10.4C7 11.1 11.1 7 12 1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6c.9 5.5 5 9.6 10.5 10.4-5.5.9-9.6 5-10.5 10.4-.9-5.5-5-9.6-10.5-10.4C7 11.1 11.1 7 12 1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* les demies et les vides gardent leur nuance, pas leur forme */
i.ion-md-star-outline::before,
i.ion-ios-star-outline::before,
.fa-star-o::before {
opacity: 0.28;
}
i.ion-md-star-half::before,
i.ion-ios-star-half::before,
.fa-star-half-o::before,
.fa-star-half-full::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6c.9 5.5 5 9.6 10.5 10.4-5.5.9-9.6 5-10.5 10.4-.9-5.5-5-9.6-10.5-10.4C7 11.1 11.1 7 12 1.6z'/%3E%3C/svg%3E"), linear-gradient(90deg, #000 50%, transparent 50%);
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6c.9 5.5 5 9.6 10.5 10.4-5.5.9-9.6 5-10.5 10.4-.9-5.5-5-9.6-10.5-10.4C7 11.1 11.1 7 12 1.6z'/%3E%3C/svg%3E"), linear-gradient(90deg, #000 50%, transparent 50%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* --------------------------------------------------------------------------
5. BADGES & CHIPS
-------------------------------------------------------------------------- */
.manga-title-badges {
border-radius: 999px !important;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 10px;
box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
}
.manga-title-badges.hot {
background: linear-gradient(135deg, var(--ori-heart), var(--ori-heart-fonce)) !important;
}
.manga-title-badges.new {
background: var(--ori-grad) !important;
}
/* genres etc. */
.genres-content a,
.tags-content a,
.summary-content a {
color: var(--ori-text-3);
}
.genres-content a:hover,
.tags-content a:hover {
color: var(--ori-link);
}
/* --------------------------------------------------------------------------
6. TITRES DE SECTIONS & WIDGETS
-------------------------------------------------------------------------- */
.c-blog__heading {
border: 0 !important;
margin-bottom: 18px;
}
.c-blog__heading .h4,
.c-blog__heading h1,
.c-blog__heading h2,
.c-blog__heading h4 {
font-size: 20px;
font-weight: 700;
color: var(--ori-text-1) !important;
position: relative;
padding-left: 14px;
}
.c-blog__heading .h4::before,
.c-blog__heading h1::before,
.c-blog__heading h2::before,
.c-blog__heading h4::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 70%;
border-radius: 4px;
background: var(--ori-grad);
}
.c-blog__heading .h4 i,
.c-blog__heading h4 i {
display: none;
}
.c-widget-header {
border: 0 !important;
}
.c-widget-header .heading,
.widget-title {
font-size: 16px;
font-weight: 700;
color: var(--ori-text-1) !important;
border: 0 !important;
position: relative;
padding-left: 12px;
}
.c-widget-header .heading::before,
.widget-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 68%;
border-radius: 4px;
background: var(--ori-grad);
}
/* étiquette de titre des widgets (slider "Popular Series", "Editor choices"…) :
on remplace le bandeau dégradé rouge de Madara par le style barre dégradée */
.widget-heading,
.related-heading.font-nav {
background: transparent !important;
padding-left: 0;
}
.widget-heading:after,
.related-heading.font-nav:after {
display: none !important;
}
.widget-heading .heading,
.related-heading.font-nav {
color: var(--ori-text-1) !important;
font-size: 16px;
font-weight: 700;
position: relative;
padding-left: 12px;
}
.widget-heading .heading::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 68%;
border-radius: 4px;
background: var(--ori-grad);
}
/* badge "NEW" des chapitres : remplace le GIF animé par la pastille flamme
(même langage visuel que le listing Sorties récentes) */
.c-new-tag {
background: rgba(255, 138, 61, 0.1) !important;
border: 1px solid rgba(255, 138, 61, 0.3);
border-radius: 999px !important;
width: 32px !important;
height: 22px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.c-new-tag::after {
content: "";
width: 12px;
height: 12px;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
animation: ori-flame-pulse 1.6s ease-in-out infinite;
transform-origin: center bottom;
}
/* --------------------------------------------------------------------------
7. BOUTONS
-------------------------------------------------------------------------- */
.btn,
.c-btn,
.btn-primary,
.wp-manga-action-button,
input[type="submit"],
button[type="submit"] {
font-family: var(--ori-font-body) !important;
font-weight: 700;
border-radius: 10px !important;
border: 0;
transition: transform 0.3s var(--ori-ease-bounce), box-shadow 0.3s var(--ori-ease-out), background 0.3s var(--ori-ease-out), opacity 0.3s;
}
.btn-primary,
.c-btn.c-btn_style-1,
.wp-manga-action-button,
input[type="submit"],
button[type="submit"] {
background: var(--ori-grad) !important;
color: #fff !important;
box-shadow: 0 8px 22px -8px rgba(var(--ori-accent-rgb), 0.55);
}
.btn-primary:hover,
.c-btn.c-btn_style-1:hover,
.wp-manga-action-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px -8px rgba(var(--ori-accent-rgb), 0.7);
opacity: 0.95;
}
.btn:active,
.c-btn:active {
transform: translateY(0) scale(0.98);
}
/* --------------------------------------------------------------------------
8. FICHE MANGA (SINGLE)
-------------------------------------------------------------------------- */
.profile-manga {
background-color: var(--ori-bg-app) !important;
position: relative;
}
/* voile au-dessus de l'image de couverture en fond */
.profile-manga > .container,
.profile-manga .post-title h1 {
position: relative;
z-index: 2;
}
.profile-manga::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7, 9, 14, 0.55) 0%, rgba(7, 9, 14, 0.88) 70%, var(--ori-bg-page) 100%);
z-index: 1;
}
.profile-manga .post-title h1 {
font-size: 34px;
font-weight: 700;
letter-spacing: -0.02em;
color: #fff !important;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
.summary_image img {
border-radius: var(--ori-r-cover);
border: 1px solid var(--ori-border-2);
box-shadow: var(--ori-shadow-pop);
transition: transform 0.5s var(--ori-ease-out);
}
.summary_image:hover img {
transform: scale(1.02) rotate(-0.5deg);
}
/* panneau d'informations (rank, auteur, genres…) de la fiche */
.summary_content {
background: var(--ori-bg-card) !important;
border: 1px solid var(--ori-border-1);
border-radius: var(--ori-r-card);
}
.post-content_item .summary-heading h5 {
color: var(--ori-muted) !important;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.post-content_item .summary-content {
color: var(--ori-text-2);
}
.c-page__content,
.description-summary .summary__content {
color: var(--ori-text-2);
}
/* panneaux de contenu */
.c-page__content .page-content-listing,
.description-summary,
.c-page-content .entry-content .entry-content_wrap {
background: transparent;
}
/* --------------------------------------------------------------------------
9. LISTE DES CHAPITRES
-------------------------------------------------------------------------- */
.listing-chapters_wrap {
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: var(--ori-r-card);
padding: 8px;
}
.wp-manga-chapter {
border-bottom: 1px solid var(--ori-border-1) !important;
border-radius: 8px;
transition: background 0.25s var(--ori-ease-out), transform 0.25s var(--ori-ease-out);
}
.wp-manga-chapter:last-child {
border-bottom: 0 !important;
}
.wp-manga-chapter:hover {
background: var(--ori-bg-card-hover);
transform: translateX(4px);
}
.wp-manga-chapter a {
color: var(--ori-text-2) !important;
font-weight: 600;
}
.wp-manga-chapter a:hover {
color: var(--ori-link) !important;
}
.wp-manga-chapter .chapter-release-date {
color: var(--ori-faint) !important;
}
/* chapitre déjà lu */
.wp-manga-chapter.has-thumb.read a,
.wp-manga-chapter.read a {
color: var(--ori-faint) !important;
}
/* --------------------------------------------------------------------------
10. LECTEUR DE CHAPITRES
--------------------------------------------------------------------------
La page la plus vue du site, et celle où l'interface doit le moins se voir.
Deux barres flottantes qui s'effacent au défilement vers le bas et
reviennent dès qu'on remonte ; entre les deux, rien que les planches.
-------------------------------------------------------------------------- */
body.ori-lecture {
/* largeur de la colonne de lecture, changée par le panneau de réglages
(mémorisée dans le navigateur, cf. modern.js) */
--ori-lec-l: 800px;
--ori-lec-h: 54px;
}
body.ori-lecture[data-largeur="etroit"] { --ori-lec-l: 620px; }
body.ori-lecture[data-largeur="large"] { --ori-lec-l: 1040px; }
body.ori-lecture[data-largeur="plein"] { --ori-lec-l: 100%; }
/* L'en-tête du site, la topbar mobile et la navigation du bas laissent la
place aux nôtres : pendant la lecture, elles ne servent qu'à voler de la
hauteur. Le retour à la série est dans notre barre. */
body.ori-lecture .c-header,
body.ori-lecture .ori-mtop,
body.ori-lecture .ori-bnav,
body.ori-lecture .c-breadcrumb,
body.ori-lecture .go-to-top,
body.ori-lecture #chapter-heading {
display: none !important;
}
/* le gabarit du plugin, gardé pour son JS (serveur, style de lecture) */
.ori-lec-natif {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ---- barre du haut ---- */
.ori-lec-haut {
position: fixed;
inset: 0 0 auto;
z-index: 60;
pointer-events: none;
}
/* Connecté en administrateur, la barre de WordPress occupe déjà le haut de
l'écran. Elle est en position fixe, donc la marge qu'elle pose sur
ne décale pas nos barres fixes : on les descend nous-mêmes. Ses deux
hauteurs (32 px, puis 46 px sous 783 px) sont celles de WordPress. */
body.admin-bar .ori-lec-haut {
top: 32px;
}
@media (max-width: 782px) {
body.admin-bar .ori-lec-haut {
top: 46px;
}
}
/* Rien à corriger côté planches : WordPress pose déjà une marge sur ,
qui décale tout le flux. Seules les barres en position fixe y échappent. */
.ori-lec-haut > * {
pointer-events: auto;
}
/* la jauge ne s'efface jamais : c'est le seul repère permanent */
.ori-lec-jauge {
height: 3px;
background: rgba(255, 255, 255, 0.07);
}
.ori-lec-jauge i {
display: block;
height: 100%;
width: calc(var(--pct, 0) * 1%);
background: var(--ori-accent);
transition: width 0.15s linear;
}
.ori-lec-haut-in {
display: flex;
align-items: center;
gap: 10px;
height: var(--ori-lec-h);
padding: 0 14px;
background: rgba(10, 10, 13, 0.82);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--ori-border-1);
transition: transform 0.34s var(--ori-ease-out), opacity 0.28s var(--ori-ease-out);
}
.ori-lec-haut.est-cache .ori-lec-haut-in {
transform: translateY(-100%);
opacity: 0;
}
.ori-lec-btn {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--ori-border-1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
color: var(--ori-text-2);
transition: background 0.2s var(--ori-ease-out), color 0.2s var(--ori-ease-out), transform 0.2s var(--ori-ease-bounce);
}
.ori-lec-btn:hover {
background: var(--ori-accent-soft);
border-color: rgba(var(--ori-accent-rgb), 0.4);
color: var(--ori-accent-clair);
transform: translateY(-1px);
}
.ori-lec-reglages {
margin-left: auto;
}
.ori-lec-reglages[aria-expanded="true"] {
background: var(--ori-accent-soft);
border-color: rgba(var(--ori-accent-rgb), 0.45);
color: var(--ori-accent-clair);
}
.ori-lec-oeuvre {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
color: inherit;
text-decoration: none;
}
.ori-lec-cover {
flex: none;
display: block;
width: 26px;
height: 36px;
object-fit: cover;
border-radius: 5px;
border: 1px solid var(--ori-border-1);
overflow: hidden; /* sans effet sur une ![]()
, utile si c'est un */
}
/* même précaution que pour le hero : la classe peut se retrouver sur un
posé par une extension d'optimisation d'images */
.ori-lec-cover > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ori-lec-titres {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.ori-lec-titre {
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 13px;
color: var(--ori-text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ori-lec-chap {
font-family: var(--ori-font-body);
font-size: 11.5px;
color: var(--ori-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ori-lec-oeuvre:hover .ori-lec-titre {
color: var(--ori-accent-clair);
}
/* ---- panneau de réglages ---- */
.ori-lec-panneau {
position: absolute;
top: calc(var(--ori-lec-h) + 8px);
right: 14px;
width: 260px;
padding: 14px;
border-radius: 14px;
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-2);
box-shadow: var(--ori-shadow-pop);
animation: ori-lec-panneau-entre 0.24s var(--ori-ease-out);
}
@keyframes ori-lec-panneau-entre {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
.ori-lec-panneau-titre {
margin: 0 0 10px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ori-faint);
}
.ori-lec-largeurs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.ori-lec-largeur {
padding: 9px 8px;
border: 1px solid var(--ori-border-1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12px;
color: var(--ori-text-2);
cursor: pointer;
transition: background 0.2s var(--ori-ease-out), border-color 0.2s var(--ori-ease-out), color 0.2s var(--ori-ease-out);
}
.ori-lec-largeur:hover {
background: rgba(255, 255, 255, 0.07);
}
.ori-lec-largeur.est-actif {
background: var(--ori-accent-soft);
border-color: rgba(var(--ori-accent-rgb), 0.5);
color: var(--ori-accent-clair);
}
.ori-lec-panneau-note {
margin: 12px 0 0;
font-family: var(--ori-font-body);
font-size: 11.5px;
line-height: 1.5;
color: var(--ori-faint);
}
/* ---- les planches ---- */
.ori-lec-page {
background: var(--ori-bg-page) !important;
padding: 0 !important;
}
.ori-lec-scene {
max-width: var(--ori-lec-l);
margin: 0 auto;
padding: calc(var(--ori-lec-h) + 14px) 0 0;
}
/* le parent pose 15 px de part et d'autre des planches : sur un téléphone,
c'est 30 px de dessin en moins pour rien */
.ori-lec-scene .reading-content {
background: transparent;
padding: 0;
}
.ori-lec-scene .page-break {
margin: 0;
padding: 0;
text-align: center;
}
.ori-lec-scene .page-break img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
border-radius: 6px;
}
.ori-lec-scene .page-break + .page-break {
margin-top: 8px;
}
/* manhwa, manhua, webtoon : une bande continue, aucune couture */
body.ori-lecture-colle .ori-lec-scene .page-break + .page-break {
margin-top: 0;
}
body.ori-lecture-colle .ori-lec-scene .page-break img {
border-radius: 0;
}
/* Planche en attente : un rectangle scintillant a la place de l'image, retire
des qu'elle arrive. La hauteur est une estimation — elle evite le vide, elle
ne supprime pas tout decalage quand la planche reelle est plus haute. */
.ori-lec-scene .page-break.ori-planche-attente {
position: relative;
min-height: 52vh;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
overflow: hidden;
}
body.ori-lecture-colle .ori-lec-scene .page-break.ori-planche-attente {
border-radius: 0;
}
.ori-lec-scene .page-break.ori-planche-attente::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
animation: ori-skel-slide 1.2s infinite;
}
/* L'image n'est JAMAIS masquee. Le scintillement est derriere elle : si le
script ne retirait pas la classe — image remplacee par un chargement
paresseux, evenement manque, erreur ailleurs —, une planche masquee le
resterait pour toujours. Une planche visible sur un fond inutile est un
defaut ; une planche invisible est une panne. */
.ori-lec-scene .page-break.ori-planche-attente img {
position: relative;
z-index: 1;
}
/* planche introuvable : fond neutre fige, ni scintillement ni icone cassee */
.ori-lec-scene .page-break.ori-planche-ko {
min-height: 30vh;
background: var(--ori-bg-elev);
}
@media (prefers-reduced-motion: reduce) {
.ori-lec-scene .page-break.ori-planche-attente::after {
animation: none;
}
}
/* ---- emplacements publicitaires (Options du thème → Advertising) ----
Le code inséré est celui de la régie : on ne lui impose rien, on se contente
de lui donner de l'air et de l'empêcher de déborder de la colonne. */
.ori-lec-scene > .c-ads {
margin: 0 auto 14px;
padding: 0 8px;
text-align: center;
}
.ori-lec-scene > .c-ads:last-child {
margin: 18px auto 0;
}
.ori-lec-scene > .c-ads:empty {
display: none;
}
.ori-lec-scene > .c-ads img {
max-width: 100%;
height: auto;
}
/* Pas de « height: auto » sur un iframe : la hauteur ecrite dans la balise
n'est qu'une indication, que la moindre regle CSS ecrase — l'iframe retombe
alors sur sa hauteur par defaut de 150 px, et une banniere 300x250 se
retrouve coupee en deux. On borne la largeur, rien d'autre. */
.ori-lec-scene > .c-ads iframe {
max-width: 100%;
}
/* ---- page par page : sous la planche, la suite ----
Plus discret que la carte de fin de chapitre : on tourne une page, on ne
termine rien. */
.ori-lec-suite {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 22px auto 0;
padding: 18px;
}
.ori-lec-suite-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 12px;
background: var(--ori-accent);
border: 0;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 14px;
color: #fff !important;
text-decoration: none;
transition: transform 0.22s var(--ori-ease-doux), box-shadow 0.22s var(--ori-ease-doux);
}
.ori-lec-suite-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 26px -12px rgba(var(--ori-accent-rgb), 0.9);
}
.ori-lec-suite-pos {
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12px;
color: var(--ori-faint);
font-variant-numeric: tabular-nums;
}
/* ---- fin de chapitre ---- */
.ori-lec-fin {
max-width: 560px;
margin: 26px auto 0;
padding: 22px;
border-radius: var(--ori-r-card);
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
text-align: center;
}
.ori-lec-fin-quoi {
margin: 0 0 12px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ori-faint);
}
.ori-lec-fin-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 12px;
background: var(--ori-accent);
color: #0a0e15;
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 14px;
text-decoration: none;
box-shadow: 0 10px 26px -14px var(--ori-accent);
transition: transform 0.25s var(--ori-ease-bounce), box-shadow 0.25s var(--ori-ease-out);
}
.ori-lec-fin-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -12px var(--ori-accent);
color: #0a0e15;
}
.ori-lec-fin-note {
margin: 0;
font-family: var(--ori-font-body);
font-size: 13px;
color: var(--ori-text-3);
}
.ori-lec-fin-retour {
display: block;
margin-top: 14px;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12.5px;
color: var(--ori-muted);
text-decoration: none;
}
.ori-lec-fin-retour:hover {
color: var(--ori-accent-clair);
}
.ori-lec-echanges {
max-width: 900px;
margin: 28px auto 0;
padding: 0 16px;
}
/* Deux titres en anglais précèdent le bloc de commentaires : « Comments for
chapter … » du plugin et « MANGA DISCUSSION » du thème. Le second n'est pas
filtrable dans cette version ; la carte annonce déjà ce qu'elle contient. */
.ori-lec-echanges > h4,
.ori-lec-echanges #manga-discussion.c-blog__heading {
display: none;
}
/* ---- barre du bas, flottante ---- */
.ori-lec-bas {
position: fixed;
left: 50%;
bottom: 18px;
z-index: 60;
width: min(560px, calc(100vw - 24px));
transform: translateX(-50%);
transition: transform 0.34s var(--ori-ease-out), opacity 0.28s var(--ori-ease-out);
}
.ori-lec-bas.est-cache {
transform: translateX(-50%) translateY(160%);
opacity: 0;
pointer-events: none;
}
.ori-lec-bas-in {
display: flex;
align-items: center;
gap: 6px;
padding: 7px;
border-radius: 16px;
background: rgba(14, 14, 18, 0.9);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid var(--ori-border-2);
box-shadow: var(--ori-shadow-pop);
}
.ori-lec-nav {
flex: none;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 9px 12px;
border-radius: 11px;
background: rgba(255, 255, 255, 0.04);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12.5px;
color: var(--ori-text-2);
text-decoration: none;
transition: background 0.2s var(--ori-ease-out), color 0.2s var(--ori-ease-out);
}
.ori-lec-nav:hover {
background: var(--ori-accent-soft);
color: var(--ori-accent-clair);
}
.ori-lec-nav.est-inactif {
opacity: 0.32;
pointer-events: none;
}
/* le chapitre courant, au centre : c'est aussi le bouton qui ouvre la liste */
.ori-lec-choix {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 10px;
border: 0;
border-radius: 11px;
background: transparent;
cursor: pointer;
transition: background 0.2s var(--ori-ease-out);
}
.ori-lec-choix:hover,
.ori-lec-choix[aria-expanded="true"] {
background: rgba(255, 255, 255, 0.06);
}
.ori-lec-choix-nom {
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 13px;
color: var(--ori-text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ori-lec-choix-pos {
flex: none;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 11px;
color: var(--ori-faint);
font-variant-numeric: tabular-nums;
}
.ori-lec-choix .ori-lec-chev {
flex: none;
color: var(--ori-muted);
transition: transform 0.25s var(--ori-ease-out);
}
.ori-lec-choix[aria-expanded="true"] .ori-lec-chev {
transform: rotate(180deg);
}
/* Le favori reprend le bouton du plugin, réduit à son cœur : même masque SVG
que sur la fiche, l'icône du thème parent n'étant pas rendue par la police. */
.ori-lec-fav {
flex: none;
}
.ori-lec-fav a {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0 !important;
border: 0 !important;
border-radius: 11px !important;
background: rgba(255, 255, 255, 0.04) !important;
color: var(--ori-text-3) !important;
font-size: 0 !important;
box-shadow: none !important;
transition: background 0.2s var(--ori-ease-out), color 0.2s var(--ori-ease-out);
}
.ori-lec-fav a:hover {
background: rgba(var(--ori-heart-rgb), 0.14) !important;
color: var(--ori-heart-clair) !important;
}
.ori-lec-fav a i,
.ori-lec-fav .action_detail,
.ori-lec-fav .ori-sr-fav-nb {
display: none !important;
}
.ori-lec-fav a::before {
content: "";
width: 16px;
height: 16px;
flex: none;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* déjà en favoris : cœur plein */
.ori-lec-fav .wp-manga-delete-bookmark {
background: rgba(var(--ori-heart-rgb), 0.16) !important;
color: var(--ori-heart-clair) !important;
}
.ori-lec-fav .wp-manga-delete-bookmark::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
animation: ori-heart-pop 0.5s var(--ori-ease-bounce);
}
/* ---- liste des chapitres, au-dessus de la barre ---- */
.ori-lec-liste {
position: absolute;
left: 0;
right: 0;
bottom: calc(100% + 8px);
max-height: min(58vh, 420px);
display: flex;
flex-direction: column;
border-radius: 16px;
background: rgba(14, 14, 18, 0.96);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid var(--ori-border-2);
box-shadow: var(--ori-shadow-pop);
overflow: hidden;
animation: ori-lec-liste-entre 0.26s var(--ori-ease-out);
}
@keyframes ori-lec-liste-entre {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.ori-lec-liste-tete {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--ori-border-1);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12px;
color: var(--ori-muted);
}
.ori-lec-liste-fermer {
border: 0;
background: transparent;
color: var(--ori-muted);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: color 0.2s var(--ori-ease-out);
}
.ori-lec-liste-fermer:hover {
color: var(--ori-text-1);
}
.ori-lec-liste-corps {
margin: 0;
padding: 6px;
list-style: none;
overflow-y: auto;
overscroll-behavior: contain;
}
.ori-lec-liste-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 13px;
color: var(--ori-text-3);
text-decoration: none;
transition: background 0.18s var(--ori-ease-out), color 0.18s var(--ori-ease-out);
}
.ori-lec-liste-item:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--ori-text-1);
}
.ori-lec-liste-item.est-actuel {
background: var(--ori-accent-soft);
color: var(--ori-accent-clair);
}
.ori-lec-liste-item em {
flex: none;
font-style: normal;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ori-accent);
}
/* ---- téléphone ---- */
@media (max-width: 640px) {
body.ori-lecture {
--ori-lec-h: 50px;
--ori-lec-l: 100%;
}
.ori-lec-scene {
padding-top: calc(var(--ori-lec-h) + 8px);
}
.ori-lec-bas {
bottom: 12px;
}
.ori-lec-nav span {
display: none;
}
.ori-lec-nav {
padding: 9px 10px;
}
.ori-lec-choix-pos {
display: none;
}
.ori-lec-panneau {
right: 8px;
left: 8px;
width: auto;
}
.ori-lec-echanges {
padding: 0 12px;
}
/* le gabarit mobile réserve la hauteur de la topbar et de la navigation du
bas ; nos barres flottent, elles n'ont rien à réserver */
body.ori-lecture {
padding-top: 0 !important;
padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ori-lec-haut-in,
.ori-lec-bas,
.ori-lec-jauge i {
transition: none;
}
.ori-lec-panneau,
.ori-lec-liste {
animation: none;
}
}
/* --------------------------------------------------------------------------
10 bis. QUOI DE NEUF — bandeau d'accueil et page de presentation
-------------------------------------------------------------------------- */
/* ---- le bandeau ---- */
.ori-neuf-flash {
margin: 14px 0 -4px;
}
.ori-neuf-flash.est-parti {
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.3s var(--ori-ease-doux), transform 0.3s var(--ori-ease-doux);
}
.ori-neuf-flash-in {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 46px 12px 14px;
border-radius: 14px;
background:
linear-gradient(100deg, rgba(var(--ori-accent-rgb), 0.14), rgba(var(--ori-accent-rgb), 0.03) 62%),
var(--ori-bg-card);
border: 1px solid rgba(var(--ori-accent-rgb), 0.3);
}
.ori-neuf-flash-chip {
flex: none;
padding: 4px 10px;
border-radius: 999px;
background: var(--ori-accent);
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 10.5px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #0a0e15;
}
.ori-neuf-flash-txt {
flex: 1;
min-width: 0;
margin: 0;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 13px;
color: var(--ori-text-2);
}
.ori-neuf-flash-btn {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--ori-border-2);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12.5px;
color: var(--ori-text-1) !important;
text-decoration: none;
transition: background 0.22s var(--ori-ease-doux), border-color 0.22s var(--ori-ease-doux), transform 0.22s var(--ori-ease-doux);
}
.ori-neuf-flash-btn:hover {
background: var(--ori-accent-soft);
border-color: rgba(var(--ori-accent-rgb), 0.5);
transform: translateY(-1px);
}
.ori-neuf-flash-fermer {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 26px;
height: 26px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--ori-faint);
font-size: 19px;
line-height: 1;
cursor: pointer;
transition: background 0.2s var(--ori-ease-doux), color 0.2s var(--ori-ease-doux);
}
.ori-neuf-flash-fermer:hover {
background: rgba(255, 255, 255, 0.07);
color: var(--ori-text-1);
}
/* ---- la page ---- */
.ori-neuf {
max-width: 900px;
margin: 0 auto;
padding: 34px 16px 60px;
}
.ori-neuf-hero {
text-align: center;
padding: 18px 0 30px;
}
.ori-neuf-chip {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: rgba(var(--ori-accent-rgb), 0.14);
border: 1px solid rgba(var(--ori-accent-rgb), 0.42);
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ori-accent-clair);
}
.ori-neuf-titre {
margin: 18px 0 0;
font-family: var(--ori-font-display);
font-weight: 800;
font-size: clamp(28px, 5vw, 44px);
line-height: 1.12;
letter-spacing: -0.5px;
text-wrap: balance;
background: linear-gradient(120deg, var(--ori-text-1) 30%, var(--ori-accent-clair));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ori-neuf-chapo {
max-width: 56ch;
margin: 14px auto 0;
font-family: var(--ori-font-body);
font-size: 14.5px;
line-height: 1.7;
color: var(--ori-text-3);
}
/* l'avertissement d'essai : il doit se voir sans hurler */
.ori-neuf-avis {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 15px 18px;
border-radius: 14px;
background: rgba(232, 194, 107, 0.08);
border: 1px solid rgba(232, 194, 107, 0.28);
}
.ori-neuf-avis-ico {
flex: none;
margin-top: 1px;
color: var(--ori-gold);
}
.ori-neuf-avis p {
margin: 0;
font-family: var(--ori-font-body);
font-size: 13px;
line-height: 1.65;
color: var(--ori-text-3);
}
.ori-neuf-avis strong {
color: var(--ori-gold);
}
.ori-neuf-liste {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 30px;
}
.ori-neuf-bloc {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
padding: 22px;
border-radius: var(--ori-r-card);
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
transition: border-color 0.3s var(--ori-ease-doux), transform 0.3s var(--ori-ease-doux);
}
.ori-neuf-bloc:hover {
border-color: rgba(var(--ori-accent-rgb), 0.34);
transform: translateY(-2px);
}
/* Le numero n'est pas un ornement : ces blocs se lisent dans l'ordre, du
compte jusqu'aux preferences. */
.ori-neuf-num {
font-family: var(--ori-font-display);
font-weight: 800;
font-size: 30px;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px rgba(var(--ori-accent-rgb), 0.4);
font-variant-numeric: tabular-nums;
}
.ori-neuf-corps {
min-width: 0;
}
.ori-neuf-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin-bottom: 10px;
border-radius: 10px;
background: var(--ori-accent-soft);
color: var(--ori-accent-clair);
}
.ori-neuf-bloc-titre {
margin: 0 0 6px;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 17px;
color: var(--ori-text-1);
}
.ori-neuf-bloc-texte {
margin: 0;
font-family: var(--ori-font-body);
font-size: 13.5px;
line-height: 1.7;
color: var(--ori-text-3);
}
/* ---- vignettes : montrer plutot que decrire ---- */
.ori-neuf-vue {
flex: none;
width: 186px;
}
.ori-neuf-mini {
display: flex;
align-items: center;
gap: 11px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--ori-border-1);
}
.ori-neuf-mini-pastille {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--ori-grad);
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 13px;
color: #fff;
}
.ori-neuf-mini-corps {
flex: 1;
min-width: 0;
}
.ori-neuf-mini-corps b {
display: block;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12.5px;
color: var(--ori-text-1);
}
.ori-neuf-mini-quoi {
display: block;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 9.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ori-faint);
margin-bottom: 3px;
}
.ori-neuf-mini-barre {
display: block;
height: 6px;
margin-top: 7px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.09);
overflow: hidden;
}
.ori-neuf-mini-barre i {
display: block;
height: 100%;
border-radius: 999px;
background: var(--ori-grad);
}
.ori-neuf-mini-jauge {
flex-direction: column;
align-items: stretch;
gap: 7px;
}
.ori-neuf-mini-pages {
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 11px;
color: var(--ori-faint);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* ---- pied ---- */
.ori-neuf-pied {
margin-top: 34px;
padding: 30px 24px;
border-radius: var(--ori-r-card);
background:
radial-gradient(120% 90% at 50% 0%, rgba(var(--ori-accent-rgb), 0.1), transparent 64%),
var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
text-align: center;
}
.ori-neuf-pied-titre {
margin: 0;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 20px;
color: var(--ori-text-1);
}
.ori-neuf-pied-texte {
max-width: 46ch;
margin: 10px auto 0;
font-family: var(--ori-font-body);
font-size: 13.5px;
line-height: 1.65;
color: var(--ori-text-3);
}
.ori-neuf-pied-btn {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 18px;
padding: 13px 26px;
border-radius: 12px;
background: rgba(88, 101, 242, 0.18);
border: 1px solid rgba(88, 101, 242, 0.5);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13.5px;
color: #fff !important;
text-decoration: none;
transition: background 0.22s var(--ori-ease-doux), transform 0.22s var(--ori-ease-doux);
}
.ori-neuf-pied-btn:hover {
background: rgba(88, 101, 242, 0.3);
transform: translateY(-1px);
}
.ori-neuf-pied-lien {
display: block;
margin-top: 16px;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12.5px;
color: var(--ori-muted) !important;
text-decoration: none;
}
.ori-neuf-pied-lien:hover {
color: var(--ori-accent-clair) !important;
}
@media (max-width: 780px) {
.ori-neuf-bloc {
grid-template-columns: 42px minmax(0, 1fr);
gap: 14px;
padding: 18px;
}
.ori-neuf-num {
font-size: 24px;
}
/* la vignette passe sous le texte, alignee avec lui */
.ori-neuf-vue {
grid-column: 2;
width: 100%;
}
/* La pastille et le message tiennent sur une meme ligne, le bouton passe
dessous sur toute la largeur : on lit l'annonce avant qu'on ne propose
d'aller la voir. */
.ori-neuf-flash-in {
flex-wrap: wrap;
align-items: flex-start;
gap: 9px 10px;
padding: 12px 40px 12px 12px;
}
.ori-neuf-flash-chip {
order: 1;
}
.ori-neuf-flash-txt {
order: 2;
flex: 1 1 140px;
font-size: 12.5px;
line-height: 1.5;
}
.ori-neuf-flash-btn {
order: 3;
flex: 1 0 100%;
justify-content: center;
}
/* la croix se cale en haut, a hauteur de la pastille */
.ori-neuf-flash-fermer {
top: 8px;
transform: none;
}
}
/* la cloche du visiteur : pas de liste, une invitation */
.ori-notif-invite {
padding: 22px 18px 20px;
text-align: center;
}
.ori-notif-invite p {
margin: 0 0 14px;
font-family: var(--ori-font-body);
font-size: 12.5px;
line-height: 1.55;
color: var(--ori-muted);
}
.ori-notif-invite-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
border-radius: 10px;
background: var(--ori-accent);
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 12.5px;
color: #0a0e15 !important;
text-decoration: none;
transition: transform 0.2s var(--ori-ease-bounce), box-shadow 0.2s var(--ori-ease-doux);
}
.ori-notif-invite-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px -14px var(--ori-accent);
color: #0a0e15 !important;
}
/* Tout menu deroulant natif du site, meme regle : sans « color-scheme »,
le navigateur dessine sa liste en clair et notre texte clair y disparait. */
select {
color-scheme: dark;
}
select option {
background-color: #14141a;
color: #f3f1f2;
}
/* --------------------------------------------------------------------------
11. SIDEBAR & WIDGETS
-------------------------------------------------------------------------- */
.c-sidebar .c-widget,
.widget,
.c-sidebar__wrap .widget_wrap {
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: var(--ori-r-card);
}
.widget-content ul li,
.c-sidebar ul li {
border-color: var(--ori-border-1) !important;
}
.widget-content ul li a {
color: var(--ori-text-3);
}
.widget-content ul li a:hover {
color: var(--ori-link);
}
/* items "popular" dans la sidebar */
.popular-item-wrap {
border-radius: 10px;
transition: background 0.25s var(--ori-ease-out);
padding: 6px;
}
.popular-item-wrap:hover {
background: var(--ori-bg-card-hover);
}
.popular-img img {
border-radius: 8px;
}
/* --------------------------------------------------------------------------
12. PAGINATION
-------------------------------------------------------------------------- */
.wp-pagenavi a,
.wp-pagenavi span,
.paging-navigation a,
.paging-navigation span {
background: var(--ori-bg-card) !important;
border: 1px solid var(--ori-border-1) !important;
border-radius: 10px !important;
color: var(--ori-text-3) !important;
font-weight: 700;
transition: all 0.25s var(--ori-ease-out);
}
.wp-pagenavi a:hover,
.paging-navigation a:hover {
background: var(--ori-accent-soft) !important;
border-color: rgba(var(--ori-accent-rgb), 0.4) !important;
color: var(--ori-link) !important;
transform: translateY(-2px);
}
.wp-pagenavi span.current,
.paging-navigation span.current {
background: var(--ori-grad) !important;
color: #fff !important;
border-color: transparent !important;
}
/* --------------------------------------------------------------------------
13. FOOTER — réplique du pied de page OriList (footer.css)
-------------------------------------------------------------------------- */
.site-footer {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.18)) !important;
border-top: 1px solid var(--ori-border-1);
margin-top: 60px;
}
.ori-ft-in {
padding-top: 40px;
padding-bottom: 26px;
text-align: left; /* le thème centre le footer par défaut */
}
.ori-ft-cols {
display: grid;
grid-template-columns: minmax(220px, 1.4fr) repeat(3, 1fr);
gap: 32px;
}
.ori-ft-logo {
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 20px;
color: #fff;
letter-spacing: -0.2px;
}
.ori-ft-pitch {
margin: 12px 0 0;
max-width: 300px;
font-family: var(--ori-font-body);
font-weight: 500;
font-size: 13px;
line-height: 1.65;
color: var(--ori-muted);
}
.ori-ft-col {
display: flex;
flex-direction: column;
gap: 9px;
}
.ori-ft-col-titre {
margin-bottom: 3px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--ori-faint);
}
.ori-ft-col a {
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 13px;
color: var(--ori-text-3) !important;
transition: color 0.3s ease;
}
.ori-ft-col a:hover {
color: #fff !important;
}
.ori-ft-widgets {
margin-top: 34px;
}
.ori-ft-bas {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-top: 34px;
padding-top: 18px;
border-top: 1px solid var(--ori-border-1);
font-family: var(--ori-font-body);
font-weight: 500;
font-size: 12px;
color: var(--ori-faint);
}
.ori-ft-bas p {
margin: 0;
display: inline;
}
@media (max-width: 900px) {
.site-footer {
margin-top: 40px;
}
.ori-ft-in {
padding: 28px 16px calc(88px + env(safe-area-inset-bottom, 0px));
}
.ori-ft-cols {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.ori-ft-marque {
grid-column: 1 / -1;
}
.ori-ft-bas {
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-top: 26px;
}
}
.site-footer .c-footer-widget .widget-title,
.site-footer .widget-title {
color: var(--ori-text-1) !important;
}
.site-footer,
.site-footer p,
.site-footer li,
.site-footer .copyright {
color: var(--ori-muted);
}
.site-footer a {
color: var(--ori-text-3);
}
.site-footer a:hover {
color: var(--ori-link);
}
/* --------------------------------------------------------------------------
14. FORMULAIRES, RECHERCHE & MODALES
-------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select,
.c-header__search input,
.manga-search-form input {
background: var(--ori-bg-card) !important;
border: 1px solid var(--ori-border-2) !important;
border-radius: 10px !important;
color: var(--ori-text-1) !important;
font-family: var(--ori-font-body);
transition: border-color 0.25s var(--ori-ease-out), box-shadow 0.25s var(--ori-ease-out);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
.manga-search-form input:focus {
border-color: rgba(var(--ori-accent-rgb), 0.55) !important;
box-shadow: 0 0 0 3px rgba(var(--ori-accent-rgb), 0.18);
outline: none;
}
::placeholder {
color: var(--ori-faint);
}
/* modale (login etc.) */
.modal-content,
.c-modal .modal-content {
background: var(--ori-bg-elev) !important;
border: 1px solid var(--ori-border-1);
border-radius: var(--ori-r-card);
box-shadow: var(--ori-shadow-pop);
color: var(--ori-text-2);
}
.modal-header {
border-bottom-color: var(--ori-border-1) !important;
}
.modal-footer {
border-top-color: var(--ori-border-1) !important;
}
/* tableaux (listes de mangas en vue liste, profils, etc.) */
table,
.table {
color: var(--ori-text-2);
}
table th {
color: var(--ori-text-1);
}
table td,
table th {
border-color: var(--ori-border-1) !important;
}
/* --------------------------------------------------------------------------
14bis. PALETTE DE RECHERCHE (overlay du header)
-------------------------------------------------------------------------- */
/* l'overlay : plein écran, fond flouté */
.c-header__top .search-main-menu.active {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: auto !important;
height: auto !important;
z-index: 99999;
margin: 0;
padding: 90px 16px 16px;
/* !important : le thème pose un fond opaque #262626 en mode sombre qui
masquerait tout le site (valeurs reprises de recherche-overlay.css) */
background: rgba(5, 7, 11, 0.6) !important;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
display: flex !important;
align-items: flex-start;
justify-content: center;
animation: ori-page-in 0.5s var(--ori-ease-out) both;
}
/* la carte centrée (on neutralise le positionnement absolu + transform du thème) */
.c-header__top .search-main-menu.active > li {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
list-style: none;
width: 100%;
max-width: 560px;
max-height: min(560px, calc(100vh - 120px));
display: flex;
flex-direction: column;
background: #0f1014 !important;
border: 1px solid var(--ori-border-2);
border-radius: 18px;
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
overflow: hidden;
padding: 0;
animation: ori-palette-in 0.6s var(--ori-ease-bounce) both;
}
@keyframes ori-palette-in {
from { opacity: 0; transform: translateY(-12px) scale(0.98); }
to { opacity: 1; transform: none; }
}
/* le champ : grand, sans bordure, avec la loupe à gauche */
.c-header__top .search-main-menu #blog-post-search {
position: relative;
margin: 0;
padding: 0;
}
.c-header__top .search-main-menu #blog-post-search::before {
content: "";
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 17px;
height: 17px;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
pointer-events: none;
}
.c-header__top .search-main-menu #blog-post-search input[name="s"] {
width: 100%;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 16px 88px 16px 46px;
font-size: 16px;
font-weight: 600;
font-family: var(--ori-font-body);
color: var(--ori-text-1) !important;
}
.c-header__top .search-main-menu #blog-post-search input[name="s"]::placeholder {
font-weight: 500;
color: var(--ori-faint);
}
.c-header__top .search-main-menu #blog-post-search input[name="s"]:focus {
outline: none;
box-shadow: none !important;
}
/* on supprime le bouton "Search" et le loader du thème dans la palette */
.c-header__top .search-main-menu #blog-post-search input[type="submit"],
.c-header__top .search-main-menu #blog-post-search .loader-inner {
display: none !important;
}
/* chip "Échap" (injectée en JS) */
.ori-search-esc {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ori-border-2);
border-radius: 7px;
color: var(--ori-faint);
font-size: 10.5px;
font-weight: 600;
font-family: var(--ori-font-body);
padding: 4px 9px;
cursor: pointer;
transition: color 0.2s var(--ori-ease-out), border-color 0.2s var(--ori-ease-out);
}
.ori-search-esc:hover {
color: var(--ori-text-1);
border-color: rgba(var(--ori-accent-rgb), 0.4);
}
/* résultats */
.ori-search-results {
border-top: 1px solid var(--ori-border-1);
max-height: 46vh;
overflow-y: auto;
padding: 10px;
text-align: left;
}
/* valeurs reprises de recherche-overlay.css (.ro-cat, .ro-ligne, .ro-mini…) */
.ori-search-label {
font-size: 10.5px;
font-weight: 700;
font-family: var(--ori-font-body);
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--ori-faint);
padding: 8px 10px 4px;
}
/* Palette de recherche : ses classes portaient le prefixe « ori-sr- », devenu
celui de la page serie. Le titre de la fiche (26 px !important) ecrasait
celui des suggestions, qui s'affichaient en enorme. Prefixe « ori-pal- »
pour que les deux ne puissent plus se croiser. */
.ori-pal-ligne {
display: flex;
align-items: center;
gap: 13px;
padding: 8px 10px;
border-radius: 11px;
transition: background 0.2s var(--ori-ease-out);
}
.ori-pal-ligne:hover,
.ori-pal-ligne.is-active {
background: rgba(var(--ori-accent-rgb), 0.14);
}
.ori-pal-ligne .ori-pal-vignette {
width: 36px;
height: 50px;
flex: none;
border-radius: 6px;
object-fit: cover;
background: var(--ori-grad);
display: block;
}
.ori-pal-ligne .ori-pal-texte {
flex: 1;
min-width: 0;
}
.ori-pal-ligne .ori-pal-titre {
display: block;
color: var(--ori-text-1);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ori-pal-ligne .ori-pal-genres {
display: block;
color: var(--ori-faint);
font-family: var(--ori-font-body);
font-weight: 500;
font-size: 11px;
margin-top: 1px;
}
.ori-pal-ligne .ori-pal-note {
margin-left: auto;
flex: none;
color: var(--ori-gold);
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 12px;
}
.ori-search-empty {
padding: 22px 12px;
color: var(--ori-faint);
font-weight: 500;
font-size: 13px;
}
/* état vide de la palette : recherches récentes + genres populaires
(styles .ro-section / .ro-chips d'OriList) */
.ori-search-dec {
border-top: 1px solid var(--ori-border-1);
padding: 4px 10px 12px;
text-align: left;
}
.ori-search-sec {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 6px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 11px;
color: var(--ori-faint);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.ori-search-sec button {
border: 0;
background: none;
padding: 0;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 11px;
color: var(--ori-link);
cursor: pointer;
text-transform: none;
letter-spacing: 0;
}
.ori-search-sec button:hover {
color: #fff;
}
.ori-dec-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-bottom: 4px;
}
.ori-dec-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 13px;
border: 1px solid var(--ori-border-2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
color: var(--ori-text-2) !important;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12.5px;
cursor: pointer;
transition: background 0.25s var(--ori-ease-out), border-color 0.25s var(--ori-ease-out);
}
.ori-dec-chip:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(var(--ori-accent-rgb), 0.4);
}
/* boutons "Search" restants (page de recherche, widgets) : sobres, sans dégradé */
.c-search-header__wrapper .search-submit,
.manga-search-form .search-submit,
.widget-manga-search input[type="submit"] {
background: var(--ori-bg-card) !important;
border: 1px solid var(--ori-border-2) !important;
color: var(--ori-text-2) !important;
box-shadow: none !important;
font-weight: 700;
}
.c-search-header__wrapper .search-submit:hover,
.manga-search-form .search-submit:hover,
.widget-manga-search input[type="submit"]:hover {
background: var(--ori-accent-soft) !important;
border-color: rgba(var(--ori-accent-rgb), 0.55) !important;
color: #fff !important;
}
/* ==========================================================================
CATALOGUE (page d'archive All Series)
========================================================================== */
/* le bandeau fil d'ariane perdait sa texture grise */
.c-breadcrumb-wrapper {
background: transparent !important;
}
.c-breadcrumb .breadcrumb li,
.c-breadcrumb .breadcrumb li a {
color: var(--ori-muted) !important;
font-family: var(--ori-font-body);
font-size: 12px;
}
.c-breadcrumb .breadcrumb li a:hover {
color: var(--ori-link) !important;
}
/* bloc genres : carte discrète, liens en chips */
.genres_wrap {
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: var(--ori-r-card);
padding: 14px 16px 10px;
margin: 8px 0 6px;
}
.genres_wrap .c-blog__heading.style-3 {
background: none !important;
padding: 0 !important;
margin-bottom: 10px;
border: 0 !important;
}
.genres_wrap .c-blog__heading.style-3::before,
.genres_wrap .c-blog__heading.style-3::after {
display: none !important;
}
.genres_wrap .c-blog__heading.style-3 .h4,
.genres_wrap .c-blog__heading.style-3 h4 {
background: none !important;
color: var(--ori-muted) !important;
font-family: var(--ori-font-body) !important;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.6px;
text-transform: uppercase;
padding: 0 !important;
}
.genres_wrap ul li a {
display: inline-block;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ori-border-1);
border-radius: 999px;
padding: 4px 12px;
margin: 0 4px 8px 0;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12px;
color: var(--ori-text-3) !important;
transition: background 0.25s var(--ori-ease-out), border-color 0.25s var(--ori-ease-out), color 0.25s var(--ori-ease-out);
}
.genres_wrap ul li a:hover {
background: var(--ori-accent-soft);
border-color: rgba(var(--ori-accent-rgb), 0.4);
color: var(--ori-link) !important;
}
.genres_wrap ul li a .count {
color: var(--ori-faint);
}
.genres_wrap ul li i {
display: none;
}
/* titre de page et barre de tri */
.c-page__heading,
.c-page__heading .item-title,
.entry-title {
border: 0 !important;
}
.c-page__heading .item-title,
.entry-title .item-title {
font-size: 22px !important;
color: var(--ori-text-1) !important;
}
.c-nav-tabs > span {
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12px;
color: var(--ori-muted);
}
.c-nav-tabs ul.c-tabs-content li a {
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12px;
color: var(--ori-text-3) !important;
border-radius: 8px;
padding: 5px 10px;
transition: background 0.25s var(--ori-ease-out), color 0.25s var(--ori-ease-out);
}
.c-nav-tabs ul.c-tabs-content li a:hover,
.c-nav-tabs ul.c-tabs-content li.active a {
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
}
.c-nav-tabs ul.c-tabs-content li a::after {
display: none !important;
}
/* ==========================================================================
CATALOGUE ORILIST (template page-templates/ori-catalogue.php) :
recherche + sidebar de filtres (desktop) / bottom sheet (mobile) + grille
========================================================================== */
.ori-cat {
padding: 16px 0 30px;
}
/* barre de recherche */
.ori-cat-search {
position: relative;
margin-bottom: 24px;
}
.ori-cat-search svg {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--ori-muted);
pointer-events: none;
}
.ori-cat-search input {
width: 100%;
background: var(--ori-bg-card) !important;
border: 1px solid var(--ori-border-2) !important;
border-radius: 16px !important;
padding: 14px 18px 14px 46px;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 15px;
color: var(--ori-text-1) !important;
}
/* layout : sidebar + résultats */
.ori-cat-layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 36px;
align-items: start;
}
/* La colonne de filtres etait une liste nue posee sur le fond : rien ne la
distinguait du catalogue, et chaque case flottait dans le vide. Elle devient
une carte, avec des lignes cliquables sur toute leur largeur. */
.ori-cat-filtres {
position: sticky;
top: 80px;
padding: 18px 16px;
border-radius: var(--ori-r-card);
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
max-height: calc(100vh - 100px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
.ori-cat-filtres::-webkit-scrollbar {
width: 6px;
}
.ori-cat-filtres::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.14);
border-radius: 3px;
}
.ori-cat-poignee {
display: none;
}
.ori-cat-ftete {
display: flex;
align-items: baseline;
justify-content: space-between;
position: sticky;
top: -18px;
z-index: 2;
margin: -18px -16px 0;
padding: 18px 16px 12px;
background: linear-gradient(180deg, var(--ori-bg-card) 72%, transparent);
}
.ori-cat-ftitre {
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 18px;
color: var(--ori-text-1);
}
.ori-cat-reset {
border: 0;
background: none;
padding: 0;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12px;
color: var(--ori-link);
cursor: pointer;
}
.ori-cat-reset:hover {
color: #fff;
}
.ori-fgroupe {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--ori-border-1);
}
.ori-fgroupe:first-of-type {
border-top: 0;
padding-top: 0;
}
.ori-fgroupe-titre {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--ori-faint);
}
.ori-fnote-reset {
border: 0;
background: none;
padding: 0;
color: var(--ori-heart-clair);
font-weight: 800;
cursor: pointer;
}
/* cases à cocher (desktop) */
.ori-fcheck {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 8px;
margin: 0 -8px;
border-radius: 9px;
cursor: pointer;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 13px;
color: var(--ori-text-3);
transition: background 0.18s var(--ori-ease-doux), color 0.18s var(--ori-ease-doux);
}
.ori-fcheck:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--ori-text-1);
}
.ori-fcheck.coche {
color: var(--ori-text-1);
}
.ori-fcheck:focus-within {
outline: 2px solid rgba(var(--ori-accent-rgb), 0.55);
outline-offset: 1px;
}
.ori-fcheck input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.ori-fbox {
width: 16px;
height: 16px;
flex: none;
border-radius: 5px;
border: 1.5px solid rgba(255, 255, 255, 0.25);
position: relative;
transition: background 0.2s var(--ori-ease-out), border-color 0.2s var(--ori-ease-out);
}
.ori-fcheck.coche .ori-fbox {
background: var(--ori-accent);
border-color: var(--ori-accent);
}
.ori-fcheck.coche .ori-fbox::after {
content: "";
position: absolute;
left: 4.5px;
top: 1.5px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(42deg);
}
.ori-fcheck:hover .ori-flabel {
color: var(--ori-text-1);
}
.ori-fcheck.extra {
display: none;
}
/* mini-drapeau dans les filtres Origine */
.ori-fdrapeau {
display: inline-flex;
flex: none;
}
.ori-fdrapeau .ori-flag {
width: 15px;
height: 10px;
}
/* champs nombre de chapitres min / max */
.ori-fchap {
display: flex;
align-items: center;
gap: 8px;
}
.ori-fchap input {
width: 100%;
min-width: 0;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid var(--ori-border-2) !important;
border-radius: 10px !important;
padding: 8px 10px;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 13px;
color: var(--ori-text-1) !important;
-moz-appearance: textfield;
}
.ori-fchap input::-webkit-outer-spin-button,
.ori-fchap input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ori-fchap-sep {
color: var(--ori-faint);
flex: none;
}
.ori-fliste.ouvert .ori-fcheck.extra {
display: flex;
}
.ori-fplus {
border: 0;
background: none;
padding: 4px 0 0 25px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12px;
color: var(--ori-link);
cursor: pointer;
}
.ori-fplus:hover {
color: #fff;
}
/* segments (statut, tri mobile) */
.ori-fseg {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.ori-fseg button {
border: 1px solid var(--ori-border-2);
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 8px 13px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12.5px;
color: var(--ori-text-3);
cursor: pointer;
transition: background 0.25s var(--ori-ease-out), border-color 0.25s var(--ori-ease-out), color 0.25s var(--ori-ease-out);
}
.ori-fseg button:hover {
color: #fff;
}
.ori-fseg button.on {
background: rgba(var(--ori-accent-rgb), 0.15);
border-color: rgba(var(--ori-accent-rgb), 0.55);
color: #fff;
}
/* étoiles note minimum */
.ori-fstars {
display: flex;
gap: 6px;
}
.ori-fstars button {
border: 0;
background: none;
padding: 0;
color: rgba(255, 255, 255, 0.22);
cursor: pointer;
transition: color 0.2s var(--ori-ease-out), transform 0.22s var(--ori-ease-out);
}
.ori-fstars button:hover {
transform: scale(1.15);
}
.ori-fstars button.on {
color: var(--ori-star);
}
/* bandeau de contexte : on est arrivé par un genre, un auteur, une année… */
.ori-cat-ctx {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 14px;
margin: 0 0 18px;
padding: 16px 20px;
border-radius: 16px;
background:
linear-gradient(120deg, rgba(var(--ori-accent-rgb), 0.13), rgba(var(--ori-accent-rgb), 0.02) 60%),
var(--ori-bg-card);
border: 1px solid rgba(var(--ori-accent-rgb), 0.2);
}
.ori-cat-ctx-quoi {
flex: 0 0 100%;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ori-faint);
}
.ori-cat-ctx-nom {
margin: 0;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 24px;
color: var(--ori-text-1);
}
.ori-cat-ctx-tout {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: auto;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12.5px;
color: var(--ori-link);
}
.ori-cat-ctx-tout:hover {
text-decoration: underline;
}
@media (max-width: 700px) {
.ori-cat-ctx {
padding: 14px 16px;
}
.ori-cat-ctx-nom {
font-size: 20px;
}
.ori-cat-ctx-tout {
margin-left: 0;
flex: 0 0 100%;
}
}
/* Sur l'archive d'un genre, d'un auteur ou d'une année, la sélection est faite
avant d'arriver : les filtres et la recherche rendent leur place aux
couvertures, et « Tout le catalogue » ramene a la page complete. Les blocs
restent dans la page (le script du catalogue lit leur etat), simplement
masques. */
body.ori-cat-focus .ori-cat-filtres,
body.ori-cat-focus .ori-cat-search,
body.ori-cat-focus .ori-cat-fab,
body.ori-cat-focus .ori-cat-voile {
display: none !important;
}
body.ori-cat-focus .ori-cat-layout {
display: block;
}
/* le tri passait dans le tiroir des filtres sur mobile : sans tiroir, on
remet la liste deroulante au-dessus de la grille */
@media (max-width: 900px) {
body.ori-cat-focus .ori-cat-tri {
display: flex;
}
}
/* en-tête des résultats */
.ori-cat-head {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
/* la légende s'intercale entre le compte et le tri, et prend la place restante */
.ori-cat-head .ori-cat-legende {
flex: 1 1 auto;
justify-content: center;
}
.ori-cat-count {
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 15px;
color: var(--ori-text-2);
}
.ori-cat-count b {
color: var(--ori-text-1);
}
.ori-cat-tri {
display: flex;
align-items: center;
gap: 8px;
flex: none;
white-space: nowrap;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 13px;
color: var(--ori-muted);
margin: 0;
}
.ori-cat-tri select {
appearance: none;
-webkit-appearance: none;
background-color: rgba(255, 255, 255, 0.05) !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: right 11px center !important;
background-size: 12px !important;
border: 1px solid var(--ori-border-2) !important;
border-radius: 10px !important;
padding: 8px 32px 8px 13px;
line-height: 1.3;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12.5px;
color: var(--ori-text-1) !important;
cursor: pointer;
/* La liste deroulante n'est pas dessinee par la page mais par le systeme :
nos couleurs claires s'y retrouvaient sur le fond blanc natif, donc
illisibles. « color-scheme » demande au navigateur sa version sombre, et
les regles sur « option » couvrent ceux qui l'ignorent. */
color-scheme: dark;
}
.ori-cat-tri select option {
background-color: #14141a;
color: #f3f1f2;
}
.ori-cat-tri select option:checked,
.ori-cat-tri select option:hover {
background-color: rgba(var(--ori-accent-rgb), 0.35);
color: #fff;
}
/* cartes : note en haut à gauche + pastille statut en haut à droite */
.ori-cat-note {
position: absolute;
top: 6px;
left: 6px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 7px;
border-radius: 6px;
background: rgba(6, 9, 14, 0.8);
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 11px;
color: var(--ori-gold);
}
.ori-cat-dot {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
width: 9px;
height: 9px;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(6, 9, 14, 0.55);
}
.ori-cat-dot.st-en-cours {
background: #52d98a;
}
.ori-cat-dot.st-termine {
background: var(--ori-accent-vif);
}
.ori-cat-dot.st-autre {
background: var(--ori-muted);
}
/* Légende des pastilles, dans la barre de résultats.
Les pastilles y sont les mêmes éléments que sur les couvertures : on ne
redéclare que ce qui change (elles ne sont plus posées en absolu), jamais les
couleurs — sinon la légende finirait par mentir. */
.ori-cat-legende {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
padding: 0;
margin: 0;
list-style: none;
}
.ori-cat-legende li {
display: inline-flex;
gap: 6px;
align-items: center;
font-family: var(--ori-font-body);
font-size: 12.5px;
color: var(--ori-faint);
white-space: nowrap;
}
.ori-cat-legende .ori-cat-dot {
position: static;
flex: none;
box-shadow: none;
}
/* éléments mobiles cachés sur desktop */
.ori-f-mobile-tri,
.ori-cat-fermer,
.ori-cat-fab,
.ori-cat-voile {
display: none;
}
/* ---- mobile : bottom sheet + bouton flottant Filtres ---- */
@media (max-width: 900px) {
.ori-cat .container {
padding-left: 16px;
padding-right: 16px;
}
.ori-cat-layout {
display: block;
}
.ori-cat-tri {
display: none;
}
.ori-f-mobile-tri {
display: block;
}
.ori-cat-filtres {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
z-index: 96;
max-height: 80vh;
overflow-y: auto;
background: #0f1014;
border-top: 1px solid var(--ori-border-2);
border-radius: 18px 18px 0 0;
padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
transform: translateY(105%);
transition: transform 0.35s var(--ori-ease-out);
}
.ori-cat-filtres.open {
transform: none;
}
.ori-cat-poignee {
display: block;
width: 44px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.18);
margin: 6px auto 12px;
}
/* les cases deviennent des chips */
.ori-fliste {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ori-fcheck {
border: 1px solid var(--ori-border-2);
background: rgba(255, 255, 255, 0.05);
border-radius: 999px;
padding: 8px 14px;
/* la version PC deborde de 8 px de chaque cote pour que la ligne
entiere soit cliquable ; en pastilles, ce debordement les faisait
se chevaucher */
margin: 0;
transition: background 0.25s var(--ori-ease-out), border-color 0.25s var(--ori-ease-out);
}
.ori-fbox {
display: none;
}
.ori-fcheck.coche {
background: rgba(var(--ori-accent-rgb), 0.15);
border-color: rgba(var(--ori-accent-rgb), 0.55);
}
.ori-fcheck.coche .ori-flabel {
color: #fff;
}
.ori-fplus {
padding-left: 0;
}
.ori-cat-fermer {
display: block;
width: 100%;
margin-top: 18px;
padding: 13px;
border: 0;
border-radius: 12px;
background: var(--ori-accent);
color: #fff;
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 14px;
cursor: pointer;
}
.ori-cat-voile[hidden] {
display: none;
}
.ori-cat-voile {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 95;
background: rgba(5, 7, 11, 0.6);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.ori-cat-fab {
display: inline-flex;
align-items: center;
gap: 7px;
position: fixed;
right: 14px;
bottom: calc(92px + env(safe-area-inset-bottom, 0px));
z-index: 60;
border: 0;
border-radius: 999px;
padding: 13px 20px;
background: var(--ori-accent);
color: #fff;
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 13.5px;
box-shadow: 0 12px 30px -8px rgba(var(--ori-accent-rgb), 0.6);
cursor: pointer;
}
/* le go-to-top laisse la place au fab sur la page catalogue */
.ori-cat ~ .go-to-top,
body.page-template-ori-catalogue .go-to-top {
display: none !important;
}
}
/* ==========================================================================
FICHE ŒUVRE (override madara-core/manga-single.php) — réplique Serie OriList
========================================================================== */
.ori-sr-page {
position: relative;
}
/* bannière : cover floutée derrière l'en-tête (hero-blur d'OriList) */
/* la bannière floutée ne sert plus que sur mobile, où la jaquette est le héros */
.ori-sr-hero {
display: none;
}
.ori-sr-blur {
position: absolute;
top: -40px;
left: -40px;
right: -40px;
bottom: -40px;
background-size: cover;
background-position: center 25%;
/* assez lisible pour qu'on la voie, assez sourde pour qu'on lise par-dessus */
filter: blur(38px) saturate(1.25) brightness(0.82);
}
.ori-sr-veil {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(8, 8, 10, 0.42) 0%, rgba(8, 8, 10, 0.72) 48%, var(--ori-bg-page) 100%);
}
.ori-sr-wrap {
position: relative;
padding-top: 18px;
padding-bottom: 40px;
}
/* en-tête : cover + titre + badges + actions */
/* ---- la jaquette porte le titre : c'est la colonne de gauche ---- */
.ori-sr-fiche {
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: 16px;
overflow: hidden;
}
.ori-sr-cover {
position: relative;
display: block;
aspect-ratio: 193 / 278;
background: var(--ori-grad);
}
.ori-sr-cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Le voile doit finir exactement sur la couleur de la page : sur la peau rouge
le fond n'est pas le meme, et une couleur ecrite en dur laissait une couture
au bas de la couverture. D'ou le fond en composantes. */
.ori-sr-cover-voile {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(var(--ori-bg-page-rgb), 0.5) 0%, rgba(var(--ori-bg-page-rgb), 0) 26%, rgba(var(--ori-bg-page-rgb), 0.45) 52%, rgba(var(--ori-bg-page-rgb), 0.97) 100%);
}
.ori-sr-cover-haut {
position: absolute;
top: 12px;
left: 12px;
right: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.ori-sr-cover-haut-fin {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
/* le retour n'a de sens que sur mobile, où la jaquette tient l'écran */
.ori-sr-cover .ori-sr-retour {
display: none;
}
.ori-sr-rond {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 50%;
background: rgba(8, 8, 10, 0.62);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: #fff;
cursor: pointer;
transition: background 0.22s var(--ori-ease-out), transform 0.25s var(--ori-ease-out);
}
.ori-sr-rond:hover {
background: rgba(8, 8, 10, 0.85);
transform: scale(1.06);
}
/* le partage fait un tour sur lui-même : au survol comme au clic */
.ori-sr-partager svg {
transition: transform 0.7s var(--ori-ease-out);
}
.ori-sr-partager:hover svg,
.ori-sr-partager:focus-visible svg {
transform: rotate(360deg);
}
.ori-sr-partager.ori-copie svg {
transform: rotate(720deg);
}
.ori-sr-cover-bas {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 16px;
}
/* posés sur une image, les chips ont besoin d'un fond opaque pour rester
lisibles quelle que soit la jaquette */
.ori-sr-cover-bas .ori-sr-badges {
gap: 6px;
margin-bottom: 10px;
}
.ori-sr-cover-bas .ori-sr-badge {
padding: 5px 10px;
font-size: 11px;
background: rgba(8, 8, 10, 0.72);
border-color: rgba(255, 255, 255, 0.16);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.ori-sr-badge-rang i {
font-style: normal;
opacity: 0.6;
}
.ori-sr-cover-bas .ori-sr-title {
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
line-height: 1.15 !important;
margin: 0 !important;
}
.ori-sr-fiche-pied {
padding: 14px 16px 16px;
}
.ori-sr-signature {
margin-top: 6px;
font-family: var(--ori-font-body);
font-size: 12.5px;
color: var(--ori-text-2);
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
.ori-sr-signature a {
color: var(--ori-text-2);
}
.ori-sr-signature a:hover {
color: var(--ori-link);
}
.ori-sr-cover-haut-deb {
display: flex;
align-items: center;
gap: 8px;
}
/* le « ? » n'ouvre un panneau que sur mobile : ailleurs le bloc est déjà là */
.ori-sr-cover .ori-sr-infos-ouvrir,
.ori-sr-infos-fermer {
display: none;
}
.ori-sr-body {
flex: 1;
min-width: 0;
padding-bottom: 4px;
}
.ori-sr-title {
font-family: var(--ori-font-display) !important;
font-weight: 700 !important;
font-size: 26px !important;
line-height: 1.1;
letter-spacing: -0.5px;
color: #fff !important;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
margin: 0 0 6px;
}
.ori-sr-alt {
font-family: var(--ori-font-body);
font-weight: 500;
font-size: 12.5px;
color: var(--ori-muted);
margin-bottom: 4px;
}
.ori-sr-sub {
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 13px;
color: var(--ori-text-3);
margin-bottom: 14px;
}
.ori-sr-auth {
color: var(--ori-link) !important;
font-weight: 700;
}
.ori-sr-auth:hover {
color: #fff !important;
}
/* badges pills (statut VO, type, note) */
.ori-sr-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ori-sr-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--ori-border-2);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12px;
color: var(--ori-text-2);
}
.ori-sr-badge .ori-flag {
width: 18px;
height: 18px;
border-radius: 50%;
}
.ori-sr-badge i {
font-style: normal;
font-weight: 800;
font-size: 9px;
color: var(--ori-faint);
letter-spacing: 0.05em;
}
.ori-sr-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ori-muted);
}
.ori-sr-badge-statut.st-en-cours {
background: rgba(82, 217, 138, 0.12);
border-color: rgba(82, 217, 138, 0.35);
color: #8fe3b4;
}
.ori-sr-badge-statut.st-en-cours .ori-sr-dot {
background: #52d98a;
box-shadow: 0 0 0 2px rgba(82, 217, 138, 0.25);
}
.ori-sr-badge-statut.st-termine {
background: rgba(var(--ori-accent-vif-rgb), 0.12);
border-color: rgba(var(--ori-accent-vif-rgb), 0.35);
color: var(--ori-accent-clair);
}
.ori-sr-badge-statut.st-termine .ori-sr-dot {
background: var(--ori-accent-vif);
}
.ori-sr-badge-note {
background: rgba(232, 194, 107, 0.1);
border-color: rgba(232, 194, 107, 0.35);
color: var(--ori-star);
}
/* rôle (scénario / dessin) dans la sous-ligne */
.ori-sr-role {
color: var(--ori-faint);
font-weight: 500;
}
/* genres en chips à droite de la cover */
.ori-sr-genres {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
margin-top: 10px;
}
/* chevron de repli, commun aux informations et aux genres */
.ori-sr-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 30px;
flex: none;
padding: 0 6px;
border: 1px solid var(--ori-border-1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12px;
color: var(--ori-text-2);
cursor: pointer;
transition: background 0.22s var(--ori-ease-out), color 0.22s var(--ori-ease-out),
border-color 0.22s var(--ori-ease-out), opacity 0.28s var(--ori-ease-out);
}
.ori-sr-chevron span {
padding-left: 6px;
}
/* le chevron des informations file tout à droite du bloc, sans coller au bord */
.ori-sr-infos-replier {
margin-left: auto;
margin-right: 2px;
}
.ori-sr-ico-lieu {
flex: none;
opacity: 0.85;
}
.ori-sr-chevron:hover {
background: rgba(var(--ori-accent-rgb), 0.16);
border-color: rgba(var(--ori-accent-rgb), 0.4);
color: var(--ori-link);
}
.ori-sr-chevron svg {
transition: transform 0.35s var(--ori-ease-out);
}
.ori-sr-chevron[aria-expanded="true"] svg {
transform: rotate(180deg);
}
/* Au repos on ne montre que trois genres. Le chevron passe sous la liste quand
elle est dépliée : il s'efface d'abord, se replace, puis revient — sans quoi
il donne l'impression de se téléporter. */
.ori-sr-genres {
position: relative;
}
.ori-sr-genre {
transition: opacity 0.3s var(--ori-ease-out), transform 0.35s var(--ori-ease-out);
}
.ori-sr-genres:not(.deploye) .ori-sr-genre:nth-of-type(n + 4) {
display: none;
}
.ori-sr-genres.deploye .ori-sr-genre:nth-of-type(n + 4) {
animation: ori-genre-entre 0.4s var(--ori-ease-out) backwards;
}
.ori-sr-genres.deploye .ori-sr-genre:nth-of-type(4) { animation-delay: 0.02s; }
.ori-sr-genres.deploye .ori-sr-genre:nth-of-type(5) { animation-delay: 0.06s; }
.ori-sr-genres.deploye .ori-sr-genre:nth-of-type(6) { animation-delay: 0.1s; }
.ori-sr-genres.deploye .ori-sr-genre:nth-of-type(n + 7) { animation-delay: 0.14s; }
@keyframes ori-genre-entre {
from { opacity: 0; transform: translateY(-6px) scale(0.94); }
to { opacity: 1; transform: none; }
}
/* le chevron des genres occupe toute une ligne, centré */
.ori-sr-genres-plus {
width: 100%;
margin-top: 4px;
min-height: 30px;
}
.ori-sr-genres-plus.ori-sr-chevron-passe {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.ori-sr-genres.deploye .ori-sr-genre:nth-of-type(n + 4),
.ori-sr-genre,
.ori-sr-chevron {
animation: none;
transition: none;
}
}
/* le corps des informations se replie sous son titre */
.ori-sr-infos.replie dl {
display: none;
}
.ori-sr-genre {
display: inline-block;
padding: 5px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ori-border-1);
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 11.5px;
color: var(--ori-text-3) !important;
transition: background 0.25s var(--ori-ease-out), border-color 0.25s var(--ori-ease-out), color 0.25s var(--ori-ease-out);
}
.ori-sr-genre:hover {
background: var(--ori-accent-soft);
border-color: rgba(var(--ori-accent-rgb), 0.4);
color: var(--ori-link) !important;
}
/* actions : Ajouter à ma liste (bookmark) + Lire */
.ori-sr-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 18px;
}
/* sur PC, l'action de lecture est dans le bandeau : la version de la barre
contextuelle n'apparaît qu'en mobile */
.ori-sr-actions-lire {
display: none;
}
/* capsule sociale (cœur + commentaires), même langage que la pastille
cloche/avatar de la navbar */
.ori-sr-social {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
height: 48px;
box-sizing: border-box;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--ori-border-2);
}
.ori-sr-actions-vr {
width: 1px;
height: 24px;
background: var(--ori-border-2);
border-radius: 1px;
flex: none;
}
/* favoris : cœur (le bookmark Madara sous le capot) */
/* bouton favori : un vrai libellé, pas une icône à deviner. Le texte vient du
CSS parce que le lien est réinjecté par l'AJAX de Madara après chaque clic —
un libellé posé en PHP disparaîtrait au premier ajout. */
.ori-sr-bookmark {
margin-top: 14px;
}
.ori-sr-bookmark a {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
height: 44px;
padding: 0 14px !important;
border-radius: 12px;
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid var(--ori-border-1) !important;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13.5px;
color: var(--ori-text-1) !important;
transition: background 0.25s var(--ori-ease-out), border-color 0.25s var(--ori-ease-out), color 0.25s var(--ori-ease-out);
}
.ori-sr-bookmark a::after {
content: "Ajouter aux favoris";
}
.ori-sr-bookmark a.wp-manga-delete-bookmark::after {
content: "Retirer des favoris";
}
.ori-sr-bookmark a:hover {
background: rgba(var(--ori-heart-rgb), 0.12) !important;
border-color: rgba(var(--ori-heart-rgb), 0.35) !important;
color: var(--ori-heart-clair) !important;
}
/* le détail texte du thème parent ferait doublon */
.ori-sr-bookmark .action_detail {
display: none;
}
.ori-sr-bookmark a,
.ori-sr-bookmark a:hover {
box-shadow: none !important; /* pas d'ombre sur le bouton favoris */
}
/* le cœur pop quand l'œuvre vient d'être ajoutée aux favoris (le bouton est
réinjecté par l'AJAX du plugin → l'animation se joue à son apparition) */
.ori-sr-bookmark .wp-manga-delete-bookmark::before {
animation: ori-heart-pop 0.5s var(--ori-ease-bounce);
}
.ori-sr-bookmark a i {
display: none; /* l'icône bookmark du thème est remplacée par le cœur */
}
.ori-sr-bookmark a::before {
content: "";
width: 15px;
height: 15px;
flex: none;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.ori-sr-bookmark .wp-manga-delete-bookmark {
background: rgba(var(--ori-heart-rgb), 0.14) !important;
border-color: rgba(var(--ori-heart-rgb), 0.38) !important;
color: var(--ori-heart-clair) !important;
}
.ori-sr-bookmark .wp-manga-delete-bookmark::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* nombre de lecteurs ayant mis l'œuvre en favoris, collé au cœur */
.ori-sr-fav-nb {
margin-left: -2px;
padding-right: 6px;
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 13px;
color: var(--ori-heart-clair);
line-height: 1;
}
/* commentaires (compteur) dans la capsule */
.ori-sr-comments {
display: inline-flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 0 12px 0 10px;
border-radius: 999px;
color: var(--ori-text-2) !important;
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 13px;
transition: transform 0.22s var(--ori-ease-out), background 0.3s ease;
}
.ori-sr-comments:hover {
transform: scale(1.08);
background: rgba(255, 255, 255, 0.1);
}
/* Lecture (quick-buttons) : capsule segmentée « Commencer » / « Dernier
chapitre », ou « Reprendre la lecture » seule quand une lecture est en cours */
.ori-sr-actions #init-links {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 0;
padding: 4px;
height: 48px;
box-sizing: border-box;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--ori-border-2);
}
.ori-sr-actions #init-links .c-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: auto;
height: 38px;
line-height: 1;
padding: 0 16px !important;
border-radius: 999px !important;
background: transparent !important;
border: 0 !important;
color: var(--ori-text-2) !important;
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 13px;
white-space: nowrap;
box-shadow: none;
transition: transform 0.22s var(--ori-ease-out), background 0.3s ease;
}
.ori-sr-actions #init-links .c-btn svg {
flex: none;
}
.ori-sr-actions #init-links .c-btn:hover {
transform: scale(1.04);
background: rgba(255, 255, 255, 0.12) !important;
}
.ori-sr-actions #init-links > .c-btn:first-child {
background: #fff !important;
color: #0a0e15 !important;
}
.ori-sr-actions #init-links > .c-btn:first-child:hover {
background: #e8eefb !important;
}
/* grille aside / contenu */
.ori-sr-grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: 40px;
align-items: start;
margin-top: 34px;
}
/* aside : carte note + stats */
.ori-sr-stats {
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: 14px;
padding: 16px;
}
/* carte unique note + votre note (accent doré) */
.ori-sr-stats {
background: rgba(232, 194, 107, 0.04) !important;
border-color: rgba(232, 194, 107, 0.35) !important;
}
.ori-sr-stats-note {
display: flex;
align-items: center;
gap: 14px;
}
.ori-sr-score {
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 36px;
line-height: 1;
color: #fff;
}
.ori-sr-score-stars span {
color: rgba(255, 255, 255, 0.16);
}
.ori-sr-score-stars span.on {
color: var(--ori-star);
}
.ori-sr-score-stars {
display: inline-flex;
gap: 3px;
align-items: center;
font-size: 13px;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.18);
}
.ori-sr-score-stars b {
color: var(--ori-star);
font-weight: 400;
}
.ori-sr-score-sub {
font-family: var(--ori-font-body);
font-style: normal;
font-weight: 600;
font-size: 10px;
color: var(--ori-faint);
}
/* section « Votre note » à l'intérieur de la carte */
/* les étincelles de notation : assez grandes pour qu'on ait envie de cliquer */
.ori-sr-vnote .ratings_stars,
.ori-sr-vnote i.ion-ios-star,
.ori-sr-vnote i.ion-ios-star-outline {
font-size: 26px;
margin: 0 2px;
}
/* Toutes de la même taille : une rangée de notation est une réglette, ses cinq
unités doivent se valoir. La vie est dans le geste, pas dans la taille. */
.ori-sr-vnote .user-rating {
align-items: center;
gap: 5px;
}
.ori-sr-vnote .user-rating .ratings_stars {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
line-height: 1;
}
/* le glyphe est centré dans sa boîte, sans décalage proportionnel */
.ori-sr-vnote .user-rating .ratings_stars::before {
vertical-align: middle;
margin: 0;
}
.ori-sr-score-stars .ori-etincelle {
width: 17px;
height: 17px;
}
.ori-sr-vnote {
display: flex;
justify-content: center;
margin-top: 14px;
padding: 10px 0 0;
border-top: 1px solid var(--ori-border-1);
}
.ori-sr-vnote .ball-pulse,
.ori-sr-vnote .post-status {
display: none;
}
.ori-sr-vnote-lbl {
display: block;
text-align: left;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ori-faint);
margin-bottom: 6px;
}
.ori-sr-vnote .summary_content {
background: transparent !important;
border: 0 !important;
}
/* classement + vues : lignes à plat, sans cartes */
.ori-sr-statlist {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 16px;
padding: 0 6px;
}
.ori-sr-statrow {
display: flex;
align-items: center;
gap: 12px;
}
.ori-sr-statrow b {
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 24px;
color: var(--ori-text-1);
white-space: nowrap;
min-width: 44px;
}
.ori-sr-statrow span {
display: block;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12.5px;
color: var(--ori-text-2);
}
.ori-sr-statrow i {
font-style: normal;
font-family: var(--ori-font-body);
font-weight: 500;
font-size: 10.5px;
color: var(--ori-faint);
}
/* top 10 : le rang devient doré et impactant */
.ori-sr-statrow.top10 b {
font-size: 30px;
color: var(--ori-star);
text-shadow: 0 0 18px rgba(232, 194, 107, 0.4);
}
/* (l'ancien panneau .ori-sr-infos a fusionné dans la carte .ori-sr-stats) */
.ori-sr-label {
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--ori-faint);
margin-bottom: 6px;
}
/* le loader ajax du thème n'a rien à faire dans la carte note */
.ori-sr-vnote .loader-inner {
display: none !important;
}
/* « Votre note » : uniquement les étoiles interactives, grandes et centrées
(le total est juste au-dessus dans la même carte) */
.ori-sr-vnote .post-content_item:not(.post-rating) {
display: none !important;
}
.ori-sr-vnote .post-rating .post-total-rating {
display: none !important;
}
.ori-sr-vnote .post-rating {
padding: 2px 0;
}
.ori-sr-vnote .post-rating .user-rating {
display: flex;
justify-content: center;
gap: 5px;
}
.ori-sr-vnote .post-rating .user-rating i {
font-size: 26px;
color: var(--ori-star) !important;
cursor: pointer;
transition: transform 0.18s var(--ori-ease-out);
}
.ori-sr-vnote .post-rating .user-rating i:hover {
transform: scale(1.3) rotate(8deg);
}
.ori-sr-vnote .post-rating .user-rating span {
display: none; /* le libellé « Your Rating » (le titre de la section suffit) */
}
/* état « déjà dans ma liste » : libellé à côté de la coche, texte du thème masqué */
.ori-sr-bookmark .wp-manga-delete-bookmark::after {
content: "Dans les favoris";
}
.ori-sr-bookmark .action_detail {
display: none;
}
.ori-sr-bookmark .wp-manga-action-button::after {
content: "Ajouter aux favoris";
}
/* la zone user-actions du plugin (commentaires + bookmark) fait doublon
dans la carte note */
.ori-sr-vnote .manga-action {
display: none !important;
}
/* le listing de chapitres du plugin a son propre en-tête (anglais) : masqué,
notre titre « Chapitres » le remplace */
.ori-sr-chapitres .c-blog__heading {
display: none !important;
}
/* panneau « Du même genre » : 6 mini-cartes */
.ori-sr-meme {
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: 14px;
padding: 16px;
margin-top: 16px;
}
/* « 1fr » vaut « minmax(auto, 1fr) » : la colonne ne descend jamais sous la
largeur minimale de son contenu. Or le titre est en nowrap, donc sa largeur
minimale, c'est le titre entier — un long titre elargissait la colonne, la
grille debordait de sa carte et la troisieme couverture passait par-dessus
la liste des chapitres. « minmax(0, 1fr) » autorise la colonne a se serrer,
et l'ellipse fait enfin son travail. */
.ori-sr-meme-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px 10px;
margin-top: 8px;
}
.ori-sr-meme-card {
display: block;
min-width: 0;
transition: transform 0.4s var(--ori-ease-out);
}
.ori-sr-meme-card:hover {
transform: translateY(-3px);
}
.ori-sr-meme-cover {
display: block;
aspect-ratio: 3 / 4.2;
border-radius: 9px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ori-border-1);
}
.ori-sr-meme-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s var(--ori-ease-out);
}
.ori-sr-meme-card:hover .ori-sr-meme-cover img {
transform: scale(1.06);
}
.ori-sr-meme-titre {
display: block;
margin-top: 6px;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 11px;
line-height: 1.3;
color: var(--ori-text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ori-sr-meme-card:hover .ori-sr-meme-titre {
color: var(--ori-link);
}
/* contenu principal — synopsis en carte repliable (même bloc que Chapitres) */
.ori-sr-syn {
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: 14px;
padding: 16px;
margin-bottom: 26px;
}
.ori-sr-syn-titre {
font-family: var(--ori-font-display) !important;
font-weight: 700;
font-size: 16px;
color: var(--ori-text-1) !important;
margin: 0 0 10px;
}
.ori-sr-syn-texte {
position: relative;
max-height: 174px;
overflow: hidden;
color: var(--ori-text-2);
font-size: 14px;
line-height: 1.75;
max-width: 72ch;
}
.ori-sr-syn.ouvert .ori-sr-syn-texte {
max-height: none;
}
/* fondu vers le fond de la carte quand le texte est replié */
.ori-sr-syn.long:not(.ouvert) .ori-sr-syn-texte::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 56px;
background: linear-gradient(180deg, rgba(15, 16, 20, 0), var(--ori-bg-card));
pointer-events: none;
}
.ori-sr-syn-plus {
display: block;
margin: 12px auto 0; /* centré sous le synopsis */
padding: 8px 16px;
border: 1px solid var(--ori-border-2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
color: var(--ori-text-2);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12px;
cursor: pointer;
transition: background 0.25s var(--ori-ease-out), color 0.25s var(--ori-ease-out);
}
.ori-sr-syn-plus:hover {
text-decoration: underline;
}
/* vues d'un chapitre */
.ori-chl-vues {
flex: none;
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 11px;
color: var(--ori-faint);
}
.ori-sr-bookmark a::before {
width: 17px;
height: 17px;
}
.ori-sr-syn .summary__content {
color: var(--ori-text-2);
font-size: 14px;
line-height: 1.75;
max-width: 72ch;
}
/* ---- liste des chapitres façon OriList ---- */
.ori-chl {
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: 14px;
padding: 16px;
}
.ori-chl-tete {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.ori-chl-titre {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 16px;
color: var(--ori-text-1);
}
.ori-chl-count {
padding: 2px 8px;
border-radius: 7px;
background: rgba(var(--ori-accent-rgb), 0.16);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 11px;
color: var(--ori-accent-clair);
}
.ori-chl-dernier {
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12px;
color: var(--ori-muted);
}
.ori-chl-dernier b {
color: var(--ori-link);
font-weight: 700;
}
.ori-chl-progress {
margin: 12px 0 4px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.1);
margin: 10px 0 2px;
overflow: hidden;
}
.ori-chl-progress i {
display: block;
height: 100%;
border-radius: 2px;
background: var(--ori-accent);
transition: width 0.4s var(--ori-ease-out);
}
.ori-chl-outils {
display: flex;
align-items: center;
gap: 10px;
margin: 12px 0 8px;
}
.ori-chl-search {
position: relative;
flex: 1;
min-width: 0;
}
.ori-chl-search svg {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: var(--ori-faint);
pointer-events: none;
}
.ori-chl-search input {
width: 100%;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid var(--ori-border-1) !important;
border-radius: 10px !important;
padding: 8px 12px 8px 34px;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12.5px;
color: var(--ori-text-1) !important;
}
.ori-chl-tri {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 13px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ori-border-2);
color: var(--ori-text-3);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12px;
cursor: pointer;
transition: background 0.25s var(--ori-ease-out), color 0.25s var(--ori-ease-out);
}
.ori-chl-tri:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.ori-chl-liste {
display: flex;
flex-direction: column;
}
.ori-chl-row {
display: flex;
align-items: center;
gap: 14px;
padding: 15px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ori-chl-row:last-child {
border-bottom: 0;
}
/* rond à cocher : gris vide, bleu ✓ quand lu */
.ori-chl-check {
flex: none;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.22);
background: transparent;
color: transparent;
padding: 0;
cursor: pointer;
transition: background 0.2s var(--ori-ease-out), border-color 0.2s var(--ori-ease-out), transform 0.22s var(--ori-ease-out);
}
.ori-chl-check:hover {
border-color: rgba(var(--ori-accent-rgb), 0.6);
transform: scale(1.1);
}
.ori-chl-row.lu .ori-chl-check {
background: var(--ori-accent);
border-color: var(--ori-accent);
color: #fff;
}
/* tuile numéro « Ch. N » */
.ori-chl-num {
min-width: 46px;
height: 40px;
flex: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 52px;
padding: 6px 4px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ori-border-1);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 9.5px;
line-height: 1.2;
color: var(--ori-faint) !important;
text-align: center;
transition: background 0.25s var(--ori-ease-out), border-color 0.25s var(--ori-ease-out);
}
.ori-chl-num b {
font-size: 13px;
color: var(--ori-text-2);
}
.ori-chl-row.lu .ori-chl-num {
background: rgba(var(--ori-accent-rgb), 0.12);
border-color: rgba(var(--ori-accent-rgb), 0.35);
}
.ori-chl-row.lu .ori-chl-num b {
color: var(--ori-accent-clair);
}
.ori-chl-row:hover .ori-chl-num {
border-color: rgba(var(--ori-accent-rgb), 0.45);
}
.ori-chl-nom {
min-width: 0;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 14.5px;
color: var(--ori-text-1) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ori-chl-nom:hover {
color: var(--ori-link) !important;
}
.ori-chl-row.lu .ori-chl-nom {
color: var(--ori-muted) !important;
}
/* ---- ligne de chapitre : corps cliquable, état, méta, action ---- */
.ori-chl-corps {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 9px;
}
.ori-chl-tag {
flex: none;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.02em;
}
.ori-chl-tag-courant {
background: rgba(var(--ori-accent-rgb), 0.16);
color: var(--ori-accent-clair);
}
.ori-chl-tag-neuf {
background: rgba(54, 211, 153, 0.14);
color: #6ee7b7;
}
.ori-chl-tag-lu {
padding: 3px 7px;
background: transparent;
color: var(--ori-faint);
}
.ori-chl-meta {
flex: none;
display: flex;
align-items: center;
gap: 12px;
}
/* le bouton n'apparaît que là où il sert : le chapitre en cours et le suivant */
.ori-chl-lire {
flex: none;
padding: 6px 14px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid var(--ori-border-1);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 11.5px;
color: var(--ori-text-2) !important;
transition: background 0.2s var(--ori-ease-out), border-color 0.2s var(--ori-ease-out), color 0.2s var(--ori-ease-out);
}
.ori-chl-lire:hover {
background: rgba(var(--ori-accent-rgb), 0.16);
border-color: rgba(var(--ori-accent-rgb), 0.45);
color: #fff !important;
}
.ori-chl-lire.fort {
background: var(--ori-accent);
border-color: var(--ori-accent);
color: #fff !important;
}
.ori-chl-lire.fort:hover {
filter: brightness(1.1);
}
.ori-chl-row.courant {
background: linear-gradient(90deg, rgba(var(--ori-accent-rgb), 0.09), transparent 70%);
border-radius: 10px;
}
.ori-chl-row.suivant .ori-chl-num {
border-color: rgba(var(--ori-accent-rgb), 0.4);
}
/* repli des longues séries et filtre de recherche */
.ori-chl-row.en-trop,
.ori-chl-row.ori-chl-hors {
display: none;
}
.ori-chl-row.ori-chl-force {
display: flex;
}
.ori-chl-plus {
display: flex;
justify-content: center;
padding-top: 14px;
}
.ori-chl-plus-btn {
padding: 9px 22px;
border: 1px solid var(--ori-border-1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12px;
color: var(--ori-text-2);
cursor: pointer;
transition: background 0.2s var(--ori-ease-out), border-color 0.2s var(--ori-ease-out), color 0.2s var(--ori-ease-out);
}
.ori-chl-plus-btn:hover {
background: rgba(var(--ori-accent-rgb), 0.14);
border-color: rgba(var(--ori-accent-rgb), 0.45);
color: var(--ori-accent);
}
.ori-chl-outils-fin {
display: flex;
align-items: center;
gap: 12px;
}
.ori-chl-new {
flex: none;
display: inline-flex;
}
.ori-chl-date {
flex: none;
font-family: var(--ori-font-body);
font-weight: 500;
font-size: 11px;
color: var(--ori-faint);
}
.ori-chl-vide {
padding: 20px;
text-align: center;
font-family: var(--ori-font-body);
color: var(--ori-faint);
}
/* ---- barre flottante : le cadre de reprise en version courte ----
Elle vit au-dessus du menu du bas et n'apparaît que lorsque le grand cadre
a quitté l'écran ; c'est le JS qui lève l'attribut hidden. */
.ori-sr-flot {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(86px + env(safe-area-inset-bottom, 0px));
z-index: 88;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 16px;
border: 1px solid rgba(var(--ori-accent-rgb), 0.3);
background:
linear-gradient(120deg, rgba(var(--ori-accent-rgb), 0.2), rgba(var(--ori-accent-rgb), 0.05) 60%),
rgba(14, 15, 20, 0.94);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
transform: translateY(140%);
opacity: 0;
transition: transform 0.42s var(--ori-ease-out), opacity 0.28s var(--ori-ease-out);
}
.ori-sr-flot.montre {
transform: none;
opacity: 1;
}
.ori-sr-flot-anneau {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 42px;
height: 42px;
}
.ori-sr-flot-anneau::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(var(--ori-accent) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, 0.12) 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
.ori-sr-flot-anneau b {
position: relative;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 12px;
color: var(--ori-text-1);
}
.ori-sr-flot-txt {
flex: 1;
min-width: 0;
}
.ori-sr-flot-txt b {
display: block;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13.5px;
color: var(--ori-text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ori-sr-flot-txt span {
display: block;
font-family: var(--ori-font-body);
font-size: 11px;
color: var(--ori-text-3, #8b96a8);
}
.ori-sr-flot-fav {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid var(--ori-border-1);
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
color: var(--ori-text-2);
cursor: pointer;
transition: color 0.2s var(--ori-ease-out), background 0.2s var(--ori-ease-out), border-color 0.2s var(--ori-ease-out);
}
.ori-sr-flot-fav.on {
background: rgba(var(--ori-heart-rgb), 0.16);
border-color: rgba(var(--ori-heart-rgb), 0.42);
color: var(--ori-heart-clair);
}
.ori-sr-flot-fav.on svg {
fill: currentColor;
}
.ori-sr-flot-btn {
flex: none;
display: inline-flex;
align-items: center;
gap: 7px;
height: 38px;
padding: 0 16px;
border-radius: 12px;
background: var(--ori-accent);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13px;
color: #fff !important;
}
.ori-sr-flot-btn:active {
filter: brightness(0.92);
}
/* sur grand écran le cadre reste sous les yeux : pas besoin d'une doublure */
@media (min-width: 901px) {
.ori-sr-flot {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ori-sr-flot {
transition: none;
}
}
/* ==========================================================================
FICHE — BANDEAU « TU EN ES LÀ » ET ONGLETS
========================================================================== */
/* Le bandeau ouvre la colonne : où on s'est arrêté, et quoi faire ensuite.
C'est la première chose que le lecteur doit voir. */
.ori-sr-reprise {
display: flex;
align-items: center;
gap: 18px;
padding: 18px 20px;
margin-bottom: 16px;
border-radius: 16px;
border: 1px solid rgba(var(--ori-accent-rgb), 0.22);
background:
linear-gradient(120deg, rgba(var(--ori-accent-rgb), 0.14), rgba(var(--ori-accent-rgb), 0.03) 55%),
var(--ori-bg-card);
}
.ori-sr-reprise.etat-invite,
.ori-sr-reprise.etat-jamais {
border-color: var(--ori-border-1);
background: var(--ori-bg-card);
}
/* anneau de progression : un vrai anneau, découpé au masque */
.ori-sr-anneau {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 76px;
height: 76px;
}
/* l'anneau vit dans le pseudo-élément : un masque sur le conteneur
découperait aussi le pourcentage qu'il entoure */
.ori-sr-anneau::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(var(--ori-accent) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, 0.09) 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
}
.ori-sr-anneau b {
position: relative;
display: grid;
place-content: center;
grid-auto-flow: column;
align-items: baseline;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 20px;
color: var(--ori-text-1);
}
.ori-sr-anneau b i {
font-style: normal;
font-size: 11px;
color: var(--ori-faint);
}
/* déconnecté ou jamais lu : l'anneau vide ne dit rien, on le retire */
.ori-sr-reprise.etat-invite .ori-sr-anneau,
.ori-sr-reprise.etat-jamais .ori-sr-anneau {
display: none;
}
.ori-sr-reprise-txt {
flex: 1;
min-width: 0;
}
.ori-sr-reprise-sur {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ori-faint);
}
.ori-sr-reprise-titre {
margin: 4px 0 0;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 21px;
line-height: 1.2;
color: var(--ori-text-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ori-sr-reprise-sous {
margin: 5px 0 0;
font-family: var(--ori-font-body);
font-size: 12.5px;
color: var(--ori-text-3, #8b96a8);
}
.ori-sr-exp {
color: var(--ori-gold, #e8c26b);
font-weight: 700;
}
.ori-sr-reprise-actions {
flex: none;
display: flex;
align-items: center;
gap: 10px;
}
.ori-sr-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 18px;
border-radius: 11px;
border: 1px solid var(--ori-border-1);
background: rgba(255, 255, 255, 0.06);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13px;
color: var(--ori-text-1) !important;
white-space: nowrap;
transition: transform 0.3s var(--ori-ease-out), background 0.25s var(--ori-ease-out), border-color 0.25s var(--ori-ease-out);
}
.ori-sr-btn svg {
flex: none;
transition: transform 0.35s var(--ori-ease-out);
}
.ori-sr-btn:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.18);
}
/* le pictogramme part dans le sens de l'action */
.ori-sr-btn:hover svg {
transform: translateX(3px);
}
.ori-sr-btn-fort:hover svg {
transform: translateX(0) scale(1.12);
}
.ori-sr-btn-fort {
background: var(--ori-accent);
border-color: var(--ori-accent);
box-shadow: 0 8px 22px -12px var(--ori-accent);
}
.ori-sr-btn-fort:hover {
background: var(--ori-accent);
border-color: var(--ori-accent);
filter: brightness(1.08);
}
.ori-sr-carte-nb {
padding: 2px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
font-family: var(--ori-font-body);
font-size: 11.5px;
font-weight: 700;
color: var(--ori-faint);
}
/* ---- commentaires : un seul cadre, pas une carte dans une carte ---- */
.ori-sr-discussion-tete,
.ori-sr-coms-zone .comment-selection-wrapper {
display: none !important;
}
/* l'en-tête « MANGA DISCUSSION » du thème fait doublon : notre bloc porte
déjà son titre. Le filtre PHP prévu par WP Manga n'étant pas appliqué par
cette version, on l'écarte ici. */
.ori-sr-coms-zone .c-blog__heading {
display: none;
}
.ori-sr-coms-zone .manga-discussion.wrapper {
margin: 0;
padding: 0;
background: none;
border: 0;
}
.ori-sr-coms-zone .ori-coms {
margin-top: 0;
}
/* chaque commentaire sur son propre fond arrondi */
.ori-coms-liste .ori-cm {
padding: 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.035);
}
.ori-coms-liste .ori-cm + .ori-cm {
margin-top: 10px;
}
.ori-coms-liste .ori-cm-reponse {
background: rgba(255, 255, 255, 0.055);
}
/* ---- colonne de droite : une carte par bloc ---- */
.ori-sr-main {
display: flex;
flex-direction: column;
gap: 16px;
}
.ori-sr-carte {
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: 16px;
padding: 18px 20px;
}
.ori-sr-carte-titre {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 14px;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 16px;
color: var(--ori-text-1);
}
/* sur grand écran tout est visible d'un coup : les onglets ne servent plus */
@media (min-width: 901px) {
.ori-sr-main > .ori-sr-onglets {
display: none;
}
.ori-sr-main > .ori-sr-vue[hidden] {
display: block;
}
.ori-sr-main > .ori-sr-chiffres.ori-sr-vue[hidden] {
display: grid;
}
.ori-sr-main > .ori-sr-chiffres {
order: 1;
}
.ori-sr-main > .ori-sr-stats {
order: 2;
}
/* sans la note des lecteurs, la carte n'a plus besoin de sa hauteur */
.ori-sr-main > .ori-sr-stats {
padding: 14px 18px;
}
.ori-sr-main > [data-vue="synopsis"].ori-sr-carte {
order: 3;
}
.ori-sr-main > .ori-sr-reprise {
order: 4;
margin-bottom: 0;
}
.ori-sr-main > [data-vue="chapitres"] {
order: 5;
}
.ori-sr-main > [data-vue="commentaires"] {
order: 6;
}
.ori-sr-main > .post-edit-link,
.ori-sr-main > .related-manga {
order: 7;
}
/* les chiffres s'alignent sur quatre colonnes en haut de la page */
.ori-sr-main > .ori-sr-chiffres {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.ori-sr-onglets {
display: flex;
gap: 4px;
padding: 6px;
margin-bottom: 10px;
overflow-x: auto;
scrollbar-width: none;
}
.ori-sr-onglets::-webkit-scrollbar {
display: none;
}
.ori-sr-onglets button {
flex: none;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
border: 0;
border-radius: 999px;
background: transparent;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13px;
color: var(--ori-text-3, #8b96a8);
cursor: pointer;
transition: background 0.25s var(--ori-ease-out), color 0.25s var(--ori-ease-out);
}
.ori-sr-onglets button:hover {
color: var(--ori-text-1);
background: rgba(255, 255, 255, 0.05);
}
.ori-sr-onglets button.on {
background: #fff;
color: #0b0c10;
}
.ori-sr-onglets button span {
padding: 1px 7px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.09);
font-size: 10.5px;
}
.ori-sr-onglets button.on span {
background: rgba(11, 12, 16, 0.12);
}
/* la liste des chapitres est déjà dans une carte */
.ori-sr-vue .ori-chl {
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
}
/* synopsis replié : quatre lignes, puis « Voir plus » */
/* le synopsis prend toute la largeur de sa carte : la limite en « ch » du
thème lui laissait 150 px de marge morte */
.ori-sr-syn-texte {
position: relative;
overflow: hidden;
max-width: none !important;
font-family: var(--ori-font-body);
font-size: 14px;
line-height: 1.65;
color: var(--ori-text-2);
/* la hauteur est pilotée par le JS pour que le dépliage soit animé */
transition: max-height 0.45s var(--ori-ease-out);
}
.ori-sr-syn-texte > *:last-child {
margin-bottom: 0;
}
/* le thème parent enveloppe le contenu dans un .p-4 : on annule son padding */
.ori-sr-syn-texte .p-4,
.ori-sr-syn-texte .summary__content {
padding: 0 !important;
max-width: none;
}
.ori-sr-syn-texte.replie {
-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
/* sobre au repos, bleu quand on le touche — identique sur les deux formats */
[data-vue="synopsis"].ori-sr-carte {
text-align: center;
}
.ori-sr-syn-texte {
text-align: left;
}
.ori-sr-syn-plus {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 14px;
padding: 9px 18px;
border: 1px solid var(--ori-border-1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12.5px;
color: var(--ori-text-2);
cursor: pointer;
transition: background 0.25s var(--ori-ease-out), border-color 0.25s var(--ori-ease-out),
color 0.25s var(--ori-ease-out), transform 0.3s var(--ori-ease-out);
}
.ori-sr-syn-plus:hover {
background: var(--ori-accent);
border-color: var(--ori-accent);
color: #fff;
transform: translateY(-1px);
text-decoration: none;
}
.ori-sr-syn-plus svg {
transition: transform 0.4s var(--ori-ease-out);
}
.ori-sr-syn-plus.ouvert svg {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.ori-sr-syn-texte,
.ori-sr-syn-plus svg {
transition: none;
}
}
/* ---- aperçu de la discussion, sous les onglets ---- */
.ori-sr-avis {
margin-top: 16px;
padding: 18px 20px;
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: 16px;
}
.ori-sr-avis-tete {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.ori-sr-avis-tete h2 {
margin: 0;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 16px;
color: var(--ori-text-1);
}
.ori-sr-avis-tout {
border: 0;
background: none;
padding: 0;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12px;
color: var(--ori-link);
cursor: pointer;
}
.ori-sr-avis-tout:hover {
text-decoration: underline;
}
.ori-sr-avis-un {
display: flex;
gap: 12px;
padding: 12px 0;
border-top: 1px solid var(--ori-border-1);
}
.ori-sr-avis-un img {
flex: none;
width: 36px;
height: 36px;
border-radius: 50%;
}
.ori-sr-avis-qui {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--ori-font-body);
font-size: 12.5px;
}
.ori-sr-avis-qui b {
color: var(--ori-text-1);
}
.ori-sr-avis-niv {
padding: 1px 7px;
border-radius: 999px;
background: rgba(var(--ori-accent-rgb), 0.16);
font-size: 10px;
font-weight: 700;
color: var(--ori-accent-clair);
}
.ori-sr-avis-qui i {
font-style: normal;
font-size: 11px;
color: var(--ori-faint);
}
.ori-sr-avis-un p {
margin: 5px 0 0;
font-family: var(--ori-font-body);
font-size: 13px;
line-height: 1.5;
color: var(--ori-text-2);
}
/* ---- informations : sa propre carte, sous la jaquette ---- */
.ori-sr-infos {
margin-top: 16px;
padding: 18px 20px;
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: 16px;
}
.ori-sr-infos-titre {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 14px;
color: var(--ori-text-1);
}
.ori-sr-infos dl {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2px 16px;
margin: 0;
font-family: var(--ori-font-body);
font-size: 13px;
}
.ori-sr-infos dt {
font-weight: 500;
color: var(--ori-faint);
}
.ori-sr-infos dd {
margin: 0 0 10px;
color: var(--ori-text-2);
}
.ori-sr-infos dd:last-child {
margin-bottom: 0;
}
/* ---- chiffres clés de la colonne latérale ---- */
.ori-sr-chiffres {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
/* Une teinte par chiffre, prises dans la même famille froide-vers-chaude pour
que les quatre cartes se lisent comme un jeu : bleu, cyan, rouge, violet.
Le dégradé part du bas-droite, à l'inverse du cadre de reprise. */
.ori-sr-chiffre {
--teinte: var(--ori-accent-rgb);
--clair: var(--ori-accent-clair);
position: relative;
padding: 14px 14px 14px 56px;
border-radius: 14px;
background:
linear-gradient(300deg, rgba(var(--teinte), 0.16), rgba(var(--teinte), 0.02) 62%),
var(--ori-bg-card);
border: 1px solid rgba(var(--teinte), 0.22);
text-align: left;
transition: border-color 0.3s var(--ori-ease-out);
}
.ori-sr-chiffre:nth-child(2) {
--teinte: 47, 199, 212;
--clair: #7ee6ee;
}
.ori-sr-chiffre:nth-child(3) {
--teinte: 255, 107, 129;
--clair: #ff9aab;
}
.ori-sr-chiffre:nth-child(4) {
--teinte: 155, 107, 255;
--clair: #c3a5ff;
}
/* au survol, la teinte se déroule sur toute la carte, de gauche à droite */
.ori-sr-chiffre::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(var(--teinte), 0.22);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.5s var(--ori-ease-out);
pointer-events: none;
}
.ori-sr-chiffre:hover {
border-color: rgba(var(--teinte), 0.55);
}
.ori-sr-chiffre:hover::after {
transform: scaleX(1);
}
.ori-sr-chiffre > * {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.ori-sr-chiffre,
.ori-sr-chiffre::after {
transition: none;
}
}
.ori-sr-chiffre-ico {
position: absolute;
top: 50%;
left: 13px;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(var(--teinte), 0.18);
color: var(--clair);
}
.ori-sr-chiffre-ico svg {
width: 17px;
height: 17px;
}
.ori-sr-chiffre b {
display: block;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 20px;
line-height: 1.1;
color: var(--ori-text-1);
}
.ori-sr-chiffre.top10 b {
color: var(--ori-gold, #e8c26b);
}
.ori-sr-chiffre.top10 {
--teinte: 232, 194, 107;
--clair: #e8c26b;
}
.ori-sr-chiffre-nom {
display: block;
margin-top: 2px;
font-family: var(--ori-font-body);
font-size: 11px;
color: var(--ori-faint);
}
/* responsive */
@media (max-width: 900px) {
.ori-sr-reprise {
flex-wrap: wrap;
gap: 14px;
padding: 16px;
}
.ori-sr-anneau {
width: 58px;
height: 58px;
}
.ori-sr-anneau b {
font-size: 16px;
}
.ori-sr-reprise-titre {
font-size: 17px;
}
.ori-sr-reprise-actions {
flex: 1 0 100%;
}
.ori-sr-reprise-actions .ori-sr-btn {
flex: 1;
justify-content: center;
}
.ori-sr-carte {
padding: 16px;
border-radius: 14px;
}
/* on arrive par « où j'en suis », puis on choisit son onglet */
.ori-sr-main > .ori-sr-reprise {
order: 1;
}
.ori-sr-main > .ori-sr-onglets {
order: 2;
margin-bottom: 0;
}
/* plus d'onglets : la colonne se lit d'un trait, dans l'ordre voulu */
.ori-sr-main {
display: contents;
}
.ori-sr-aside > .ori-sr-fiche {
order: 1;
}
.ori-sr-main > [data-vue="synopsis"].ori-sr-carte {
order: 2;
}
.ori-sr-main > .ori-sr-reprise {
order: 3;
}
.ori-sr-main > [data-vue="chapitres"] {
order: 4;
}
.ori-sr-aside > .ori-sr-meme {
order: 5;
}
.ori-sr-main > [data-vue="commentaires"] {
order: 6;
}
.ori-sr-main > .post-edit-link,
.ori-sr-main > .related-manga {
order: 7;
}
/* Indice de defilement : rien ne dit qu'une rangee glisse tant qu'on n'a
pas essaye. Une pastille au bord droit le montre, et scrolle au doigt.
Elle s'efface des qu'on atteint la fin (classe posee en JS). */
.ori-defile-wrap {
position: relative;
}
.ori-defile-fleche {
position: absolute;
top: 50%;
right: -2px;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-top: -13px;
padding: 0;
border: 1px solid var(--ori-border-2);
border-radius: 50%;
background: rgba(14, 14, 18, 0.92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--ori-text-2);
box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.9);
cursor: pointer;
transition: opacity 0.25s var(--ori-ease-doux), transform 0.25s var(--ori-ease-doux);
}
.ori-defile-fleche:active {
transform: scale(0.9);
}
.ori-defile-wrap.est-au-bout .ori-defile-fleche {
opacity: 0;
pointer-events: none;
}
/* chiffres : deux cartes visibles, le reste au doigt */
.ori-sr-chiffres {
display: grid;
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: calc(50% - 5px);
gap: 10px;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x proximity;
padding-bottom: 2px;
}
.ori-sr-chiffres::-webkit-scrollbar {
display: none;
}
.ori-sr-chiffre {
scroll-snap-align: start;
}
/* informations : un panneau qui monte du bas, ouvert par le « ? » */
.ori-sr-cover .ori-sr-infos-ouvrir {
display: inline-flex;
}
.ori-sr-infos {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 96;
max-height: 74vh;
overflow-y: auto;
margin: 0;
border-radius: 20px 20px 0 0;
border-bottom: 0;
padding: 18px 18px calc(24px + env(safe-area-inset-bottom, 0px));
transform: translateY(101%);
transition: transform 0.42s var(--ori-ease-out);
}
.ori-sr-infos.ouvert {
transform: none;
}
.ori-sr-infos-titre {
display: flex;
align-items: center;
justify-content: space-between;
}
.ori-sr-infos-fermer {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.07);
color: var(--ori-text-2);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.ori-sr-infos-voile {
position: fixed;
inset: 0;
z-index: 95;
background: rgba(4, 4, 6, 0.62);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
/* Genres : une ligne que l'on fait défiler. Les bords se fondent au lieu de
trancher une chip en deux — et le fondu n'apparaît que du côté où il
reste quelque chose à voir. */
.ori-sr-genres {
--fondu: 26px;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
gap: 9px;
margin: 14px -16px 0;
padding: 0 16px;
}
.ori-sr-genres.fade-d {
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fondu)), transparent 100%);
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fondu)), transparent 100%);
}
.ori-sr-genres.fade-g {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fondu), #000 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--fondu), #000 100%);
}
.ori-sr-genres.fade-g.fade-d {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%);
}
.ori-sr-genre {
padding: 8px 16px;
font-size: 13px;
}
/* les genres et les chiffres ne se touchent plus */
.ori-sr-fiche-pied .ori-sr-chiffres {
margin-top: 20px;
}
/* toutes les informations sont visibles : pas de repli dans le panneau */
.ori-sr-infos-replier {
display: none;
}
.ori-sr-infos.replie dl {
display: grid;
}
/* tous les genres sont là : sur mobile on fait défiler, pas déplier */
.ori-sr-genres:not(.deploye) .ori-sr-genre:nth-of-type(n + 4) {
display: inline-block;
}
.ori-sr-genres-plus {
display: none;
}
.ori-sr-genres::-webkit-scrollbar {
display: none;
}
.ori-sr-genre {
flex: none;
}
.ori-sr-infos dl {
grid-template-columns: 1fr;
gap: 2px;
}
.ori-sr-infos dd {
margin-bottom: 10px;
}
/* la recherche prend sa ligne, le reste suit dessous */
.ori-chl-outils {
flex-wrap: wrap;
gap: 10px;
}
.ori-chl-search {
flex: 1 0 100%;
}
.ori-chl-outils-fin {
flex: 1;
justify-content: space-between;
}
/* la ligne de chapitre se resserre : plus de compteur de vues */
.ori-chl-vues {
display: none;
}
.ori-chl-row {
gap: 9px;
}
.ori-chl-lire {
padding: 6px 11px;
}
/* le fil d'Ariane reste : il dit d'où l'on vient. Il se resserre juste. */
.single-wp-manga .breadcrumb {
font-size: 11.5px;
margin-bottom: 10px;
}
.ori-sr-wrap {
padding-top: 10px;
}
/* la jaquette prend toute la largeur et devient le héros de la page :
elle sort du cadre de la fiche et déborde des marges du conteneur */
.ori-sr-fiche {
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
/* la jaquette respecte les marges de la page, s'arrondit en haut, et
descend sous le contenu qui suit : elle reste un fond, pas un bloc */
.ori-sr-cover {
width: 100%;
margin: 0;
aspect-ratio: auto;
height: 420px;
border-radius: 16px 16px 0 0;
overflow: hidden;
}
.ori-sr-cover img {
object-position: center 18%;
}
/* fondu plus long : le titre et les chips se lisent sans effort */
.ori-sr-cover-voile {
background: linear-gradient(180deg, rgba(var(--ori-bg-page-rgb), 0.45) 0%, rgba(var(--ori-bg-page-rgb), 0.05) 22%, rgba(var(--ori-bg-page-rgb), 0.5) 52%, rgba(var(--ori-bg-page-rgb), 0.88) 76%, rgb(var(--ori-bg-page-rgb)) 98%);
}
.ori-sr-cover-haut {
top: 14px;
left: 14px;
right: 14px;
}
.ori-sr-retour {
display: inline-flex;
}
.ori-sr-cover-bas {
padding: 18px 16px 20px;
}
.ori-sr-title {
font-size: 27px !important;
}
/* le contenu remonte sur le bas de la jaquette : l'allonger ne creuse
pas d'espace vide au-dessus des genres */
.ori-sr-fiche-pied {
position: relative;
margin-top: -10px;
padding: 0 0 2px;
}
.ori-sr-bookmark a {
box-sizing: border-box;
max-width: 100%;
background: var(--ori-bg-card) !important;
}
.ori-sr-bookmark a.wp-manga-delete-bookmark {
background: var(--ori-bg-card) !important;
}
.ori-sr-genre {
background: var(--ori-bg-card);
}
/* inutile sous une jaquette pleine largeur : elle ne laissait qu'une
bande vide au-dessus du héros */
.ori-sr-hero {
display: none;
}
/* genres : une seule ligne défilante, pleine largeur */
.ori-sr-genres {
grid-column: 1 / -1;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
width: 100%;
margin-top: 10px;
padding-bottom: 2px;
}
.ori-sr-genres::-webkit-scrollbar {
display: none;
}
.ori-sr-genre {
flex: none;
}
.ori-sr-social {
flex: none;
}
.ori-sr-bookmark {
flex: none;
}
/* ordre mobile : reprendre + chapitres d'abord — c'est ce pour quoi on
vient — puis les chiffres, la note et les œuvres du même genre
(l'aside éclate ses enfants dans la colonne via display:contents) */
.ori-sr-grid {
display: flex;
flex-direction: column;
/* sans cela, le « align-items: start » du bureau rétrécit chaque carte
à la largeur de son contenu */
align-items: stretch;
gap: 18px;
margin-top: 16px;
}
.ori-sr-aside {
display: contents;
}
.ori-sr-main {
order: 1;
margin-top: 0;
}
.ori-sr-chiffres {
order: 2;
}
.ori-sr-stats {
order: 3;
}
.ori-sr-meme {
order: 4;
}
/* toutes les cartes prennent la pleine largeur, alignées sur le même
padding que le reste de la page */
.ori-sr-main,
.ori-sr-reprise,
.ori-sr-boite,
.ori-sr-chiffres,
.ori-sr-stats,
.ori-sr-meme,
.ori-sr-syn,
.ori-chl {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}
.ori-sr-stats {
padding: 14px;
}
.ori-sr-statlist {
flex-direction: row;
justify-content: space-around;
margin-top: 14px;
padding: 0;
}
.ori-sr-wrap {
padding-left: 16px;
padding-right: 16px;
/* la barre d'actions fixe + le menu bas ne doivent rien masquer */
padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
}
.ori-chl-date,
.ori-chl-vues {
display: none;
}
.ori-chl-outils {
flex-wrap: wrap;
}
}
/* --------------------------------------------------------------------------
15. SCROLLBAR & SÉLECTION
-------------------------------------------------------------------------- */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--ori-bg-page);
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.14);
border-radius: 8px;
border: 2px solid var(--ori-bg-page);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(var(--ori-accent-rgb), 0.5);
}
::selection {
background: rgba(var(--ori-accent-rgb), 0.35);
color: #fff;
}
/* --------------------------------------------------------------------------
16. ANIMATIONS
-------------------------------------------------------------------------- */
/* apparition au scroll — la classe .ori-reveal est posée par le JS du child,
.ori-in est ajoutée quand l'élément entre dans le viewport */
.ori-reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s var(--ori-ease-out), transform 0.7s var(--ori-ease-out);
transition-delay: var(--ori-delay, 0s);
}
.ori-reveal.ori-in {
opacity: 1;
transform: none;
}
/* apparition de la page (léger fondu global) */
@keyframes ori-page-in {
from { opacity: 0; }
to { opacity: 1; }
}
.site-content {
animation: ori-page-in 0.5s var(--ori-ease-out) both;
}
/* transitions animées entre les pages (View Transitions, navigateurs
récents) : l'ancienne page s'estompe, la nouvelle glisse en fondu —
combiné au pré-rendu (speculation rules), la navigation devient
quasi instantanée, comme une application */
@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root) {
animation: ori-vt-out 0.18s ease both;
}
::view-transition-new(root) {
animation: ori-vt-in 0.32s var(--ori-ease-out) both;
}
}
@keyframes ori-vt-out {
to { opacity: 0; }
}
@keyframes ori-vt-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* shimmer utilisable sur les placeholders de lazy-load */
@keyframes ori-shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.item-thumb img.lazyload,
.item-thumb img.lazyloading {
background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
background-size: 800px 100%;
animation: ori-shimmer 1.4s linear infinite;
}
/* ==========================================================================
NAVIGATION MOBILE (≤ 900px) — réplique OriList :
topbar fixe (logo + Discord + cloche + avatar) + bottom nav 5 onglets
========================================================================== */
.ori-mtop,
.ori-bnav {
display: none;
}
@media (max-width: 900px) {
/* le header desktop et la sous-barre laissent place aux barres mobiles */
.site-header .main-navigation,
.c-sub-header-nav,
.mobile-menu.off-canvas {
display: none !important;
}
/* « html body » et non « body » : WordPress imprime ses styles globaux
APRÈS la feuille du thème, et il y pose « body { padding: 0 } ». À
spécificité égale, c'est lui qui l'emportait — la place réservée aux deux
barres fixes disparaissait, et elles recouvraient le haut et le bas de la
page. Ce bloc n'est pas toujours émis (il dépend des blocs présents dans
la page), d'où un défaut qui n'apparaissait que sur certaines pages et
pour certains visiteurs. */
html body {
padding-top: 54px;
padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}
/* ---- topbar : logo petit + actions ---- */
.ori-mtop {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 90;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
background: rgba(8, 8, 10, 0.92);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--ori-border-1);
/* se retire vers le haut quand on descend, revient quand on remonte */
transition: transform 0.36s var(--ori-ease-out);
will-change: transform;
}
.ori-mtop.ori-mtop-cachee {
transform: translateY(-101%);
}
/* la barre d'admin WP est masquée sur mobile : elle recouvrait la topbar */
#wpadminbar {
display: none !important;
}
html {
margin-top: 0 !important;
}
body.admin-bar .ori-mtop {
top: 0;
}
/* la barre d'admin étant masquée ici, la barre de lecture n'a plus à la
contourner : sans ça elle laissait 46 px de vide et recouvrait d'autant
le haut du chapitre (le bloc de pub, puis la première planche) */
body.admin-bar .ori-lec-haut {
top: 0;
}
/* logo : l'image du thème (la même que l'en-tête PC), ou le nom du site
en repli si aucune image n'est configurée */
.ori-mtop-logo {
display: flex;
align-items: center;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 17px;
letter-spacing: -0.2px;
color: #fff !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 45vw;
}
.ori-mtop-logo img {
display: block;
width: auto;
height: 30px;
max-width: 45vw;
object-fit: contain;
}
.ori-mtop-actions {
display: flex;
align-items: center;
gap: 12px;
}
/* Cinq éléments après le logo : à 360 px la rangée est pleine, à 320 elle
déborderait. On resserre l'écart plutôt que de sacrifier un bouton. */
@media (max-width: 380px) {
.ori-mtop-actions { gap: 8px; }
.ori-mtop-18 { padding: 0 8px; }
}
@media (max-width: 340px) {
.ori-mtop-actions { gap: 6px; }
.ori-mtop-18 { padding: 0 6px; }
.ori-mtop-18 .ori-nav-18-tag { font-size: 11px; }
}
/* pastille ronde, à la taille de la cloche et de l'avatar qui la suivent */
.ori-mdiscord {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 30px;
height: 30px;
padding: 0;
border-radius: 50%;
background: rgba(88, 101, 242, 0.14);
border: 1px solid rgba(88, 101, 242, 0.38);
color: var(--ori-discord-texte) !important;
}
.ori-mdiscord:active {
background: rgba(88, 101, 242, 0.26);
}
/* Random : même pastille ronde que Discord, aux couleurs du site */
.ori-mrandom {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 30px;
height: 30px;
padding: 0;
border-radius: 50%;
background: rgba(var(--ori-accent-rgb), 0.13);
border: 1px solid rgba(var(--ori-accent-rgb), 0.36);
color: var(--ori-accent) !important;
}
.ori-mrandom:active {
background: rgba(var(--ori-accent-rgb), 0.26);
}
.ori-mtop .ori-notif-wrap .ori-notif {
position: fixed;
top: 56px;
left: 12px;
right: 12px;
width: auto;
}
.ori-mtop-avatar {
width: 30px;
height: 30px;
}
/* menu du compte et panneau de notifications : ancrés sous la topbar, et
jamais plus larges que l'écran */
.ori-mtop .ori-menu,
.ori-mtop .ori-notif {
top: calc(100% + 14px);
right: 0;
max-width: calc(100vw - 24px);
}
.ori-mtop .ori-notif {
width: 300px;
}
/* La cloche faisait 28 px là où ses quatre voisines en font 30 : sur une
rangée d'icônes alignées, deux pixels d'écart se voient. */
.ori-mtop .ori-bell,
.ori-mtop-login {
width: 30px;
height: 30px;
}
.ori-mtop-login {
display: flex;
align-items: center;
justify-content: center;
padding: 3px;
}
/* ---- bottom nav : 5 onglets ---- */
.ori-bnav {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
justify-content: space-around;
align-items: center;
padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--ori-border-2);
background: rgba(8, 8, 10, 0.92);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.ori-bnav a,
.ori-bnav button {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: #5b6577 !important;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 10px;
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: color 0.3s ease;
}
.ori-bnav svg {
stroke: currentColor;
}
.ori-bnav a.active {
color: var(--ori-accent) !important;
font-weight: 700;
}
.ori-bnav a.active svg {
fill: var(--ori-accent);
}
/* ---- masquage des deux barres au défilement ----
La barre du bas glisse vers le bas, et tout ce qui se calait au-dessus
d'elle (bouton « remonter », fab Filtres, barre d'actions de la fiche)
descend d'autant : pas de bloc qui flotte dans le vide. */
.ori-bnav {
transition: transform 0.36s var(--ori-ease-out);
will-change: transform;
}
body.ori-nav-bas-cachee .ori-bnav {
transform: translateY(101%);
}
.go-to-top,
.ori-cat-fab {
transition: bottom 0.36s var(--ori-ease-out), background 0.3s ease, color 0.3s ease;
}
/* la barre de reprise suit le menu du bas quand il s'escamote */
.ori-sr-flot {
transition: transform 0.42s var(--ori-ease-out), opacity 0.28s var(--ori-ease-out),
bottom 0.36s var(--ori-ease-out);
}
body.ori-nav-bas-cachee .go-to-top {
bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
}
/* la flèche « remonter » se pose au-dessus de ce qui est réellement là :
le menu du bas, et la barre de reprise seulement quand elle est sortie */
.single-wp-manga .go-to-top {
bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
}
.single-wp-manga.ori-flot-visible .go-to-top {
bottom: calc(162px + env(safe-area-inset-bottom, 0px)) !important;
}
body.ori-nav-bas-cachee.single-wp-manga .go-to-top {
bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
}
body.ori-nav-bas-cachee .ori-cat-fab {
bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}
body.ori-nav-bas-cachee .ori-sr-flot {
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
/* ---- respiration générale mobile ---- */
.ori-spot-wrap .container,
.ori-resume-wrap .container,
.ori-listing-wrap .container,
.c-sidebar .container {
padding-left: 16px;
padding-right: 16px;
}
/* Zones de widgets (Tendances, Ajouts…) : on neutralise les marges
négatives de Bootstrap, qui coupaient les titres. Les colonnes ne
reprennent PAS de padding pour autant — le conteneur en pose déjà, et
l'ajouter décalait Tendances de 16 px par rapport aux autres sections. */
.c-sidebar .c-row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.c-sidebar .c-row > [class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
.ori-sec-head {
margin-bottom: 12px;
}
.ori-sec-title {
font-size: 16px;
}
.ori-sec-more {
font-size: 12px;
}
.ori-filtres {
gap: 8px;
margin-bottom: 14px;
}
.ori-seg {
padding: 3px;
}
.ori-seg button {
padding: 7px 10px;
font-size: 12px;
}
.ori-tend-wrap,
.ori-ajouts-wrap,
.ori-resume-wrap,
.ori-listing-wrap {
margin-top: 22px;
}
.ori-chap {
padding: 4px 8px;
font-size: 10.5px;
letter-spacing: -0.1px;
}
.ori-chap-long {
display: none;
}
.ori-chap-court {
display: inline;
}
.ori-chap-meta {
min-width: 32px;
padding: 4px 6px;
font-size: 9px;
}
}
/* --------------------------------------------------------------------------
17. ACCESSIBILITÉ & RESPONSIVE
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.ori-reveal {
opacity: 1;
transform: none;
}
}
@media (max-width: 768px) {
.profile-manga .post-title h1 {
font-size: 24px;
}
.body-wrap::before {
width: 140%;
}
}
/* ==========================================================================
17. AUTHENTIFICATION (page /connexion/ + modales Madara)
Une seule maquette de carte, deux contenants : la page plein écran et les
modales du plugin. Les classes .ori-auth-* sont partagées par les deux.
========================================================================== */
/* ---- page plein écran ---- */
.page-template-ori-connexion .site-content,
.page-template-ori-connexion .body-wrap {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* le thème pose ses zones de widgets (slider, Tendances, Ajouts récents) en
haut de CHAQUE page : hors sujet devant un formulaire de connexion ou un
profil de membre (classe posée par le plugin OriList — Communauté) */
.page-template-ori-connexion .c-sidebar.c-top-sidebar,
.page-template-ori-connexion .c-sidebar.c-top-second-sidebar,
.page-template-ori-connexion .c-breadcrumb-wrapper,
.ori-page-compte .c-sidebar.c-top-sidebar,
.ori-page-compte .c-sidebar.c-top-second-sidebar,
.ori-page-compte .c-breadcrumb-wrapper,
.ori-page-compte .c-page-content > .entry-header,
.ori-page-compte .entry-title,
.ori-page-compte .post-edit-link {
display: none !important;
}
.ori-page-compte .wrap {
overflow-x: clip;
overflow-y: visible;
}
.ori-page-profil .c-sidebar.c-top-sidebar,
.ori-page-profil .c-sidebar.c-top-second-sidebar,
.ori-page-profil .c-breadcrumb-wrapper,
.ori-page-profil .c-page-content {
display: none !important;
}
/* sur ces pages, le contenu sort du .wrap du thème : son `overflow: hidden`
coupait alors les panneaux de la cloche et du compte, qui débordent sous
l'en-tête. On lève le rognage uniquement là. */
.ori-page-profil .wrap,
.page-template-ori-connexion .wrap {
/* on ne libère que la verticale : en laissant aussi passer l'horizontale,
les barres mobiles fixes s'étiraient et la page défilait de côté */
overflow-x: clip;
overflow-y: visible;
}
.ori-auth-page {
position: relative;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: stretch;
min-height: calc(100vh - 64px);
background: var(--ori-bg-page);
}
/* ambiance : mosaïque de couvertures floutée + voile + accroche */
.ori-auth-ambiance {
position: relative;
overflow: hidden;
border-right: 1px solid var(--ori-border-1);
}
.ori-auth-mosaique {
position: absolute;
top: -12%;
left: -14%;
width: 128%;
height: 124%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
transform: rotate(-11deg) scale(1.06);
filter: blur(1px) saturate(0.9);
opacity: 0.5;
}
.ori-auth-tuile {
display: block;
overflow: hidden;
border-radius: 12px;
aspect-ratio: 3 / 4.2;
background: var(--ori-bg-card);
}
.ori-auth-tuile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ori-auth-veil {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:
radial-gradient(60% 55% at 22% 28%, rgba(var(--ori-accent-rgb), 0.22), transparent 70%),
linear-gradient(105deg, rgba(8, 8, 10, 0.72) 0%, rgba(8, 8, 10, 0.88) 55%, var(--ori-bg-page) 100%);
}
.ori-auth-pitch {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 44px 48px;
}
.ori-auth-pitch-titre {
margin: 0 0 10px;
max-width: 15ch;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 34px;
line-height: 1.15;
color: #fff;
text-wrap: balance;
}
.ori-auth-pitch-sub {
margin: 0;
max-width: 46ch;
font-family: var(--ori-font-body);
font-size: 14px;
line-height: 1.65;
color: var(--ori-text-2);
}
/* colonne du formulaire */
.ori-auth-panneau {
display: flex;
align-items: center;
justify-content: center;
padding: 48px 32px;
}
/* ---- carte (commune page + modale) ---- */
.ori-auth-carte {
width: 100%;
max-width: 408px;
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: 20px;
padding: 30px 30px 24px;
box-shadow: var(--ori-shadow-pop);
}
.ori-auth-tete {
margin-bottom: 20px;
}
.ori-auth-titre {
margin: 0 0 6px;
font-family: var(--ori-font-display) !important;
font-weight: 700;
font-size: 24px !important;
line-height: 1.2;
color: #fff !important;
text-transform: none !important;
}
.ori-auth-sub {
margin: 0;
font-family: var(--ori-font-body);
font-size: 13px;
line-height: 1.6;
color: var(--ori-text-3);
}
/* onglets connexion / inscription */
.ori-auth-onglets {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
margin-bottom: 22px;
padding: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ori-border-1);
}
.ori-auth-onglet {
position: relative;
z-index: 1;
height: 36px;
border: 0;
background: none;
border-radius: 999px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13px;
color: var(--ori-text-3);
cursor: pointer;
transition: color 0.3s ease;
}
.ori-auth-onglet.on {
color: #0a0e15;
}
.ori-auth-curseur {
position: absolute;
top: 4px;
left: 4px;
width: calc(50% - 6px);
height: 36px;
border-radius: 999px;
background: #fff;
transition: transform 0.42s var(--ori-ease-out);
}
.ori-auth-page[data-vue="register"] .ori-auth-curseur {
transform: translateX(calc(100% + 4px));
}
/* champs */
.ori-auth-form .ori-auth-champ {
margin-bottom: 14px;
}
.ori-auth-form label {
display: block;
margin-bottom: 7px;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ori-faint);
}
.ori-auth-form input[type="text"],
.ori-auth-form input[type="email"],
.ori-auth-form input[type="password"] {
width: 100%;
height: 46px;
box-sizing: border-box;
padding: 0 14px;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid var(--ori-border-1) !important;
box-shadow: none !important;
font-family: var(--ori-font-body);
font-size: 14px;
color: #fff !important;
transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.ori-auth-form input::placeholder {
color: var(--ori-faint);
}
.ori-auth-form input[type="text"]:focus,
.ori-auth-form input[type="email"]:focus,
.ori-auth-form input[type="password"]:focus {
outline: none;
border-color: rgba(var(--ori-accent-rgb), 0.7) !important;
background: rgba(var(--ori-accent-rgb), 0.06) !important;
box-shadow: 0 0 0 3px rgba(var(--ori-accent-rgb), 0.16) !important;
}
/* œil « afficher le mot de passe » */
.ori-auth-pwd {
position: relative;
}
.ori-auth-pwd input {
padding-right: 46px !important;
}
.ori-auth-oeil {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 9px;
background: none;
color: var(--ori-faint);
cursor: pointer;
transition: color 0.25s ease, background 0.25s ease;
}
.ori-auth-oeil:hover {
color: var(--ori-text-1);
background: rgba(255, 255, 255, 0.07);
}
.ori-auth-oeil.on {
color: var(--ori-accent);
}
/* ligne « se souvenir de moi » + mot de passe oublié */
.ori-auth-ligne {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 16px 0 18px;
}
.ori-auth-check {
display: inline-flex !important;
align-items: center;
gap: 8px;
margin: 0 !important;
font-family: var(--ori-font-body);
font-weight: 600 !important;
font-size: 12.5px !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--ori-text-2) !important;
cursor: pointer;
}
.ori-auth-ligne .ori-auth-lien {
white-space: nowrap;
}
.ori-auth-check input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ori-auth-case {
position: relative;
flex: none;
width: 17px;
height: 17px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ori-border-2);
transition: background 0.25s ease, border-color 0.25s ease;
}
.ori-auth-case::after {
content: "";
position: absolute;
top: 2px;
left: 5.5px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transition: transform 0.25s var(--ori-ease-bounce);
}
.ori-auth-check input:checked + .ori-auth-case {
background: var(--ori-accent);
border-color: var(--ori-accent);
}
.ori-auth-check input:checked + .ori-auth-case::after {
transform: rotate(45deg) scale(1);
}
.ori-auth-check input:focus-visible + .ori-auth-case {
box-shadow: 0 0 0 3px rgba(var(--ori-accent-rgb), 0.25);
}
/* liens */
.ori-auth-lien,
.ori-auth-pied a,
.ori-auth-retour a {
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12.5px;
color: var(--ori-accent) !important;
transition: color 0.25s ease;
}
.ori-auth-lien:hover,
.ori-auth-pied a:hover,
.ori-auth-retour a:hover {
color: var(--ori-accent-vif) !important;
}
/* bouton principal */
/* le thème fait flotter p.submit sur une demi-largeur dans ses formulaires
de connexion : on remet la ligne à plat */
.ori-auth-form .submit,
.ori-auth-carte p.submit {
float: none !important;
clear: both;
width: 100% !important;
margin: 0;
padding: 0;
}
/* préfixé par .ori-auth-carte : la règle générique sur input[type="submit"]
(dégradé bleu/violet, radius 10px) l'emportait sinon */
.ori-auth-carte .ori-auth-btn {
position: relative;
overflow: hidden;
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
height: 46px;
border: 0 !important;
border-radius: 999px !important;
background: linear-gradient(135deg, var(--ori-accent-vif), var(--ori-accent)) !important;
color: #fff !important;
font-family: var(--ori-font-body) !important;
font-weight: 800 !important;
font-size: 14px !important;
line-height: 1 !important;
text-shadow: none !important;
box-shadow: 0 8px 22px rgba(var(--ori-accent-rgb), 0.28) !important;
cursor: pointer;
transition: transform 0.25s var(--ori-ease-out), box-shadow 0.3s ease, filter 0.25s ease;
}
.ori-auth-carte .ori-auth-btn:hover {
transform: translateY(-1px);
filter: brightness(1.06);
box-shadow: 0 12px 26px rgba(var(--ori-accent-rgb), 0.36) !important;
}
.ori-auth-carte .ori-auth-btn:active {
transform: translateY(0);
}
.ori-auth-carte .ori-auth-btn.en-cours {
color: transparent !important;
pointer-events: none;
}
.ori-auth-carte .ori-auth-btn.en-cours::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 17px;
height: 17px;
margin: -9px 0 0 -9px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
animation: ori-auth-spin 0.7s linear infinite;
}
@keyframes ori-auth-spin {
to { transform: rotate(360deg); }
}
/* pied de carte */
.ori-auth-pied {
margin: 18px 0 0;
text-align: center;
font-family: var(--ori-font-body);
font-size: 12.5px;
color: var(--ori-text-3);
}
.ori-auth-retour {
margin: 22px 0 0;
text-align: center;
}
.ori-auth-retour a {
color: var(--ori-faint) !important;
font-weight: 600;
}
.ori-auth-retour a:hover {
color: var(--ori-text-1) !important;
}
/* messages du plugin (erreurs de connexion, confirmation d'inscription…) */
.ori-auth-carte p.message {
margin: 0 0 16px;
padding: 11px 14px;
border-radius: 12px;
background: rgba(var(--ori-accent-rgb), 0.08);
border: 1px solid rgba(var(--ori-accent-rgb), 0.28);
font-family: var(--ori-font-body);
font-size: 12.5px;
line-height: 1.55;
color: var(--ori-text-2);
}
.ori-auth-carte p.message:empty {
display: none;
}
/* une erreur renvoyée par le plugin : même bloc, en rouge */
.ori-auth-carte p.message.login:not(:empty),
.ori-auth-carte p.message.register:not(:empty) {
background: rgba(255, 92, 108, 0.09);
border-color: rgba(255, 92, 108, 0.3);
color: #ffb3bb;
}
/* notice transmise par WordPress (lien de réinitialisation périmé, mot de
passe mis à jour, mail envoyé…) */
.ori-auth-notice {
margin: 0 0 18px;
padding: 11px 14px;
border-radius: 12px;
font-family: var(--ori-font-body);
font-size: 12.5px;
line-height: 1.55;
background: rgba(var(--ori-accent-rgb), 0.08);
border: 1px solid rgba(var(--ori-accent-rgb), 0.28);
color: var(--ori-text-2);
}
.ori-auth-notice.ok {
background: rgba(54, 211, 153, 0.08);
border-color: rgba(54, 211, 153, 0.3);
color: #9fe9cd;
}
.ori-auth-notice.erreur {
background: rgba(255, 92, 108, 0.09);
border-color: rgba(255, 92, 108, 0.3);
color: #ffb3bb;
}
/* ---- modales (mêmes cartes, dans le conteneur Bootstrap du plugin) ---- */
.ori-auth-modal .modal-dialog {
max-width: 440px;
margin: 8vh auto;
}
/* toutes les couches Bootstrap/thème sont neutralisées : l'une d'elles a un
fond clair à angles droits qui dépassait aux coins arrondis de la carte */
.ori-auth-modal .modal-dialog,
.ori-auth-modal .modal-content,
.ori-auth-modal .modal-body,
.ori-auth-modal .modal-header,
.ori-auth-modal .modal-footer {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.ori-auth-modal .modal-header,
.ori-auth-modal .modal-footer {
display: none !important;
}
.ori-auth-modal .modal-content {
position: relative;
border-radius: 20px !important;
}
/* et par sécurité, tout ce qui est dans la modale est découpé au rayon
(le bouton de fermeture est hors de .modal-body, il n'est pas rogné) */
.ori-auth-modal .modal-body {
padding: 0 !important;
border-radius: 20px;
overflow: hidden;
}
/* le thème applique un padding latéral de 125px à .login dans la modale :
les champs se retrouvaient écrasés au centre */
.ori-auth-modal .ori-auth-carte {
max-width: none;
padding: 30px 30px 24px !important;
}
.ori-auth-fermer {
position: absolute;
top: -14px;
right: -10px;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--ori-border-2) !important;
border-radius: 50%;
background: var(--ori-bg-elev) !important;
color: var(--ori-text-2) !important;
opacity: 1 !important;
text-shadow: none !important;
cursor: pointer;
transition: transform 0.25s var(--ori-ease-out), color 0.25s ease;
}
.ori-auth-fermer:hover {
transform: rotate(90deg);
color: #fff !important;
}
/* voile de la modale au ton du site */
.modal-backdrop.show,
.modal-backdrop.in {
background: rgba(5, 7, 11, 0.72) !important;
opacity: 1 !important;
}
/* écran de chargement injecté par le plugin pendant la requête */
.ori-auth-modal .modal-loading-screen {
border-radius: 20px;
background: rgba(8, 8, 10, 0.6);
}
/* ---- responsive ---- */
@media (max-width: 1024px) {
.ori-auth-page {
grid-template-columns: 1fr;
min-height: calc(100vh - 54px);
}
/* l'ambiance passe en fond derrière la carte */
.ori-auth-ambiance {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-right: 0;
}
.ori-auth-panneau {
position: relative;
z-index: 1;
/* la barre de navigation du bas ne doit pas mordre sur la carte */
padding: 34px 16px calc(90px + env(safe-area-inset-bottom, 0px));
}
.ori-auth-pitch {
display: none;
}
.ori-auth-veil {
background:
radial-gradient(70% 45% at 50% 12%, rgba(var(--ori-accent-rgb), 0.2), transparent 70%),
linear-gradient(180deg, rgba(8, 8, 10, 0.82) 0%, rgba(8, 8, 10, 0.94) 60%, var(--ori-bg-page) 100%);
}
.ori-auth-carte {
padding: 26px 22px 20px;
}
.ori-auth-modal .modal-dialog {
margin: 5vh 14px;
}
.ori-auth-fermer {
top: -12px;
right: -4px;
}
}
/* ==========================================================================
18. LIEN CROISÉ 18+ (menu du compte + avertissement)
========================================================================== */
/* bouton de la navbar, à gauche de Discord (PC et mobile) */
/* mêmes métriques de boîte que le bouton Discord (.ori-contrib) pour que les
deux pastilles fassent exactement la même hauteur */
.ori-nav-18 {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
padding: 8px 15px;
line-height: 23.1px;
border-radius: 999px;
background: rgba(var(--ori-jumeau-rgb), 0.1);
border: 1px solid rgba(var(--ori-jumeau-rgb), 0.34);
color: var(--ori-jumeau-clair) !important;
transition: background 0.35s ease, border-color 0.35s ease, transform 0.25s var(--ori-ease-out);
}
.ori-nav-18:hover {
background: rgba(var(--ori-jumeau-rgb), 0.2);
border-color: rgba(var(--ori-jumeau-rgb), 0.55);
transform: translateY(-1px);
color: var(--ori-jumeau-clair) !important;
filter: brightness(1.12);
}
.ori-nav-18-tag {
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 14px;
letter-spacing: 0.03em;
line-height: 23.1px;
}
/* la navbar force display:inline-block sur ses enfants directs */
.site-header .main-navigation .main-navigation_wrap > .ori-nav-18 {
display: inline-flex;
}
/* topbar mobile : même hauteur que la pastille Discord, un peu plus compact
(déclaré ici, après la règle de base, sinon il serait écrasé) */
/* topbar mobile : mêmes métriques que la pastille Discord du mobile */
@media (max-width: 900px) {
/* Elle dépassait ses voisines en hauteur : on la cale sur les 30 px de la
cloche, de l'avatar, de Discord et du dé. La largeur reste libre, c'est
le seul élément de la rangée qui porte du texte. */
.ori-mtop-18 {
height: 30px;
padding: 0 10px;
line-height: 1;
}
.ori-mtop-18 .ori-nav-18-tag {
font-size: 12px;
line-height: 1;
}
}
/* pied de page */
.ori-ft-18 {
display: inline-flex !important;
align-items: center;
gap: 7px;
}
.ori-ft-18-tag {
padding: 1px 5px;
border-radius: 5px;
background: rgba(var(--ori-jumeau-rgb), 0.14);
border: 1px solid rgba(var(--ori-jumeau-rgb), 0.32);
font-weight: 800;
font-size: 9.5px;
letter-spacing: 0.04em;
color: var(--ori-jumeau-clair);
}
/* avertissement avant de quitter le site */
.ori-18 {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(5, 7, 11, 0.72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
animation: ori-18-fond 0.25s ease both;
}
.ori-18[hidden] {
display: none;
}
body.ori-18-ouvert {
overflow: hidden;
}
@keyframes ori-18-fond {
from { opacity: 0; }
to { opacity: 1; }
}
.ori-18-carte {
width: 100%;
max-width: 400px;
padding: 26px 26px 22px;
border-radius: 20px;
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
box-shadow: var(--ori-shadow-pop);
text-align: center;
animation: ori-18-carte 0.42s var(--ori-ease-bounce) both;
}
@keyframes ori-18-carte {
from { opacity: 0; transform: translateY(14px) scale(0.97); }
to { opacity: 1; transform: none; }
}
.ori-18-pastille {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-bottom: 14px;
border-radius: 50%;
background: rgba(var(--ori-heart-rgb), 0.12);
border: 1px solid rgba(var(--ori-heart-rgb), 0.34);
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 15px;
color: var(--ori-heart-clair);
}
.ori-18-titre {
margin: 0 0 8px;
font-family: var(--ori-font-display) !important;
font-weight: 700;
font-size: 19px !important;
line-height: 1.25;
color: #fff !important;
text-transform: none !important;
}
.ori-18-texte {
margin: 0 0 20px;
font-family: var(--ori-font-body);
font-size: 13px;
line-height: 1.6;
color: var(--ori-text-3);
}
.ori-18-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.ori-18-actions .ori-18-annuler,
.ori-18-actions .ori-18-ok {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 12px;
border-radius: 999px;
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 13px;
cursor: pointer;
transition: transform 0.22s var(--ori-ease-out), background 0.3s ease, filter 0.25s ease;
}
.ori-18-actions .ori-18-annuler {
border: 1px solid var(--ori-border-2);
background: rgba(255, 255, 255, 0.05);
color: var(--ori-text-2);
}
.ori-18-actions .ori-18-annuler:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.ori-18-actions .ori-18-ok {
border: 0;
background: linear-gradient(135deg, var(--ori-heart-clair), var(--ori-heart));
color: #fff !important;
box-shadow: 0 8px 22px rgba(var(--ori-heart-rgb), 0.26);
}
.ori-18-actions .ori-18-ok:hover {
transform: translateY(-1px);
filter: brightness(1.06);
}
@media (max-width: 480px) {
.ori-18-actions {
grid-template-columns: 1fr;
}
/* sur petit écran, le bouton d'entrée passe en premier sous le pouce */
.ori-18-actions .ori-18-ok {
order: -1;
}
}
/* ==========================================================================
ESPACE MEMBRE (/user-settings/) — enveloppe maison autour des formulaires
de Madara. On ne touche pas à sa mécanique : téléversement d'avatar et
changement de mot de passe restent les siens, seul l'habillage change.
========================================================================== */
.ori-compte {
max-width: 1000px;
margin: 0 auto;
padding: 26px 0 40px;
}
.ori-compte-tete {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.ori-compte-moi {
display: flex;
align-items: center;
gap: 14px;
}
.ori-compte-moi img {
width: 64px;
height: 64px;
border-radius: 50%;
border: 1px solid var(--ori-border-2);
}
.ori-compte-nom {
margin: 0;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 24px;
color: var(--ori-text-1);
}
.ori-compte-sous {
margin: 3px 0 0;
font-family: var(--ori-font-body);
font-size: 12.5px;
color: var(--ori-faint);
}
.ori-compte-voir {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
border-radius: 999px;
border: 1px solid var(--ori-border-1);
background: rgba(255, 255, 255, 0.05);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12.5px;
color: var(--ori-text-1) !important;
transition: background 0.22s var(--ori-ease-out), border-color 0.22s var(--ori-ease-out);
}
.ori-compte-voir:hover {
background: rgba(var(--ori-accent-rgb), 0.16);
border-color: rgba(var(--ori-accent-rgb), 0.42);
}
/* Sur grand écran, le menu se tient à gauche et le contenu à droite : la liste
des sections reste sous les yeux pendant qu'on remplit un formulaire. */
.ori-compte-corps {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.ori-compte-onglets {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px;
border-radius: 16px;
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
position: sticky;
top: 90px;
}
.ori-compte-onglets::-webkit-scrollbar {
display: none;
}
.ori-compte-onglet {
flex: none;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border-radius: 11px;
background: transparent;
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 13px;
color: var(--ori-text-3, #8b96a8) !important;
white-space: nowrap;
transition: background 0.25s var(--ori-ease-out), color 0.25s var(--ori-ease-out);
}
.ori-compte-onglet:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--ori-text-1) !important;
}
.ori-compte-onglet.on {
background: #fff;
color: #0b0c10 !important;
}
/* un onglet qui mène ailleurs (les listes vivent sur le profil public) */
.ori-compte-ailleurs {
margin-top: 8px;
padding-top: 14px;
border-top: 1px solid var(--ori-border-1);
border-radius: 0;
}
.ori-compte-ailleurs .ori-compte-fleche {
margin-left: auto;
}
.ori-compte-ailleurs .ori-compte-fleche {
opacity: 0.6;
}
@media (max-width: 900px) {
.ori-compte-ailleurs {
margin-left: 0;
}
}
.ori-compte-carte {
padding: 24px;
background: var(--ori-bg-card);
border: 1px solid var(--ori-border-1);
border-radius: 16px;
}
/* ---- formulaires de Madara, au langage du site ----
Ses gabarits empilent des titres h3 et des radios nues. On les regroupe en
sections, et chaque choix devient une pastille cliquable sur toute sa
surface — le libellé s'étend derrière le rond. */
.ori-compte-carte .tab-group-item + .tab-group-item {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--ori-border-1);
}
/* l'onglet actif annonce déjà la section : son titre ferait doublon */
.ori-compte-carte .settings-heading {
display: none;
}
.ori-compte-carte .tab-item {
padding: 20px 0;
border-top: 1px solid var(--ori-border-1);
}
/* un groupe de choix s'étale en pastilles */
.ori-compte-carte .tab-item:has(.checkbox) {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* un formulaire s'aligne en deux colonnes : étiquette puis champ */
.ori-compte-carte .form-group.row {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
align-items: center;
gap: 10px 18px;
margin: 0 0 12px;
}
.ori-compte-carte .form-group.row:last-child {
margin-bottom: 0;
}
/* la grille place déjà les colonnes : celles de Bootstrap n'ont plus à jouer */
.ori-compte-carte .form-group.row > [class*="col-"] {
flex: none;
width: auto;
max-width: none;
padding-left: 0;
padding-right: 0;
}
.ori-compte-carte .form-group.row > label {
margin: 0;
text-align: left;
white-space: normal;
}
/* la valeur actuelle, en lecture seule */
.ori-compte-carte .show {
font-family: var(--ori-font-body);
font-size: 13.5px;
color: var(--ori-text-1);
}
/* la ligne du bouton n'a pas d'étiquette : il se cale sous les champs */
.ori-compte-carte .form-group.row > label:empty {
display: none;
}
.ori-compte-carte .form-group.row > label:empty + div {
grid-column: 2;
}
.ori-compte-carte .tab-item:first-of-type {
padding-top: 0;
border-top: 0;
}
.ori-compte-carte .settings-title {
flex: 0 0 100%;
margin: 0;
}
.ori-compte-carte .settings-title h3,
.ori-compte-carte .tab-group-item > h3,
.ori-compte-carte h3 {
margin: 0 0 2px;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 15px !important;
color: var(--ori-text-1);
}
/* la petite phrase d'explication sous un titre */
.ori-compte-carte .tab-item > p,
.ori-compte-carte .settings-title + p {
flex: 0 0 100%;
margin: 0 0 4px;
font-family: var(--ori-font-body);
font-size: 12px;
color: var(--ori-faint);
}
/* « Images par page » ne concerne que la lecture page par page : elle
n'apparaît que si ce mode est choisi, plutôt que d'encombrer par défaut. */
.ori-compte-carte .tab-item.ori-repli {
display: none;
}
.ori-compte-carte .tab-item.ori-repli.ori-ouvert {
display: flex;
animation: ori-repli-entre 0.35s var(--ori-ease-out);
}
@keyframes ori-repli-entre {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* le widget Turnstile, entre les champs et le bouton d'envoi */
.ori-turnstile {
margin: 4px 0 2px;
min-height: 65px;
}
.ori-auth-form .ori-turnstile iframe {
max-width: 100%;
}
/* ---- onglet Contenu : les genres qu'un membre ne veut pas croiser ---- */
.ori-masq-intro {
margin: 0 0 16px;
font-family: var(--ori-font-body);
font-size: 12.5px;
line-height: 1.6;
color: var(--ori-muted);
max-width: 62ch;
}
.ori-masq-ok {
margin: 0 0 16px;
padding: 9px 13px;
border-radius: 10px;
background: rgba(82, 217, 138, 0.12);
border: 1px solid rgba(82, 217, 138, 0.32);
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12.5px;
color: #8ce8b0;
}
.ori-masq-liste {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 6px;
}
.ori-masq-item {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
padding: 10px 12px;
border-radius: 11px;
border: 1px solid var(--ori-border-1);
background: rgba(255, 255, 255, 0.03);
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12.5px;
color: var(--ori-text-2);
cursor: pointer;
transition: background 0.2s var(--ori-ease-doux), border-color 0.2s var(--ori-ease-doux), color 0.2s var(--ori-ease-doux);
}
.ori-masq-item:hover {
background: rgba(255, 255, 255, 0.06);
}
/* un genre masque se lit d'un coup d'oeil : c'est l'etat qui compte */
.ori-masq-item:has(input:checked) {
background: rgba(var(--ori-heart-rgb), 0.1);
border-color: rgba(var(--ori-heart-rgb), 0.34);
color: var(--ori-heart-clair);
}
.ori-masq-item input {
flex: none;
width: 15px;
height: 15px;
margin: 0;
accent-color: var(--ori-heart);
cursor: pointer;
}
.ori-masq-nom {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ori-masq-nb {
flex: none;
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--ori-faint);
}
.ori-masq-pied {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--ori-border-1);
}
.ori-masq-compte {
font-family: var(--ori-font-body);
font-size: 12.5px;
color: var(--ori-muted);
}
.ori-masq-btn {
padding: 11px 22px;
border: 0;
border-radius: 11px;
background: var(--ori-accent);
font-family: var(--ori-font-body);
font-weight: 800;
font-size: 13px;
color: #0a0e15;
cursor: pointer;
transition: transform 0.22s var(--ori-ease-bounce), box-shadow 0.22s var(--ori-ease-doux);
}
.ori-masq-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px -14px var(--ori-accent);
}
.ori-masq-vide {
font-family: var(--ori-font-body);
font-size: 13px;
color: var(--ori-faint);
}
/* un choix = une pastille */
.ori-compte-carte .checkbox {
position: relative;
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
border-radius: 11px;
border: 1px solid var(--ori-border-1);
background: rgba(255, 255, 255, 0.04);
transition: background 0.2s var(--ori-ease-out), border-color 0.2s var(--ori-ease-out);
}
.ori-compte-carte .checkbox:hover {
background: rgba(255, 255, 255, 0.07);
}
.ori-compte-carte .checkbox:has(input:checked) {
background: rgba(var(--ori-accent-rgb), 0.14);
border-color: rgba(var(--ori-accent-rgb), 0.5);
}
.ori-compte-carte .checkbox input[type="radio"],
.ori-compte-carte .checkbox input[type="checkbox"] {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
width: 16px;
height: 16px;
margin: 0;
padding: 0;
appearance: none;
-webkit-appearance: none;
border: 1.5px solid rgba(255, 255, 255, 0.28);
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: border-color 0.2s var(--ori-ease-out), box-shadow 0.2s var(--ori-ease-out);
}
.ori-compte-carte .checkbox input:checked {
border-color: var(--ori-accent);
box-shadow: inset 0 0 0 4px var(--ori-accent);
}
.ori-compte-carte .checkbox input:focus-visible {
outline: 2px solid var(--ori-accent);
outline-offset: 2px;
}
/* le libellé recouvre la pastille : on clique où l'on veut */
.ori-compte-carte .checkbox label {
display: flex;
align-items: center;
margin: 0;
padding: 11px 16px 11px 40px;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 13px;
color: var(--ori-text-1);
cursor: pointer;
white-space: nowrap;
}
.ori-compte-carte h4 {
margin: 0 0 12px;
font-family: var(--ori-font-display);
font-weight: 700;
font-size: 15px;
color: var(--ori-text-1);
}
.ori-compte-carte label,
.ori-compte-carte .control-label {
display: block;
margin-bottom: 6px;
font-family: var(--ori-font-body);
font-weight: 600;
font-size: 12.5px;
color: var(--ori-text-2);
}
.ori-compte-carte input[type="text"],
.ori-compte-carte input[type="email"],
.ori-compte-carte input[type="password"],
.ori-compte-carte input[type="url"],
.ori-compte-carte select,
.ori-compte-carte textarea {
width: 100%;
max-width: 460px;
padding: 11px 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--ori-border-1);
font-family: var(--ori-font-body);
font-size: 13.5px;
color: var(--ori-text-1);
transition: border-color 0.2s var(--ori-ease-out), background 0.2s var(--ori-ease-out);
}
.ori-compte-carte input:focus,
.ori-compte-carte select:focus,
.ori-compte-carte textarea:focus {
outline: none;
background: rgba(255, 255, 255, 0.06);
border-color: rgba(var(--ori-accent-rgb), 0.5);
}
.ori-compte-carte input[type="submit"],
.ori-compte-carte button[type="submit"],
.ori-compte-carte .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 22px !important;
border: 0 !important;
border-radius: 11px !important;
background: var(--ori-accent) !important;
font-family: var(--ori-font-body) !important;
font-weight: 700 !important;
font-size: 13.5px !important;
color: #fff !important;
cursor: pointer;
transition: filter 0.2s var(--ori-ease-out), transform 0.25s var(--ori-ease-out);
}
/* un bouton d'enregistrement se dimensionne sur son texte */
.ori-compte-carte input[type="submit"],
.ori-compte-carte button[type="submit"] {
width: auto;
min-width: 160px;
}
.ori-compte-carte input[type="submit"]:hover,
.ori-compte-carte button[type="submit"]:hover,
.ori-compte-carte .btn:hover {
filter: brightness(1.1);
transform: translateY(-1px);
}
/* avatar : la vignette et son bouton de téléversement */
.ori-compte-carte .choose-avatar {
position: relative;
display: inline-block;
}
.ori-compte-carte .c-user-avatar img {
width: 130px;
height: 130px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--ori-border-2);
}
.ori-compte-carte input[type="file"] {
display: block;
margin: 10px 0;
font-family: var(--ori-font-body);
font-size: 12.5px;
color: var(--ori-text-2);
}
.ori-compte-carte input[type="file"]::file-selector-button {
margin-right: 10px;
padding: 8px 14px;
border: 1px solid var(--ori-border-1);
border-radius: 9px;
background: rgba(255, 255, 255, 0.06);
font-family: var(--ori-font-body);
font-weight: 700;
font-size: 12.5px;
color: var(--ori-text-1);
cursor: pointer;
}
.ori-compte-carte input[type="file"]::file-selector-button:hover {
background: rgba(var(--ori-accent-rgb), 0.16);
border-color: rgba(var(--ori-accent-rgb), 0.42);
}
.ori-compte-carte .form-choose-avatar {
margin-top: 14px;
font-family: var(--ori-font-body);
font-size: 12px;
color: var(--ori-faint);
}
.ori-compte-carte .loading-overlay {
position: absolute;
inset: 0;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(8, 8, 10, 0.6);
}
/* messages de retour */
.ori-compte-carte .alert {
padding: 12px 16px;
margin-bottom: 18px;
border-radius: 12px;
border: 1px solid var(--ori-border-1);
background: rgba(255, 255, 255, 0.05);
font-family: var(--ori-font-body);
font-size: 13px;
color: var(--ori-text-2);
}
.ori-compte-carte .alert-success {
background: rgba(54, 211, 153, 0.12);
border-color: rgba(54, 211, 153, 0.32);
color: #6ee7b7;
}
.ori-compte-carte .alert-danger {
background: rgba(var(--ori-heart-rgb), 0.12);
border-color: rgba(var(--ori-heart-rgb), 0.34);
color: var(--ori-heart-clair);
}
@media (max-width: 900px) {
.ori-compte {
padding: 16px 0 30px;
}
/* sur téléphone, l'étiquette passe au-dessus de son champ */
.ori-compte-carte .form-group.row {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.ori-compte-carte .form-group.row > label:empty + div {
grid-column: 1;
}
.ori-compte-carte {
padding: 16px;
border-radius: 14px;
}
.ori-compte-corps {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
.ori-compte-onglets {
flex-direction: row;
position: static;
padding: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.ori-compte-onglets::-webkit-scrollbar {
display: none;
}
.ori-compte-onglet {
white-space: nowrap;
}
.ori-compte-ailleurs {
margin-top: 0;
padding-top: 11px;
border-top: 0;
border-left: 1px solid var(--ori-border-1);
padding-left: 14px;
border-radius: 11px;
}
.ori-compte-carte input[type="text"],
.ori-compte-carte input[type="email"],
.ori-compte-carte input[type="password"],
.ori-compte-carte select,
.ori-compte-carte textarea {
max-width: 100%;
}
}
/* le sélecteur de tierlist prolonge le bouton favori, même gouttière */
.ori-sr-tierlist {
margin-top: 8px;
}
/* ---- sens de lecture, dans le panneau de réglages du lecteur ---- */
.ori-lec-modes {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.ori-lec-mode {
display: flex;
flex-direction: column;
gap: 2px;
padding: 9px 12px;
border: 1px solid var(--ori-border-1);
border-radius: 10px;
background: transparent;
color: var(--ori-text-2);
text-align: left;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
}
.ori-lec-mode:hover { border-color: var(--ori-border-2); }
.ori-lec-mode.on {
border-color: var(--ori-accent);
background: rgba(var(--ori-accent-rgb), .12);
}
.ori-lec-mode b {
color: var(--ori-text-1);
font-size: 13.5px;
font-weight: 700;
}
.ori-lec-mode i {
color: var(--ori-text-3);
font-size: 11.5px;
font-style: normal;
line-height: 1.35;
}
.ori-lec-modes-attente { opacity: .55; pointer-events: none; }
/* le lien de connexion à double authentification : discret, il ne concerne
qu'une poignée de comptes */
.ori-auth-2fa {
display: block;
margin-top: 8px;
color: var(--ori-text-3);
font-size: 12px;
}
.ori-auth-2fa:hover { color: var(--ori-text-2); }