/* Le lexique des pratiques, v3 : le commun des trois mises en page (07/10/2026). Fond bordeaux chaud, or, Playfair pour les
   titres, Lora pour la voix de la Roue, Inter pour les repères. Les dessins du jeu (trait brun et or sur fond transparent) se
   posent toujours sur du papier : un médaillon crème. Mobile d'abord, confort à partir de 1024 px. */
:root {
  --pq-or: #e3b393; --pq-or-rgb: 227, 179, 147; --pq-creme: #f6d6bc; --pq-titre: #fbe7d4; --pq-texte: rgba(245, 234, 210, .8); --pq-doux: rgba(245, 234, 210, .62);
  --pq-papier: #f4e9d8; --pq-papier-2: #eadbc2; --pq-encre: #2b1810; --pq-vin: #7a1e2e; --pq-ame: #9b7fd1;
  --pq-playfair: 'Playfair Display', Georgia, serif; --pq-inter: 'Inter', system-ui, -apple-system, sans-serif; --pq-voix: 'Lora', Georgia, serif;
}
html:has(body.page-pq) { background: #1a070b; }
body.page-pq { margin: 0; color: #f5ead2;
  background: radial-gradient(ellipse 70% 40% at 12% 10%, rgba(176, 58, 72, .3), transparent 70%),
              radial-gradient(ellipse 60% 40% at 92% 50%, rgba(227, 179, 147, .1), transparent 70%),
              linear-gradient(180deg, #2c0b13 0%, #24090f 45%, #1a070b 100%); }
.pq { box-sizing: border-box; padding: 104px 0 0; overflow-x: clip; }
.pq-dedans { max-width: 1120px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.pq a { color: inherit; }
.pq :focus-visible { outline: 2px solid var(--pq-creme); outline-offset: 3px; }

.pq-fil { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 18px; font: 500 12px/1.4 var(--pq-inter); color: var(--pq-doux); }
.pq-fil a { text-decoration: none; } .pq-fil a:hover { color: var(--pq-creme); } .pq-fil b { color: var(--pq-or); font-weight: 600; }
.pq-sur { margin: 0 0 8px; font: 600 11.5px/1.3 var(--pq-inter); letter-spacing: .26em; text-transform: uppercase; color: var(--pq-or); }
.pq-h { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font: 700 12px/1.2 var(--pq-inter); letter-spacing: .24em; text-transform: uppercase; color: var(--pq-or); }
.pq-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--pq-or-rgb), .5), transparent); }
.pq-rub { margin: 44px 0 0; }
.pq-note { margin: 12px 0 0; font: italic 400 15px/1.5 var(--pq-voix); color: var(--pq-doux); }

/* la voix de la Roue */
.pq-voix { position: relative; margin: 14px 0 0; padding: 14px 16px 14px 18px; border-radius: 10px; background: rgba(20, 5, 9, .55);
  box-shadow: inset 0 0 0 1px rgba(var(--pq-or-rgb), .4); font: italic 400 17px/1.5 var(--pq-voix); color: var(--pq-creme); max-width: 60ch; }
.pq-voix__qui { display: block; margin-bottom: 4px; font: 700 10.5px/1 var(--pq-inter); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--pq-or); }

/* pour qui : un couple, deux hommes, deux femmes */
.pq-couples { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(20, 5, 9, .55); box-shadow: inset 0 0 0 1px rgba(var(--pq-or-rgb), .35); }
.pq-couples button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 99px; background: none; cursor: pointer; font: 600 13px/1 var(--pq-inter); color: var(--pq-texte); transition: background .2s, color .2s; }
.pq-couples button[aria-pressed="true"] { background: linear-gradient(180deg, #f2cfa9, var(--pq-or)); color: #1c0609; }
.pq-prenoms { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.pq-prenoms label { display: grid; gap: 4px; font: 600 10.5px/1 var(--pq-inter); letter-spacing: .2em; text-transform: uppercase; color: var(--pq-or); }
.pq-prenoms input { width: 9.5em; min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(251, 231, 212, .08); box-shadow: inset 0 0 0 1px rgba(var(--pq-or-rgb), .4);
  font: italic 400 17px/1 var(--pq-playfair); color: var(--pq-titre); }
.pq-prenoms input::placeholder { color: var(--pq-doux); }

/* la montée (les quatre niveaux) et les repères */
.pq-montee { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pq-montee li { display: grid; justify-items: center; gap: 6px; text-align: center; font: 600 10px/1.2 var(--pq-inter); letter-spacing: .08em; text-transform: uppercase; color: var(--pq-creme); }
.pq-montee i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font: italic 500 17px/1 var(--pq-playfair);
  background: radial-gradient(circle at 35% 30%, #f2cfa9, var(--pq-or) 55%, #a8744a); color: #1c0609; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.pq-montee .off { color: rgba(245, 234, 210, .32); }
.pq-montee .off i { background: rgba(251, 231, 212, .06); color: rgba(245, 234, 210, .35); box-shadow: inset 0 0 0 1px rgba(var(--pq-or-rgb), .2); }
.pq-reperes { margin: 18px 0 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.pq-reperes div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(var(--pq-or-rgb), .16); }
.pq-reperes dt { font: 500 13px/1.4 var(--pq-inter); color: var(--pq-doux); }
.pq-reperes dd { margin: 0; text-align: right; font: 500 15px/1.35 var(--pq-playfair); color: var(--pq-titre); }

/* les chapitres à déplier */
.pq-chapitres { display: grid; gap: 8px; }
.pq-chap { border-radius: 10px; background: rgba(251, 231, 212, .04); box-shadow: inset 0 0 0 1px rgba(var(--pq-or-rgb), .2); }
.pq-chap summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.pq-chap summary::-webkit-details-marker { display: none; }
.pq-chap__t { font: 500 19px/1.25 var(--pq-playfair); color: var(--pq-titre); }
.pq-chap summary small { font: italic 400 14px/1.3 var(--pq-voix); color: var(--pq-doux); }
.pq-chap__plus { margin-left: auto; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--pq-creme);
  background: rgba(var(--pq-or-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--pq-or-rgb), .5); transition: transform .25s ease; }
.pq-chap__plus svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pq-chap[open] .pq-chap__plus { transform: rotate(45deg); }
.pq-chap__corps { padding: 0 16px 16px; font: 400 15.5px/1.7 var(--pq-inter); color: var(--pq-texte); }
.pq-chap__corps p { margin: 0 0 12px; }
.pq-chap__corps h4 { margin: 14px 0 4px; font: 600 16px/1.3 var(--pq-playfair); color: var(--pq-titre); }
.pq-chap__corps h4 span { font: italic 400 14px var(--pq-voix); color: var(--pq-doux); }
.pq-chap__corps b { color: var(--pq-titre); font-weight: 600; }
.pq-encadres { display: grid; gap: 10px; margin: 6px 0 0; }
.pq-encadres > div { padding: 12px 14px; border-radius: 8px; background: rgba(20, 5, 9, .45); box-shadow: inset 0 0 0 1px rgba(var(--pq-or-rgb), .18); }
.pq-encadres h4 { margin-top: 0; }
.pq-etapes, .pq-soins { margin: 0; padding: 0 0 0 20px; display: grid; gap: 10px; }
.pq-etapes li::marker { font: italic 600 16px var(--pq-playfair); color: var(--pq-or); }
.pq-soins li::marker { color: var(--pq-or); }
.pq-sources { font-size: 13px; color: var(--pq-doux); }

/* les sœurs */
.pq-soeurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pq-soeur { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; text-decoration: none;
  background: rgba(251, 231, 212, .04); box-shadow: inset 0 0 0 1px rgba(var(--pq-or-rgb), .16); transition: box-shadow .2s, background .2s; }
a.pq-soeur:hover { background: rgba(251, 231, 212, .08); box-shadow: inset 0 0 0 1px rgba(var(--pq-or-rgb), .45); }
.pq-soeur img, .pq-soeur .pq-x { grid-row: 1 / span 2; width: 46px; height: 46px; border-radius: 50%; background: var(--pq-papier); object-fit: contain; }
.pq-soeur span { font: 500 15px/1.2 var(--pq-playfair); color: var(--pq-titre); }
.pq-soeur small { font: 500 11.5px/1.2 var(--pq-inter); color: var(--pq-doux); }
.pq-soeur--off { opacity: .55; }
.pq-x { display: grid; place-items: center; font: italic 500 22px/1 var(--pq-playfair); color: #a8744a; }

.pq-piece { padding: 2px 8px; border-radius: 99px; background: rgba(122, 30, 46, .9); font: 700 10px/1.4 var(--pq-inter); letter-spacing: .14em; text-transform: uppercase; color: #fbe7d4; }
.pq-piece--donjon { background: rgba(110, 80, 170, .75); }

/* l'appel au pied */
.pq-appel { margin: 56px 0 0; padding: 40px 16px 56px; text-align: center; background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(176, 58, 72, .32), transparent 70%); }
.pq-appel__voix { margin: 0 auto 20px; max-width: 46ch; font: italic 400 clamp(19px, 3vw, 24px)/1.4 var(--pq-voix); color: var(--pq-creme); }
.pq-appel__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 99px; text-decoration: none; cursor: pointer; border: 0;
  font: 600 15px/1 var(--pq-inter); transition: filter .2s, transform .2s; }
.pq-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pq-btn--or { color: #1c0609 !important; background: linear-gradient(180deg, #f2cfa9, var(--pq-or)); box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
.pq-btn--or:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pq-btn--or:disabled { filter: saturate(.6) brightness(.85); cursor: wait; transform: none; }
.pq-btn--fil { color: var(--pq-creme) !important; box-shadow: inset 0 0 0 1px rgba(var(--pq-or-rgb), .55); background: rgba(20, 5, 9, .4); }

@media (min-width: 700px) { .pq-soeurs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pq-reperes { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@media (min-width: 1024px) { .pq { padding-top: 128px; } .pq-dedans { padding: 0 32px; } .pq-soeurs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .pq-chap__plus { transition: none; } }