/* =============================================================================
TEMPLATE BLOG — feuille de style éditoriale
-----------------------------------------------------------------------------
Deux palettes commutables : clair (défaut, « papier ») et sombre. Le mode est
porté par — posé par _blog_head.php d'après
wl_clients.theme_mode, puis éventuellement surchargé par le visiteur (cookie).
Toutes les couleurs passent par des variables : aucune valeur en dur dans les
composants, sinon le mode sombre serait à moitié appliqué.
Pas de Bootstrap (règle WL) : tout est autonome.
========================================================================== */
/* ---------- Palette CLAIRE (défaut) ---------- */
:root{
--accent: #b3122f;
--bg: #faf8f4; /* papier */
--bg-alt: #f2eee7; /* bandes alternées */
--surface: #ffffff; /* cartes */
--surface-2: #f7f4ef;
--text: #16150f; /* texte principal */
--text-soft: #5b574d; /* texte secondaire */
--text-faint: #8a8478; /* méta */
--line: rgba(22,21,15,.12);
--line-soft: rgba(22,21,15,.07);
--shadow: 0 1px 2px rgba(22,21,15,.05), 0 8px 24px rgba(22,21,15,.06);
--shadow-lg: 0 2px 4px rgba(22,21,15,.06), 0 18px 48px rgba(22,21,15,.10);
--header-bg: rgba(250,248,244,.88);
--on-accent: #ffffff;
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-title:'Fraunces', Georgia, 'Times New Roman', serif;
--wrap: 1180px; /* largeur de page */
--read: 720px; /* largeur de lecture d'un article */
--radius: 14px;
--radius-sm: 9px;
/* ---------- Boutons du composant natif de réactions ----------------------
content_reactions.php expose depuis peu un CONTRAT DE THÈME : il lit ces
variables au lieu d'imposer ses couleurs. On lui donne donc la palette du
blog, une bonne fois — au lieu de le contredire en !important depuis
chaque page, ce qui avait produit 6 endroits stylant le même bouton.
Pour thémer les boutons d'un AUTRE template : recopier ce bloc en
changeant les valeurs de droite. Rien d'autre à faire. */
--lkb-btn-bg: var(--surface-2);
--lkb-btn-bg-hover: var(--surface);
--lkb-btn-text: var(--text);
--lkb-btn-border: var(--line-soft);
--lkb-panel-bg: var(--surface);
--lkb-panel-line: var(--line);
--lkb-panel-text: var(--text);
--lkb-panel-muted: var(--text-soft);
--lkb-accent: var(--accent);
/* ---------- Boutons propres au TEMPLATE (barres d'actions média) ---------
Mêmes rôles, pour les boutons que le template dessine lui-même :
« S'abonner », « Enregistrer », « Republier », « Partager ». Ils étaient
écrits avec des couleurs de template SOMBRE en dur (rgba(255,255,255,.06),
#fff) puis rattrapés page par page — l'origine de la plupart des défauts
d'affichage rencontrés sur ce site.
-btn-* : bouton neutre au repos et au survol
-on-* : bouton dans un état ACTIF (aimé, republié, enregistré)
-solid-* : bouton d'appel à l'action à fond plein (« S'abonner ») */
--lkb-on-bg: color-mix(in srgb, var(--accent) 10%, transparent);
--lkb-on-bg-hover: color-mix(in srgb, var(--accent) 16%, transparent);
--lkb-on-text: var(--accent);
--lkb-on-border: color-mix(in srgb, var(--accent) 32%, transparent);
--lkb-solid-bg: var(--accent);
--lkb-solid-text: #ffffff;
--lkb-icon: var(--text-faint);
}
/* ---------- Palette SOMBRE ---------- */
:root[data-mode="dark"]{
--bg: #0f0f11;
--bg-alt: #141417;
--surface: #17171b;
--surface-2: #1d1d22;
--text: #f2f0ec;
--text-soft: #b3aea5;
--text-faint:#8b867d;
--line: rgba(255,255,255,.14);
--line-soft: rgba(255,255,255,.08);
--shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
--shadow-lg: 0 2px 4px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.5);
--header-bg: rgba(15,15,17,.86);
--on-accent: #ffffff;
}
/* ---------- Reprise de main sur style_lp.css ----------
style_lp.css est chargé AVANT pour fournir les composants partagés du socle
(menu compte .wl-*, drawer .lpm*, modales). Il est conçu pour un thème SOMBRE :
son :root pose --black/--grey/--font et son `body` force un fond noir. On
réaligne donc ici les variables qu'il définit sur la palette du blog, pour que
les composants hérités adoptent le thème courant au lieu de rester noirs. */
:root{
--red: var(--accent);
--black: var(--bg);
--dark: var(--bg-alt);
--grey: var(--surface);
--mid: var(--surface-2);
--light: var(--text-faint);
--white: var(--text);
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-title: 'Fraunces', Georgia, 'Times New Roman', serif;
}
:root[data-mode="dark"]{
--white: #ffffff; /* en sombre, le blanc redevient du vrai blanc */
}
/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-gutter:stable; -webkit-text-size-adjust:100%; }
/* Le drawer coulisse hors écran : sans ce clip, décalage horizontal sur mobile. */
html,body{ overflow-x:clip; }
/* Fond de page : posé sur ET , sans dépendre de la classe
.blog-body. Les ~39 pages héritées du socle artiste n'ont pas cette classe
dans leur HTML (elle est ajoutée en JS au DOMContentLoaded) : si le fond en
dépendait, elles afficheraient un flash de thème sombre au chargement.
Sélecteur redoublé (html body) car style_lp.css stylise `body` plus bas dans
la cascade, à spécificité égale. */
html{ background:var(--bg); }
body,
html body{
margin:0; background:var(--bg); color:var(--text);
font-family:var(--font); font-size:17px; line-height:1.65;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; }
/* Réinitialisations de typographie limitées AUX composants du blog (.bh-*,
.b-*, .bf-*). Cette feuille est aussi chargée sur les ~39 pages héritées du
socle artiste (contact, galerie, agenda, connexion…) via wl_css() : appliquer
`p{margin}` ou `h1..h4{margin:0}` globalement y écraserait des mises en page
qui n'ont pas été conçues pour, et casserait leurs grilles. */
/* :not(.b-btn) est indispensable : sans lui, « .b-sec a » (spécificité 0-2-0)
bat « .b-btn » (0-1-0) et impose color:inherit aux boutons — le libellé
prenait alors la couleur du texte courant, donc rouge sur l'aplat rouge :
bouton illisible. */
/* .bh-register est exclu pour la MÊME raison que .b-btn : « .bh a » (0-2-0)
bat « .bh-register » (0-1-0) et lui imposait color:inherit. L'icône prenait
la couleur du texte du header — mesurée à rgb(22,21,15), presque noire — sur
le rond d'accent bordeaux. */
.bh a:not(.b-btn):not(.bh-register), .b-sec a:not(.b-btn), .b-hero a:not(.b-btn),
.b-art a:not(.b-btn), .b-card a:not(.b-btn), .b-li a:not(.b-btn),
.b-rub, .bf a:not(.b-btn){
color:inherit; text-decoration:none;
}
.b-hero h1, .b-sec h2, .b-card h3, .b-li h4, .b-art-head h1,
.b-nl h3, .b-rub-name, .bf-title, .b-author-box h4, .b-empty h3{
font-family:var(--font-title); font-weight:600; line-height:1.15;
margin:0; letter-spacing:-.01em;
}
.b-art-body p, .b-hero p, .b-card p, .b-nl p, .b-empty p{ margin:0 0 1em; }
.bh button, .b-share button, .b-nl-form button{ font:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
/* =============================== HEADER =============================== */
.bh{
position:sticky; top:0; z-index:60;
background:var(--header-bg); backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid var(--line-soft);
}
.bh-inner{
width:min(100% - 40px, var(--wrap)); margin-inline:auto;
display:flex; align-items:center; gap:22px; height:68px;
}
/* Le titre de la publication ne doit JAMAIS être tronqué (« lykhubs » devenait
« ly… ») : c'est le nom du site. Il ne rétrécit donc pas, et c'est la nav qui
cède l'espace — puis passe dans le drawer en dessous de 760px. */
.bh-logo{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
/* `margin-right:auto` RETIRÉ du logo : il absorbait tout l'espace libre et
affamait la nav, qui se retrouvait à 529px pour 555px de contenu — le menu
était donc déjà rogné à 1600px de large, avant même d'ajouter une entrée.
La nav prend maintenant l'espace disponible (flex:1) et pousse elle-même les
outils à droite ; le logo, lui, ne rétrécit toujours pas.
(Le flex de .bh-nav est posé sur SA règle, plus bas : déclaré ici, il serait
écrasé par celle-ci qui vient après.) */
.bh-logo img{ max-height:38px; width:auto; }
.bh-logo-txt{
font-family:var(--font-title); font-size:1.42rem; font-weight:700;
letter-spacing:-.02em; white-space:nowrap;
}
.bh-nav{ display:flex; align-items:center; gap:24px; min-width:0; flex-wrap:nowrap; flex:1 1 auto; }
/* ---------- Repli « Plus » de la barre de menu ----------------------------
La barre est bornée : au-delà d'une certaine largeur de menu, les dernières
entrées étaient rognées SANS SIGNE VISIBLE (mesuré : +3 entrées et « Contact »
disparaissait). Le script bhMore déplace ici ce qui ne tient pas.
Le bouton reste dans le flux de la nav ; le panneau est en absolu pour ne pas
élargir la barre — c'est ce qui a causé le problème au départ. */
/* Menu « … » masqué sur grand écran quand le visiteur est CONNECTÉ : ses
entrées (Partager, QR Code, À propos, mode d'affichage) sont alors toutes
dans le menu du compte, à droite. Deux menus superposés répétaient les mêmes
actions et occupaient chacun un bouton de la barre.
_blog_header.php posait déjà la classe `lp-more--hide-desktop`, mais AUCUNE
règle ne la définissait — elle ne masquait donc rien. */
/* (La règle de masquage vit plus bas, juste après `.bh .lp-more` : à
spécificité égale, c'est l'ordre dans le fichier qui tranche.) */
/* Anti-scintillement : sans cela, les entrées s'affichent TOUTES en barre puis
sautent dans « Plus » dès que le script mesure — un déplacement visible à
chaque chargement de page. On masque donc la nav jusqu'à la répartition.
`visibility` et non `display` : la mesure a besoin des largeurs réelles, que
`display:none` rendrait nulles. La barre garde ainsi sa place, rien ne bouge.
Repli sans JavaScript : la règle ne s'applique que si la classe est posée par
le script lui-même (voir blog.js), donc un navigateur sans JS affiche le menu
normalement, simplement tronqué comme avant. */
.bh-nav.bh-nav--measuring{ visibility:hidden; }
.bh-more{ position:relative; flex:0 0 auto; }
/* `.bh button` déclare `font-size:inherit` et l'emporte sur `.bh-more-btn`
(spécificité 0,1,1 contre 0,1,0) : le bouton héritait donc des 17px de son
parent au lieu de reprendre la taille des liens du menu. Mesuré : 17px /
graisse 400 contre 14,08px / 500 pour les liens voisins.
On aligne la spécificité en préfixant par `.bh`, et on reprend EXACTEMENT
les valeurs de `.bh-nav a` — même taille, même graisse, même padding, pour
que le bouton soit indiscernable d'une entrée de menu. */
.bh .bh-more-btn{
display:inline-flex; align-items:center; gap:6px; cursor:pointer;
border:0; background:transparent; font-family:inherit; line-height:inherit;
padding:6px 0; font-size:.88rem; font-weight:500;
color:var(--text-soft); transition:color .18s;
}
.bh-more-btn:hover{ color:var(--text); }
.bh-more-btn i{ font-size:.62rem; transition:transform .18s; }
.bh-more.open .bh-more-btn{ color:var(--text); }
.bh-more.open .bh-more-btn i{ transform:rotate(180deg); }
.bh-more-menu{
display:none; position:absolute; z-index:80; top:calc(100% + 10px); right:0;
min-width:190px; padding:6px;
background:var(--surface); border:1px solid var(--line-soft);
border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
}
.bh-more.open .bh-more-menu{ display:flex; flex-direction:column; }
.bh-more-menu a{
display:flex; align-items:center; gap:9px; padding:10px 11px; border-radius:7px;
font-size:.88rem; font-weight:500; color:var(--text-soft); text-decoration:none;
white-space:nowrap;
}
/* Puce devant chaque entrée : les liens sont DÉPLACÉS ici par le JS depuis la
barre de navigation, on ne peut donc pas leur ajouter d'icône dans le HTML.
Un ::before en CSS s'applique quelle que soit l'entrée repliée. */
.bh-more-menu a::before{
content:''; flex:0 0 5px; width:5px; height:5px; border-radius:50%;
background:var(--accent); opacity:.45; transition:opacity .15s, transform .15s;
}
.bh-more-menu a:hover{ background:var(--surface-2); color:var(--text); }
.bh-more-menu a:hover::before{ opacity:1; transform:scale(1.25); }
.bh-more-menu a.is-active{ color:var(--accent); background:var(--surface-2); }
/* Le soulignement animé des liens de la barre n'a pas de sens dans un panneau. */
.bh-more-menu a::after{ display:none; }
/* Les entrées de menu restent sur une ligne (« À propos » se coupait en deux). */
.bh-nav a{ white-space:nowrap; }
.bh-nav a{
font-size:.88rem; font-weight:500; color:var(--text-soft);
padding:6px 0; position:relative; transition:color .18s;
}
.bh-nav a::after{
content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
background:var(--accent); transition:right .22s ease;
}
.bh-nav a:hover{ color:var(--text); }
.bh-nav a:hover::after, .bh-nav a.is-active::after{ right:0; }
.bh-nav a.is-active{ color:var(--text); }
/* ---- Effets de survol du menu, au choix dans le panneau « Apparence » ----
Le défaut ci-dessus (soulignement qui se déploie) reste le repère éditorial
du template. Les variantes sont pensées pour un BLOG : sobres, sans aplat de
couleur vive qui jurerait avec une page de lecture longue.
Chaque variante NEUTRALISE d'abord le trait par défaut, sinon les deux
effets se superposeraient. */
/* « Lettres » : les lettres s'écartent, rien ne s'ajoute autour du mot. */
.bh-nav--spacing a::after{ display:none; }
.bh-nav--spacing a{ transition:color .2s ease, letter-spacing .28s ease; }
.bh-nav--spacing a:hover, .bh-nav--spacing a.is-active{ color:var(--accent); letter-spacing:.09em; }
/* « Pastille » : un point d'accent apparaît devant le mot, qui glisse un peu.
Codes du sommaire de magazine. */
.bh-nav--dot a::after{ display:none; }
.bh-nav--dot a{ transition:color .2s ease, transform .26s cubic-bezier(.22,.61,.36,1); }
.bh-nav--dot a::before{
content:''; position:absolute; left:-11px; top:50%; width:5px; height:5px;
margin-top:-2.5px; border-radius:50%; background:var(--accent);
opacity:0; transform:scale(.2);
transition:opacity .2s ease, transform .26s cubic-bezier(.34,1.56,.64,1);
}
.bh-nav--dot a:hover, .bh-nav--dot a.is-active{ color:var(--accent); transform:translateX(5px); }
.bh-nav--dot a:hover::before, .bh-nav--dot a.is-active::before{ opacity:1; transform:scale(1); }
/* « Surligné » : un fond doux se pose derrière le mot, comme un surligneur.
Remplace l'aplat vif du template chanteur, trop appuyé pour un blog. */
.bh-nav--block a::after{ display:none; }
.bh-nav--block a{
padding:6px 10px; margin:0 -10px; border-radius:999px;
transition:color .2s ease, background-color .2s ease;
}
.bh-nav--block a:hover, .bh-nav--block a.is-active{
color:var(--accent);
background:color-mix(in srgb, var(--accent) 12%, transparent);
}
/* « Trait plein » : le soulignement part du centre vers les deux bords. */
.bh-nav--center a::after{
left:50%; right:50%;
transition:left .24s ease, right .24s ease;
}
.bh-nav--center a:hover::after, .bh-nav--center a.is-active::after{ left:0; right:0; }
/* Outils (recherche, « … », compte) collés à droite : c'est désormais la nav
qui occupe l'espace libre, plus le logo. */
.bh-tools{ display:flex; align-items:center; gap:10px; flex:0 0 auto; margin-left:auto; }
.bh-search{ display:flex; align-items:center; position:relative; }
.bh-search input{
width:170px; height:36px; padding:0 34px 0 13px; font-size:16px; /* 16px : pas de zoom iOS */
background:var(--surface-2); color:var(--text);
border:1px solid var(--line-soft); border-radius:999px;
transition:width .22s ease, border-color .18s;
}
.bh-search input::placeholder{ color:var(--text-faint); }
.bh-search input:focus{ width:230px; outline:none; border-color:var(--accent); }
.bh-search button{
position:absolute; right:4px; width:28px; height:28px; display:grid; place-items:center;
background:none; border:0; cursor:pointer; color:var(--text-faint); border-radius:50%;
}
.bh-search button:hover{ color:var(--accent); }
.bh-mode{
width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
background:var(--surface-2); border:1px solid var(--line-soft); border-radius:50%;
color:var(--text-soft); transition:color .18s, border-color .18s;
}
.bh-mode:hover{ color:var(--accent); border-color:var(--accent); }
.bh-mode .ico-moon{ display:none; }
:root[data-mode="dark"] .bh-mode .ico-sun{ display:none; }
:root[data-mode="dark"] .bh-mode .ico-moon{ display:block; }
/* Même bascule d'icône pour l'entrée du menu « … », où le réglage a été
déplacé. Les deux SVG sont dans le DOM, seul l'affichage change : c'est
instantané, sans recharger d'image. */
#lpMoreMode .ico-moon{ display:none; }
#lpMoreMode .ico-sun{ display:block; flex:0 0 auto; }
:root[data-mode="dark"] #lpMoreMode .ico-sun{ display:none; }
:root[data-mode="dark"] #lpMoreMode .ico-moon{ display:block; flex:0 0 auto; }
.bh-login{
display:inline-flex; align-items:center; gap:7px;
height:36px; padding:0 17px; /* hauteur explicite : alignée sur les icônes */
border-radius:999px; font-size:.84rem; font-weight:600;
background:var(--accent); color:var(--on-accent); white-space:nowrap;
transition:filter .18s;
}
.bh-login:hover{ filter:brightness(1.08); }
/* Variante contour : « Connexion » redevient secondaire dès qu'un bouton
d'inscription plein l'accompagne, sinon deux aplats se disputent l'attention. */
.bh-login--ghost{
background:transparent; color:var(--text);
border:1px solid var(--line); font-weight:500;
}
.bh-login--ghost:hover{ filter:none; border-color:var(--accent); color:var(--accent); }
/* Inscription : bouton icône, action principale du header. */
/* 36px : hauteur commune à TOUS les boutons du header (mode, menu « … »,
notifications, compte). Une seule valeur, sinon la barre paraît bancale. */
.bh-register{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; border-radius:50%; flex:0 0 auto;
background:var(--accent); color:var(--on-accent); transition:filter .18s;
}
/* L'icône est fine et dense : sur le rond d'accent elle paraissait grise. Un
trait légèrement épaissi et une ombre portée très douce la détachent du fond
sans alourdir le bouton. */
.bh-register svg{ stroke-width:2.2; filter:drop-shadow(0 1px 1px rgba(0,0,0,.22)); }
.bh-register:hover{ filter:brightness(1.08); }
/* MOBILE — le bouton « Connexion » débordait à droite : logo, bascule de mode,
menu « … » puis Connexion ne tiennent pas sur 390px de large.
On compresse dans l'ordre du moins utile au plus utile :
1. le nom du blog se tronque plutôt que de pousser le reste (min-width:0 est
indispensable — sans lui, un item flex refuse de descendre sous la taille
de son contenu) ;
2. les écarts et retraits se resserrent ;
3. le libellé « Connexion » cède la place à sa seule icône : l'action reste
reconnaissable, et c'est ce qui prend le plus de largeur. */
@media (max-width:575px){
.bh-inner{ width:100%; padding-inline:14px; gap:10px; height:60px; }
.bh-logo{ min-width:0; overflow:hidden; }
.bh-logo-txt{
font-size:1.12rem;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bh-tools{ gap:7px; flex:0 0 auto; }
.bh-login{ padding:0 12px; gap:0; }
.bh-login .bh-login-txt{ display:none; }
/* Sans libellé, le bouton doit rester une cible confortable au doigt. */
.bh-login{ width:36px; padding:0; justify-content:center; }
}
/* Menu « … » ouvert depuis la BARRE DU BAS (mobile).
Le script le déplace dans pour l'ancrer au-dessus de la barre : il
sort alors de « .bh » et perdait TOUS ses styles — plus de fond, plus
d'empilement, les entrées s'alignaient en ligne. On les lui redonne ici, en
dehors du préfixe .bh. Le positionnement, lui, reste défini par
_blog_bottombar.php. */
.lp-more-menu.lp-more-menu-bb{
padding:6px;
background:var(--surface); border:1px solid var(--line-soft);
border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
}
.lp-more-menu.lp-more-menu-bb.open{ display:flex; flex-direction:column; }
.lp-more-menu-bb .lp-more-item{
display:flex; align-items:center; gap:9px; width:100%; cursor:pointer;
padding:11px; border:0; border-radius:7px; background:transparent;
font-family:inherit; font-size:.9rem; text-align:left;
color:var(--text-soft); text-decoration:none;
}
.lp-more-menu-bb .lp-more-item:hover{ background:var(--surface-2); color:var(--text); }
.lp-more-menu-bb .lp-more-dot{
flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--accent);
}
.lp-more-menu-bb .lp-more-sep{ height:1px; margin:6px 4px; background:var(--line-soft); }
/* Menu « … » repris du socle : son CSS vit dans _lp_header.php, absent des
pages éditoriales qui n'incluent pas ce chrome. On le rhabille donc ici. */
.bh .lp-more{ position:relative; display:inline-flex; }
/* Menu « … » masqué sur grand écran quand le visiteur est CONNECTÉ : ses
entrées (mode d'affichage, Partager, QR Code, À propos) sont alors toutes
dans le menu du compte, à droite. Deux menus superposés répétaient les mêmes
actions et occupaient chacun un bouton de la barre.
Placé JUSTE APRÈS `.bh .lp-more` : même spécificité (0,2,0), donc seul
l'ordre dans le fichier tranche — déclaré plus haut, il était perdant.
Conservé en MOBILE : le menu compte n'y est pas rendu du tout (mesuré,
`.wl-user` absent du DOM sous 760px) et ces actions seraient inaccessibles. */
@media (min-width: 761px){
.bh .lp-more--hide-desktop{ display:none; }
}
.bh .lp-more-btn{
width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
/* Meme apparence que les autres boutons du header (mode, notifications) :
il etait le seul sans fond ni contour, ce qui le faisait flotter. */
background:var(--surface-2); border:1px solid var(--line-soft);
border-radius:50%; color:var(--text-soft);
transition:color .18s, background .18s;
}
/* Survol identique aux autres boutons du header (accent sur texte et contour). */
.bh .lp-more-btn:hover{ color:var(--accent); border-color:var(--accent); }
.bh .lp-more-menu{
position:absolute; right:0; top:calc(100% + 8px); min-width:216px; z-index:70;
display:none; flex-direction:column; padding:6px;
background:var(--surface); border:1px solid var(--line-soft);
border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
}
.bh .lp-more.open .lp-more-menu, .bh .lp-more-menu.open{ display:flex; }
.bh .lp-more-item{
display:flex; align-items:center; gap:9px; width:100%; cursor:pointer;
padding:9px 11px; border:0; border-radius:7px; background:transparent;
font-size:.87rem; text-align:left; color:var(--text-soft);
}
.bh .lp-more-item:hover{ background:var(--surface-2); color:var(--text); }
.bh .lp-more-sep{ height:1px; margin:5px 6px; background:var(--line-soft); }
.bh .lp-more-dot{
width:8px; height:8px; border-radius:50%; background:var(--accent); flex:0 0 8px;
}
/* ---------- Bouton « + » : publier depuis le site ----------
Placé avant la cloche de notifications. Calqué sur .lp-more-menu (mêmes
variables de surface, de trait et d'ombre) pour ne pas introduire un
troisième style de menu déroulant dans le header. */
.wl-pub{ position:relative; display:inline-flex; }
.wl-pub-btn{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; padding:0; cursor:pointer;
border:1px solid var(--line-soft); border-radius:50%;
background:var(--surface); color:var(--text-soft);
transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.wl-pub-btn:hover, .wl-pub.open .wl-pub-btn{
background:var(--accent); border-color:var(--accent); color:#fff;
}
/* Le survol ne doit pas rester « collé » après un appui tactile. */
@media (hover: none), (pointer: coarse){
.wl-pub-btn:hover{ background:var(--surface); border-color:var(--line-soft); color:var(--text-soft); }
.wl-pub.open .wl-pub-btn{ background:var(--accent); border-color:var(--accent); color:#fff; }
}
.wl-pub-menu{
position:absolute; right:0; top:calc(100% + 8px); min-width:206px; z-index:80;
display:none; flex-direction:column; padding:6px;
background:var(--surface); border:1px solid var(--line-soft);
border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
}
.wl-pub.open .wl-pub-menu{ display:flex; }
.wl-pub-title{
padding:6px 11px 7px; font-size:.72rem; font-weight:600;
letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft); opacity:.7;
}
.wl-pub-menu a{
display:flex; align-items:center; gap:9px;
padding:9px 11px; border-radius:7px;
font-size:.87rem; color:var(--text-soft); text-decoration:none;
}
.wl-pub-menu a:hover{ background:var(--surface-2); color:var(--text); }
@media (hover: none), (pointer: coarse){
.wl-pub-menu a:hover{ background:transparent; color:var(--text-soft); }
}
/* ---------- Alignement des conteneurs ----------
Chaque page héritée a son propre conteneur, de largeur différente : .ct-wrap
et .gl-wrap 1400px, .com-wrap et .mc-wrap 1200px, .ag-wrap 1080px… alors que
le header du blog fait --wrap (1180px). Le logo ne démarrait donc pas au même
niveau que le titre de la page ni que les vignettes, et le décalage changeait
d'une page à l'autre. On aligne tout sur la largeur du blog, avec la même
gouttière que .wrap.
Exception : .lk-wrap (620px) et .ctc-wrap (1000px) sont des colonnes de
lecture volontairement étroites — on ne les élargit pas, on les centre
simplement dans la même grille. */
.ct-wrap, .gl-wrap, .com-wrap, .mc-wrap, .ag-wrap, .ab-wrap, .fo-wrap, .act-wrap,
.wl-backbar-inner{
width:min(100% - 40px, var(--wrap)) !important;
max-width:none !important;
margin-inline:auto !important;
padding-left:0 !important;
padding-right:0 !important;
}
/* Décalage vertical hérité du socle : style_lp.css force
`.pub-wrap, .com-wrap { padding-top:180px !important }` pour compenser un
header FIXE sur deux lignes (~141px) — celui du site d'origine. Le blog a un
header STICKY d'une seule ligne (69px mesurés) : ces 180px n'ont donc rien à
compenser et repoussaient le titre à 249px du haut, très bas sous la barre
« Retour », alors que les pages sœurs (galerie, agenda) ouvrent à ~101px.
On revient au même retrait qu'elles.
Limité à .com-wrap : .pub-wrap (pages de publication) est derrière une
connexion, donc non vérifiable ici — on n'y touche pas à l'aveugle. */
.com-wrap{ padding-top:32px !important; }
@media (max-width:960px){
.com-wrap{ padding-top:20px !important; }
}
/* ---------- Rangée de filtres des pages de contenu ----------
Les boutons de catégorie (.ct-filters, marge 18px 0 6px) et la pastille du
filtre actif (.ct-genres, marge 10px 0 24px) sont deux rangées distinctes aux
marges différentes : la pastille « Thématique · Auto » retombait plus bas que
les boutons. On les met sur la MÊME ligne, alignées au centre, et on aère
avant la grille (6px seulement auparavant : les vignettes se collaient). */
.ct-filters, .gl-filters{
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
gap:10px !important;
margin:18px 0 0 !important;
}
.ct-genres{
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
gap:10px !important;
margin:10px 0 26px !important;
}
/* La pastille prend la même hauteur que les boutons de filtre, sinon elle
paraît décalée même alignée au centre. Ses textes étaient en blanc et en
blanc semi-transparent (conçus pour un fond sombre) : le mot « Thématique »
devenait illisible sur le fond clair de la pastille. */
.ct-active-filter{
margin:0 !important;
background:color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
border:1px solid color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
/* Bouton de filtre ACTIF (« Tout ») : le socle applique
« body.pf-light .ct-filter { color:#5a6470 } » — plus spécifique (0-2-1) que
« .ct-filter.active » (0-2-0) — donc le gris du mode clair écrasait le texte
du bouton actif, qui se retrouvait gris sur son fond d'accent, illisible. */
.ct-filter.active, body.pf-light .ct-filter.active,
.gl-filter.active, body.pf-light .gl-filter.active,
.ct-genre.active, body.pf-light .ct-genre.active,
.gl-catf.active, body.pf-light .gl-catf.active,
.gl-genre.active, body.pf-light .gl-genre.active,
.ct-type.active, body.pf-light .ct-type.active{
background:var(--accent) !important;
border-color:var(--accent) !important;
color:#fff !important;
}
.ct-af-label{ color:var(--text) !important; }
.ct-af-label::before{ color:var(--text-soft) !important; }
.ct-af-clear{ color:var(--text-soft) !important; }
.ct-af-clear:hover{ background:var(--accent) !important; color:#fff !important; }
/* ===================================================================
PAGES MÉDIAS — LISIBILITÉ GÉNÉRALE
-------------------------------------------------------------------
Ces pages comptent ~80 classes dont le texte est écrit en blanc ou en
blanc translucide (elles ont été conçues pour un fond sombre). Les
corriger une par une est sans fin : chaque page en ajoute.
On inverse donc la logique — sur le fond clair, tout texte blanc
devient la couleur du thème, SAUF sur les surfaces qui portent leur
propre fond sombre (lecteur vidéo, overlays sur image, modales,
badges, pastilles d'accent), listées en exception ci-dessous.
=================================================================== */
:root[data-mode="light"] .ph-actions,
/* `*` mais PAS les libelles de reaction : ce selecteur universel repeignait en
--text tous les descendants de la barre, y compris le libelle d'une reaction
posee, qui perdait ainsi sa couleur de marque (rouge « love », bleu
« j'aime »…). Mesure a l'appui. */
:root[data-mode="light"] .ph-actions *:not(.reaction-text):not(.reaction-emoji),
:root[data-mode="light"] .ph-desc,
:root[data-mode="light"] .ph-author,
:root[data-mode="light"] .ph-meta-row,
:root[data-mode="light"] .ph-meta-row *,
:root[data-mode="light"] .ph-right,
:root[data-mode="light"] .ph-tag,
:root[data-mode="light"] .ph-tip,
:root[data-mode="light"] .ph-recent-title,
:root[data-mode="light"] .ph-recent-name,
:root[data-mode="light"] .ph-recent-author,
:root[data-mode="light"] .ph-recent-stats,
:root[data-mode="light"] .ph-recent-empty,
:root[data-mode="light"] .ph-recent-toggle,
:root[data-mode="light"] .ph-collab-empty,
:root[data-mode="light"] .ph-collab-msg,
:root[data-mode="light"] .ph-collab-nm,
:root[data-mode="light"] .rvid-title,
:root[data-mode="light"] .rvid-desc,
:root[data-mode="light"] .rvid-hint,
:root[data-mode="light"] .rvid-sres-name,
:root[data-mode="light"] .vm-name,
:root[data-mode="light"] .vm-desc,
:root[data-mode="light"] .vm-meta,
:root[data-mode="light"] .vlp-empty,
:root[data-mode="light"] .vc-author,
:root[data-mode="light"] .vc-meta,
:root[data-mode="light"] .vc-empty-t,
:root[data-mode="light"] .vc-vote-count,
:root[data-mode="light"] .vc-menu-btn,
:root[data-mode="light"] .reactions-count,
:root[data-mode="light"] .reposts-count,
:root[data-mode="light"] .reposts-summary,
:root[data-mode="light"] .vote-stars-block,
:root[data-mode="light"] .oeuvre-info,
:root[data-mode="light"] .oi-awards,
:root[data-mode="light"] .afv-note,
:root[data-mode="light"] .afv-note strong,
:root[data-mode="light"] .info{
color:var(--text) !important;
}
/* Textes secondaires : nuance douce plutôt que le noir plein. */
:root[data-mode="light"] .ph-meta-row,
:root[data-mode="light"] .ph-recent-author,
:root[data-mode="light"] .ph-recent-stats,
:root[data-mode="light"] .vc-meta,
:root[data-mode="light"] .vm-meta,
:root[data-mode="light"] .rvid-hint{
color:var(--text-soft) !important;
}
/* Zone de saisie d'un commentaire : fond sombre d'origine, illisible ici. */
:root[data-mode="light"] .vc-input-wrap,
:root[data-mode="light"] .vc-input,
:root[data-mode="light"] .vc-emoji-search{
background:var(--surface-2) !important;
color:var(--text) !important;
border-color:var(--line-soft) !important;
}
:root[data-mode="light"] .vc-submit-btn{
background:var(--accent) !important; color:#fff !important;
}
/* Titres de section de ces pages (« Commentaires », « À voir également »,
« Photos liées ») : sans couleur propre, ils héritaient du blanc du parent. */
:root[data-mode="light"] .ph-more-title,
:root[data-mode="light"] .rvid-title,
:root[data-mode="light"] .vlp-title,
:root[data-mode="light"] .ph-more-title *{
color:var(--text) !important;
}
/* État vide des commentaires : le sous-texte reste en gris clair (#9aa0a6),
presque invisible sur le fond papier. */
:root[data-mode="light"] .vc-empty-t{ color:var(--text) !important; }
:root[data-mode="light"] .vc-empty-s{ color:var(--text-soft) !important; }
/* ---------- Pages médias (vidéo, audio, photo, album) ----------
Ces pages sont truffées de composants écrits pour un fond sombre (~170
règles de texte blanc). Plutôt que de les corriger une par une, on rhabille
les blocs de surface : les cartes et panneaux reprennent les couleurs du
thème, et leur contenu hérite donc d'un texte lisible.
Les surfaces volontairement sombres (lecteur vidéo, overlays sur image,
modales de partage/signalement) ne sont PAS touchées : elles portent leur
propre fond et doivent garder leur texte blanc. */
.card-video-side, .ph-card, .ph-block, .vd-block, .vd-card,
.lk-panel, .lk-card, .side-card, .rel-card{
background:var(--surface) !important;
border-color:var(--line-soft) !important;
color:var(--text) !important;
}
.card-video-side:hover, .ph-card:hover, .rel-card:hover{
background:var(--surface-2) !important;
border-color:var(--line) !important;
}
/* Titres et libellés de ces blocs : le socle les met en blanc ou en blanc
translucide selon leur niveau hiérarchique. */
.card-video-side *, .ph-card *, .ph-block h2, .ph-block h3,
.vd-block h2, .vd-block h3, .afv-note, .afv-note strong, .bd-mode .bd-desc{
color:inherit !important;
}
.ph-more-btn{
background:var(--accent) !important;
border-color:var(--accent) !important;
color:#fff !important;
}
/* Barre « Retour » : fond blanc opaque et texte clair sur les pages médias. */
.wl-backbar{
background:var(--header-bg, var(--bg)) !important;
border-bottom:1px solid var(--line-soft) !important;
/* Resserrée POUR LE BLOG : la barre partagée prévoit 9px de padding et 22px
de marge basse, pensés pour des templates sans barre de rubriques. Ici
elle s'ajoute à un en-tête de 121px, et le contenu se retrouvait très bas.
Corrigé ici plutôt que dans wl/shared : la barre sert aux 8 templates. */
padding:6px 0 !important;
margin-bottom:8px !important;
}
.wl-back-link, .wl-back-link *{ color:var(--text) !important; }
/* Libellés SOUS les vignettes (galerie, listes de contenus) : écrits en blanc
pour un fond sombre, ils sont invisibles sur le fond papier. Ceux POSÉS SUR
une image (.gl-photo-title, .ct-photo-title, overlays) gardent le blanc :
ils ont un dégradé sombre derrière eux. */
.gl-story-name, .ct-vtitle, .ct-af-label{ color:var(--text) !important; }
.gl-story-name:hover, .ct-vcard:hover .ct-vtitle{ color:var(--accent) !important; }
/* Bouton compte (« Vous ») : style_lp.css lui donne color:#fff sur un fond
blanc translucide rgba(255,255,255,.06) — conçu pour un header sombre, donc
invisible sur le fond papier. Sélecteurs SANS préfixe .bh : le bouton est
rendu par _lp_user_menu.php, hors de mon conteneur .bh sur certaines pages. */
.wl-user-btn{
/* Une seule règle pour ce bouton : fond, dimensions et espacements. Les
valeurs étaient réparties en deux blocs, ce qui a produit un avatar de
26px dans 36px avec 4px de marge — il touchait le bord et le chevron
débordait. Hauteur 36px comme les autres boutons du header, avatar 28px,
et un espacement suffisant de chaque côté. */
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
height:36px !important;
padding:0 12px 0 4px !important;
border-radius:999px !important;
background:var(--surface-2) !important;
border:1px solid var(--line-soft) !important;
color:var(--text) !important;
box-sizing:border-box !important;
}
.wl-user-btn:hover{
background:var(--surface) !important;
border-color:var(--line) !important;
}
.wl-user-name, .wl-user-btn svg, .wl-user-chev{ color:var(--text) !important; }
/* Menu déroulant du compte : mêmes surfaces claires. */
.wl-user-menu{
background:var(--surface) !important;
border:1px solid var(--line-soft) !important;
box-shadow:var(--shadow-lg) !important;
color:var(--text) !important;
}
.wl-menu-me, .wl-menu-me-txt, .wl-menu-me-name,
.wl-user-menu a, .wl-user-menu button, .wl-acc-head, .wl-hub-tile{
color:var(--text) !important;
}
.wl-user-menu a:hover, .wl-user-menu button:hover,
.wl-acc-head:hover, .wl-hub-tile:hover{ background:var(--surface-2) !important; }
.wl-hub-empty, .wl-menu-me-name{ color:var(--text-soft) !important; }
/* La pastille d'avatar garde son fond accent : son initiale reste en blanc. */
.wl-menu-me-av, .wl-menu-me-fb, .wl-avatar-fb{ color:#fff !important; }
/* Cloche de notifications : la vraie classe est .lkh-action-btn (composant natif
lkh-notifications), en color:rgba(255,255,255,.85) sur bordure blanche —
invisible sur fond papier. Ramenée à 36px comme les autres icônes du header. */
.lkh-action-btn{
width:36px !important; height:36px !important;
border-radius:50% !important;
color:var(--text-soft) !important;
background:var(--surface-2) !important;
border:1px solid var(--line-soft) !important;
}
.lkh-action-btn:hover{ color:var(--accent) !important; border-color:var(--accent) !important; }
.lkh-action-btn svg{ color:inherit !important; }
/* Pastille de compteur : garde son fond accent et son chiffre en blanc. */
.lkh-badge{ background:var(--accent) !important; color:#fff !important; }
/* Panneau des notifications : surfaces claires (il est en thème sombre). */
.lkh-notifications-dropdown{
background:var(--surface) !important;
border:1px solid var(--line-soft) !important;
box-shadow:var(--shadow-lg) !important;
color:var(--text) !important;
}
.lkh-notif-title, .lkh-notif-text{ color:var(--text) !important; }
.lkh-notif-sub, .lkh-notif-time, .lkh-notif-mark-all{ color:var(--text-soft) !important; }
.lkh-notif-item{ border-color:var(--line-soft) !important; }
.lkh-notif-item:hover{ background:var(--surface-2) !important; }
/* Bouton compte : 42px de haut contre 36px pour les autres icônes du header,
il dépassait visiblement. Aligné sur la même hauteur. */
/* Avatar : 28px dans un bouton de 36px (bordure comprise) → 3px de respiration
en haut et en bas, sans toucher les bords. */
.wl-user-btn .wl-avatar, .wl-user-btn .wl-avatar-fb{
width:28px !important; height:28px !important;
flex:0 0 28px !important;
border-radius:50% !important;
object-fit:cover !important;
}
.wl-user-name{
font-size:.86rem !important; font-weight:500 !important;
line-height:1 !important; /* évite de gonfler la hauteur */
max-width:110px !important; /* un nom long ne pousse pas le chevron dehors */
overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}
/* Le chevron ne doit jamais être comprimé ni sortir du bouton. */
.wl-user-btn > svg{ flex:0 0 auto !important; margin-left:2px !important; }
/* ===================================================================
HARMONISATION TYPOGRAPHIQUE DES PAGES HÉRITÉES
-------------------------------------------------------------------
Chaque page du socle définit son propre titre en pixels fixes et en
graisse 900 : .ct-head 24px, .ag-head 26px, .gl-head 28px, .od-head
30px, .mc-head 32px, .ag-head 34px… Le titre changeait donc de taille
d'une page à l'autre, et détonnait face aux titres éditoriaux (serif,
graisse 600, échelle fluide).
On aligne ici tous ces titres sur la même échelle que .b-sec-head h2,
sans toucher aux 33 fichiers. Sélecteurs listés explicitement plutôt
qu'un `h1` global, pour ne pas déborder sur d'autres composants.
=================================================================== */
.ab-head h1, .act-head h1, .ag-head h1, .com-head h1, .ct-head h1,
.fo-head h1, .gl-head h1, .mc-head h1, .od-head h1, .ct-head h2,
/* Titres de page portant leur classe directement sur le
. Liste des h1
RÉELLEMENT utilisés dans les pages — on ne touche pas aux titres de
composants (.card-title, .dj-track-title… à 13-15px), qui doivent rester
petits : les harmoniser casserait les grilles de cartes. */
h1.al-title, h1.au-title, h1.bd-title, h1.ctc-title, h1.ef-title,
h1.ev-title, h1.fo-title, h1.lk-title, h1.oe-title, h1.ph-title,
h1.sv-title, h1.tk-title, h1.up-title{
font-family:var(--font-title) !important;
font-size:clamp(1.6rem, 3vw, 2.1rem) !important;
font-weight:600 !important;
line-height:1.15 !important;
letter-spacing:-.01em !important;
color:var(--text) !important;
}
/* Sous-titres / accroches de ces mêmes en-têtes : même corps de texte
que le reste du site, au lieu de 12,5-14px selon la page. */
.ab-head p, .act-head p, .ag-head p, .com-head p, .ct-head p,
.fo-head p, .gl-head p, .mc-head p, .od-head p{
font-family:var(--font) !important;
font-size:1rem !important;
color:var(--text-soft) !important;
}
/* ---------- Formulaire de contact (page héritée) ----------
Ses styles sont écrits pour un fond sombre : encadré en rgba(255,255,255,.03)
et bordures blanches translucides, donc quasi invisibles sur fond papier.
On le rhabille sur les surfaces du thème (les deux modes restent servis). */
.ctc-form-box{
background:var(--surface) !important;
border:1px solid var(--line-soft) !important;
box-shadow:var(--shadow);
}
.ctc-form-title{ font-family:var(--font-title); color:var(--text); }
.ctc-f label{ color:var(--text-soft) !important; }
.ctc-f input, .ctc-f textarea, .ctc-captcha input{
background:var(--bg) !important;
color:var(--text) !important;
border:1px solid var(--line) !important;
font-family:var(--font);
font-size:16px; /* 16px minimum : évite le zoom au focus sur iOS */
}
.ctc-f input::placeholder, .ctc-f textarea::placeholder{ color:var(--text-faint) !important; }
.ctc-f input:focus, .ctc-f textarea:focus{ border-color:var(--accent) !important; outline:none; }
/* Bouton d'envoi : pleine largeur en aplat, il écrasait la page. On le ramène
à la taille des autres boutons du blog, aligné à droite du formulaire. */
.ctc-submit{
width:auto !important;
min-width:200px;
display:block;
margin-left:auto; /* aligné à droite, fin de formulaire */
padding:13px 30px !important;
border-radius:999px !important; /* même forme que les boutons .b-btn */
background:var(--accent) !important;
border:1px solid var(--accent) !important;
color:var(--on-accent) !important;
font-family:var(--font) !important;
font-size:.95rem !important;
font-weight:600 !important;
text-transform:none !important;
letter-spacing:0 !important;
}
.ctc-submit:hover{ background:transparent !important; color:var(--accent) !important; }
@media (max-width:600px){
/* Sur mobile, la pleine largeur redevient la bonne cible tactile. */
.ctc-submit{ width:100% !important; margin-left:0; }
}
/* Vérification anti-spam : le calcul était écrit en color:#fff, donc blanc sur
blanc — invisible sur le thème clair. */
.ctc-captcha{
background:var(--surface-2) !important;
border:1px solid var(--line-soft) !important;
}
.ctc-captcha-q{ color:var(--text) !important; font-family:var(--font) !important; }
.ctc-captcha-new{
color:var(--text-soft) !important;
border-color:var(--line) !important;
}
.ctc-captcha-new:hover{ color:var(--accent) !important; border-color:var(--accent) !important; }
/* Consentement RGPD : .ctc-f label{display:block} (déclaré après, même
spécificité) écrasait le display:flex de .ctc-rgpd — la case passait donc
AU-DESSUS du texte au lieu d'être devant. On rétablit la ligne. */
label.ctc-rgpd{
display:flex !important;
align-items:flex-start;
gap:10px;
color:var(--text-soft) !important;
font-size:.85rem !important;
font-weight:400 !important;
text-transform:none !important; /* était en capitales, illisible sur 2 lignes */
letter-spacing:0 !important;
line-height:1.5;
margin-bottom:0 !important;
}
label.ctc-rgpd input{ accent-color:var(--accent); margin-top:2px; flex:0 0 auto; }
.ctc-card, .ctc-cap-q{ background:var(--surface-2); border:1px solid var(--line-soft); color:var(--text); }
.ctc-card-lbl{ color:var(--text-faint); }
.ctc-card-val, .ctc-card-val a{ color:var(--text); }
.ctc-sub{ color:var(--text-soft); }
/* Modale QR code (créée à la volée par blog.js depuis le menu « … »). */
.blog-qr{
position:fixed; inset:0; z-index:200; display:none;
align-items:center; justify-content:center; padding:20px;
background:rgba(0,0,0,.55);
}
.blog-qr.open{ display:flex; }
.blog-qr-box{
background:var(--surface); color:var(--text); text-align:center;
padding:26px; border-radius:var(--radius); box-shadow:var(--shadow-lg);
max-width:320px; width:100%;
}
.blog-qr-title{ font-family:var(--font-title); font-size:1.1rem; margin-bottom:16px; }
.blog-qr-box canvas, .blog-qr-box img{ margin:0 auto 16px; }
/* Repli texte quand la lib n'a pas pu être chargée : l'URL doit rester lisible. */
#blogQrTarget{ font-size:.8rem; word-break:break-all; color:var(--text-soft); }
.bh-burger{ display:none; width:38px; height:38px; background:none; border:0; cursor:pointer;
flex-direction:column; justify-content:center; gap:5px; padding:0; }
.bh-burger span{ display:block; height:2px; width:20px; background:var(--text); border-radius:2px; margin-inline:auto; }
/* Barre des rubriques */
.bh-rubriques{ border-top:1px solid var(--line-soft); background:var(--bg); }
.bh-rub-inner{
width:min(100% - 40px, var(--wrap)); margin-inline:auto;
display:flex; gap:8px; align-items:center; overflow-x:auto; padding:9px 0;
scrollbar-width:none;
}
.bh-rub-inner::-webkit-scrollbar{ display:none; }
/* Mobile : la bande de rubriques défile déjà, mais sa largeur bornée
(100% - 40px) la coupait net à 20px du bord — on ne voyait pas qu'il y avait
la suite. Elle va maintenant jusqu'aux bords, avec un retrait intérieur : le
dernier élément se devine, ce qui invite à faire glisser. */
@media (max-width:767px){
.bh-rub-inner{
width:100%;
padding-left:20px; padding-right:20px;
scroll-padding-left:20px;
-webkit-overflow-scrolling:touch;
}
}
.bh-rub-inner a{
display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
font-size:.79rem; font-weight:500; letter-spacing:.02em; text-transform:uppercase;
color:var(--text-soft); padding:5px 13px; border-radius:999px;
border:1px solid var(--line-soft); transition:.18s;
}
.bh-rub-inner a:hover{ color:var(--text); border-color:var(--line); }
/* !important : « .bh a:not(…) » (0,2,0, plus haut dans la feuille) impose
color:inherit à tous les liens du header. La rubrique active héritait donc du
texte du header — mesuré à rgb(22,21,15) sur l'aplat d'accent, soit 2,65:1,
illisible. Une exclusion de plus dans ce sélecteur déjà chargé le rendrait
illisible ; ici la déclaration est locale et se lit d'un coup d'œil. */
.bh-rub-inner a.is-active{ background:var(--accent); border-color:var(--accent);
color:var(--on-accent) !important; }
.bh-rub-n{ font-size:.7rem; opacity:.6; }
/* Nav transparente posée sur le hero (accueil) */
.bh--transp{ background:transparent; border-bottom-color:transparent; backdrop-filter:none; }
.bh--transp.is-stuck{ background:var(--header-bg); backdrop-filter:saturate(180%) blur(14px);
border-bottom-color:var(--line-soft); }
/* =============================== HERO ACCUEIL =============================
Bandeau d'en-tête du blog : image de fond + textes, réglés par le titulaire.
Sans image, il reste un bloc typographique sobre sur le fond papier — donc
présentable dès la création du site, avant toute configuration.
========================================================================= */
.bhero{
position:relative;
padding:74px 0 66px;
background:var(--bg-alt);
border-bottom:1px solid var(--line-soft);
overflow:hidden;
}
.bhero--img{
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-bottom:0;
padding:120px 0 110px;
}
/* Voile sombre SOUS le texte quand il y a une image : garantit la lisibilité
quelle que soit la photo choisie (claire, chargée, contrastée). */
.bhero-veil{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.62) 100%);
}
.bhero-inner{ position:relative; z-index:1; max-width:760px; }
/* Position du bloc de texte dans le hero, réglée depuis le panneau
« Apparence ». La largeur de lecture (760px) est conservée dans les trois
cas : c'est elle qui rend le titre lisible, seul l'ancrage change. */
/* .bhero-cta est un
: text-align suffit à replacer le bouton, inutile de
le passer en flex. */
/* Deux boutons désormais (« Lire les articles » + « S'abonner ») : un espace
entre eux, et un retour à la ligne propre sur petit écran. */
.bhero-cta > * + *{ margin-left:10px; }
.bhero-sub{ cursor:pointer; font-family:inherit; }
/* Abonné : bouton discret, l'action principale reste la lecture. */
.bhero-sub.is-on{
background:color-mix(in srgb, var(--accent) 10%, transparent);
border-color:color-mix(in srgb, var(--accent) 32%, transparent);
color:var(--accent);
}
.bhero-sub[disabled]{ opacity:.55; cursor:default; }
/* « C'est votre site » : le titulaire voit le bouton pour juger son rendu, sans
pouvoir s'abonner. On reste TRÈS peu transparent (.92) — à .55 le bouton
paraissait délavé et ne montrait plus la couleur réelle vue par le public. */
.bhero-sub.is-own[disabled], .b-share-btn.is-own[disabled]{ opacity:.92; cursor:default; }
.b-share-btn.is-own[disabled]{ pointer-events:none; }
@media (max-width:520px){
.bhero-cta > *{ display:inline-flex; margin:4px 5px 0 0 !important; }
}
/* Le conteneur garde TOUJOURS la largeur de page (1180px, centrée par .wrap).
C'est le BLOC DE TEXTE, borné à 760px pour rester lisible, qu'on déplace à
l'intérieur — via ses marges automatiques.
Deux raisons de procéder ainsi plutôt qu'en redimensionnant le conteneur :
.wrap pose déjà margin-inline:auto (une règle de même spécificité serait
annulée), et le hero est devenu un conteneur flex pour la position verticale,
ce qui change la façon dont un item à largeur bornée se place. */
.bhero-inner.wrap{ width:min(100% - 40px, var(--wrap)); max-width:none; }
.bhero-inner.wrap > *{ max-width:760px; }
/* « !important » à contrecœur, mais nécessaire : .bhero-title est déclaré PLUS
BAS dans le fichier avec « margin:14px 0 16px », dont les 0 latéraux
écrasaient le centrage. Déplacer la règle serait fragile — la prochaine
retouche du titre casserait à nouveau le centrage sans que rien ne l'indique.
Les marges VERTICALES de chaque élément restent les siennes : on ne touche
qu'aux marges latérales. */
.bhero--center .bhero-inner.wrap{ text-align:center; }
.bhero--center .bhero-inner.wrap > *{ margin-left:auto !important; margin-right:auto !important; }
.bhero--right .bhero-inner.wrap{ text-align:right; }
.bhero--right .bhero-inner.wrap > *{ margin-left:auto !important; margin-right:0 !important; }
/* Sur mobile, le hero est déjà étroit : un texte aligné à droite y serait
illisible, on revient à gauche. Le centré, lui, reste pertinent. */
@media (max-width:575px){
.bhero--right .bhero-inner.wrap{ text-align:left; }
.bhero--right .bhero-inner.wrap > *{ margin-left:0 !important; }
}
/* POSITION VERTICALE du bloc de texte (curseur haut/bas du panneau
« Apparence »). Deux entretoises souples encadrent le texte : leur rapport
de flexibilité place le bloc où on veut, sans marge calculée.
Uniquement quand le hero porte une IMAGE : sans elle, il s'ajuste à son
contenu et il n'y a aucun espace où déplacer quoi que ce soit. */
.bhero--img.bhero--vpos{
display:flex; flex-direction:column;
min-height:clamp(360px, 62vh, 620px);
padding-top:28px; padding-bottom:28px;
}
/* Le hero est un conteneur flex quand la position verticale est active :
.bhero-inner y devient un ITEM, qu'on recentre explicitement. */
.bhero--vpos .bhero-inner.wrap{ align-self:center; }
.bhero--vpos .bhero-spacer-top{ flex:var(--bhero-vpos, 50) 1 0; min-height:0; }
.bhero--vpos .bhero-spacer-bottom{ flex:calc(100 - var(--bhero-vpos, 50)) 1 0; min-height:0; }
/* Le voile couvre toute la surface : il est en position absolue, hors du flux
des entretoises. */
.bhero--vpos .bhero-veil{ position:absolute; inset:0; }
.bhero-title{
font-size:clamp(2.1rem, 5vw, 3.6rem);
margin:14px 0 16px;
color:var(--text);
}
.bhero-text{
font-size:1.1rem;
line-height:1.6;
color:var(--text-soft);
margin-bottom:22px;
max-width:620px;
}
/* Sur image : textes en blanc, l'accent seul ne suffirait pas à ressortir. */
.bhero--img .bhero-title{ color:#fff; }
.bhero--img .bhero-text{ color:rgba(255,255,255,.9); }
.bhero--img .bhero-eyebrow{ color:#fff; }
.bhero--img .b-btn{
background:#fff; border-color:#fff; color:#111;
}
.bhero--img .b-btn:hover{ background:transparent; color:#fff; }
/* Édition inline (titulaire uniquement) */
[data-hero-edit]{ cursor:text; border-radius:5px; transition:background .15s, box-shadow .15s; }
[data-hero-edit]:hover{ box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
[data-hero-edit]:focus{ outline:none; box-shadow:0 0 0 2px var(--accent); }
.bhero-admin{
display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:24px;
padding-top:18px; border-top:1px dashed var(--line);
}
.bhero--img .bhero-admin{ border-top-color:rgba(255,255,255,.3); }
.bhero-admin-btn{
cursor:pointer; padding:8px 15px; border-radius:999px; font-size:.83rem; font-weight:500;
background:var(--surface); color:var(--text);
border:1px solid var(--line); transition:.18s;
}
.bhero-admin-btn:hover{ border-color:var(--accent); color:var(--accent); }
.bhero-admin-hint{ font-size:.8rem; color:var(--text-faint); }
.bhero--img .bhero-admin-hint{ color:rgba(255,255,255,.75); }
/* Modale « choisir une image de ma bibliothèque » pour le bandeau d'accueil.
Construite à la volée au premier clic : les visiteurs, qui ne voient jamais
ce bouton, n'ont pas à porter ce balisage. */
.bhl-ov{
position:fixed; inset:0; z-index:9000; display:none; place-items:center;
padding:16px; background:rgba(0,0,0,.55);
}
.bhl-ov.open{ display:grid; }
.bhl-box{
background:var(--surface); border:1px solid var(--line-soft);
border-radius:var(--radius); width:min(100%, 680px); max-height:86vh;
display:flex; flex-direction:column; overflow:hidden;
box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.bhl-head{
display:flex; align-items:center; justify-content:space-between;
padding:15px 18px; border-bottom:1px solid var(--line-soft);
}
.bhl-close{
background:none; border:0; font-size:1.5rem; line-height:1;
color:var(--text-faint); cursor:pointer;
}
.bhl-close:hover{ color:var(--accent); }
.bhl-tools{ padding:14px 18px 0; }
.bhl-search{
width:100%; padding:9px 13px; font:inherit; font-size:.9rem;
background:var(--bg); color:var(--text);
border:1px solid var(--line); border-radius:var(--radius-sm);
}
.bhl-search:focus{ outline:none; border-color:var(--accent); }
.bhl-grid{
padding:14px 18px 18px; overflow-y:auto; display:grid;
grid-template-columns:repeat(auto-fill, minmax(124px, 1fr)); gap:10px;
}
/* Hauteur fixe : les photos ont des formats variés, un ratio seul laisserait
des vignettes de tailles inégales. */
.bhl-tile{
height:88px; border:2px solid transparent; border-radius:var(--radius-sm);
background:var(--surface-2) center/cover no-repeat; cursor:pointer; padding:0;
transition:border-color .15s;
}
.bhl-tile:hover{ border-color:var(--accent); }
.bhl-load{ padding:0 18px 16px; font-size:.85rem; color:var(--text-faint); }
/* Textes modifiables du hero : rien ne signalait qu'on pouvait cliquer dessus.
Seul le titulaire voit ces éléments (l'attribut n'est posé que pour lui),
donc le repère ne gêne aucun visiteur.
Le fond et le pointillé n'apparaissent qu'au survol : hors survol, le hero
reste exactement tel que le public le voit. */
[data-hero-edit]{
position:relative;
cursor:text;
border-radius:6px;
transition:background .15s ease, box-shadow .15s ease;
}
[data-hero-edit]:hover{
background:rgba(228,0,70,.06);
box-shadow:0 0 0 2px rgba(228,0,70,.28), 0 0 0 5px rgba(228,0,70,.08);
}
/* Crayon au survol, hors du flux pour ne pas décaler le texte. */
[data-hero-edit]:hover::after{
content:"✎";
position:absolute; top:-9px; right:-9px;
width:22px; height:22px;
display:grid; place-items:center;
font-size:11px; line-height:1;
color:#fff; background:var(--accent);
border-radius:50%;
box-shadow:0 2px 6px rgba(0,0,0,.22);
pointer-events:none;
}
/* Pendant la saisie : cadre franc, plus de crayon (le geste est engagé). */
[data-hero-edit]:focus{
outline:none;
background:rgba(228,0,70,.05);
box-shadow:0 0 0 2px var(--accent);
}
[data-hero-edit]:focus::after{ content:none; }
/* Sur une image de fond, le voile rouge se voit mal : on éclaircit. */
.bhero--img [data-hero-edit]:hover{ background:rgba(255,255,255,.14); }
.bhero--img [data-hero-edit]:focus{ background:rgba(255,255,255,.12); }
/* Écran tactile : pas de survol, le repère resterait affiché en permanence. */
@media (hover:none){
[data-hero-edit]:hover{ background:none; box-shadow:none; }
[data-hero-edit]:hover::after{ content:none; }
}
@media (max-width:760px){
.bhero{ padding:46px 0 40px; }
.bhero--img{ padding:80px 0 70px; }
.bhero-text{ font-size:1rem; }
}
/* =============================== ACCUEIL =============================== */
.b-hero{ padding:56px 0 12px; }
.b-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:46px; align-items:center; }
.b-hero-media{ position:relative; border-radius:var(--radius); overflow:hidden;
background:var(--surface-2); box-shadow:var(--shadow-lg); aspect-ratio:16/10; }
.b-hero-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.b-hero:hover .b-hero-media img{ transform:scale(1.03); }
/* Titre de l'article à la une. Le plafond était à 3.4rem (~54px sur grand
écran) : c'est une taille de titre de PAGE, trop lourde pour le titre d'un
article dans une liste. Réduit d'environ 15 %, la hiérarchie avec le reste
de la page reste nette. */
.b-hero h1{ font-size:clamp(1.8rem, 3.6vw, 2.9rem); margin:14px 0 16px; line-height:1.18; }
.b-hero .b-exc{ font-size:1.06rem; color:var(--text-soft); margin-bottom:20px; }
/* Sur-titre de section. Pas de trait décoratif avant le texte : il alourdissait
chaque en-tête sans rien apporter à la lecture. */
.b-eyebrow{
display:inline-flex; align-items:center;
font-family:var(--font); font-size:.74rem; font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
/* Titre de section */
.b-sec{ padding:52px 0; }
.b-sec--alt{ background:var(--bg-alt); }
/* ---- Apparition au défilement -------------------------------------------
Chaque section monte de quelques pixels en se révélant quand elle entre dans
l'écran. Volontairement DISCRET : sur un blog, on vient lire — une animation
trop marquée fatigue au bout de trois sections.
L'état masqué n'est posé QUE si le JS a pris la main (.js-reveal sur ).
Sans cette précaution, une page dont le script échoue resterait
définitivement vide. */
.js-reveal [data-reveal]{
opacity:0;
transform:translateY(18px);
transition:opacity .6s cubic-bezier(.22,.61,.36,1),
transform .6s cubic-bezier(.22,.61,.36,1);
}
.js-reveal [data-reveal].is-in{ opacity:1; transform:none; }
/* Les cartes d'une grille arrivent en cascade : le décalage est porté par une
variable posée en JS, plutôt que par des sélecteurs :nth-child en dur. */
.js-reveal [data-reveal]{ transition-delay:var(--reveal-delay, 0s); }
/* Réglage système « animations réduites » : on respecte le choix de la
personne, tout s'affiche d'emblée. */
@media (prefers-reduced-motion:reduce){
.js-reveal [data-reveal]{
opacity:1; transform:none; transition:none;
}
}
.b-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
margin-bottom:28px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.b-sec-head h2{ font-size:clamp(1.5rem, 2.6vw, 2rem); margin-top:6px; }
.b-sec-link{ font-size:.86rem; font-weight:600; color:var(--accent); white-space:nowrap; }
.b-sec-link:hover{ text-decoration:underline; text-underline-offset:3px; }
/* ---------- Grille d'articles ---------- */
.b-grid{ display:grid; gap:30px; grid-template-columns:repeat(3, 1fr); }
.b-grid--2{ grid-template-columns:repeat(2, 1fr); }
.b-card{ display:flex; flex-direction:column; min-width:0; }
.b-card-media{
position:relative; border-radius:var(--radius-sm); overflow:hidden;
background:var(--surface-2); aspect-ratio:16/10; margin-bottom:14px;
}
.b-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.b-card:hover .b-card-media img{ transform:scale(1.04); }
.b-card-cat{
position:absolute; left:10px; top:10px; z-index:2;
font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
background:var(--accent); color:var(--on-accent); padding:4px 10px; border-radius:999px;
}
.b-card h3{ font-size:1.14rem; margin-bottom:8px; transition:color .18s; }
.b-card:hover h3{ color:var(--accent); }
.b-card p{ font-size:.92rem; color:var(--text-soft); margin-bottom:10px; }
.b-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px;
font-size:.78rem; color:var(--text-faint); margin-top:auto; }
.b-meta .dot{ opacity:.5; }
/* Placeholder quand un article n'a pas de couverture : initiale sur aplat. */
.b-ph{ width:100%; height:100%; display:grid; place-items:center;
background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), var(--surface-2)); }
.b-ph span{ font-family:var(--font-title); font-size:2.4rem; font-weight:700;
color:color-mix(in srgb, var(--accent) 70%, var(--text)); opacity:.55; }
/* Liste compacte (colonne latérale, « à lire aussi ») */
.b-list{ display:flex; flex-direction:column; gap:18px; }
.b-li{ display:flex; gap:14px; align-items:flex-start; }
.b-li-media{ flex:0 0 88px; aspect-ratio:1/1; border-radius:var(--radius-sm);
overflow:hidden; background:var(--surface-2); }
.b-li-media img{ width:100%; height:100%; object-fit:cover; }
.b-li h4{ font-size:.98rem; margin-bottom:5px; }
.b-li:hover h4{ color:var(--accent); }
/* ---------- Rubriques (cartes) ---------- */
.b-rubs{ display:grid; gap:16px; grid-template-columns:repeat(4, 1fr); }
.b-rub{
padding:22px 20px; border-radius:var(--radius); background:var(--surface);
border:1px solid var(--line-soft); box-shadow:var(--shadow); transition:.22s;
}
.b-rub:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.b-rub-name{ font-family:var(--font-title); font-size:1.16rem; font-weight:600; margin-bottom:4px; }
.b-rub-count{ font-size:.8rem; color:var(--text-faint); }
/* =============================== ARTICLE =============================== */
.b-art{ padding:44px 0 60px; }
.b-art-head{ width:min(100% - 40px, var(--read)); margin-inline:auto; text-align:center; }
.b-art-head h1{ font-size:clamp(2rem, 4.6vw, 3.1rem); margin:14px 0 18px; }
.b-art-lede{ font-size:1.12rem; color:var(--text-soft); margin-bottom:22px; }
.b-art-meta{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px;
font-size:.85rem; color:var(--text-faint); padding-bottom:26px; }
.b-art-author{ display:inline-flex; align-items:center; gap:9px; }
/* 15px : l'avatar accompagne une ligne de métadonnées (date, durée de lecture,
vues), il ne doit pas la dominer. */
.b-art-author img{ width:15px; height:15px; border-radius:50%; object-fit:cover; }
.b-art-author strong{ color:var(--text); font-weight:600; }
/* Couverture d'article : le conteneur est centré, mais une image plus étroite
que lui (affiche de film verticale, portrait…) se calait à gauche en laissant
un vide à droite. On centre donc l'IMAGE elle-même dans le cadre, et on borne
sa hauteur pour qu'un format vertical n'occupe pas tout l'écran. */
.b-art-cover{
position:relative;
width:min(100% - 40px, 1000px); margin:0 auto 40px;
display:flex; justify-content:center; align-items:center;
border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);
background:var(--surface-2);
}
/* Fond flouté : la même image, agrandie et défocalisée, remplit l'espace
laissé par un format vertical. Plus élégant qu'un aplat, et l'ambiance
colorimétrique de la photo est conservée. La mise à l'échelle évite que le
flou laisse apparaître des bords transparents. */
.b-art-cover-bg{
position:absolute; inset:0; z-index:0;
background-image:var(--cover);
background-size:cover;
background-position:center;
filter:blur(28px) saturate(140%);
transform:scale(1.15);
opacity:.55;
}
:root[data-mode="dark"] .b-art-cover-bg{ opacity:.4; }
.b-art-cover img{
position:relative; z-index:1; /* au-dessus du fond flouté */
display:block;
max-width:100%;
max-height:78vh; /* une affiche verticale reste visible d'un coup d'œil */
width:auto; height:auto;
object-fit:contain;
margin-inline:auto;
}
@media (prefers-reduced-motion:reduce){
/* Le flou est un effet décoratif : on l'atténue pour les personnes qui
demandent une interface plus sobre. */
.b-art-cover-bg{ filter:blur(18px); transform:none; }
}
/* Corps de l'article : largeur de lecture, typographie confortable. */
.b-art-body{ width:min(100% - 40px, var(--read)); margin-inline:auto; font-size:1.09rem; line-height:1.78; }
.b-art-body > *{ margin-bottom:1.25em; }
.b-art-body h2{ font-size:1.7rem; margin:1.9em 0 .6em; }
.b-art-body h3{ font-size:1.32rem; margin:1.6em 0 .5em; }
.b-art-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.b-art-body img{ border-radius:var(--radius-sm); margin-inline:auto; }
.b-art-body figure{ margin:1.8em 0; }
.b-art-body figcaption{ font-size:.85rem; color:var(--text-faint); text-align:center; margin-top:8px; }
.b-art-body blockquote{
margin:1.8em 0; padding:4px 0 4px 22px; border-left:3px solid var(--accent);
font-family:var(--font-title); font-size:1.24rem; font-style:italic; color:var(--text);
}
.b-art-body ul,.b-art-body ol{ padding-left:1.3em; }
.b-art-body li{ margin-bottom:.5em; }
.b-art-body hr{ border:0; border-top:1px solid var(--line); margin:2.4em 0; }
.b-art-body code{ background:var(--surface-2); padding:2px 6px; border-radius:5px; font-size:.9em; }
.b-art-body pre{ background:var(--surface-2); padding:16px 18px; border-radius:var(--radius-sm);
overflow-x:auto; font-size:.9rem; }
.b-art-body table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.b-art-body th,.b-art-body td{ border:1px solid var(--line-soft); padding:8px 10px; text-align:left; }
/* Tableaux/blocs larges : ils défilent dans leur conteneur, jamais la page. */
.b-scroll-x{ overflow-x:auto; }
/* Tags de l'article */
.b-tags{ width:min(100% - 40px, var(--read)); margin:34px auto 0; display:flex; flex-wrap:wrap; gap:8px; }
.b-tag{ font-size:.78rem; color:var(--text-soft); background:var(--surface-2);
border:1px solid var(--line-soft); padding:5px 12px; border-radius:999px; }
.b-tag:hover{ border-color:var(--accent); color:var(--accent); }
/* --- Sélection des contenus d'une section, depuis l'accueil ---------------
Réservé au titulaire : ces commandes ne sont rendues que pour lui. Le bouton
de retrait n'apparaît qu'au survol de la carte, pour ne pas encombrer une
page qu'il consulte aussi en simple lecteur. */
.b-sec-del{ position:absolute; top:8px; right:8px; z-index:3;
width:26px; height:26px; display:grid; place-items:center;
border:0; border-radius:50%; cursor:pointer;
background:rgba(15,17,19,.72); color:#fff; font-size:15px; line-height:1;
opacity:0; transform:scale(.9); transition:opacity .15s, transform .15s, background .15s; }
.b-card:hover .b-sec-del{ opacity:1; transform:none; }
.b-sec-del:hover{ background:var(--accent); }
.b-sec-del:focus-visible{ opacity:1; transform:none; outline:2px solid var(--accent); }
/* Sur écran tactile, sans survol, le bouton resterait invisible. */
@media (hover:none){ .b-sec-del{ opacity:1; transform:none; } }
/* Commande d'édition dans l'en-tête de section, à côté du lien « Voir tout ».
Discrète : c'est un outil du titulaire sur une page qu'il consulte aussi en
simple lecteur. */
.b-sec-tools{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.b-sec-addbtn{ display:inline-flex; align-items:center; gap:6px;
padding:6px 13px; border-radius:999px; cursor:pointer;
background:var(--surface-2); border:1px solid var(--line);
color:var(--text-soft); font:inherit; font-size:.82rem; font-weight:600;
white-space:nowrap; transition:border-color .15s, color .15s; }
.b-sec-addbtn:hover{ border-color:var(--accent); color:var(--accent); }
.b-sec-addbtn span{ font-size:1rem; line-height:1; }
.b-sec-empty{ margin:0 0 18px; font-size:.9rem; color:var(--text-faint); }
/* ---------- Cartes fantômes d'une section vide (titulaire seulement) -------
Montrent l'emplacement et le format des contenus à venir, et ouvrent le
sélecteur au clic. Volontairement discrètes : ce sont des emplacements, pas
du contenu — elles ne doivent pas se confondre avec de vraies cartes. */
.b-grid--ghost{ margin-bottom:14px; }
.b-card--ghost{
display:block; width:100%; text-align:left; cursor:pointer;
padding:0; border:0; background:none; font-family:inherit;
}
.b-ghost-media{
display:flex; align-items:center; justify-content:center;
aspect-ratio:16/10; border-radius:var(--radius-sm);
background:var(--surface-2);
border:1px dashed var(--line);
transition:border-color .18s, background .18s;
}
.b-ghost-plus{ font-size:1.6rem; font-weight:300; color:var(--text-faint); line-height:1; }
.b-card--ghost:hover .b-ghost-media{ border-color:var(--accent); background:var(--surface); }
.b-card--ghost:hover .b-ghost-plus{ color:var(--accent); }
/* Traits qui figurent le titre et la ligne de métadonnées. */
.b-ghost-line{
display:block; height:9px; margin-top:11px; border-radius:4px;
background:var(--surface-2); width:82%;
}
.b-ghost-line--short{ width:46%; height:7px; margin-top:7px; }
.b-sec-hidebtn{ background:none; border:0; padding:0; cursor:pointer; font:inherit;
font-size:.8rem; color:var(--text-faint); text-decoration:underline;
text-underline-offset:3px; white-space:nowrap; }
.b-sec-hidebtn:hover{ color:var(--accent); }
.b-sec-hidewrap{ margin:18px 0 0; text-align:center; }
/* Bouton de choix de la une : sous le sur-titre, dans le hero. */
.b-une-pick{ margin:10px 0 4px; }
/* Sélecteur de contenus (fenêtre) */
.b-secpick{ position:fixed; inset:0; z-index:1200; display:none;
align-items:center; justify-content:center; padding:20px;
background:rgba(15,17,19,.55); }
.b-secpick.open{ display:flex; }
.b-secpick-box{ display:flex; flex-direction:column; width:min(720px,100%); max-height:82vh;
background:var(--surface); border-radius:var(--radius); overflow:hidden;
box-shadow:0 24px 60px rgba(0,0,0,.3); }
.b-secpick-head{ display:flex; align-items:center; justify-content:space-between;
gap:12px; padding:14px 18px; border-bottom:1px solid var(--line-soft); }
.b-secpick-close{ border:0; background:none; font-size:20px; line-height:1;
color:var(--text-faint); cursor:pointer; padding:2px 6px; }
.b-secpick-close:hover{ color:var(--text); }
.b-secpick-search{ padding:12px 18px 0; }
.b-secpick-search input{ width:100%; padding:9px 12px; font-size:16px; font-family:inherit;
background:var(--bg); color:var(--text);
border:1px solid var(--line); border-radius:var(--radius-sm); box-sizing:border-box; }
.b-secpick-search input:focus{ outline:none; border-color:var(--accent); }
.b-secpick-body{ flex:1; overflow-y:auto; padding:14px 18px;
display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.b-secpick-item{ cursor:pointer; border:2px solid transparent; border-radius:var(--radius-sm);
padding:4px; background:none; text-align:left; font:inherit; color:inherit; }
.b-secpick-item.is-sel{ border-color:var(--accent); }
.b-secpick-item.is-in{ opacity:.45; cursor:default; }
.b-secpick-item img{ width:100%; aspect-ratio:16/10; object-fit:cover;
border-radius:calc(var(--radius-sm) - 2px); display:block; background:var(--surface-2); }
.b-secpick-item span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden; margin-top:6px; font-size:.8rem; line-height:1.3; }
.b-secpick-foot{ display:flex; align-items:center; justify-content:space-between;
gap:12px; padding:12px 18px; border-top:1px solid var(--line-soft); }
.b-secpick-count{ font-size:.85rem; color:var(--text-faint); }
.b-secpick-empty{ grid-column:1/-1; padding:26px 0; text-align:center;
color:var(--text-faint); font-size:.9rem; }
/* Contenus liés à l'article : vidéos, photos ou podcasts rattachés par
l'auteur. Même largeur de lecture que le corps du texte, pour rester dans
la colonne éditoriale. */
.b-linked{ width:min(100% - 40px, var(--read)); margin:40px auto 0;
padding-top:26px; border-top:1px solid var(--line-soft); }
.b-linked-title{ font-size:1.05rem; margin:0 0 16px; }
.b-linked-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.b-linked-card{ display:block; text-decoration:none; color:inherit; }
.b-linked-thumb{ position:relative; display:block; aspect-ratio:16/10;
border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-2); }
.b-linked-thumb img{ width:100%; height:100%; object-fit:cover; display:block;
transition:transform .3s ease; }
.b-linked-card:hover .b-linked-thumb img{ transform:scale(1.04); }
.b-linked-badge{ position:absolute; left:8px; bottom:8px; padding:3px 9px;
border-radius:999px; background:rgba(15,17,19,.78); color:#fff;
font-size:.68rem; font-weight:600; }
.b-linked-name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden; margin-top:9px; font-size:.9rem; font-weight:600; line-height:1.35; }
.b-linked-card:hover .b-linked-name{ color:var(--accent); }
/* Barre de progression de lecture */
.b-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:80;
background:var(--accent); transition:width .1s linear; }
/* Sommaire (généré depuis les h2/h3 du corps) */
.b-toc{
width:min(100% - 40px, var(--read)); margin:0 auto 30px; padding:18px 20px;
background:var(--surface); border:1px solid var(--line-soft);
border-radius:var(--radius-sm); box-shadow:var(--shadow);
}
.b-toc-h{ font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color:var(--text-faint); margin-bottom:10px; }
.b-toc ol{ margin:0; padding-left:1.1em; font-size:.92rem; }
.b-toc li{ margin-bottom:6px; }
.b-toc a{ color:var(--text-soft); }
.b-toc a:hover{ color:var(--accent); }
.b-toc .lvl3{ padding-left:.9em; font-size:.88rem; }
/* Barre sociale de l'article */
.b-share{ width:min(100% - 40px, var(--read)); margin:32px auto 0;
display:flex; flex-wrap:wrap; align-items:center; gap:10px;
padding-top:22px; border-top:1px solid var(--line-soft); }
.b-share-btn{
display:inline-flex; align-items:center; gap:7px; cursor:pointer;
padding:8px 15px; border-radius:999px; font-size:.85rem; font-weight:500;
background:var(--surface-2); border:1px solid var(--line-soft); color:var(--text-soft);
transition:.18s;
}
.b-share-btn:hover{ color:var(--accent); border-color:var(--accent); }
.b-share-btn.is-on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
/* Encadré auteur en fin d'article */
.b-author-box{
width:min(100% - 40px, var(--read)); margin:40px auto 0; padding:24px;
display:flex; gap:18px; align-items:flex-start;
background:var(--surface); border:1px solid var(--line-soft);
border-radius:var(--radius); box-shadow:var(--shadow);
}
.b-author-box img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:0 0 64px; }
.b-author-box h4{ font-size:1.1rem; margin-bottom:6px; }
.b-author-box p{ font-size:.92rem; color:var(--text-soft); margin-bottom:10px; }
/* =============================== NEWSLETTER =============================== */
.b-nl{
padding:38px 32px; border-radius:var(--radius); text-align:center;
background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface));
border:1px solid var(--line-soft); box-shadow:var(--shadow);
}
.b-nl h3{ font-size:1.6rem; margin:10px 0 8px; }
.b-nl p{ color:var(--text-soft); max-width:520px; margin:0 auto 20px; }
.b-nl-form{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.b-nl-form input{
flex:1 1 280px; max-width:340px; height:46px; padding:0 16px; font-size:16px;
background:var(--bg); color:var(--text);
border:1px solid var(--line); border-radius:999px;
}
.b-nl-form input:focus{ outline:none; border-color:var(--accent); }
/* a.b-btn (0-1-1) plutôt que .b-btn (0-1-0) : le libellé doit rester lisible
quelle que soit la règle de couleur de lien qui s'applique autour. */
.b-btn, a.b-btn, button.b-btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
height:46px; padding:0 26px; border-radius:999px; border:1px solid var(--accent);
background:var(--accent); color:var(--on-accent); font-size:.92rem; font-weight:600;
transition:filter .18s, transform .18s;
}
.b-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.b-btn--ghost{ background:transparent; color:var(--accent); }
.b-btn--ghost:hover{ background:var(--accent); color:var(--on-accent); }
.b-nl-msg{ margin-top:12px; font-size:.88rem; min-height:1.2em; }
.b-nl-msg.ok{ color:#1a7f4b; }
.b-nl-msg.err{ color:var(--accent); }
:root[data-mode="dark"] .b-nl-msg.ok{ color:#4ade80; }
/* =============================== PAGINATION =============================== */
.b-pager{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:44px; flex-wrap:wrap; }
.b-pager a,.b-pager span{
min-width:40px; height:40px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
border-radius:var(--radius-sm); border:1px solid var(--line-soft); font-size:.9rem; color:var(--text-soft);
}
.b-pager a:hover{ border-color:var(--accent); color:var(--accent); }
.b-pager .is-current{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.b-pager .is-gap{ border:0; }
/* =============================== ÉTATS VIDES =============================== */
.b-empty{
text-align:center; padding:56px 28px; border-radius:var(--radius);
border:1px dashed var(--line); background:var(--surface-2); color:var(--text-soft);
}
.b-empty h3{ font-size:1.3rem; color:var(--text); margin-bottom:10px; }
.b-empty p{ max-width:520px; margin:0 auto 18px; font-size:.95rem; }
.b-empty-ico{ font-size:2.4rem; margin-bottom:12px; opacity:.5; }
/* Bandeau d'aide réservé au titulaire (visible seulement en édition) */
.b-owner-tip{
display:flex; gap:12px; align-items:flex-start; margin:0 0 24px; padding:14px 18px;
border-radius:var(--radius-sm); font-size:.9rem;
background:color-mix(in srgb, var(--accent) 8%, var(--surface));
border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line-soft));
}
.b-owner-tip strong{ color:var(--text); }
/* =============================== FOOTER =============================== */
/* Bannière publicitaire : .lykhubs-ad-internal impose width:728px SANS
max-width, donc elle débordait de l'écran sur mobile (bandeau rouge coupé
des deux côtés). On la contraint à la largeur disponible ; son contenu
(texte, bouton) suit. */
.bf-ad{ display:flex; justify-content:center; padding:26px 20px 0; overflow:hidden; }
.wl-ad-slot{ max-width:100%; overflow:hidden; }
.lykhubs-ad, .lykhubs-ad-internal, .lykhubs-ad-placeholder{
max-width:100% !important;
box-sizing:border-box !important;
}
.lykhubs-ad-internal{ width:100% !important; }
@media (max-width:760px){
/* Sous 760px, la bannière passe en bloc : hauteur libre pour que le texte
et le bouton tiennent sans être rognés. */
.lykhubs-ad-internal, .lykhubs-ad-placeholder{ height:auto !important; }
.bf-ad{ padding-inline:16px; }
}
.bf{ margin-top:64px; background:var(--bg-alt); border-top:1px solid var(--line-soft); }
.bf-inner{
width:min(100% - 40px, var(--wrap)); margin-inline:auto; padding:48px 0 32px;
display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;
}
.bf-title{ font-family:var(--font-title); font-size:1.3rem; font-weight:700; margin-bottom:10px; }
/* Baseline : entre le nom et l'accroche, plus discrète que cette dernière. */
.bf-base{ font-size:.82rem; color:var(--text-faint); margin-top:-2px; margin-bottom:8px; }
.bf-desc{ font-size:.9rem; color:var(--text-soft); max-width:340px; }
.bf-h{ font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color:var(--text-faint); margin-bottom:14px; }
.bf-col ul{ list-style:none; margin:0; padding:0; }
.bf-col li{ margin-bottom:9px; }
.bf-col a{ font-size:.9rem; color:var(--text-soft); }
.bf-col a:hover{ color:var(--accent); }
.bf-social{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.bf-social a{ font-size:.8rem; color:var(--text-soft); border:1px solid var(--line-soft);
padding:5px 12px; border-radius:999px; }
.bf-social a:hover{ border-color:var(--accent); color:var(--accent); }
.bf-bottom{
width:min(100% - 40px, var(--wrap)); margin-inline:auto; padding:18px 0 30px;
border-top:1px solid var(--line-soft); font-size:.82rem; color:var(--text-faint);
display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.bf-bottom a:hover{ color:var(--accent); }
.bf-sep{ opacity:.45; }
/* Mention de brevet (non retirable) : discrète, sous la ligne légale.
Pas de bordure haute : elle prolonge .bf-bottom, elle n'ouvre pas un bloc. */
.bf-patent{
width:min(100% - 40px, var(--wrap)); margin-inline:auto; padding:0 0 30px;
margin-top:-18px; font-size:.68rem; line-height:1.5; letter-spacing:.02em;
color:var(--text-faint); opacity:.75;
}
/* =============================== RESPONSIVE =============================== */
@media (max-width:1000px){
.b-grid{ grid-template-columns:repeat(2, 1fr); gap:26px; }
.b-rubs{ grid-template-columns:repeat(2, 1fr); }
.b-hero-grid{ grid-template-columns:1fr; gap:26px; }
.bf-inner{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:760px){
body.blog-body{ font-size:16px; }
.bh-nav{ display:none; } /* remplacé par le drawer */
.bh-burger{ display:flex; }
.bh-search{ display:none; }
/* Bouton ⋯ du header masqué : la barre du bas mobile a déjà son entrée
« Plus », qui ouvre exactement le même menu. Deux accès identiques à
l'écran, dont un redondant.
On masque le BOUTON, pas le conteneur #lpMore : la bottombar déplace
#lpMoreMenu (son enfant) dans
à l'ouverture — un display:none sur
le conteneur emporterait le menu tant qu'il n'a pas encore été déplacé,
et le premier appui sur « Plus » n'ouvrirait rien. */
.bh .lp-more-btn{ display:none; }
.bh-inner{ height:60px; gap:14px; }
.bh-logo{ margin-right:auto; }
.b-grid{ grid-template-columns:1fr; gap:30px; }
.b-rubs{ grid-template-columns:1fr 1fr; }
.b-sec{ padding:38px 0; }
.b-hero{ padding:34px 0 8px; }
.b-art{ padding:28px 0 44px; }
.b-art-body{ font-size:1.04rem; }
.b-author-box{ flex-direction:column; }
.bf-inner{ grid-template-columns:1fr; }
.b-sec-head{ flex-direction:column; align-items:flex-start; gap:8px; }
}
/* Confort de lecture : respecte le réglage système de réduction d'animation. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important;
scroll-behavior:auto !important; }
}
/* Impression : on ne sort que l'article. */
@media print{
.bh,.bf,.b-share,.b-toc,.b-nl,.bf-ad,.b-progress,.lpm{ display:none !important; }
body.blog-body{ background:#fff; color:#000; }
.b-art-body{ width:100%; font-size:11pt; }
}
/* ===================================================================
LISIBILITE GLOBALE DES COMPOSANTS HERITES (mode clair)
-------------------------------------------------------------------
Releve EXHAUSTIF du CSS servi sur les 13 pages du site : ces classes
ecrivent leur texte en blanc (socle concu pour un fond sombre) et
etaient donc invisibles sur le fond papier. Genere en une passe
plutot que corrige au cas par cas.
Exclues : les surfaces qui portent leur propre fond sombre ou
d accent (pastilles de duree, boutons pleins, avatars, overlays sur
image, croix de fermeture) — leur texte blanc est voulu.
=================================================================== */
:root[data-mode="light"] .afv-note,
:root[data-mode="light"] .ag-cal-dow,
:root[data-mode="light"] .ag-cal-ev,
:root[data-mode="light"] .ag-cal-month,
:root[data-mode="light"] .ag-cal-more,
:root[data-mode="light"] .ag-cal-nav,
:root[data-mode="light"] .ag-cal-num,
:root[data-mode="light"] .ag-desc,
:root[data-mode="light"] .ag-empty,
:root[data-mode="light"] .ag-meta,
:root[data-mode="light"] .ag-month,
:root[data-mode="light"] .ag-name,
:root[data-mode="light"] .ag-sub,
:root[data-mode="light"] .ag-toggle-btn:not(.active),
:root[data-mode="light"] .au-author,
:root[data-mode="light"] .au-author--self,
:root[data-mode="light"] .au-back,
:root[data-mode="light"] .au-collab,
:root[data-mode="light"] .au-desc,
:root[data-mode="light"] .au-meta,
:root[data-mode="light"] .bd-mode,
:root[data-mode="light"] .card-video-side,
:root[data-mode="light"] .ctc-captcha-new,
:root[data-mode="light"] .ctc-captcha-q,
:root[data-mode="light"] .ctc-card-val,
:root[data-mode="light"] .ctc-count,
:root[data-mode="light"] .ctc-f,
:root[data-mode="light"] .ctc-rgpd,
:root[data-mode="light"] .ct-empty,
:root[data-mode="light"] .ct-lk,
:root[data-mode="light"] .ct-vstats,
:root[data-mode="light"] .dj-sortsel-btn,
:root[data-mode="light"] .dj-track-sub,
:root[data-mode="light"] .gl-empty,
:root[data-mode="light"] .gl-lk,
:root[data-mode="light"] .gl-photo,
:root[data-mode="light"] .gl-story-add-plus,
:root[data-mode="light"] .gl-story-name,
:root[data-mode="light"] .info,
:root[data-mode="light"] .lk-empty,
:root[data-mode="light"] .mc-empty,
:root[data-mode="light"] .mc-login,
:root[data-mode="light"] .mc-tab,
:root[data-mode="light"] .member-card,
:root[data-mode="light"] .oeuvre-info,
:root[data-mode="light"] .oi-list,
:root[data-mode="light"] .ph-actions,
:root[data-mode="light"] .ph-author,
:root[data-mode="light"] .ph-collab-cancel,
:root[data-mode="light"] .ph-collab-empty,
:root[data-mode="light"] .ph-collab-msg,
:root[data-mode="light"] .ph-collab-nm,
:root[data-mode="light"] .ph-collab-suggest,
:root[data-mode="light"] .ph-desc,
:root[data-mode="light"] .ph-meta-row,
:root[data-mode="light"] .ph-oeuvre-edit,
:root[data-mode="light"] .ph-oeuvre-hint,
:root[data-mode="light"] .ph-recent-author,
:root[data-mode="light"] .ph-recent-dur,
:root[data-mode="light"] .ph-recent-empty,
:root[data-mode="light"] .ph-recent-name,
:root[data-mode="light"] .ph-recent-stats,
:root[data-mode="light"] .ph-recent-title,
:root[data-mode="light"] .ph-recent-toggle,
:root[data-mode="light"] .ph-right,
:root[data-mode="light"] .ph-tag,
:root[data-mode="light"] .ph-tip,
:root[data-mode="light"] .ph-tips-chev,
:root[data-mode="light"] .ph-tips-title,
:root[data-mode="light"] .reactions-count,
:root[data-mode="light"] .reposts-summary,
:root[data-mode="light"] .rvid-desc,
:root[data-mode="light"] .rvid-hint,
:root[data-mode="light"] .rvid-sres-name,
:root[data-mode="light"] .rvid-title,
:root[data-mode="light"] .rvid-title-cancel,
:root[data-mode="light"] .rvid-title-edit,
:root[data-mode="light"] .rvid-title-form,
:root[data-mode="light"] .vlp-empty,
:root[data-mode="light"] .vm-desc,
:root[data-mode="light"] .vm-meta,
:root[data-mode="light"] .vm-name,
:root[data-mode="light"] .vote-stars-block,
:root[data-mode="light"] .wl-back-link,
:root[data-mode="light"] .wl-ext-cancel,
:root[data-mode="light"] .wllr-icon,
:root[data-mode="light"] .wlmp-counter,
:root[data-mode="light"] .wlmp-nav,
:root[data-mode="light"] .wlpc-bio,
:root[data-mode="light"] .wlpc-loading,
:root[data-mode="light"] .wlpc-name,
:root[data-mode="light"] .wlpc-tagline,
:root[data-mode="light"] .wl-rp-cancel,
:root[data-mode="light"] .wl-rp-msg,
:root[data-mode="light"] .wl-tw-empty,
:root[data-mode="light"] .wl-tw-head,
:root[data-mode="light"] .wl-tw-note,
:root[data-mode="light"] .wl-tw-row
{ color:var(--text) !important; }
/* « S'abonner » : plus aucune regle corrective ici.
.ph-sub figurait dans TROIS listes de texte du theme clair ci-dessus, range
parmi les textes secondaires — alors que c'est un bouton a FOND PLEIN. Il
heritait donc d'un `color:var(--text) !important`, soit un texte quasi noir
sur le rouge. J'avais d'abord ajoute un correctif par-dessus ; les trois
lignes fautives ont maintenant ete RETIREES, et la couleur vient du contrat
(--lkb-solid-bg / --lkb-solid-text). Traiter la cause plutot que l'effet. */
/* Bloc de notation (étoiles) : video.php et photo.php le forcent sur le fond
sombre du socle (background:var(--grey) et texte blanc en !important), donc
ses libellés (« Aucun vote pour le moment », moyenne, nombre de votes)
disparaissaient et il ne restait que les étoiles. */
:root[data-mode="light"] .vote-stars-block{
background:var(--surface) !important;
background-color:var(--surface) !important;
border:1px solid var(--line-soft) !important;
color:var(--text) !important;
}
:root[data-mode="light"] .vote-stars-block p,
:root[data-mode="light"] .vote-stars-block p strong,
:root[data-mode="light"] .vote-stars-block span,
:root[data-mode="light"] .vote-stars-block div,
:root[data-mode="light"] .voters-tab-count,
:root[data-mode="light"] .voters-user-description{
color:var(--text) !important;
}
:root[data-mode="light"] .vote-stars-block .vsb-sub,
:root[data-mode="light"] .vote-stars-block small{ color:var(--text-soft) !important; }
/* Les étoiles gardent leur or ; seules celles non attribuées restent grises. */
:root[data-mode="light"] .vote-stars-block .fa-star,
:root[data-mode="light"] .voters-tab-stars{ color:#f0b429 !important; }
/* Complement du releve : les selecteurs DESCENDANTS (« .ph-author .role »)
etaient tronques a leur premiere classe par mon extraction, donc .role et
20 autres passaient au travers. Releve refait en capturant toutes les
classes de chaque selecteur. */
:root[data-mode="light"] .ag-cal-cell,
:root[data-mode="light"] .ag-card,
:root[data-mode="light"] .au-author-name,
:root[data-mode="light"] .bd-desc,
:root[data-mode="light"] .card-meta,
:root[data-mode="light"] .card-title,
:root[data-mode="light"] .ct-vcard,
:root[data-mode="light"] .ct-vtitle,
:root[data-mode="light"] .gl-story,
:root[data-mode="light"] .oi-awards,
:root[data-mode="light"] .oi-meta,
:root[data-mode="light"] .oi-sec,
:root[data-mode="light"] .ph-recent-card,
:root[data-mode="light"] .ph-vote,
:root[data-mode="light"] .reactions-summary,
:root[data-mode="light"] .reposts-count,
:root[data-mode="light"] .role,
:root[data-mode="light"] .sg-empty,
:root[data-mode="light"] .sg-nm,
:root[data-mode="light"] .vote-stats
{ color:var(--text) !important; }
/* Pastille « republié » : l'icône est posée SUR la couleur d'accent, elle doit
donc rester claire. Elle figurait dans la liste ci-dessus, qui repeint en
couleur de texte les éléments d'un socle sombre — l'icône devenait noire sur
fond rouge (contraste mesuré : 2,65:1, illisible). Le compteur voisin, lui,
est bien sur le fond de la page et garde la couleur du texte. */
:root[data-mode="light"] .reposts-ic,
:root[data-mode="light"] .reposts-ic i,
:root[data-mode="light"] .reposts-ic svg{ color:var(--on-accent, #fff) !important; }
/* Cartes de ces blocs : fond sombre du socle -> surface du theme. */
:root[data-mode="light"] .ag-card,
:root[data-mode="light"] .ct-vcard,
:root[data-mode="light"] .ph-recent-card,
:root[data-mode="light"] .ag-cal-cell{
background:var(--surface) !important; border-color:var(--line-soft) !important;
}
/* Sous-titres : nuance douce plutot que noir plein. */
:root[data-mode="light"] .role,
:root[data-mode="light"] .card-meta,
:root[data-mode="light"] .oi-meta,
:root[data-mode="light"] .sg-empty{ color:var(--text-soft) !important; }
/* ---------- Bloc commentaires : carte blanche + titre a la bonne echelle ----
Il etait le seul bloc de la page sans carte (« Photos liees » et « A voir
egalement » en ont une), donc il flottait sur le fond. Et son titre est un
a la taille par defaut, bien plus petit que les titres voisins. */
/* UNE SEULE carte : .ph-comments (la section) CONTIENT #comments-section.
Styler les deux produisait une carte blanche dans une autre. */
:root[data-mode="light"] .ph-comments{
background:var(--surface) !important;
border:1px solid var(--line-soft) !important;
border-radius:var(--radius) !important;
padding:22px 24px !important;
box-shadow:var(--shadow);
}
/* Titre « Commentaires » : meme corps que « Photos liees » / « A voir egalement ».
Le style est pose EN LIGNE sur le
(font-weight:600), d'ou !important. */
.ph-comments h6,
#comments-section h6,
.vc-wrap h6,
h6#vc-title{
font-family:var(--font-title) !important;
font-size:1.15rem !important;
font-weight:600 !important;
color:var(--text) !important;
margin-bottom:16px !important;
}
.ph-comments h6 #vc-total-count,
#comments-section h6 #vc-total-count,
.vc-wrap h6 #vc-total-count{
font-family:var(--font) !important;
font-size:.85rem !important;
color:var(--text-faint) !important;
}
@media (max-width:760px){
:root[data-mode="light"] .ph-comments{ padding:18px 16px !important; }
}
/* ---------- Ajustements finaux des pages medias ---------- */
/* La carte des commentaires portait une ombre que les blocs voisins
(« Photos liees », « A voir egalement ») n'ont pas : elle ressortait. */
:root[data-mode="light"] .ph-comments{ box-shadow:none !important; }
/* Titres de la liste d'episodes : .rvid-name est en #eee (gris tres clair,
pense pour un fond sombre) et .rvid-title en #fff — tous deux invisibles.
La description juste en dessous etait lisible, d'ou l'effet « titre
manquant » alors que le texte etait bien la. */
:root[data-mode="light"] .rvid-name,
:root[data-mode="light"] .rvid-title{ color:var(--text) !important; }
:root[data-mode="light"] .rvid-title-edit{ color:var(--text-soft) !important; }
:root[data-mode="light"] .rvid-item:hover .rvid-name{ color:var(--accent) !important; }
/* Boutons de la barre d'action (Republier, Statistiques, Partager,
Enregistrer) : ils n'avaient aucun fond, contrairement a « J'adore », donc
ils ne se lisaient pas comme des boutons. Fond leger + pastille au survol. */
:root[data-mode="light"] .ph-actions > button,
:root[data-mode="light"] .ph-actions > a{
background:var(--surface-2) !important;
border:1px solid var(--line-soft) !important;
border-radius:999px !important;
padding:8px 15px !important;
color:var(--text) !important;
}
:root[data-mode="light"] .ph-actions > button:hover,
:root[data-mode="light"] .ph-actions > a:hover{
background:var(--surface) !important;
border-color:var(--accent) !important;
color:var(--accent) !important;
}
/* Barre de filtres des pages de contenu : le conteneur REEL est .ct-filterbar
(margin-bottom:2px), pas .ct-filters qui est son enfant — ma regle
precedente ne pouvait donc rien y faire et les vignettes restaient collees
aux boutons. Meme respiration que les autres blocs du blog. */
.ct-filterbar, .gl-filterbar{ margin:18px 0 26px !important; }
/* Vignettes de « Photos liees » : .vlp-item pose un fond #0d0d0d et une
bordure blanche translucide (fond sombre d'origine) — sur le fond clair, il
n'en restait qu'un liseré noir autour de chaque image. */
:root[data-mode="light"] .vlp-item{
background:var(--surface-2) !important;
border:1px solid var(--line-soft) !important;
}
/* Icone devant « Commentaires », comme « Photos liees » et « A voir egalement »
qui en ont une. Ajoutee en CSS : le
vient du composant natif partage,
qu'on ne modifie pas pour un seul template. */
.ph-comments h6::before,
#comments-section h6::before{
content:"";
display:inline-block;
width:19px; height:19px;
margin-right:9px;
vertical-align:-3px;
background-color:var(--accent);
-webkit-mask:var(--ico-cmt) center/contain no-repeat;
mask:var(--ico-cmt) center/contain no-repeat;
}
:root{
--ico-cmt:url("data:image/svg+xml;utf8,");
}
/* ---------- Rangee de filtres : pastille alignee sur les boutons ----------
Les boutons (.ct-filter) sont dimensionnes par leur padding (6px 14px), sans
hauteur fixe. La pastille du filtre actif contient une croix de 22px qui la
fait grandir : elle depassait donc en hauteur et paraissait desalignee,
meme avec align-items:center sur la rangee.
On donne la MEME hauteur aux deux, et on centre leur contenu. */
.ct-filterbar{ align-items:center !important; }
.ct-filter, .gl-filter, .ct-genre, .gl-catf, .ct-type{
height:32px !important;
padding:0 14px !important;
display:inline-flex !important;
align-items:center !important;
line-height:1 !important;
box-sizing:border-box !important;
}
/* [hidden] d'abord : le JS masque la pastille avec chip.hidden = true quand
aucun filtre n'est actif. Mon display:inline-flex !important l'affichait
malgre tout — d'ou une pastille « Thematique : » vide en permanence. */
.ct-active-filter[hidden]{ display:none !important; }
.ct-active-filter:not([hidden]){
height:32px !important;
padding:0 6px 0 14px !important;
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
box-sizing:border-box !important;
border-radius:100px !important; /* meme forme que les boutons */
}
.ct-af-label{ line-height:1 !important; font-size:13px !important; }
.ct-af-clear{
width:20px !important; height:20px !important;
flex:0 0 20px !important;
line-height:1 !important;
}
/* ---------- Modales du socle (Republier, Partager, Signaler) ----------
Leur variante claire (body.pf-light …) n'est pas servie sur ces pages : seule
la version sombre l'est. Titre en #fff sur panneau blanc = invisible, et
champ de saisie sur fond #26262f. On rhabille ici, ou la regle s'applique
quelle que soit la modale rendue. */
:root[data-mode="light"] .wl-tw-box,
:root[data-mode="light"] .wl-rp-box{
background:var(--surface) !important;
color:var(--text) !important;
}
:root[data-mode="light"] .wl-tw-head h3,
:root[data-mode="light"] .wl-tw-head h4,
:root[data-mode="light"] .wl-tw-title{ color:var(--text) !important; }
:root[data-mode="light"] .wl-tw-close{ color:var(--text-soft) !important; }
:root[data-mode="light"] .wl-tw-close:hover{ color:var(--accent) !important; }
:root[data-mode="light"] .wl-rp-msg{
background:var(--surface-2) !important;
border:1px solid var(--line-soft) !important;
color:var(--text) !important;
}
:root[data-mode="light"] .wl-rp-msg::placeholder{ color:var(--text-faint) !important; }
:root[data-mode="light"] .wl-rp-cancel{
background:transparent !important;
border:1px solid var(--line) !important;
color:var(--text) !important;
}
/* Autres modales du socle, relevees par le meme audit : signalement (.lkr-*),
reposts (.lkrp-*), partage (.lks-*), liens externes (.wl-extmodal-*) et
selection de videos liees (.rvid-modal-*). Meme defaut : panneau et titre
prevus pour un fond sombre, variante claire non servie. */
:root[data-mode="light"] .rvid-modal-box,
:root[data-mode="light"] .wl-extmodal-box{
background:var(--surface) !important;
color:var(--text) !important;
}
:root[data-mode="light"] .lkr-head,
:root[data-mode="light"] .lkrp-head,
:root[data-mode="light"] .lks-head,
:root[data-mode="light"] .rvid-modal-head,
:root[data-mode="light"] .lkr-head *,
:root[data-mode="light"] .lkrp-head *,
:root[data-mode="light"] .lks-head *,
:root[data-mode="light"] .rvid-modal-head *{
color:var(--text) !important;
}
:root[data-mode="light"] .rvid-modal-close,
:root[data-mode="light"] .oi-lightbox-close{ color:var(--text-soft) !important; }
:root[data-mode="light"] .wl-extmodal-url{
background:var(--surface-2) !important;
border:1px solid var(--line-soft) !important;
color:var(--text) !important;
}
/* Etat « republie » du bouton : le socle ne colore que l'icone
(.ph-repost.on i { color:var(--red) }), ce qui passe inapercu sur le fond
clair — le bouton semblait ne pas reagir alors que la republication a bien
eu lieu. On marque l'etat sur tout le bouton, comme « J'adore ». */
:root[data-mode="light"] .ph-repost.on,
:root[data-mode="light"] .ph-save.on{
/* Aplat ramené de 12 % à 6 % : sur un template clair et sobre, une pastille
rose franche attirait plus l'œil que le contenu. L'état reste parfaitement
lisible — c'est la bordure et le texte colorés qui le portent, le fond ne
fait que les accompagner. */
background:color-mix(in srgb, var(--accent) 6%, var(--surface)) !important;
border-color:color-mix(in srgb, var(--accent) 32%, transparent) !important;
color:var(--accent) !important;
}
:root[data-mode="light"] .ph-repost.on i,
:root[data-mode="light"] .ph-repost.on span,
:root[data-mode="light"] .ph-save.on i,
:root[data-mode="light"] .ph-save.on span{ color:var(--accent) !important; }
/* Scene de la photo : fond #0d0d0d + bordure blanche translucide (thème sombre
d'origine). Sur le fond papier il n'en restait qu'un cadre sombre autour de
l'image, sans utilite — la photo se suffit a elle-meme. */
:root[data-mode="light"] .ph-stage{
background:transparent !important;
border:0 !important;
}
/* Bouton « J'aime » (composant natif de reactions).
COULEURS : plus rien ici — elles viennent du CONTRAT DE THEME declare en
tete de fichier (--lkb-btn-bg / --lkb-btn-text / --lkb-btn-border), que
content_reactions.php lit directement. Le bloc qui les forcait en
!important a ete supprime : il faisait double emploi et c'est lui qui
rendait chaque reglage de couleur si penible.
Seule la FORME reste ici : le composant impose un rayon de 30px, alors que
tous les boutons du template sont en pilule. */
:root .btn-action,
:root .btn-like{
border-radius:999px;
}
/* GABARIT identique a .b-share-btn (Republier, Partager, S'abonner, Modifier).
La regle ci-dessus n'harmonisait que les COULEURS : le bouton natif gardait
son propre padding et sa propre taille de texte, d'ou un « J'aime » plus
petit que ses voisins dans la meme barre. Les dimensions doivent etre
alignees, pas seulement l'habillage. */
.b-share .btn-action,
.b-share .btn-like{
display:inline-flex !important; align-items:center !important; gap:7px !important;
padding:8px 15px !important; font-weight:500 !important;
height:auto !important; min-height:0 !important;
/* Taille du texte : la MEME valeur que .b-share-btn (.85rem), mais mesuree
au rendu elle vaut 17px chez les voisins et 13,6px ici — parce que le
bouton natif ne participe pas au meme contexte d'heritage. On fixe donc
la valeur EN PIXELS, seule facon d'obtenir la meme hauteur (46px) que
Republier, Partager et S'abonner. */
/* Hauteur de ligne HERITEE, comme chez les voisins : .b-share-btn n'en
declare aucune. La forcer a 1.4 donnait 42px au lieu de 46px. */
font-size:17px !important; line-height:inherit !important;
}
/* Le composant fixe AUSSI la taille sur le LIBELLE lui-meme
(.btn-like .reaction-text{font-size:14px}), dans un