/* ==========================================================================
   Krinein — thème forum (beta) : refonte lourde par-dessus prosilver 3.3
   ========================================================================== */
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/inter-var.woff2") format("woff2"); }
:root{ --kr:#6d28d9; --kr7:#5b21b6; --kr05:#f5f3ff; --bg:#f4f4f7; --surf:#fff; --bd:#e6e6ea; --tx:#17171c; --tx2:#4b4b55; --tx3:#8a8a97; --rad:14px; --sh:0 1px 2px rgba(20,20,30,.04),0 8px 24px rgba(20,20,30,.06); }

html,body,#phpbb,.nojs{ font-family:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important; }
body{ background:var(--bg) !important; color:var(--tx2) !important; font-size:15px !important; line-height:1.55 !important; }
a{ color:var(--kr); } a:hover{ color:var(--kr7); }

/* Conteneur : plus de gros cadre, on empile des cartes */
#wrap,.wrap{ max-width:1160px !important; margin:26px auto !important; padding:0 18px !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
#page-body{ margin-top:0 !important; }
#page-body > *{ margin-bottom:16px !important; }

/* En-tête */
#page-header .headerbar{ background:var(--surf) !important; background-image:none !important; color:var(--tx) !important; border:1px solid var(--bd); border-radius:var(--rad); box-shadow:var(--sh); margin-bottom:16px; }
/* Header SLIM (façon site) : juste le logo à gauche + recherche à droite (h1/description retirés du template) */
#page-header .headerbar > .inner{ display:flex !important; align-items:center; justify-content:space-between; gap:20px; padding:14px 24px !important; }
a#logo{ padding:0 !important; margin:0 !important; display:inline-flex; align-items:center; }
a#logo .site_logo{ width:150px !important; height:36px !important; }
#site-description{ margin:0 !important; flex:0 0 auto; }
.search-header{ float:none !important; margin:0 !important; flex:0 0 auto; }
#site-description h1{ font-size:22px !important; font-weight:800 !important; letter-spacing:-.01em; color:var(--tx) !important; margin:0 !important; }
#site-description h1 a{ color:var(--tx) !important; }
#site-description p,#site-description p a{ color:var(--tx3) !important; font-size:13px !important; }

/* Recherche */
.search-header .inputbox{ height:40px !important; border:1px solid var(--bd) !important; border-right:0 !important; border-radius:10px 0 0 10px !important; background:var(--bg) !important; color:var(--tx) !important; box-shadow:none !important; }
.search-header button.button{ height:40px !important; border-radius:0 10px 10px 0 !important; }

/* Barres de navigation (raccourcis + fil d'ariane) */
.navbar{ background:var(--surf) !important; background-image:none !important; border:1px solid var(--bd) !important; border-radius:var(--rad) !important; box-shadow:var(--sh); margin-bottom:16px !important; }
.navbar .inner{ padding:2px 12px !important; }
.linklist{ border:0 !important; padding:0 !important; }
.linklist li a,.navbar a{ color:var(--tx2) !important; font-weight:600 !important; }
.linklist li a:hover{ color:var(--kr) !important; }
.linklist>li{ line-height:2.6 !important; }

/* Bloc "FORUM" + rubriques : carte blanche, entête violet */
.forabg,.forumbg{ background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important; }
.forabg > .inner,.forumbg > .inner{ background:var(--surf); border:1px solid var(--bd); border-radius:var(--rad); box-shadow:var(--sh); overflow:hidden; padding:0 !important; }
ul.topiclist{ margin:0 !important; padding:0 !important; }
ul.topiclist li.header dl.row-item,ul.topiclist li.header dl{ background:var(--kr) !important; }
li.header dt,li.header dd{ color:#fff !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.07em !important; text-transform:uppercase; padding:14px 0 !important; }
li.header .list-inner{ padding-left:22px !important; }
li.header a{ color:#fff !important; }

/* Lignes de forum : aérées, séparateur fin, hover */
ul.topiclist li.row{ background:var(--surf) !important; border:0 !important; border-top:1px solid var(--bd) !important; transition:background .12s; }
ul.topiclist li.row:first-child{ border-top:0 !important; }
ul.topiclist li.row:hover{ background:#faf9ff !important; }
li.row .row-item{ }
li.row dl.row-item > dt .list-inner{ padding:18px 0 18px 62px !important; margin-right:0 !important; }
li.row dl.row-item > dt{ }
a.forumtitle{ font-size:17px !important; font-weight:700 !important; color:var(--tx) !important; }
a.forumtitle:hover{ color:var(--kr) !important; }
/* Description de forum sous le titre */
.kr-forumdesc{ display:inline-block; margin-top:3px; color:var(--tx3) !important; font-size:14px; font-weight:400; line-height:1.45; }
.kr-forumdesc a{ color:var(--kr) !important; }
.forumdesc,.row-item .responsive-show{ color:var(--tx3) !important; }
dd.topics,dd.posts{ color:var(--tx2) !important; font-weight:700 !important; }
dd.topics dfn,dd.posts dfn{ }
li.row dd.lastpost span{ color:var(--tx3) !important; font-size:12.5px !important; }
dd.lastpost a.lastsubject{ color:var(--tx) !important; font-weight:700 !important; }
dd.lastpost a.lastsubject:hover{ color:var(--kr) !important; }
/* Mini-avatar du dernier posteur (index + liste des sujets).
   Espace TOUJOURS réservé (padding-left) → les lignes SANS avatar restent alignées. */
li.row dd.lastpost > span{ position:relative; display:block; padding-left:44px; }
.kr-lastavatar{ position:absolute; left:0; top:2px; width:34px; height:34px; margin:0; }
.kr-lastavatar img{ width:34px !important; height:34px !important; border-radius:50%; object-fit:cover; border:1px solid var(--bd); background:var(--kr05); display:block; }
/* Les <dfn> (labels lecteur d'écran) étaient poussés à left:-999px/width:990px. Depuis que
   dd.lastpost>span est position:relative (avatar), le dfn se re-positionnait par rapport à la
   colonne de droite → il s'étalait sur 990px PAR-DESSUS les titres et interceptait les clics.
   On les masque proprement (clip, sans overlay) → titres de nouveau cliquables. */
ul.topiclist dfn,li.row dfn{ position:absolute !important; left:auto !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; margin:0 !important; }

/* ==========================================================================
   P1 — Repères LU / NON-LU + types de sujets (l'ancienne pastille uniforme
   aplatissait ces états ; phpBB expose les classes forum_read/unread,
   topic_read/unread, sticky_*, announce_*, global_*, *_hot, *_locked).
   ========================================================================== */
/* NON-LU : pastille pleine violette + bulle blanche + titre en gras */
li.row dl.row-item[class*="_unread"] > dt::before{
  background-color:var(--kr) !important; border-color:var(--kr) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.6-.8L3 21l1.9-5.7a8.4 8.4 0 0 1-.8-3.6 8.5 8.5 0 0 1 8.5-8.5 8.4 8.4 0 0 1 8.4 8.4z'/%3E%3C/svg%3E") !important; }
li.row dl.row-item[class*="_unread"] a.forumtitle,
li.row dl.row-item[class*="_unread"] a.topictitle{ font-weight:800 !important; }
/* ÉPINGLÉ : ÉPINGLE dans la pastille (pas de pill). Porte-voix réservé aux ANNONCES. */
/* -- épinglé : épingle (LU = violet, NON-LU = blanc) -- */
li.row dl.row-item[class*="sticky_"] > dt::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E") !important; }
li.row dl.row-item[class*="sticky_"][class*="_unread"] > dt::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E") !important; }
/* -- annonce : porte-voix (LU = violet, NON-LU = blanc) -- */
li.row dl.row-item[class*="announce_"] > dt::before,
li.row dl.row-item[class*="global_"] > dt::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E") !important; }
li.row dl.row-item[class*="announce_"][class*="_unread"] > dt::before,
li.row dl.row-item[class*="global_"][class*="_unread"] > dt::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E") !important; }
/* LU : titre un cran plus léger pour renforcer le contraste avec le non-lu */
li.row dl.row-item[class*="_read"] a.topictitle{ font-weight:600 !important; }

/* ANNONCE : badge « Annonce » avant le titre (l'épingle se passe de texte) */
li.row dl.row-item[class*="announce_"] a.topictitle::before,
li.row dl.row-item[class*="global_"] a.topictitle::before{
  content:"Annonce"; display:inline-block; margin-right:8px; padding:2px 8px; border-radius:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle;
  background:var(--kr); color:#fff; }

/* VERROUILLÉ : cadenas discret après le titre */
li.row dl.row-item[class*="_locked"] a.topictitle::after,
li.row dl.row-item[class*="_locked"] a.forumtitle::after{ content:" \1F512"; font-size:11px; opacity:.55; }

/* P3 — mobile : pas de « Sujets : X » (cohérent avec le retrait desktop) */
@media (max-width:700px){
  .forabg li.row .responsive-show{ display:none !important; }
}

/* Séparateur « Espace équipe » : bandeau avant le bloc des forums privés (staff) */
li.kr-private-sep{ list-style:none; background:var(--kr05) !important; border-top:1px solid var(--bd) !important; }
li.kr-private-sep span{ display:block; padding:12px 22px; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--kr7); }
li.kr-private-sep span::before{ content:"\1F512\00a0"; } /* cadenas */
/* Lignes de forums privés : fond légèrement teinté pour les distinguer */
li.row.kr-private{ background:#fbfaff !important; }
li.row.kr-private:hover{ background:#f5f2ff !important; }

/* Icône de forum : pastille violette claire */
li.row dl.row-item > dt{ position:relative; }
li.row .row-item .icon{ background-image:none !important; }
li.row dl.row-item > dt::before{ content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:12px; border:1px solid #e7e0fb;
  background:var(--kr05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.6-.8L3 21l1.9-5.7a8.4 8.4 0 0 1-.8-3.6 8.5 8.5 0 0 1 8.5-8.5 8.4 8.4 0 0 1 8.4 8.4z'/%3E%3C/svg%3E") center/22px no-repeat; }

/* Panneaux (connexion, stats, anniversaires, qui est en ligne) */
.panel{ background:var(--surf) !important; border:1px solid var(--bd) !important; border-radius:var(--rad) !important; box-shadow:var(--sh); margin-bottom:16px !important; }
.panel .inner{ padding:20px 24px !important; }
.panel h2,.panel h3,.stat-block h3,.online-list{ }
.stat-block h3,.panel h3,dl.mini dt{ color:var(--tx) !important; }
h3{ color:var(--tx) !important; font-size:13px !important; font-weight:800 !important; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--bd); padding-bottom:10px !important; margin-bottom:12px !important; }
/* Titres de page/panneau : phpBB les met en bleu #115098 (Trebuchet) → sombre Krinein, Inter, gras */
h1,h2,.content h2,.panel h2,.panel-container h2{ color:var(--tx) !important; font-family:inherit !important; font-weight:800 !important; letter-spacing:-.01em !important; border-bottom-color:var(--bd) !important; }

/* Striping des lignes (memberlist, recherche…) : le bleu froid phpBB #ECF3F7/#E1EBF2
   → blanc + gris chaud neutre, cohérent avec la palette */
.bg1{ background-color:var(--surf) !important; }
.bg2{ background-color:#faf9fc !important; }

/* ==========================================================================
   BOUTONS — système sémantique. Remplace l'ancienne règle unique qui peignait
   TOUT .button en pilule violette 9x18px : les boutons d'action de message
   (Éditer/Citer/Signaler, en icône seule) et la barre d'outils BBCode de
   l'éditeur devenaient de gros blocs violets. phpBB distingue :
   .button1 = action principale · .button2/.button-secondary = secondaire ·
   .button seul + .button-icon-only = boutons d'icône discrets.
   ========================================================================== */

/* Secondaire / neutre : .button de base, .button2, .button-secondary */
.button,a.button2,input.button2,button.button2,.button-secondary{
  background:var(--surf) !important; background-image:none !important; border:1px solid var(--bd) !important;
  color:var(--tx2) !important; border-radius:8px !important; padding:7px 14px !important; font-weight:600 !important;
  font-family:inherit !important; box-shadow:none !important; text-shadow:none !important; }
.button:hover,a.button2:hover,input.button2:hover,button.button2:hover,.button-secondary:hover,.button:focus{
  background:var(--kr05) !important; border-color:var(--kr) !important; color:var(--kr) !important; text-shadow:none !important; }
.button .icon,.button-secondary .icon{ color:inherit !important; }

/* Principal : .button1 (Envoyer, Se connecter, Voter, Approuver…) */
a.button1,input.button1,button.button1{
  background:var(--kr) !important; background-image:none !important; border:1px solid var(--kr) !important;
  color:#fff !important; border-radius:8px !important; padding:8px 16px !important; font-weight:700 !important;
  font-family:inherit !important; box-shadow:none !important; text-shadow:none !important; }
a.button1:hover,input.button1:hover,button.button1:hover,input.button1:focus{
  background:var(--kr7) !important; border-color:var(--kr7) !important; color:#fff !important; }

/* Boutons de soumission : ils appartiennent à l'éditeur → on les fusionne
   visuellement avec la carte au-dessus (plus de « boîte à part »). :has() joint
   les deux .panel (carte éditeur à fond plat, carte boutons à sommet plat). */
.panel:has(+ .panel .submit-buttons){ margin-bottom:0 !important; border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; }
.panel:has(.submit-buttons){ margin-top:0 !important; border-top:0 !important; border-top-left-radius:0 !important; border-top-right-radius:0 !important; box-shadow:none !important; }
.panel:has(.submit-buttons) > .inner{ padding-top:10px !important; }

/* Icône seule : actions de message + barre BBCode → petits, discrets,
   l'icône passe au violet au survol (JAMAIS de fond violet plein). */
.button.button-icon-only,.post-buttons .button,.format-buttons .button{
  background:transparent !important; border:1px solid transparent !important; color:var(--tx3) !important;
  padding:6px 9px !important; border-radius:8px !important; font-weight:600 !important; }
.button.button-icon-only:hover,.post-buttons .button:hover,.format-buttons .button:hover{
  background:var(--kr05) !important; border-color:transparent !important; color:var(--kr) !important; }
.button.button-icon-only .icon,.post-buttons .button .icon,.format-buttons .button .icon{ color:inherit !important; }

/* Boutons de recherche attachés à un champ : géométrie prosilver conservée */
.button.button-search,.button.button-search-end{ padding:0 12px !important; border-radius:0 8px 8px 0 !important; }
.search-header button.button{ background:var(--kr) !important; border-color:var(--kr) !important; color:#fff !important; }
.search-header button.button:hover{ background:var(--kr7) !important; }
.search-header button.button .icon{ color:#fff !important; }

/* « Aller » (jumpbox = saut vers un forum) masqué ; le lien « Retour » reste */
.action-bar .jumpbox,#jumpbox{ display:none !important; }

/* Menus déroulants (actions de message, outils du sujet, contacts) en carte */
.dropdown-contents{ background:var(--surf) !important; border:1px solid var(--bd) !important; border-radius:10px !important;
  box-shadow:0 10px 28px rgba(20,20,30,.14) !important; padding:6px !important; }
.dropdown-contents li,.dropdown-contents a{ border-color:var(--bd) !important; }
.dropdown-contents a:not(.contact-icon){ border-radius:7px !important; color:var(--tx2) !important; padding:7px 10px !important; }
.dropdown-contents a:not(.contact-icon):hover{ background:var(--kr05) !important; color:var(--kr) !important; }
.dropdown .pointer,.dropdown .pointer-inner{ display:none !important; }

.inputbox,input.inputbox,input[type=text],input[type=password],input[type=email],textarea,select{
  border:1px solid var(--bd) !important; border-radius:9px !important; background:var(--surf) !important; color:var(--tx) !important; padding:9px 12px !important; box-shadow:none !important; }
.inputbox:focus{ border-color:var(--kr) !important; box-shadow:0 0 0 3px var(--kr05) !important; }
/* border-box sur tous les champs → le padding n'élargit plus le contrôle (évitait le débordement du textarea sous le panneau émoticônes) */
.inputbox,textarea,input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],select{ box-sizing:border-box !important; }

/* ==========================================================================
   PAGE DE RÉPONSE / RÉDACTION (posting) — émoticônes en bande pleine largeur
   AU-DESSUS de l'éditeur (au lieu de la colonne droite) → la zone de texte
   récupère toute la largeur, tâche n°1 = écrire. Les smilies (inline) s'enroulent
   en bande horizontale. Réversible : remettre width:232px + float:right.
   ========================================================================== */
#postingbox .smiley-box{ width:100% !important; float:none !important; box-sizing:border-box;
  background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; margin:0 0 12px 0; }
/* Émoticônes : TOUS affichés, taille moitié (24px vs 48px), en plusieurs lignes
   (wrap) → aucun caché, pas de lien « Plus d'émoticônes ». Plus de titre ni de
   statut BBCode. */
#postingbox .smiley-box .kr-emo__row{ display:flex; flex-wrap:wrap; align-items:center; gap:3px; }
#postingbox .smiley-box .kr-emo__row a{ flex:0 0 auto; line-height:0; }
#postingbox .smiley-box .kr-emo__row a img{ width:36px !important; height:36px !important; margin:0 !important; border-radius:4px; }
/* Options avancées (onglets #tabs + #options-panel) repliées par défaut : un simple
   toggle. La classe kr-adv-collapse est posée en JS → si le JS échoue, rien n'est
   masqué (dégradation sûre : tout reste accessible). */
.kr-adv-bar{ margin:0 0 16px; }
.kr-adv-toggle{ background:var(--surf); border:1px solid var(--bd); border-radius:8px; padding:8px 14px;
  font-family:inherit; font-weight:600; font-size:12px; letter-spacing:.02em; color:var(--tx2); cursor:pointer; }
.kr-adv-toggle:hover{ border-color:var(--kr); color:var(--kr); }
.kr-adv-toggle::after{ content:" ▾"; }
body.kr-adv-open .kr-adv-toggle::after{ content:" ▴"; }
body.kr-adv-collapse:not(.kr-adv-open) #tabs,
body.kr-adv-collapse:not(.kr-adv-open) #options-panel{ display:none !important; }
#postingbox .message-box{ width:auto !important; overflow:hidden; }
#postingbox .message-box textarea{ width:100% !important; min-width:0 !important; min-height:300px !important;
  border:1px solid var(--bd) !important; border-radius:12px !important; padding:14px 16px !important;
  font-family:inherit !important; font-size:15px !important; line-height:1.6 !important; }
/* Éditeur WYSIWYG maison (remplace le textarea). */
#postingbox .kr-wysiwyg{ min-height:300px; border:1px solid var(--bd); border-radius:12px; padding:14px 16px;
  font-family:inherit; font-size:15px; line-height:1.6; color:var(--tx); background:var(--surf); outline:none;
  overflow:auto; word-wrap:break-word; }
#postingbox .kr-wysiwyg:focus{ border-color:var(--kr); }
#postingbox .kr-wysiwyg:empty::before{ content:attr(data-placeholder); color:var(--tx3); pointer-events:none; }
#postingbox .kr-wysiwyg img[data-smilie]{ width:22px; height:22px; vertical-align:middle; }
#postingbox .kr-wysiwyg blockquote{ border-left:3px solid var(--kr); background:var(--kr05); margin:8px 0; padding:8px 12px; border-radius:0 8px 8px 0; }
#postingbox .kr-wysiwyg pre{ background:var(--bg); border:1px solid var(--bd); border-radius:8px; padding:10px 12px; font-family:monospace; font-size:13px; white-space:pre-wrap; }
#postingbox .kr-wysiwyg a{ color:var(--kr); }
#postingbox .kr-wysiwyg img{ max-width:100%; }
#postingbox .kr-wysiwyg .kr-sp{ border:1px dashed var(--bd); border-radius:8px; padding:8px 12px; margin:6px 0; background:var(--bg); }
#postingbox .kr-wysiwyg .kr-sp::before{ content:"Spoiler : "; font-weight:700; color:var(--tx3); font-size:12px; }
/* Bouton [video] retiré du compositeur (remplacé par l'auto-embed d'URL vidéo). */
.bbcode-video{ display:none !important; }
/* Façade vidéo RGPD (aucune requête tierce avant le clic) — éditeur + rendu. */
.kr-video-embed{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:var(--surf,#fff); border:1px solid var(--bd,#dcdce6); border-radius:10px; padding:10px 14px; font-weight:600; color:var(--kr,#6d28d9); max-width:100%; text-decoration:none; }
.kr-video-embed:hover{ border-color:var(--kr,#6d28d9); }
.kr-video-embed--loaded{ display:block; padding:0; border:0; background:none; }
.kr-video-embed--loaded iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:10px; display:block; }
/* Spoiler au rendu (forum) : masqué par défaut, révélé au clic (<details> natif). */
.kr-spoiler{ border:1px solid var(--bd,#dcdce6); border-radius:10px; margin:10px 0; background:var(--surf,#fff); overflow:hidden; }
.kr-spoiler > summary{ cursor:pointer; padding:9px 14px; font-weight:700; font-size:13px; color:var(--kr,#6d28d9); user-select:none; list-style:none; }
.kr-spoiler > summary::-webkit-details-marker{ display:none; }
.kr-spoiler > summary::before{ content:"▶ "; font-size:10px; }
.kr-spoiler[open] > summary::before{ content:"▼ "; }
.kr-spoiler[open] > summary{ border-bottom:1px solid var(--bd,#dcdce6); }
.kr-spoiler-body{ padding:12px 14px; }
/* barre d'outils BBCode : compacte, alignée */
/* Insertion d'image retirée du compositeur (demande éditoriale) : on cache le bouton [img].
   NB : ne bloque pas [img] tapé à la main — pour ça, retirer la permission f_img. */
.bbcode-img{ display:none !important; }
#postingbox .format-buttons{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin-bottom:12px; }
#postingbox .format-buttons select{ height:34px; padding:4px 10px; margin-left:6px; }

/* Pagination : compacte (les numéros sont des <a class="button"> → la règle .button
   les gonflait à 7×14 = « cases blanches trop grandes »). */
.pagination li a,.pagination li span{ border-radius:8px !important; border:1px solid var(--bd) !important; }
.pagination li a.button,.pagination li span{ padding:5px 10px !important; min-width:18px; font-weight:600 !important; font-size:13.5px !important; }
.pagination li a.button.button-icon-only{ padding:5px 9px !important; min-width:0; } /* flèches préc/suiv */
.pagination li.active span,.pagination li.active a{ background:var(--kr) !important; border-color:var(--kr) !important; color:#fff !important; }

/* Pied */
#page-footer .navbar{ }
.copyright{ color:var(--tx3) !important; text-align:center; font-size:13px !important; padding-top:14px !important; }
.copyright a{ color:var(--kr) !important; }

/* ---- Vue d'un sujet (viewtopic) : messages en cartes ---- */
.post{ background:var(--surf) !important; border:1px solid var(--bd) !important; border-radius:var(--rad) !important; box-shadow:var(--sh) !important; margin-bottom:16px !important; }
.post.bg1,.post.bg2{ background:var(--surf) !important; }
.postprofile{ border-left:0 !important; border-right:1px solid var(--bd) !important; margin:0 !important; padding:20px !important; color:var(--tx3) !important; }
.postprofile .avatar,.postprofile .avatar img{ border-radius:50% !important; overflow:hidden; }
.postprofile .avatar{ border:1px solid var(--bd); }
.postprofile .username,.postprofile .username-coloured,.postprofile strong a{ color:var(--kr) !important; font-weight:700 !important; }
.postbody{ padding:20px 24px !important; }
/* phpBB calcule .postbody en width:calc(100% - 200px - 1px - 16px) SANS compter
   notre padding (content-box) → +48px de débordement → le corps du message
   tombait SOUS le profil (grand vide en haut). border-box absorbe le padding. */
.post .postbody,.post .postprofile{ box-sizing:border-box !important; }
.postbody > h3,.postbody h3.first{ font-size:16px !important; font-weight:700 !important; }
.postbody .author{ color:var(--tx3) !important; font-size:12.5px !important; border-bottom:1px solid var(--bd); padding-bottom:12px !important; margin-bottom:14px !important; }
.postbody .content{ font-size:15.5px !important; line-height:1.72 !important; color:var(--tx2) !important; }
.content blockquote{ background:var(--kr05) !important; border-left:3px solid var(--kr) !important; border-radius:0 8px 8px 0 !important; }
/* Signature : plus petite et discrète (phpBB la met en 1.1em) */
.signature{ font-size:12.5px !important; line-height:1.5 !important; color:var(--tx3) !important; margin-top:18px !important; padding-top:12px !important; border-top:1px solid var(--bd) !important; }
.signature a{ color:var(--kr) !important; }
.signature img{ max-height:60px !important; width:auto !important; }
/* (boutons d'action de message stylés plus haut, section "BOUTONS") */

/* topics list (viewforum) : mêmes règles que la home via .topiclist déjà couvertes */
a.topictitle{ font-size:16px !important; font-weight:700 !important; color:var(--tx) !important; display:inline-block; padding:3px 0 !important; }
a.topictitle:hover{ color:var(--kr) !important; }
/* Date sous le titre du sujet : métadonnée discrète (phpBB la laissait à ~16px) */
li.row .topic-poster{ font-size:13px !important; color:var(--tx3) !important; margin-top:2px; }
/* Colonne « Vues » masquée (demande Guillaume : sans intérêt) — en-tête + cellules */
ul.topiclist dd.views{ display:none !important; }
/* Pas de barres verticales entre colonnes (phpBB colore border-left au survol) */
li.row dd{ border-left:0 !important; }
/* Pas d'accès direct aux pages : mini-pagination inline des sujets retirée */
li.row .pagination{ display:none !important; }
/* Index (liste des forums, .forabg) : pas de colonnes Sujets/Messages (en-tête + valeurs).
   Scopé à .forabg → n'affecte PAS les « Réponses » de viewforum (qui est en .forumbg). */
.forabg dd.topics,.forabg dd.posts{ display:none !important; }
/* Profil (viewtopic) : date d'inscription + nombre de messages masqués (peu utiles) */
dd.profile-joined,dd.profile-posts{ display:none !important; }
/* Flèche « remonter » : margin-right:-10px la faisait dépasser hors de la carte */
.back2top{ clear:both; padding:0 2px 2px 0; }
.back2top .top{ float:right; margin:0 !important; }
.back2top .top .icon{ color:var(--tx3) !important; }
.back2top .top:hover .icon{ color:var(--kr) !important; }

/* ---- Pont vers le site + nettoyage bas de page ---- */
.kr-sitebar{ background:var(--kr) !important; border-radius:var(--rad); margin-bottom:16px; }
.kr-sitebar__inner{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:7px 16px; }
.kr-sitebar__home{ color:#fff !important; font-weight:800 !important; text-decoration:none; white-space:nowrap; }
.kr-sitebar__nav{ display:flex; gap:2px; flex-wrap:wrap; }
.kr-sitebar__nav a{ color:rgba(255,255,255,.85) !important; text-decoration:none; font-weight:600; font-size:13.5px; padding:5px 9px; border-radius:7px; }
.kr-sitebar__nav a:hover{ color:#fff !important; background:rgba(255,255,255,.16); }
/* bas de page masqué (ceinture) */
.stat-block.online-list, .stat-block.birthday-list, .stat-block.statistics{ display:none !important; }
/* liens footer : équipe + liste des membres */
#nav-footer li:has(a[href*="memberlist.php"]){ display:none !important; }

/* correctifs rendu */
.stat-block.permissions{ display:none !important; } /* bloc Permissions masqué */
/* logo : pointer vers un nouveau nom de fichier pour casser le cache navigateur */
a#logo .site_logo{ background:url("/images/krinein-forum-logo-2.svg") no-repeat left center !important; background-size:contain !important; width:140px !important; height:34px !important; }

/* ==========================================================================
   Colonnes des listes en FLEX (remplace le système prosilver floats +
   marges négatives -440px / padding 999px + margin -995px, que l'ancien
   "correctif" dl.row-item dd avait cassé à moitié). Règle : le chevauchement
   des compteurs sur "Dernier message" et la date rognée en bas de ligne.
   ========================================================================== */
ul.topiclist li.header dl,ul.topiclist li.row dl{ display:flex !important; align-items:center !important; }
ul.topiclist li.header dt,ul.topiclist li.row dt{ float:none !important; width:auto !important; flex:1 1 auto !important; margin:0 !important; min-width:0 !important; }
ul.topiclist li.header dt .list-inner,ul.topiclist li.row dt .list-inner{ margin-right:0 !important; }
ul.topiclist li.header dd,ul.topiclist li.row dd{ float:none !important; flex:0 0 auto !important; margin:0 !important; padding:12px 0 !important; min-height:0 !important; }
ul.topiclist dd.posts,ul.topiclist dd.topics,ul.topiclist dd.views{ width:110px !important; font-size:15px !important; line-height:1.3 !important; }
ul.topiclist dd.lastpost,ul.topiclist dd.redirect,ul.topiclist dd.moderation,ul.topiclist dd.time,ul.topiclist dd.info{ width:270px !important; font-size:13px !important; line-height:1.45 !important; }

/* Recherche : halo bleu prosilver (.search-header, colours.css) supprimé */
.search-header{ box-shadow:none !important; border-radius:10px !important; }

/* ==========================================================================
   UCP / Panneau de contrôle (+ onglets Options de la page de réponse) au DS.
   phpBB : onglets .tabs en dégradé bleu ; sous-menu #navigation en rouge.
   ========================================================================== */
.tabs{ background:none !important; border-bottom:1px solid var(--bd) !important; box-shadow:none !important; }
.tabs li{ background:none !important; }
.tabs a{ background:none !important; background-image:none !important; border:0 !important; box-shadow:none !important; text-shadow:none !important;
  color:var(--tx2) !important; font-weight:600 !important; padding:10px 16px !important; border-radius:8px 8px 0 0 !important; }
.tabs a:hover{ background:var(--kr05) !important; color:var(--kr) !important; }
.tabs .activetab a,.tabs .activetab a:hover{ color:var(--kr) !important; background:var(--surf) !important; box-shadow:inset 0 -2px 0 var(--kr) !important; }

.cp-menu{ }
#navigation li{ background:none !important; border:0 !important; }
#navigation a{ background:none !important; background-image:none !important; border:0 !important; box-shadow:none !important;
  color:var(--tx2) !important; font-weight:600 !important; padding:9px 12px !important; border-radius:8px !important; }
#navigation a:hover{ background:var(--kr05) !important; color:var(--kr) !important; }
#navigation li.active-subsection,#navigation .active a,#navigation li.active a{ background:var(--kr05) !important; color:var(--kr) !important; border-radius:8px !important; box-shadow:inset 2px 0 0 var(--kr) !important; }
#navigation li.active-subsection > a,#navigation li.active-subsection > strong{ color:var(--kr) !important; font-weight:700 !important; }

/* Panneaux alternés phpBB (bg1/bg2/bg3) → surface unie (déjà cartés par .panel) */
.panel.bg1,.panel.bg2,.panel.bg3{ background:var(--surf) !important; }
/* Libellés de formulaire CP (dt) + liens en violet plutôt que rouge */
.cp-main .pm-message a,.cp-main a.pm-message,dl.mini dt a{ color:var(--kr) !important; }

/* Panneaux déroulants Notifications / Messages privés (dropdown-extended) : entête violet plutôt que dégradé bleu */
.dropdown-extended .header{ background:var(--kr) !important; background-image:none !important; border:0 !important; }
.dropdown-extended .header,.dropdown-extended .header a,.dropdown-extended .header .header_settings a{ color:#fff !important; }
.dropdown-extended .footer{ background:var(--surf) !important; }
.dropdown-extended .footer > a{ color:var(--kr) !important; font-weight:700 !important; }
.dropdown-extended a.mark_read{ color:#fff !important; }

/* ==========================================================================
   HEADER façon SITE : barre (logo + baseline / actions icônes) + nav rubriques.
   Remplace la sitebar violette et le gros champ de recherche. Réplique
   .kr-header / .kr-brand / .kr-actions / .kr-iconbtn / .kr-user / .kr-nav du site.
   ========================================================================== */
#page-header .headerbar.kr-header{ padding:0 !important; overflow:visible; }
.kr-header__bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 22px; min-height:64px; }

/* Marque : logo + baseline empilés */
.kr-brand{ display:flex; flex-direction:column; justify-content:center; text-decoration:none !important; flex:0 0 auto; }
.kr-brand .site_logo{ display:block; width:132px; height:26px;
  background:url("/images/krinein-forum-logo-2.svg") no-repeat left center; background-size:contain; }
.kr-brand__base{ margin-top:3px; font-size:8.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tx3); white-space:nowrap; }

/* Actions à droite */
.kr-actions{ flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.kr-iconbtn{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 12px; border:0;
  border-radius:10px; background:transparent; color:var(--tx2) !important; font-family:inherit;
  font-size:14px; font-weight:600; cursor:pointer; text-decoration:none !important; line-height:1; }
.kr-iconbtn:hover{ background:var(--kr05); color:var(--kr) !important; }
.kr-iconbtn svg{ width:20px; height:20px; }
.kr-iconbtn--search{ border:1px solid var(--bd); }
.kr-actions .kr-iconbtn--round{ padding:0; width:40px; justify-content:center; position:relative; }
.kr-actionitem{ display:inline-flex; }

/* Badges (notifications / MP) */
.kr-hasbadge{ position:relative; }
.kr-badge{ position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:9px;
  background:var(--kr) !important; color:#fff !important; font-size:10.5px; font-weight:800; line-height:16px;
  text-align:center; box-shadow:0 0 0 2px var(--surf); }
.kr-badge.hidden{ display:none !important; }

/* Recherche : pilule qui révèle le champ (details/summary, sans JS) */
.kr-search-dd{ position:relative; }
.kr-search-dd > summary{ list-style:none; }
.kr-search-dd > summary::-webkit-details-marker{ display:none; }
.kr-search-dd > summary::marker{ content:""; }
.kr-search-dd[open] > summary{ background:var(--kr05); color:var(--kr) !important; border-color:var(--kr); }
.kr-search-dd__panel{ position:absolute; top:calc(100% + 8px); right:0; z-index:95; width:340px; max-width:82vw;
  background:var(--surf); border:1px solid var(--bd); border-radius:12px; box-shadow:var(--sh); padding:10px; }
.kr-search-dd__panel form{ display:flex; }
.kr-search-dd__panel .inputbox{ flex:1 1 auto; height:40px; border-right:0 !important;
  border-radius:10px 0 0 10px !important; background:var(--bg) !important; }
.kr-search-dd__panel .button-search{ height:40px; border-radius:0 10px 10px 0 !important;
  background:var(--kr) !important; border-color:var(--kr) !important; color:#fff !important; }
.kr-search-dd__panel .button-search .icon{ color:#fff !important; }

/* Compte : icône ronde + avatar + pastille verte */
.kr-user{ position:relative; display:inline-flex; }
.kr-user__btn{ position:relative; overflow:visible; }
.kr-user__ico{ width:20px !important; height:20px !important; }
.kr-user__ava{ position:absolute; inset:0; border-radius:50%; overflow:hidden; }
.kr-user__ava img{ width:100% !important; height:100% !important; border-radius:50%; object-fit:cover; display:block; margin:0 !important; border:0 !important; }
.kr-user__dot{ position:absolute; top:4px; right:4px; width:9px; height:9px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 0 2px var(--surf); }

/* Menu compte (dropdown phpBB stylé façon site) */
.kr-user .dropdown.kr-user__menu{ min-width:238px; padding:6px !important; }
.kr-user__head{ display:flex; align-items:center; gap:10px; padding:10px 12px 12px;
  border-bottom:1px solid var(--bd); margin-bottom:6px; }
.kr-user__head .kr-avatar{ position:relative; width:34px; height:34px; border-radius:50%; overflow:hidden;
  background:var(--kr05); flex:0 0 auto; display:inline-flex; }
.kr-user__head .kr-avatar img{ width:100% !important; height:100% !important; object-fit:cover; border-radius:50%; margin:0 !important; border:0 !important; }
.kr-user__id strong{ display:block; font-size:14px; color:var(--tx) !important; line-height:1.25; font-weight:800; }
.kr-user__live{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:#16a34a !important; }
.kr-user__live i{ width:7px; height:7px; border-radius:50%; background:#22c55e; display:inline-block; }
.kr-user__menu .separator{ height:1px; background:var(--bd); margin:6px 4px; list-style:none; padding:0 !important; }
.kr-user__menu .kr-user__logout{ color:#dc2626 !important; }
.kr-user__menu .kr-user__logout:hover{ background:#fef2f2 !important; color:#dc2626 !important; }

/* Nav rubriques façon site (remplace la barre violette .kr-sitebar) */
#page-header .kr-nav--forum{ border-top:1px solid var(--bd); }
#page-header .kr-nav--forum ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px;
  margin:0 !important; padding:5px 16px !important; list-style:none; }
#page-header .kr-nav--forum li{ list-style:none; margin:0 !important; line-height:normal !important; }
#page-header .kr-nav--forum li::before{ content:none !important; }
#page-header .kr-nav--forum a{ display:block; padding:9px 12px; border-radius:8px; color:var(--tx2) !important;
  font-weight:600 !important; font-size:14px; text-decoration:none !important; }
#page-header .kr-nav--forum a:hover{ color:var(--tx) !important; background:#f2f2f5; }
#page-header .kr-nav--forum li.is-active a{ color:var(--kr) !important; }

@media (max-width:820px){
  .kr-iconbtn--search span{ display:none; }
  .kr-iconbtn--search{ width:40px; padding:0; justify-content:center; }
  .kr-brand__base{ display:none; }
}

/* ==========================================================================
   Modale de connexion (façon site) : ouverte par « Se connecter » du menu compte.
   ========================================================================== */
.kr-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.kr-modal[hidden]{ display:none; }
.kr-modal__backdrop{ position:absolute; inset:0; background:rgba(15,12,26,.55); backdrop-filter:blur(3px); }
.kr-modal__card{ position:relative; width:100%; max-width:400px; box-sizing:border-box; background:var(--surf) !important;
  border:1px solid var(--bd) !important; border-radius:16px !important; padding:28px; box-shadow:0 24px 64px rgba(10,8,20,.35) !important; margin:0 !important; }
.kr-modal__close{ position:absolute; top:10px; right:10px; width:34px; height:34px; border:0; border-radius:8px;
  background:none; color:var(--tx3); font-size:22px; line-height:1; cursor:pointer; }
.kr-modal__close:hover{ background:var(--kr05); color:var(--tx); }
.kr-modal__title{ margin:0 0 4px !important; font-size:22px !important; font-weight:800 !important; letter-spacing:-.01em;
  color:var(--tx) !important; border:0 !important; padding:0 !important; }
.kr-modal__sub{ margin:0 0 18px; font-size:13.5px; color:var(--tx3); }
.kr-field{ display:block; margin-bottom:14px; font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--tx2); }
.kr-field input{ display:block; width:100%; box-sizing:border-box; margin-top:6px; height:42px; padding:0 12px !important;
  border:1px solid var(--bd) !important; border-radius:10px !important; background:var(--bg) !important; color:var(--tx) !important;
  font-family:inherit; font-size:15px; font-weight:500; }
.kr-field input:focus{ outline:none; border-color:var(--kr) !important; box-shadow:0 0 0 3px var(--kr05) !important; }
.kr-check{ display:flex; align-items:center; gap:8px; margin:-4px 0 16px; font-size:13px; font-weight:600; color:var(--tx2); }
.kr-check input{ width:16px; height:16px; margin:0; }
.kr-modal__err{ margin:0 0 14px; font-size:13px; font-weight:600; color:#dc2626; }
.kr-modal__submit{ width:100%; justify-content:center; display:inline-flex !important; align-items:center; height:44px; }
.kr-modal__links{ display:flex; gap:8px; justify-content:center; margin:14px 0 0; font-size:13px; color:var(--tx3); }
.kr-modal__links a{ color:var(--tx2) !important; font-weight:600; text-decoration:none; }
.kr-modal__links a:hover{ color:var(--kr) !important; }

/* ==========================================================================
   Option A — HEADER FULL-WIDTH STICKY façon site.
   #page-header est désormais HORS de #wrap (pleine largeur). On le rend sticky,
   plat (plus de carte), fond translucide + filet bas ; le contenu du header
   (barre + rubriques) est recentré à 1160px comme le site.
   ========================================================================== */
#page-header{
  position:sticky; top:0; z-index:200;
  background:color-mix(in srgb, var(--surf) 90%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--bd); margin:0;
}
/* la barre n'est plus une carte : plate, contenu centré */
#page-header .headerbar.kr-header{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; margin:0 !important;
}
#page-header .kr-header__bar{ max-width:1160px; margin:0 auto; }
#page-header .kr-nav--forum{ border-top:1px solid var(--bd); }
#page-header .kr-nav--forum ul{ max-width:1160px; }
/* léger espace entre le header sticky et la 1re carte de contenu */
#wrap, .wrap{ margin-top:22px !important; }

/* Icône « accueil du site » en tête des rubriques du forum */
#page-header .kr-nav--forum .kr-nav__home a{ display:inline-flex; align-items:center; justify-content:center; padding:9px 11px; margin-right:2px; }
#page-header .kr-nav--forum .kr-nav__home svg{ width:18px; height:18px; }
#page-header .kr-nav--forum .kr-nav__home a:hover{ color:var(--kr) !important; }

/* Barre d'action (viewtopic/viewforum) : recherche « dans le sujet/forum » + engrenage
   (recherche avancée fa-cog) retirés — inutiles ici (le header a sa propre recherche ;
   une recherche unifiée est prévue au backlog). */
.action-bar .search-box{ display:none !important; }

/* ==========================================================================
   Bloc sous le header (fil d'ariane + raccourcis) : DÉ-BOXÉ.
   UX : « fil d'ariane à gauche (orientation) + actions utilitaires à droite »,
   sur une ligne plate, sans carte. Les raccourcis deviennent des pills.
   Scopé via :has(#nav-breadcrumbs) → n'affecte pas la navbar du footer.
   ========================================================================== */
.navbar:has(#nav-breadcrumbs){ background:transparent !important; border:0 !important;
  border-radius:0 !important; box-shadow:none !important; margin:2px 0 14px !important; }
.navbar:has(#nav-breadcrumbs) .inner{ display:flex !important; align-items:center; flex-wrap:wrap;
  gap:8px 16px; padding:0 2px !important; }
/* fil d'ariane à gauche, prend l'espace */
.navbar:has(#nav-breadcrumbs) #nav-breadcrumbs{ order:1; flex:1 1 auto; min-width:0; margin:0 !important; }
.navbar:has(#nav-breadcrumbs) #nav-breadcrumbs > li{ line-height:normal !important; }
.navbar:has(#nav-breadcrumbs) #nav-breadcrumbs .crumb a{ color:var(--tx2) !important; font-weight:600 !important; }
.navbar:has(#nav-breadcrumbs) #nav-breadcrumbs .crumb a:hover{ color:var(--kr) !important; }
/* phpBB tronque chaque crumb via .wrapped-* (max-width/ellipsis) meme quand il y a la place
   -> on annule : le fil d'ariane s'affiche en entier (une recherche unifiee viendra de toute facon). */
.navbar:has(#nav-breadcrumbs) #nav-breadcrumbs{ white-space:nowrap; }
.navbar:has(#nav-breadcrumbs) #nav-breadcrumbs .crumb a{ max-width:none !important; overflow:visible !important; text-overflow:clip !important; }
/* raccourcis à droite, en pills */
.navbar:has(#nav-breadcrumbs) #nav-main{ order:2; flex:0 0 auto; display:flex; gap:8px; }
.navbar:has(#nav-breadcrumbs) #nav-main > li{ line-height:normal !important; }
.navbar:has(#nav-breadcrumbs) #nav-main > li > a{ display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px !important; border:1px solid var(--bd) !important; border-radius:9px !important;
  background:var(--surf) !important; color:var(--tx2) !important; font-weight:600 !important; font-size:13.5px; }
.navbar:has(#nav-breadcrumbs) #nav-main > li > a:hover{ border-color:var(--kr) !important;
  background:var(--kr05) !important; color:var(--kr) !important; }
.navbar:has(#nav-breadcrumbs) #nav-main .icon{ color:inherit !important; }
@media (max-width:560px){
  .navbar:has(#nav-breadcrumbs) #nav-main{ order:3; width:100%; }
  .navbar:has(#nav-breadcrumbs) #nav-main > li > a span:not(.sr-only){ font-size:13px; }
}

/* Chevron du fil d'ariane : phpBB met '\2039' (‹, pointe à gauche) dans common.css
   -> on l'inverse en '\203A' (›) : sens naturel parent › enfant. */
.breadcrumbs .crumb::before{ content:'\203A'; }
/* Pas d'icône maison à côté de « Accueil du forum » dans le fil d'ariane (demande Guillaume) */
#nav-breadcrumbs .fa-home{ display:none !important; }
/* Liens ancrés (#p{id}) : compenser le header sticky (~90px) sinon le post ciblé
   arrive masqué dessous (item Z). scroll-margin-top = header + petite marge. */
.post{ scroll-margin-top: 102px; }

/* Footer : la navbar (fil d'ariane + fuseau/liens) ne doit pas être une boîte,
   comme en haut. Dé-boxée, plate. */
#page-footer .navbar{ background:transparent !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; margin:10px 0 0 !important; }
#page-footer .navbar .inner{ padding:0 2px !important; }

/* Fix transparence du menu compte : le .dropdown (kr-user__menu) était transparent
   (seul .dropdown-contents avait un fond) → l'entête (avatar/pseudo/En ligne) laissait
   voir au travers. On fait du .dropdown lui-même la carte opaque. */
.kr-user .dropdown.kr-user__menu{ background:var(--surf) !important; border:1px solid var(--bd) !important;
  border-radius:12px !important; box-shadow:0 12px 32px rgba(20,20,30,.16) !important; padding:6px !important; min-width:238px; }
.kr-user__menu .dropdown-contents{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }

/* Header dynamique : au scroll, on masque la barre des rubriques (le header se compacte
   encore plus). Classe .is-scrolled posée en JS sur #page-header. */
#page-header .kr-nav--forum{ overflow:hidden; max-height:220px; transition:max-height .28s ease, opacity .18s ease, border-color .2s ease; }
#page-header.is-scrolled .kr-nav--forum{ max-height:0; opacity:0; border-top-color:transparent; }

/* ==========================================================================
   MODE NUIT — bascule via html[data-theme="dark"] (toggle lune/soleil du header,
   persistance localStorage['kr-theme'], même clé que le site).
   La plupart des composants suivent déjà les variables → on flippe les tokens,
   puis on corrige les littéraux clairs en dur et quelques restes prosilver.
   ========================================================================== */
.kr-theme-toggle .kr-moon{ display:inline; }
.kr-theme-toggle .kr-sun{ display:none; }
html[data-theme="dark"] .kr-theme-toggle .kr-moon{ display:none; }
html[data-theme="dark"] .kr-theme-toggle .kr-sun{ display:inline; }

html[data-theme="dark"]{
  --bg:#0f0f14; --surf:#17171f; --bd:#2a2a36; --tx:#f4f4f7; --tx2:#c3c3cf; --tx3:#8a8a99;
  /* violet ÉCLAIRCI en dark : lisible en texte sur noir (~4.5:1) ET correct en fond plein
     avec texte blanc (~4.2:1). Le #6d28d9 d'origine était trop sombre sur fond noir. */
  --kr:#8b5cf6; --kr7:#a78bfa; --kr05:#1e1830;
  --sh:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.55);
}
/* Pastille verte « En ligne » et badges gardent leur couleur ; l'entête violet des
   dropdowns (notif/MP) suit --kr (désormais plus clair) → texte blanc lisible. */

/* Littéraux clairs en dur (fonds/hovers) → équivalents sombres */
html[data-theme="dark"] ul.topiclist li.row:hover{ background:#1d1d27 !important; }
html[data-theme="dark"] .bg2{ background-color:#1c1c25 !important; }
html[data-theme="dark"] #page-header .kr-nav--forum a:hover{ background:#22222e !important; }
html[data-theme="dark"] .kr-user__menu .kr-user__logout:hover{ background:#2a1622 !important; }
html[data-theme="dark"] li.row dl.row-item > dt::before{ border-color:#33294f !important; }
html[data-theme="dark"] li.row.kr-private{ background:#191622 !important; }
html[data-theme="dark"] li.row.kr-private:hover{ background:#221a33 !important; }

/* Restes prosilver non variabilisés (backgrounds/inputs/code) */
html[data-theme="dark"] .inputbox,
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=number], html[data-theme="dark"] textarea, html[data-theme="dark"] select{
  background:#12121a !important; color:var(--tx) !important; border-color:var(--bd) !important; }
html[data-theme="dark"] .content code, html[data-theme="dark"] .codebox,
html[data-theme="dark"] .codebox code{ background:#0c0c12 !important; color:#d8d8e2 !important; border-color:var(--bd) !important; }

html[data-theme="dark"] .kr-brand .site_logo{ background-image:url("/images/krinein-forum-logo-dark.svg") !important; }

/* ==========================================================================
   Dropdown NOTIFICATIONS (.dropdown-extended) — mise en page propre (UX) :
   entête violet clippé aux coins arrondis, items = avatar + texte + heure,
   non-lus teintés, état vide soigné, footer d'action centré.
   ========================================================================== */
.dropdown-extended .dropdown-contents{ overflow:hidden !important; padding:0 !important; width:360px !important; max-width:86vw !important; }
.dropdown-extended .header{ border-radius:0 !important; margin:0 !important; padding:12px 16px !important;
  font-weight:800 !important; letter-spacing:.02em; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dropdown-extended .header .header_settings a{ font-weight:600 !important; font-size:13px; }
.dropdown-extended > .dropdown-contents > ul{ margin:0 !important; padding:0 !important; max-height:360px; overflow-y:auto; list-style:none; }
.dropdown-extended li{ margin:0 !important; padding:0 !important; border-bottom:1px solid var(--bd) !important; position:relative; }
.dropdown-extended li:last-child{ border-bottom:0 !important; }
.dropdown-extended li::before{ content:none !important; }
.dropdown-extended li.no_notifications{ padding:24px 16px !important; color:var(--tx3) !important; text-align:center; font-size:14px; }
.dropdown-extended li.bg2{ background:var(--kr05) !important; }
.dropdown-extended a.notification-block{ display:flex !important; gap:12px; align-items:flex-start;
  padding:12px 16px !important; text-decoration:none !important; border:0 !important; }
.dropdown-extended a.notification-block:hover{ background:var(--kr05) !important; }
.dropdown-extended a.notification-block img,
.dropdown-extended a.notification-block .avatar{ width:42px !important; height:42px !important; border-radius:50% !important;
  object-fit:cover; flex:0 0 auto; border:1px solid var(--bd); background:var(--kr05); }
.dropdown-extended .notification_text{ min-width:0; flex:1 1 auto; }
.dropdown-extended .notification-title{ color:var(--tx) !important; font-weight:600 !important; font-size:14px; line-height:1.35; margin:0 0 2px !important; }
.dropdown-extended .notification-title strong,
.dropdown-extended .notification-title .username,
.dropdown-extended .notification-title .username-coloured{ color:var(--kr) !important; }
.dropdown-extended .notification-reference{ color:var(--tx2) !important; font-style:italic; font-size:13px; margin:0 !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropdown-extended .notification-forum,
.dropdown-extended .notification-reason{ color:var(--tx3) !important; font-size:12.5px; margin:1px 0 0 !important; }
.dropdown-extended .notification-time{ color:var(--tx3) !important; font-size:12px; margin:4px 0 0 !important; }
.dropdown-extended a.mark_read{ position:absolute; top:10px; right:10px; }
.dropdown-extended a.mark_read .icon{ color:var(--kr) !important; }
.dropdown-extended .footer{ padding:0 !important; background:var(--surf) !important; border-top:1px solid var(--bd) !important; }
.dropdown-extended .footer > a{ display:block; padding:12px 16px !important; text-align:center; color:var(--kr) !important; font-weight:700 !important; text-decoration:none !important; }
.dropdown-extended .footer > a:hover{ background:var(--kr05) !important; }

/* Légende / mini-panneau des MP (.cp-mini) : prosilver la met en bleu clair #eef5f9
   avec max-height:200px + scroll (inutile). On la passe au design system (fond --kr05
   qui flippe clair/sombre) et on retire le scroll. */
.cp-mini{ background:var(--kr05) !important; border:1px solid var(--bd) !important; border-radius:10px !important;
  max-height:none !important; overflow:visible !important; }
html[data-theme="dark"] .cp-mini,
html[data-theme="dark"] .cp-mini dt, html[data-theme="dark"] .cp-mini dd,
html[data-theme="dark"] .cp-mini a{ color:var(--tx2) !important; }

/* Surlignage des mots recherchés (.posthilit) : prosilver le met en rose clair (off-palette,
   illisible en dark). Surlignage ambre lisible en clair ET en sombre. */
.posthilit{ background:#fde68a !important; color:#3a2c00 !important; padding:0 2px; border-radius:3px; }
html[data-theme="dark"] .posthilit{ background:#4d3a00 !important; color:#fde68a !important; }

/* Pastilles « lues » en dark : picto violet (peu contrasté sur violet foncé) → BLANC.
   Les non-lues sont déjà en blanc sur fond violet plein. */
html[data-theme="dark"] li.row dl.row-item > dt::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.6-.8L3 21l1.9-5.7a8.4 8.4 0 0 1-.8-3.6 8.5 8.5 0 0 1 8.5-8.5 8.4 8.4 0 0 1 8.4 8.4z'/%3E%3C/svg%3E") !important; }
html[data-theme="dark"] li.row dl.row-item[class*="sticky_"] > dt::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E") !important; }
html[data-theme="dark"] li.row dl.row-item[class*="announce_"] > dt::before,
html[data-theme="dark"] li.row dl.row-item[class*="global_"] > dt::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E") !important; }

/* --- Smilies 48px : centrés sur la ligne de texte, interligne préservé --- */
.postbody .content img.smilies, .signature img.smilies {
	vertical-align: middle; margin: -10px 2px;
}

/* ===== Recherche unifiée « command palette » (injectée depuis le site) ===== */
.kr-badge {
    display: inline-block; padding: 4px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; background: var(--kr-primary);
}
.kr-cmdk__badge{ padding:2px 7px; font-size:10px; }
/* Badges de catégorie masqués dans la palette FORUM : redondants avec le label de type
   (ŒUVRES/CRITIQUES/FORUM) et cassaient le layout (pills empilés en haut à droite). */
.kr-cmdk .kr-badge { display: none; }
html.kr-cmdk-open { overflow: hidden; }
.kr-cmdk[hidden] { display: none; }   /* sinon le display:flex ci-dessous écrase l'attribut hidden -> backdrop invisible qui capte tous les clics */
.kr-cmdk { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center;
    padding: 10vh 16px 16px; }
.kr-cmdk__backdrop { position: absolute; inset: 0; background: rgba(15,15,22,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .18s ease; }
.kr-cmdk.is-open .kr-cmdk__backdrop { opacity: 1; }
.kr-cmdk__dialog { position: relative; width: 100%; max-width: 640px; background: var(--kr-surface);
    border: 1px solid var(--kr-border); border-radius: 16px;
    box-shadow: 0 24px 64px rgba(15,15,25,.30), 0 4px 12px rgba(15,15,25,.12);
    overflow: hidden; display: flex; flex-direction: column; max-height: 72vh;
    transform: translateY(-10px) scale(.985); opacity: 0;
    transition: transform .2s cubic-bezier(.16,1,.3,1), opacity .18s ease; }
.kr-cmdk.is-open .kr-cmdk__dialog { transform: none; opacity: 1; }

.kr-cmdk__head { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--kr-border); flex: 0 0 auto; }
.kr-cmdk__icon { width: 20px; height: 20px; color: var(--kr-text-3); flex: 0 0 auto; }
.kr-cmdk__input { flex: 1 1 auto; border: 0; background: none; outline: none; font-family: inherit; font-size: 17px;
    color: var(--kr-text); padding: 4px 0; min-width: 0; }
.kr-cmdk__input::placeholder { color: var(--kr-text-3); }
.kr-cmdk__spin { width: 16px; height: 16px; border: 2px solid var(--kr-border); border-top-color: var(--kr-primary);
    border-radius: 50%; animation: kr-spin .6s linear infinite; flex: 0 0 auto; }
@keyframes kr-spin { to { transform: rotate(360deg); } }
.kr-cmdk__esc { border: 1px solid var(--kr-border); background: var(--kr-surface-2); border-radius: 6px; padding: 3px 7px;
    cursor: pointer; color: var(--kr-text-3); flex: 0 0 auto; line-height: 1; }
.kr-cmdk__esc kbd { font: 600 11px/1 var(--kr-font); }

.kr-cmdk__results { overflow-y: auto; flex: 1 1 auto; padding: 0; overscroll-behavior: contain; }
.kr-cmdk__filters { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 12px; background: var(--kr-surface); border-bottom: 1px solid var(--kr-border); }
.kr-cmdk__chip { border: 1px solid var(--kr-border); background: var(--kr-surface); color: var(--kr-text-2);
    border-radius: 20px; padding: 5px 11px; font: 600 12.5px/1 var(--kr-font); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s, color .12s; }
.kr-cmdk__chip:hover { border-color: var(--kr-text-3); color: var(--kr-text); }
.kr-cmdk__chip.is-on { background: var(--kr-primary); border-color: var(--kr-primary); color: #fff; }
.kr-cmdk__chipn { font-size: 11px; opacity: .75; }
.kr-cmdk__chip.is-on .kr-cmdk__chipn { opacity: .9; }
.kr-cmdk__list { padding: 6px 8px 8px; }
.kr-cmdk__type { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--kr-primary); }
.kr-cmdk__type.is-forum { color: var(--kr-text-3); }
.kr-cmdk__grouplabel { display: flex; align-items: center; gap: 8px; padding: 12px 10px 6px; font-size: 11px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; color: var(--kr-text-3); }
.kr-cmdk__count { background: var(--kr-surface-2); color: var(--kr-text-3); border-radius: 20px; padding: 1px 7px; font-size: 10px; font-weight: 700; }

.kr-cmdk__row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; text-decoration: none; scroll-margin: 10px; }
.kr-cmdk__row.is-active { background: var(--kr-primary-050); }
.kr-cmdk__row.is-active .kr-cmdk__go { opacity: 1; transform: none; }
.kr-cmdk__media { position: relative; width: 40px; height: 52px; border-radius: 6px; overflow: hidden; flex: 0 0 auto; background: var(--kr-surface-2);
    display: flex; align-items: center; justify-content: center; }
.kr-cmdk__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kr-cmdk__media.is-ph { color: var(--kr-primary); background: var(--kr-primary-050); }
.kr-cmdk__media.is-ph svg { width: 20px; height: 20px; }
.kr-cmdk__media.is-forum { border-radius: 50%; width: 40px; height: 40px; }
.kr-cmdk__media.is-recent { border-radius: 50%; width: 34px; height: 34px; color: var(--kr-text-3); background: var(--kr-surface-2); }
.kr-cmdk__rowbody { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.kr-cmdk__rowtitle { font-size: 15px; font-weight: 700; color: var(--kr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-cmdk__rowtitle mark, .kr-cmdk__rowexc mark { background: none; color: var(--kr-primary); font-weight: 800; }
.kr-cmdk__rowmeta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--kr-text-3); }
.kr-cmdk__badge { padding: 2px 7px; font-size: 10px; }
.kr-cmdk__note { color: var(--kr-text-3); font-weight: 600; }
.kr-cmdk__author { color: var(--kr-text-2); font-weight: 600; }
.kr-cmdk__rowexc { font-size: 12.5px; color: var(--kr-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-cmdk__go { width: 18px; height: 18px; color: var(--kr-primary); flex: 0 0 auto; opacity: 0; transform: translateX(-4px); transition: .15s; }

.kr-cmdk__empty, .kr-cmdk__hint { padding: 40px 20px; text-align: center; color: var(--kr-text-3); }
.kr-cmdk__emptyt { font-size: 15px; font-weight: 700; color: var(--kr-text-2); }
.kr-cmdk__emptys { font-size: 13px; margin-top: 4px; }
.kr-cmdk__hint { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 14px; line-height: 1.5; }
.kr-cmdk__hintk { font: 600 12px/1 var(--kr-font); color: var(--kr-text-3); border: 1px solid var(--kr-border);
    background: var(--kr-surface-2); border-radius: 6px; padding: 6px 9px; }
.kr-cmdk__skel { display: flex; align-items: center; gap: 12px; padding: 9px 10px; animation: kr-pulse 1.2s ease-in-out infinite; }
.kr-cmdk__skelmedia { width: 40px; height: 52px; border-radius: 6px; background: var(--kr-surface-2); flex: 0 0 auto; }
.kr-cmdk__skellines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.kr-cmdk__skellines span { height: 10px; border-radius: 5px; background: var(--kr-surface-2); }
.kr-cmdk__skellines span:first-child { width: 55%; } .kr-cmdk__skellines span:last-child { width: 32%; }
@keyframes kr-pulse { 50% { opacity: .45; } }

.kr-cmdk__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px;
    border-top: 1px solid var(--kr-border); flex: 0 0 auto; }
.kr-cmdk__hints { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--kr-text-3); }
.kr-cmdk__hints kbd { font: 600 11px/1 var(--kr-font); border: 1px solid var(--kr-border); background: var(--kr-surface-2);
    border-radius: 4px; padding: 3px 5px; min-width: 15px; text-align: center; }
.kr-cmdk__hints span { margin-right: 4px; }
.kr-cmdk__all { font-size: 13px; font-weight: 700; color: var(--kr-primary); text-decoration: none; white-space: nowrap; }
.kr-cmdk__all:hover { text-decoration: underline; }
.kr-cmdk__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.kr-iconbtn__kbd { margin-left: 6px; font: 600 11px/1 var(--kr-font); color: var(--kr-text-3);
    border: 1px solid var(--kr-border); background: var(--kr-surface-2); border-radius: 5px; padding: 3px 5px; }

@media (prefers-reduced-motion: reduce) {
    .kr-cmdk__backdrop, .kr-cmdk__dialog, .kr-cmdk__go { transition: none; }
    .kr-cmdk__skel, .kr-cmdk__spin { animation: none; }
}
@media (max-width: 900px) { .kr-iconbtn__kbd { display: none; } }
@media (max-width: 560px) {
    .kr-cmdk { padding: 0; }
    .kr-cmdk__dialog { max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
}


/* Tokens --kr-* pour la modale (le forum utilise --tx/--bg… ; on redéfinit ici pour .kr-cmdk) */
.kr-cmdk { --kr-primary:#6d28d9; --kr-primary-050:#f5f3ff; --kr-surface:#ffffff; --kr-surface-2:#f7f7f8;
  --kr-border:#e6e6ea; --kr-text:#17171c; --kr-text-2:#4b4b55; --kr-text-3:#8a8a97;
  --kr-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
html[data-theme="dark"] .kr-cmdk { --kr-surface:#17171f; --kr-surface-2:#1d1d27; --kr-border:#2a2a36;
  --kr-text:#f4f4f7; --kr-text-2:#c3c3cf; --kr-text-3:#8a8a99; --kr-primary-050:#1e1830; }

/* Recherches récentes : suppression en un clic (croix par ligne + « Tout effacer ») — miroir krinein-ui.css v71 */
.kr-cmdk__row--recent { cursor: pointer; }
.kr-cmdk__wipe { margin-left: auto; border: 0; background: none; padding: 2px 4px; border-radius: 6px;
  font: inherit; color: var(--kr-text-3); cursor: pointer; }
.kr-cmdk__wipe:hover { color: var(--kr-primary); }
.kr-cmdk__del { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--kr-text-3);
  cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
.kr-cmdk__del svg { width: 14px; height: 14px; }
.kr-cmdk__row--recent:hover .kr-cmdk__del, .kr-cmdk__row--recent.is-active .kr-cmdk__del, .kr-cmdk__del:focus-visible { opacity: 1; }
.kr-cmdk__del:hover { background: var(--kr-border); color: var(--kr-text); }
@media (hover: none) { .kr-cmdk__del { opacity: 1; } }

/* ============================================================
   Temps réel (chantier H) : notifications .kr-notif
   Toasts « vient de paraître » (broadcast) + « message privé » (ciblé),
   rendus par le module Temps réel de krinein-ui.js (serveur ws.*).
   Volontairement HORS .kr-scope : le forum phpBB les affiche aussi
   (bloc à recopier dans krinein-override.css côté forum, qui ne
   charge pas ce fichier). Tokens partout -> dark mode automatique.
   ============================================================ */
.kr-notifs {
    position: fixed; right: 24px; bottom: 24px; z-index: 110; /* > header 100, < modale 120/cmdk 200 */
    display: flex; flex-direction: column; gap: 10px;
    width: 360px; max-width: calc(100vw - 24px);
    pointer-events: none; /* le conteneur vide ne doit jamais avaler un clic */
}
body.kr-scope:has(.footpanel) .kr-notifs { bottom: 84px; } /* barre équipe fixe (60px) */
/* Slot en grid 1fr->0fr : la pile se resserre sans saut quand un toast part */
.kr-notif__slot { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s ease; }
.kr-notif__slot.is-closing { grid-template-rows: 0fr; }
.kr-notif {
    position: relative; display: flex; gap: 12px; align-items: flex-start;
    min-height: 0; overflow: hidden; box-sizing: border-box;
    background: var(--kr-surface); border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius); padding: 12px 14px;
    box-shadow: 0 4px 10px rgba(20,20,30,.08), 0 18px 50px rgba(20,20,30,.18);
    font-family: var(--kr-font); color: var(--kr-text);
    pointer-events: auto;
    opacity: 0; transform: translateY(12px);
    transition: opacity .18s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.kr-notif[hidden] { display: none; }
.kr-notif.is-show { opacity: 1; transform: translateY(0); }
.kr-notif:focus-within { border-color: var(--kr-link); }
html[data-theme="dark"] .kr-notif { box-shadow: 0 4px 10px rgba(0,0,0,.35), 0 18px 50px rgba(0,0,0,.55); }
.kr-notif__media {
    position: relative; flex: 0 0 auto; width: 48px; height: 64px;
    border-radius: 6px; overflow: hidden; background: var(--kr-primary-050);
}
.kr-notif__media::before { content: "★"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--kr-link); opacity: .45; }
.kr-notif__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kr-notif__media--avatar { width: 40px; height: 40px; border-radius: 50%; }
.kr-notif__media--avatar::before { content: attr(data-i); font-size: 16px; font-weight: 700; opacity: .75; }
.kr-notif__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kr-notif__kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kr-notif__kicker .kr-badge { padding: 2px 7px; font-size: 10px; border-radius: 5px; }
.kr-notif__label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kr-text-3); }
.kr-notif__oc { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-notif__title { font-size: 13.5px; font-weight: 600; color: var(--kr-text-2); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kr-notif__title--main { color: var(--kr-text); font-weight: 700; font-size: 14.5px; }
.kr-notif__cta { font-size: 12.5px; font-weight: 700; color: var(--kr-link); text-decoration: none; margin-top: 2px; }
.kr-notif__cta::after { content: ""; position: absolute; inset: 0; } /* tout le toast est cliquable */
.kr-notif__close {
    position: relative; z-index: 1; /* au-dessus du lien étiré */
    flex: 0 0 auto; width: 32px; height: 32px; margin: -6px -8px 0 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--kr-text-3); border-radius: 8px;
    font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.kr-notif__close:hover { background: var(--kr-border); color: var(--kr-text); }
@media (max-width: 560px) {
    .kr-notifs { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-width: none; }
}
/* Pastille MP : pop unique à l'incrément temps réel (jamais de pulsation continue) */
@keyframes kr-countpop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.kr-count.is-pop { animation: kr-countpop .3s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce) {
    .kr-notif { transform: none; transition: opacity .15s ease; }
    .kr-notif__slot { transition: none; }
    .kr-count.is-pop { animation: none; }
}

/* ------------------------------------------------------------
   Temps réel : tokens + badge pour .kr-notifs.
   prosilver n'a pas les tokens :root du site : même patron que
   .kr-cmdk (tokens scopés, variante dark). Le .kr-badge du forum
   (pastille compteur en position:absolute) est redéfini dans les
   toasts en badge rubrique du site.
   ------------------------------------------------------------ */
.kr-notifs { --kr-primary:#6d28d9; --kr-primary-050:#f5f3ff; --kr-surface:#ffffff; --kr-surface-2:#f7f7f8; --kr-border:#e6e6ea; --kr-text:#17171c; --kr-text-2:#4b4b55; --kr-text-3:#75757f; --kr-link:#6d28d9; --kr-radius:12px; --kr-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
html[data-theme="dark"] .kr-notifs { --kr-surface:#17171f; --kr-surface-2:#1d1d27; --kr-border:#2a2a36; --kr-text:#f4f4f7; --kr-text-2:#c3c3cf; --kr-text-3:#8a8a99; --kr-link:#a78bfa; --kr-primary-050:#1e1830; }
.kr-notifs .kr-badge { position: static; display: inline-block; min-width: 0; height: auto; padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--kr-primary); line-height: 1.4; }
.kr-notifs .kr-badge--actu { background: rgba(20, 20, 28, .72); border: 1px solid var(--kr-primary); }
/* Pile de toasts pleine au pointeur tant qu un toast est affiché (cf krinein-ui.css) */
.kr-notifs:has(.kr-notif) { pointer-events: auto; }