/* Le lexique en CABINET DE DESSINS (07/10/2026) : les dessins du jeu en médaillons crème cerclés d'or, accrochés au mur par
   famille ; la fiche s'ouvre sur le grand médaillon et ses repères. */
.pq-tete h1 { margin: 0; font: 400 clamp(36px, 8vw, 64px)/1.04 var(--pq-playfair); color: #fff3e6; text-wrap: balance; }
.pq-tete h1 em { font-style: italic; color: var(--pq-or); }
.pq-familles { display: flex; gap: 8px; margin: 22px -16px 0; padding: 0 16px 6px; overflow-x: auto; scrollbar-width: none; }
.pq-familles::-webkit-scrollbar { display: none; }
.pq-familles a { flex: none; padding: 8px 14px; border-radius: 99px; text-decoration: none; font: 600 13px/1 var(--pq-inter); color: var(--pq-creme);
  background: rgba(20, 5, 9, .5); box-shadow: inset 0 0 0 1px rgba(var(--pq-or-rgb), .35); }
.pq-familles a:hover { background: rgba(var(--pq-or-rgb), .18); }

/* le mur */
.cab-fam { margin: 46px 0 0; scroll-margin-top: 110px; }
.cab-fam__tete { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid rgba(var(--pq-or-rgb), .3); }
.cab-fam__dessin { flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--pq-papier); box-shadow: 0 0 0 2px rgba(var(--pq-or-rgb), .6); }
.cab-fam__tete h2 { margin: 0; font: 500 clamp(24px, 5vw, 32px)/1.1 var(--pq-playfair); color: #fff3e6; }
.cab-fam__tete p { margin: 6px 0 0; font: 500 13px/1.4 var(--pq-inter); color: var(--pq-doux); }
.cab-fam__tete em { font: italic 400 14px var(--pq-voix); }
.cab-mur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.cab-carte { display: grid; justify-items: center; text-align: center; gap: 4px; text-decoration: none; }
.cab-carte__med { position: relative; width: 100%; max-width: 156px; aspect-ratio: 1; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 40% 35%, #fbf4e8, var(--pq-papier) 60%, var(--pq-papier-2));
  box-shadow: 0 0 0 2px rgba(var(--pq-or-rgb), .75), 0 0 0 7px rgba(20, 5, 9, .6), 0 0 0 8px rgba(var(--pq-or-rgb), .3), 0 14px 28px rgba(0, 0, 0, .45); transition: transform .4s ease, box-shadow .4s; }
.cab-carte__med img { width: 92%; height: 92%; object-fit: contain; }
a.cab-carte:hover .cab-carte__med { transform: translateY(-4px) rotate(-2deg); box-shadow: 0 0 0 2px var(--pq-creme), 0 0 0 7px rgba(20, 5, 9, .6), 0 0 0 8px rgba(var(--pq-or-rgb), .55), 0 20px 36px rgba(0, 0, 0, .5); }
.cab-carte__nom { font: 500 17px/1.2 var(--pq-playfair); color: var(--pq-titre); }
.cab-carte__sav { font: italic 400 13.5px/1.2 var(--pq-voix); color: var(--pq-or); }
.cab-carte__n { font: 500 11.5px/1.2 var(--pq-inter); color: var(--pq-doux); }
.cab-carte--off { opacity: .5; }

/* la fiche */
.cab-tete { display: grid; gap: 26px; }
.cab-cadre { display: grid; justify-items: center; gap: 16px; }
.cab-medaillon { width: min(78vw, 340px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #fbf4e8, var(--pq-papier) 60%, var(--pq-papier-2));
  box-shadow: 0 0 0 3px rgba(var(--pq-or-rgb), .85), 0 0 0 12px rgba(20, 5, 9, .65), 0 0 0 13px rgba(var(--pq-or-rgb), .35), 0 30px 60px rgba(0, 0, 0, .55); }
.cab-medaillon img { width: 90%; height: 90%; object-fit: contain; animation: cab-arrive .6s ease; }
@keyframes cab-arrive { from { opacity: .3; transform: scale(.97); } to { opacity: 1; transform: none; } }
.cab-nom { margin: 0; font: 500 clamp(44px, 12vw, 84px)/1 var(--pq-playfair); color: #fff3e6; }
.cab-lex { margin: 10px 0 0; font: 400 15px/1.5 var(--pq-voix); color: var(--pq-doux); }
.cab-lex b { font-weight: 500; font-style: italic; color: var(--pq-or); }
.cab-def { margin: 16px 0 0; font: italic 400 clamp(19px, 2.6vw, 23px)/1.45 var(--pq-voix); color: var(--pq-creme); }
.cab-gages { display: grid; gap: 14px; }
.cab-gage { position: relative; margin: 0; padding: 22px 20px 16px; border-radius: 6px; color: var(--pq-encre);
  background: radial-gradient(ellipse 120% 80% at 20% 0%, #fffaf0, var(--pq-papier) 60%, var(--pq-papier-2)); box-shadow: 0 16px 34px rgba(0, 0, 0, .45); rotate: -.6deg; }
.cab-gage:nth-child(2) { rotate: .8deg; } .cab-gage:nth-child(3) { rotate: -.3deg; }
.cab-gage::before { content: "X"; position: absolute; top: -14px; left: 18px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  font: italic 600 15px/1 var(--pq-playfair); color: #fbe7d4; background: radial-gradient(circle at 35% 30%, #a83246, var(--pq-vin)); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.cab-gage blockquote { margin: 0; font: 500 19px/1.4 var(--pq-playfair); }
.cab-gage figcaption { margin: 10px 0 0; font: 600 10.5px/1.3 var(--pq-inter); letter-spacing: .16em; text-transform: uppercase; color: #8a6a50; }

@media (min-width: 700px) { .cab-mur { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cab-gages { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .cab-mur { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 18px; }
  .cab-tete { grid-template-columns: 400px 1fr; gap: 56px; align-items: center; }
  .cab-medaillon { width: 380px; }
}
@media (prefers-reduced-motion: reduce) { .cab-carte__med, .cab-medaillon img { transition: none; animation: none; } }

/* LES SCÈNES (07/10, fondateur : « trop d'information ; moins, ou plus espacé, avec des visuels par bloc différents ») : une idée
   par scène, chacune son décor, beaucoup d'air entre elles. I le mot (citation en grand), II le corps (une feuille de papier),
   III le geste (cartes numérotées), IV les précautions (bandeau sombre), V à retenir (la Roue parle), puis vos questions. */
.cab-scene { margin: 72px 0 0; }
.cab-jetons { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cab-jetons li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 99px; font: 500 13px/1.2 var(--pq-inter); color: var(--pq-creme);
  background: rgba(20, 5, 9, .5); box-shadow: inset 0 0 0 1px rgba(var(--pq-or-rgb), .35); }
.cab-jetons svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--pq-or); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* I. le mot */
.cab-mot__grille { display: grid; gap: 22px; margin-top: 10px; }
.cab-mot__citation { position: relative; margin: 0; padding: 0 0 0 26px; font: italic 400 clamp(24px, 4.4vw, 34px)/1.35 var(--pq-playfair); color: #fff3e6; text-wrap: pretty; }
.cab-mot__citation::before { content: "«"; position: absolute; left: -4px; top: -10px; font: 400 64px/1 var(--pq-playfair); color: var(--pq-or); opacity: .7; }
.cab-mot__texte { margin: 0; font: 400 17px/1.75 var(--pq-voix); color: var(--pq-texte); }

/* II. le corps */
.cab-corps__feuille { padding: 28px 22px; border-radius: 6px; color: var(--pq-encre);
  background: radial-gradient(ellipse 120% 80% at 20% 0%, #fffaf0, var(--pq-papier) 60%, var(--pq-papier-2)); box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(168, 130, 58, .45); }
.cab-corps__sur { margin: 0 0 12px; font: 700 11.5px/1.3 var(--pq-inter); letter-spacing: .24em; text-transform: uppercase; color: var(--pq-vin); }
.cab-corps__texte { margin: 0; font: 400 clamp(17px, 2.2vw, 20px)/1.7 var(--pq-voix); color: #3d2a1e; }
.cab-corps__texte b { color: var(--pq-vin); font-weight: 600; }
.cab-corps__duo { display: grid; gap: 14px; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(43, 24, 16, .2); }
.cab-corps__duo figure { margin: 0; display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; }
.cab-corps__ic { grid-row: 1 / span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--pq-vin); }
.cab-corps__ic svg { width: 20px; height: 20px; fill: none; stroke: #fbe7d4; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cab-corps__duo figcaption { font: 600 17px/1.3 var(--pq-playfair); color: var(--pq-encre); }
.cab-corps__duo p { margin: 2px 0 0; font: 400 14.5px/1.6 var(--pq-voix); color: #5a4636; }

/* III. le geste */
.cab-geste__cartes { list-style: none; margin: 14px -16px 0; padding: 4px 16px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cab-geste__cartes::-webkit-scrollbar { display: none; }
.cab-geste__cartes li { scroll-snap-align: start; display: grid; align-content: start; gap: 8px; padding: 20px 18px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(58, 16, 25, .9), rgba(28, 6, 9, .9)); box-shadow: inset 0 0 0 1px rgba(var(--pq-or-rgb), .35), 0 14px 30px rgba(0, 0, 0, .35); }
.cab-geste__cartes i { font: italic 400 54px/.9 var(--pq-playfair); color: var(--pq-or); }
.cab-geste__cartes b { font: 500 19px/1.25 var(--pq-playfair); color: var(--pq-titre); }
.cab-geste__cartes span { font: 400 14.5px/1.6 var(--pq-voix); color: var(--pq-texte); }

/* IV. les précautions */
.cab-soin { margin-left: -16px; margin-right: -16px; padding: 36px 16px; background: linear-gradient(180deg, rgba(10, 3, 5, .55), rgba(10, 3, 5, .35)); border-top: 1px solid rgba(var(--pq-or-rgb), .25); border-bottom: 1px solid rgba(var(--pq-or-rgb), .25); }
.cab-soin ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 18px; }
.cab-soin li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font: 400 15.5px/1.6 var(--pq-voix); color: var(--pq-texte); }
.cab-soin li svg { width: 24px; height: 24px; fill: none; stroke: var(--pq-or); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.cab-soin li b { display: block; font: 500 17px/1.3 var(--pq-playfair); color: var(--pq-titre); }

/* V. à retenir : la Roue parle */
.cab-retenir { display: grid; justify-items: center; text-align: center; gap: 10px; max-width: 720px; margin-left: auto; margin-right: auto; }
.cab-retenir__roue { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; font: italic 600 28px/1 var(--pq-playfair); color: #1c0609;
  background: radial-gradient(circle at 35% 30%, #f2cfa9, var(--pq-or) 55%, #a8744a); box-shadow: 0 0 0 5px rgba(20, 5, 9, .7), 0 0 0 6px rgba(var(--pq-or-rgb), .5), 0 14px 30px rgba(0, 0, 0, .45); }
.cab-retenir .pq-voix__qui { margin: 6px 0 0; }
.cab-retenir__voix { margin: 0; font: italic 400 clamp(21px, 3.4vw, 28px)/1.5 var(--pq-voix); color: var(--pq-creme); text-wrap: balance; }

.cab-questions { margin: 0; display: grid; gap: 26px; }
.cab-questions dt { margin: 0 0 6px; font: italic 500 20px/1.3 var(--pq-playfair); color: var(--pq-titre); }
.cab-questions dd { margin: 0; font: 400 16px/1.65 var(--pq-voix); color: var(--pq-texte); }

@media (min-width: 700px) {
  .cab-corps__feuille { padding: 40px 44px; }
  .cab-corps__duo { grid-template-columns: 1fr 1fr; gap: 28px; }
  .cab-geste__cartes { grid-auto-columns: 42%; }
  .cab-soin ul { grid-template-columns: 1fr 1fr; column-gap: 36px; }
  .cab-questions { grid-template-columns: 1fr 1fr; column-gap: 44px; }
}
@media (min-width: 1024px) {
  .cab-scene { margin-top: 110px; }
  .cab-mot__grille { grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
  .cab-geste__cartes { margin: 14px 0 0; padding: 4px 0 10px; grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; }
  .cab-geste__cartes li:nth-child(even) { transform: translateY(24px); }
  .cab-soin { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 56px max(32px, calc((100vw - 1056px) / 2)); }
  .cab-soin ul { grid-template-columns: repeat(2, 1fr); max-width: 1056px; }
}