/* Le lexique des pratiques : « Le carnet » (maquette A validée le 26/08/2026).
   Page = une feuille de lexique sur papier crème posée sur le velours de la pièce.
   Généré par scripts/generate-pratiques-pages.js ; ne pas éditer les pages, éditer ce fichier. */

.ma { --ink: #2a1a10; --ink2: #5a4030; --wine: #89013b; --gold: #b98f5c; --gold2: #d9b26a; --paper: #f3e9d6; --paper2: #ead9bd; --cream: #f5ead2;
  position: relative; font-family: 'Inter', sans-serif; color: var(--cream); overflow-x: hidden; background: #0a0608; }
.ma * { box-sizing: border-box; }
.ma-scene { position: fixed; inset: 0; z-index: 0; background: url('/images/atre/scene-boudoir-soft.jpg') center 30%/cover no-repeat; }
.ma-veil { position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(10,6,8,.3), rgba(10,6,8,.88) 70%); }
.ma-in { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 5.6rem .8rem 3rem; }
.ma-crumb { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,234,210,.55); padding: 0 .6rem 1rem; }
.ma-crumb b { color: #f0d9ad; font-weight: 500; }
/* La feuille */
.ma-paper { position: relative; background: var(--paper); color: var(--ink); border-radius: 3px; padding: 2.2rem 1.3rem 2.4rem;
  box-shadow: 0 50px 100px rgba(0,0,0,.8), 0 2px 0 #d9c7a5, 0 4px 0 #cbb691, inset 0 0 90px rgba(120,80,30,.12);
  background-image: radial-gradient(circle at 15% 8%, rgba(255,255,255,.5), transparent 40%), linear-gradient(180deg, #f5ecd9, #efe2c8); }
.ma-paper::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(137,1,59,.28); pointer-events: none; }
.ma-paper::after { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(185,143,92,.45); pointer-events: none; }
.ma-corner { position: absolute; width: 34px; height: 34px; z-index: 2; }
.ma-corner::before, .ma-corner::after { content: ''; position: absolute; background: var(--wine); }
.ma-corner::before { width: 34px; height: 1.5px; top: 0; left: 0; } .ma-corner::after { width: 1.5px; height: 34px; top: 0; left: 0; }
.ma-corner.tl { top: 8px; left: 8px; } .ma-corner.tr { top: 8px; right: 8px; transform: scaleX(-1); } .ma-corner.bl { bottom: 8px; left: 8px; transform: scaleY(-1); } .ma-corner.br { bottom: 8px; right: 8px; transform: scale(-1); }
.ma-seal { position: absolute; top: -26px; right: 26px; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #f0d9ad, #b98f5c 55%, #7a5216); box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 0 0 3px rgba(60,35,10,.35), inset 0 0 0 5px rgba(255,240,205,.5); }
.ma-seal b { font-family: 'Playfair Display', serif; font-size: 2rem; color: #3a2410; font-weight: 700; }
.ma-seal span { position: absolute; inset: 9px; border-radius: 50%; border: 1px dashed rgba(60,35,10,.5); }
.ma-rub { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--wine); font-weight: 600; }
.ma-entry { margin: .5rem 0 0; font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(2.2rem, 8.5vw, 3.6rem); line-height: 1.02; letter-spacing: -.01em; color: var(--ink); }
.ma-lex { margin: .7rem 0 0; font-family: 'Cormorant Garamond', 'Playfair Display', serif; font-style: italic; font-size: clamp(1.25rem, 4.6vw, 1.6rem); color: var(--wine); line-height: 1.35; }
.ma-lex b { font-weight: 500; } .ma-lex small { font-size: .78em; color: var(--ink2); }
.ma-etym { margin: .35rem 0 0; font-size: .82rem; color: var(--ink2); font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; }
.ma-rule { height: 1px; background: linear-gradient(to right, var(--wine), rgba(137,1,59,.15)); margin: 1.4rem 0 1.2rem; position: relative; }
.ma-rule::after { content: '❦'; position: absolute; left: 50%; top: -.75rem; transform: translateX(-50%); background: var(--paper); padding: 0 .6rem; color: var(--wine); font-size: 1rem; }
.ma-def { font-family: 'Playfair Display', serif; font-size: 1.05rem; line-height: 1.7; color: var(--ink); max-width: 60ch; }
.ma-def::first-letter { float: left; font-size: 3.6em; line-height: .78; margin: .1em .14em 0 0; color: var(--wine); font-weight: 700; }
.ma-h { margin: 1.6rem 0 .6rem; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.15rem; color: var(--ink); display: flex; align-items: center; gap: .6rem; }
.ma-h::after { content: ''; flex: 1; height: 1px; background: rgba(42,26,16,.18); }
/* Corps encyclopédique */
.ma-sec { margin-top: 1.9rem; }
.ma-sec h2 { margin: 0 0 .55rem; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.35rem; color: var(--ink); }
.ma-sec h2 small { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--wine); margin-top: .1rem; }
.ma-sec p { margin: 0 0 .8rem; font-size: .98rem; line-height: 1.72; color: #3a2a1e; max-width: 64ch; }
.ma-sec p b { color: var(--ink); font-weight: 600; }
.ma-aside { margin: 1rem 0; padding: .9rem 1.1rem; border-left: 3px solid var(--wine); background: rgba(137,1,59,.06); font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.15rem; line-height: 1.45; color: var(--ink); }
.ma-aside b { font-style: normal; font-family: Inter, sans-serif; font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--wine); display: block; margin-bottom: .3rem; }
.ma-pair { display: grid; gap: .8rem; margin: .4rem 0 1rem; }
.ma-pair div { padding: .9rem 1rem; border: 1px solid rgba(42,26,16,.18); background: rgba(255,255,255,.28); }
.ma-pair h4 { margin: 0 0 .3rem; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.02rem; color: var(--wine); }
.ma-pair h4 span { font-weight: 400; font-style: italic; color: var(--ink2); font-size: .92rem; }
.ma-pair p { margin: 0; font-size: .9rem; }
.ma-steps { counter-reset: s; list-style: none; margin: .3rem 0 .8rem; padding: 0; display: grid; gap: .55rem; }
.ma-steps li { position: relative; padding-left: 2.2rem; font-size: .95rem; line-height: 1.6; color: #3a2a1e; }
.ma-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: .15rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--wine); color: var(--paper); font-family: 'Playfair Display', serif; font-weight: 700; font-size: .78rem; }
.ma-steps li b { color: var(--ink); }
.ma-care { display: grid; gap: .5rem; margin: .3rem 0 .6rem; }
.ma-care div { display: grid; grid-template-columns: 1.2rem 1fr; gap: .5rem; font-size: .92rem; line-height: 1.55; color: #3a2a1e; }
.ma-care div::before { content: '◆'; color: var(--wine); font-size: .7rem; margin-top: .3rem; }
.ma-care b { color: var(--ink); }
.ma-src { margin: 1.6rem 0 0; padding-top: .8rem; border-top: 1px solid rgba(42,26,16,.18); font-size: .74rem; line-height: 1.6; color: var(--ink2); }
.ma-src b { color: var(--ink); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .62rem; display: block; margin-bottom: .2rem; }
@media (min-width: 720px) { .ma-pair { grid-template-columns: 1fr 1fr; } }
/* Montée en gemmes d'encre */
.ma-gems { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.ma-gem { text-align: center; }
.ma-gem i { display: inline-grid; place-items: center; width: 40px; height: 40px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--wine); color: var(--paper); font-family: 'Playfair Display', serif; font-style: normal; font-weight: 700; font-size: 1rem; }
.ma-gem.off i { background: transparent; color: rgba(42,26,16,.4); box-shadow: inset 0 0 0 1.5px rgba(42,26,16,.35); }
.ma-gem span { display: block; margin-top: .35rem; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.ma-gem.off span { color: rgba(42,26,16,.4); }
.ma-gem.entry span::after { content: 'entrée'; display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--wine); }
/* Table à points de conduite */
.ma-tbl { list-style: none; margin: 0; padding: 0; }
.ma-tbl li { display: flex; align-items: baseline; gap: .5rem; padding: .42rem 0; font-size: .95rem; }
.ma-tbl li span:first-child { color: var(--ink2); }
.ma-tbl li i { flex: 1; border-bottom: 2px dotted rgba(42,26,16,.4); transform: translateY(-.3em); }
.ma-tbl li b { font-family: 'Playfair Display', serif; font-weight: 600; color: var(--ink); text-align: right; }
.ma-tbl li b em { font-weight: 400; font-style: italic; color: var(--ink2); }
/* Billets épinglés */
.ma-tickets { display: grid; gap: 1.1rem; margin-top: .4rem; }
.ma-ticket { position: relative; padding: 1.1rem 1.1rem 1rem 1.4rem; background: #fbf4e6; border: 1px dashed rgba(42,26,16,.35); box-shadow: 0 6px 14px rgba(0,0,0,.18); transform: rotate(-1.2deg); }
.ma-ticket:nth-child(2) { transform: rotate(1deg); background: #f8efdd; }
.ma-ticket::before { content: ''; position: absolute; top: -9px; left: 50%; width: 46px; height: 16px; transform: translateX(-50%) rotate(-3deg); background: rgba(212,165,116,.55); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ma-ticket p { margin: 0; font-family: 'Playfair Display', serif; font-size: 1.08rem; line-height: 1.5; color: var(--ink); }
.ma-stamp { position: absolute; right: 10px; bottom: 8px; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--lv); color: var(--lv); display: grid; place-items: center; font-family: 'Playfair Display', serif; font-weight: 700; font-size: .95rem; transform: rotate(-12deg); opacity: .8; }
.ma-stamp::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid var(--lv); }
.ma-ticket[data-l="1"] { --lv: #c2417f; } .ma-ticket[data-l="3"] { --lv: #c9662a; }
.ma-ticket footer { margin-top: .55rem; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.ma-note { margin: .7rem 0 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1rem; color: var(--ink2); }
/* Notes en marge */
.ma-notes { counter-reset: n; display: grid; gap: .8rem; }
.ma-notes > div { display: grid; grid-template-columns: 1.6rem 1fr; gap: .4rem; }
.ma-notes > div::before { counter-increment: n; content: counter(n) '.'; font-family: 'Playfair Display', serif; font-weight: 700; color: var(--wine); }
.ma-notes h3 { margin: 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 1.2rem; color: var(--ink); }
.ma-notes p { margin: .2rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--ink2); }
.ma-see { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.15rem; color: var(--ink); line-height: 1.7; }
.ma-see a { color: var(--wine); text-decoration: none; border-bottom: 1px solid rgba(137,1,59,.35); } .ma-see small { font-family: Inter, sans-serif; font-style: normal; font-size: .7rem; color: var(--ink2); }
/* Sous la feuille */
.ma-cta { text-align: center; padding: 2.2rem 1rem 0; }
.ma-cta h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: clamp(1.5rem, 6vw, 2.1rem); margin: 0; color: #f5ead2; } .ma-cta h2 em { font-style: italic; color: #f0d9ad; }
.ma-cta p { margin: .6rem auto 1.1rem; color: rgba(245,234,210,.68); max-width: 44ch; }
.ma-btn { display: inline-flex; padding: .9rem 1.5rem; border-radius: 999px; font-weight: 700; text-decoration: none; margin: .25rem; }
.ma-btn--p { background: linear-gradient(135deg, #e2c27e, #c69a4e); color: #2a1305; box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,240,205,.28); }
.ma-btn--g { background: rgba(12,9,16,.5); border: 1px solid rgba(212,165,116,.35); color: rgba(245,240,232,.85); }
@media (min-width: 720px) { .ma-in { padding: 6.6rem 1.5rem 4rem; } .ma-paper { padding: 3rem 3.2rem 3.2rem; } .ma-tickets { grid-template-columns: 1fr 1fr; } .ma-notes { grid-template-columns: 1fr 1fr; gap: 1rem 2rem; } .ma-seal { right: 40px; } }

/* Pièce : le Donjon */
.ma--donjon .ma-scene { background-image: url('/images/atre/scene-donjon-soft.jpg'); }
.ma--donjon .ma-seal { background: radial-gradient(circle at 35% 30%, #d9bdff, #8a5cd6 55%, #3a1f6a); }
.ma--donjon .ma-seal b { color: #1a0a2a; }
/* Hub : le sommaire du carnet */
.ma-hub h1 { margin: 0; font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(2.2rem, 8.5vw, 3.6rem); line-height: 1.02; color: var(--ink); }
.ma-hub .ma-lex { margin-top: .5rem; }
.ma-toc { list-style: none; margin: 0; padding: 0; }
.ma-toc > li { padding: 1.1rem 0; border-top: 1px solid rgba(42,26,16,.16); }
.ma-toc > li:first-child { border-top: none; }
.ma-fam { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.ma-fam h2 { margin: 0; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.35rem; color: var(--ink); }
.ma-fam small { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--wine); font-weight: 600; }
.ma-fam small.donjon { color: #5a3d8a; }
.ma-fam em { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--ink2); font-size: 1.05rem; }
.ma-list { list-style: none; margin: .6rem 0 0; padding: 0; columns: 1; column-gap: 2rem; }
.ma-list li { break-inside: avoid; display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0; font-size: .95rem; }
.ma-list li a { color: var(--ink); text-decoration: none; font-family: 'Playfair Display', serif; font-weight: 600; border-bottom: 1px solid rgba(137,1,59,.35); }
.ma-list li a:hover { color: var(--wine); }
.ma-list li span.off { color: rgba(42,26,16,.55); font-family: 'Playfair Display', serif; font-weight: 600; }
.ma-list li i { flex: 1; border-bottom: 1px dotted rgba(42,26,16,.35); transform: translateY(-.3em); min-width: 1rem; }
.ma-list li em { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--wine); font-size: 1rem; }
.ma-list li b { font-family: Inter, sans-serif; font-weight: 500; font-size: .74rem; color: var(--ink2); white-space: nowrap; }
.ma-index { margin: 1.4rem 0 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; line-height: 1.8; color: var(--ink); }
.ma-index a { color: var(--wine); text-decoration: none; border-bottom: 1px solid rgba(137,1,59,.35); }
@media (min-width: 720px) { .ma-list { columns: 2; } }

/* Aperçu d'un brouillon (relecture) */
.ma-brouillon { position: relative; z-index: 2; margin: 7.4rem auto 0; max-width: 760px; padding: .7rem 1rem; text-align: center; font-size: .82rem; letter-spacing: .04em; color: #2a1a10; background: linear-gradient(135deg, #f0d28a, #c9a24a); border-radius: 0 0 10px 10px; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.ma-brouillon ~ .ma-in { padding-top: 1.2rem; }