:root{--rift-gold:#e2b955;--rift-gold-hi:#ffe59b;--rift-blue:#62bfff;--rift-violet:#c978ff;--rift-teal:#43dce2;--rift-red:#ff7768;--rift-muted:#8694aa;--rift-ink:#050914}
.rift-plaque{--rp:var(--rift-gold);--rp-hi:var(--rift-gold-hi);position:relative;isolation:isolate;display:inline-grid;place-items:center;min-width:max-content;height:30px;padding:0 18px;border:1px solid color-mix(in srgb,var(--rp) 72%,white 8%);border-radius:4px;background:linear-gradient(180deg,color-mix(in srgb,var(--rp) 12%,#172035),#070b14 58%,#03060c);color:var(--rp-hi);font:800 11px/1 Georgia,"Times New Roman",serif;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 0 #000,0 0 8px color-mix(in srgb,var(--rp) 30%,transparent);box-shadow:inset 0 0 0 2px #02040a,inset 0 1px 7px color-mix(in srgb,var(--rp) 14%,transparent),0 2px 8px #0009;white-space:nowrap}
.rift-plaque:before,.rift-plaque:after{content:"";position:absolute;z-index:-1;top:50%;width:12px;height:18px;background:linear-gradient(135deg,transparent 42%,var(--rp) 43% 49%,#070b14 50% 70%,var(--rp) 71% 77%,transparent 78%);filter:drop-shadow(0 2px 2px #0008)}
.rift-plaque:before{right:100%;transform:translate(3px,-50%)}.rift-plaque:after{left:100%;transform:translate(-3px,-50%) scaleX(-1)}
.rift-plaque>span,.rift-plaque>strong{position:relative;z-index:1}.rift-plaque>svg{width:1em;height:1em;margin-right:.55em;color:var(--rp)}
.rift-plaque--xs{height:24px;padding:0 13px;font-size:9px;border-radius:3px}.rift-plaque--xs:before,.rift-plaque--xs:after{width:10px;height:15px}
.rift-plaque--sm{height:32px;padding:0 20px;font-size:11px}.rift-plaque--md{height:44px;padding:0 30px;font-size:13px}.rift-plaque--lg{height:54px;padding:0 38px;font-size:15px}
.rift-plaque--blue{--rp:var(--rift-blue);--rp-hi:#d9f1ff}.rift-plaque--violet{--rp:var(--rift-violet);--rp-hi:#f1d8ff}.rift-plaque--teal{--rp:var(--rift-teal);--rp-hi:#d6ffff}.rift-plaque--red{--rp:var(--rift-red);--rp-hi:#ffe0da}.rift-plaque--muted{--rp:var(--rift-muted);--rp-hi:#d6deea}
button.rift-plaque,.rift-plaque--action{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .16s ease,transform .12s ease,box-shadow .16s ease}
button.rift-plaque:hover,.rift-plaque--action:hover{filter:brightness(1.13);box-shadow:inset 0 0 0 2px #02040a,inset 0 0 14px color-mix(in srgb,var(--rp) 20%,transparent),0 0 16px color-mix(in srgb,var(--rp) 22%,transparent),0 4px 12px #0009}
button.rift-plaque:active,.rift-plaque--action:active{transform:translateY(1px) scale(.985)}
button.rift-plaque:focus-visible,.rift-plaque--action:focus-visible{outline:2px solid #fff;outline-offset:4px;box-shadow:0 0 0 7px color-mix(in srgb,var(--rp) 45%,transparent)}
.rift-plaque.is-selected{box-shadow:inset 0 0 0 2px #02040a,inset 0 0 16px color-mix(in srgb,var(--rp) 34%,transparent),0 0 20px color-mix(in srgb,var(--rp) 35%,transparent)}
.rift-plaque.is-locked,.rift-plaque:disabled{filter:saturate(.68) brightness(.84);cursor:default;opacity:.82}.rift-plaque.is-locked:after{box-shadow:8px 0 11px color-mix(in srgb,var(--rp) 25%,transparent)}
.rift-plaque[data-glyph]:not([data-glyph=""]){grid-template-columns:auto 1fr;gap:7px}.rift-plaque[data-glyph]:not([data-glyph=""]):first-letter{color:var(--rp)}
@media(prefers-reduced-motion:reduce){button.rift-plaque,.rift-plaque--action{transition:none}}


/* ─── LE PANNEAU, DERIVE DU MEME KIT ────────────────────────────────────────────────
   Chantier 14 b, 22 aout 2026. Jean-Christophe voulait « le modele de cadre de GPT »
   pour tous les encadres de texte du site.

   ⚠ `.rift-plaque` NE PEUT PAS SERVIR A CA, et ce n'est pas une question de gout :
   elle a une `height` fixe et `white-space:nowrap`. Un paragraphe en sortirait sur une
   seule ligne interminable. Elle est faite pour un a trois mots.

   On ne reutilise donc pas le composant, on REFAIT SA RECETTE EN GRAND : meme trait fin
   dore, meme lisere sombre en creux a l'interieur, meme degradee du haut vers le bas,
   memes jetons de couleur. Pas le meme composant partout — la meme main. */
.rift-panneau {
  position: relative;
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--rift-gold) 58%, transparent);
  border-radius: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rift-gold) 8%, #101a30), #070b14 62%, #04070e);
  box-shadow:
    inset 0 0 0 2px #02040a,
    inset 0 1px 10px color-mix(in srgb, var(--rift-gold) 10%, transparent),
    0 3px 14px #0009;
  color: #f5f0df;
}
/* Les memes teintes que les cartouches, pour qu'un panneau et une plaque de la meme
   couleur se repondent. */
.rift-panneau--blue { --rift-gold: var(--rift-blue); }
.rift-panneau--violet { --rift-gold: var(--rift-violet); }
.rift-panneau--teal { --rift-gold: var(--rift-teal); }

/* L'etiquette « A plat » garde sa couleur froide : c'est ce qui la distingue de « En
   volume » d'un coup d'oeil sur les captures. On ne repeint pas une information. */
.etiquette-mode.plat.rift-plaque { --rp: var(--rift-blue); --rp-hi: #dff0ff; }