/* ==========================================================================
PILIER GUIDES — archive-mca_fiche.php / single-mca_fiche.php
Refonte du 17/09/2026 (reproche de Mathias : pas d'image, pas d'animation,
pas de catégorisation visible, ingrédients écrits en texte au lieu du sprite).
Chargé APRÈS style.css : on réutilise ses jetons (--nuit, --violet, --herbe,
--or, --diamant…) et ses composants déjà posés (.mca-porte, .mca-reveal,
.mca-filtre-pill, .mca-fil-ariane, .mca-mascotte) — on ne les redéfinit pas,
on les COMPLÈTE. Tout le reste est neuf, préfixé .mca-guide-.
========================================================================== */
/* ---------- 1. INDEX DES GUIDES — en-tête ---------------------------------- */
.mca-guide-index-tete{display:flex;align-items:center;gap:1.6rem;padding-block:2.2rem 1.6rem;flex-wrap:wrap}
.mca-guide-index-mascotte{flex:none;width:120px}
.mca-guide-index-mascotte .mca-mascotte{width:120px}
.mca-guide-index-tete h1{font-size:clamp(26px,4.2vw,40px);margin-top:.5rem}
.mca-guide-index-tete p{color:var(--texte-bas);margin-top:.6rem;max-width:64ch;font-size:14.5px;line-height:1.6}
@media (max-width:640px){
.mca-guide-index-tete{flex-direction:column;align-items:flex-start;text-align:left}
.mca-guide-index-mascotte{width:84px}
.mca-guide-index-mascotte .mca-mascotte{width:84px}
}
/* ---------- 2. LES QUATRE PORTES — accent réel par catégorie --------------- */
.mca-porte[data-accent="diamant"]{--guide-accent:var(--diamant)}
.mca-porte[data-accent="herbe"]{--guide-accent:var(--herbe)}
.mca-porte[data-accent="or"]{--guide-accent:var(--or)}
.mca-porte[data-accent="violet"]{--guide-accent:var(--violet)}
.mca-porte[data-accent]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--guide-accent) 22%,transparent)}
.mca-porte[data-accent]:hover{border-color:var(--guide-accent);
box-shadow:inset 0 0 0 1px var(--guide-accent),0 16px 34px -18px color-mix(in srgb,var(--guide-accent) 65%,transparent)}
.mca-porte-icone--diamant{color:var(--diamant)}
.mca-porte-icone--herbe{color:var(--herbe)}
.mca-porte-icone--or{color:var(--or)}
.mca-porte-icone--violet{color:var(--violet)}
.mca-porte-icone img{width:100%;height:100%;object-fit:contain;transition:transform .22s ease}
.mca-porte-icone svg{transition:transform .22s ease}
.mca-porte:hover .mca-porte-icone img,.mca-porte:hover .mca-porte-icone svg{transform:translateY(-3px) scale(1.08)}
.mca-porte-compte{color:var(--guide-accent,var(--texte-bas))}
/* ---------- 3. OUTILS — recherche + jetons de catégorie --------------------- */
.mca-guide-outils{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:1.8rem 0 2rem}
.mca-guide-outils .mca-filtres-recherche{max-width:300px;flex:1 1 220px;position:relative}
.mca-guide-outils .mca-filtres-recherche input{width:100%}
.mca-guide-outils .mca-filtre-groupe{flex:1 1 auto}
/* ---------- 4. BANDEAUX DE SECTION (fiches groupées par catégorie) --------- */
.mca-guide-section{padding-block:2.2rem;border-top:1px solid var(--trait)}
.mca-guide-section[data-accent="diamant"] .mca-section-tete h2{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--diamant)}
.mca-guide-section[data-accent="herbe"] .mca-section-tete h2{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--herbe)}
.mca-guide-section[data-accent="or"] .mca-section-tete h2{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--or)}
.mca-guide-section[data-accent="violet"] .mca-section-tete h2{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--violet-clair)}
/* ---------- 5. CARTES DE FICHE — le cœur du reproche de Mathias ------------ */
.mca-guide-grille-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:1rem}
.mca-guide-carte{display:flex;align-items:center;gap:.9rem;background:var(--ardoise);border:1px solid var(--trait);
border-radius:var(--rayon);padding:1rem 1.1rem;min-width:0;position:relative;
transition:transform .16s ease,border-color .16s ease,background-color .16s ease}
.mca-guide-carte:hover{transform:translateY(-3px);background:var(--ardoise-haute);border-color:var(--trait);text-decoration:none}
.mca-guide-carte-sprite{width:56px;height:56px;flex:none;border-radius:var(--rayon-s);background:var(--nuit);
border:1px solid var(--trait);display:grid;place-items:center;overflow:hidden;transition:box-shadow .18s ease}
.mca-guide-carte-sprite img{width:78%;height:78%;object-fit:contain}
.mca-guide-carte-sprite svg{width:50%;height:50%;color:var(--texte-bas)}
.mca-guide-carte-sprite--diamant{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--diamant) 35%,transparent)}
.mca-guide-carte-sprite--herbe{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--herbe) 35%,transparent)}
.mca-guide-carte-sprite--or{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--or) 35%,transparent)}
.mca-guide-carte-sprite--violet{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--violet) 35%,transparent)}
.mca-guide-carte:hover .mca-guide-carte-sprite--diamant{box-shadow:0 0 0 2px var(--diamant)}
.mca-guide-carte:hover .mca-guide-carte-sprite--herbe{box-shadow:0 0 0 2px var(--herbe)}
.mca-guide-carte:hover .mca-guide-carte-sprite--or{box-shadow:0 0 0 2px var(--or)}
.mca-guide-carte:hover .mca-guide-carte-sprite--violet{box-shadow:0 0 0 2px var(--violet)}
.mca-guide-carte-corps{display:flex;flex-direction:column;gap:.35rem;min-width:0;flex:1 1 auto}
.mca-guide-carte-nom{font-family:var(--affiche);font-size:13px;line-height:1.3;color:var(--texte);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mca-guide-carte-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.mca-guide-carte-type{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-bas)}
.mca-guide-carte-version{font-size:10.5px;color:var(--violet-clair)}
/* Aperçu miniature de la grille 3×3 — seulement sur les cartes de fabrication. */
.mca-guide-mini-grille{display:grid;grid-template-columns:repeat(3,6px);grid-template-rows:repeat(3,6px);
gap:1.5px;margin-left:auto;flex:none}
.mca-guide-mini-case{background:var(--trait);border-radius:1px}
.mca-guide-mini-case.est-remplie{background:var(--or)}
/* ---------- 6. FICHE — en-tête animé (single-mca_fiche.php) ---------------- */
.mca-guide-tete{position:relative;overflow:hidden;padding-block:2.4rem 1.8rem;border-bottom:1px solid var(--trait)}
.mca-guide-tete--diamant{--guide-accent:var(--diamant)}
.mca-guide-tete--herbe{--guide-accent:var(--herbe)}
.mca-guide-tete--or{--guide-accent:var(--or)}
.mca-guide-tete--violet{--guide-accent:var(--violet)}
.mca-guide-tete::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(55% 70% at 10% 15%,color-mix(in srgb,var(--guide-accent) 20%,transparent) 0%,transparent 62%)}
.mca-guide-tete .mca-fil-ariane{position:relative;z-index:1}
.mca-guide-entete{position:relative;z-index:1;display:flex;align-items:center;gap:1.6rem;margin-top:1.2rem;flex-wrap:wrap}
.mca-guide-sprite-halo{position:relative;width:176px;height:176px;flex:none;display:grid;place-items:center}
.mca-guide-sprite-halo::before{content:"";position:absolute;inset:-10px;border-radius:50%;
background:radial-gradient(circle,color-mix(in srgb,var(--guide-accent) 50%,transparent) 0%,transparent 72%);
animation:mca-guide-halo 3.2s ease-in-out infinite}
.mca-guide-sprite{position:relative;z-index:1;width:132px;height:132px;object-fit:contain;
filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));animation:mca-guide-flotte 4s ease-in-out infinite}
.mca-guide-sprite--vide{display:grid;place-items:center;width:132px;height:132px;border-radius:var(--rayon);
background:var(--ardoise-haute);border:1px solid var(--trait);font-family:var(--affiche);font-size:40px;color:var(--texte-bas)}
@keyframes mca-guide-halo{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes mca-guide-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* Cascade de l'accent de catégorie à TOUT le contenu de la fiche (custom property héritée) —
évite de redéfinir --guide-accent sur chaque bloc qui en a besoin plus bas dans le DOM. */
.mca-guide-fiche[data-guide-accent="diamant"]{--guide-accent:var(--diamant)}
.mca-guide-fiche[data-guide-accent="herbe"]{--guide-accent:var(--herbe)}
.mca-guide-fiche[data-guide-accent="or"]{--guide-accent:var(--or)}
.mca-guide-fiche[data-guide-accent="violet"]{--guide-accent:var(--violet)}
/* ---------- 6bis. CHAPÔ, BADGE DE TYPE, TUILES « EN UN COUP D'ŒIL » ------- */
.mca-guide-chapo{margin-top:.6rem;font-size:16px;line-height:1.55;color:var(--texte-bas);max-width:62ch}
.mca-guide-badge-type{display:inline-flex;align-items:center;font:700 11px/1 var(--corps);letter-spacing:.05em;
text-transform:uppercase;padding:.5rem .75rem;border-radius:999px;background:var(--ardoise-haute);
border:1px solid var(--trait);color:var(--guide-accent)}
.mca-guide-apercu{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;
position:relative;z-index:1;margin-top:1.6rem}
.mca-guide-apercu-tuile{display:flex;align-items:center;gap:.7rem;background:var(--ardoise-haute);
border:1px solid var(--trait);border-radius:var(--rayon-s);padding:.8rem .9rem;min-width:0;
transition:border-color .16s ease,transform .16s ease}
.mca-guide-apercu-tuile:hover{border-color:var(--guide-accent);transform:translateY(-2px)}
.mca-guide-apercu-icone{flex:none;width:36px;height:36px;border-radius:8px;background:var(--nuit);
border:1px solid var(--trait);display:grid;place-items:center;color:var(--texte-bas)}
.mca-guide-apercu-icone img{width:76%;height:76%;object-fit:contain}
.mca-guide-apercu-icone svg{width:44%;height:44%}
.mca-guide-apercu-texte{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.mca-guide-apercu-cle{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-bas)}
.mca-guide-apercu-valeur{font-size:13.5px;font-weight:700;color:var(--texte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.mca-guide-apercu{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}
.mca-guide-nom{min-width:0}
.mca-guide-cat-lien{display:inline-block;font:700 11px/1 var(--corps);letter-spacing:.08em;text-transform:uppercase;
color:var(--guide-accent);margin-bottom:.5rem}
.mca-guide-cat-lien:hover{text-decoration:underline}
.mca-guide-nom h1{font-size:clamp(26px,4.6vw,42px)}
.mca-guide-meta-ligne{display:flex;align-items:center;gap:.7rem;margin-top:.8rem;flex-wrap:wrap}
.mca-guide-id{display:inline-flex;align-items:center;gap:.5rem;background:var(--ardoise-haute);border:1px solid var(--trait);
border-radius:999px;padding:.5rem .8rem;cursor:pointer;font:inherit;color:var(--texte-bas);min-height:38px;
transition:border-color .15s ease,color .15s ease}
.mca-guide-id:hover{border-color:var(--guide-accent);color:var(--texte)}
.mca-guide-id svg{width:14px;height:14px;flex:none}
.mca-guide-id-copie{display:none;font-size:11px;font-weight:700;color:var(--herbe)}
.mca-guide-id.est-copie{border-color:var(--herbe)}
.mca-guide-id.est-copie .mca-mono,.mca-guide-id.est-copie svg{display:none}
.mca-guide-id.est-copie .mca-guide-id-copie{display:inline}
@media (max-width:640px){
.mca-guide-entete{gap:1.1rem}
.mca-guide-sprite-halo{width:88px;height:88px}
.mca-guide-sprite,.mca-guide-sprite--vide{width:68px;height:68px}
}
/* ---------- 7. FICHE — corps (contenu + annexe collante) -------------------- */
.mca-guide-corps{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2.2rem;padding-block:1.4rem 2rem;align-items:start}
.mca-guide-principal{min-width:0;display:flex;flex-direction:column;gap:0}
.mca-prose{min-width:0;font-size:16px;line-height:1.75;color:var(--texte)}
.mca-prose p{margin-bottom:1.1rem}
.mca-prose h2{font-size:22px;margin:1.8rem 0 .7rem;font-family:var(--titre);color:var(--texte)}
.mca-prose h3{font-size:18px;margin:1.4rem 0 .5rem;color:var(--texte)}
.mca-prose ul,.mca-prose ol{margin:0 0 1.1rem;padding-left:1.3rem}
.mca-prose ul{list-style:disc}
.mca-prose ol{list-style:decimal}
.mca-prose li{margin-bottom:.4rem}
.mca-prose a{color:var(--violet-clair);text-decoration:underline;text-underline-offset:3px}
.mca-prose img{border-radius:var(--rayon-s);margin:1.2rem 0}
.mca-prose table{margin:1.2rem 0;font-size:14.5px}
/* Sections du corps — alternées, chacune avec un filet d'accent (P-207 : hiérarchie avant décor). */
.mca-guide-section-corps{padding:1.7rem 1.4rem;margin-bottom:1.1rem;border-radius:var(--rayon);
border:1px solid var(--trait);border-left:3px solid var(--guide-accent);min-width:0;
scroll-margin-top:calc(var(--mca-entete-h) + 12px)}
.mca-guide-section-corps.est-alterne{background:var(--ardoise)}
.mca-guide-section-corps h2{font-size:20px;margin-bottom:1rem;font-family:var(--titre);font-weight:700;
color:var(--texte);background:none;-webkit-background-clip:unset;background-clip:unset}
.mca-guide-section-corps .mca-prose{font-size:15.5px}
.mca-guide-section-corps:target,.mca-guide-section-corps[id]:target{border-left-color:var(--texte)}
@media (max-width:900px){.mca-guide-corps{grid-template-columns:1fr}}
.mca-guide-annexe{display:flex;flex-direction:column;gap:1.2rem;min-width:0;
position:sticky;top:calc(var(--mca-entete-h) + 1.2rem);
max-height:calc(100vh - var(--mca-entete-h) - 2.4rem);overflow-y:auto;padding-right:2px}
@media (max-width:900px){.mca-guide-annexe{position:static;max-height:none;overflow-y:visible}}
.mca-guide-encart{background:var(--ardoise);border:1px solid var(--trait);border-radius:var(--rayon);padding:1.2rem}
.mca-guide-encart h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--texte-bas);margin-bottom:.9rem}
/* Sommaire — colonne collante, le premier bloc utile qu'on rencontre. */
.mca-guide-sommaire ul{display:flex;flex-direction:column;gap:.45rem}
.mca-guide-sommaire a{display:block;font-size:13px;color:var(--texte-bas);padding:.35rem .5rem;border-radius:6px;
border-left:2px solid transparent;transition:color .14s ease,border-color .14s ease,background-color .14s ease}
.mca-guide-sommaire a:hover{color:var(--texte);border-left-color:var(--guide-accent);background:var(--ardoise-haute);text-decoration:none}
.mca-guide-encart-survie p{font-size:13px;color:var(--texte-bas);margin-bottom:.8rem}
.mca-guide-encart-survie .mca-bouton{width:100%}
/* ---------- 8. PROPRIÉTÉS — pastilles, jamais un tableau -------------------- */
.mca-guide-pastilles{display:flex;flex-wrap:wrap;gap:.5rem}
.mca-guide-pastille{display:inline-flex;align-items:center;font:700 11.5px/1 var(--corps);padding:.55rem .85rem;
border-radius:999px;background:var(--ardoise-haute);border:1px solid var(--trait);color:var(--texte)}
.mca-guide-pastille--type{color:var(--violet-clair);border-color:color-mix(in srgb,var(--violet) 40%,transparent)}
.mca-guide-pastille--oui{color:var(--herbe);border-color:color-mix(in srgb,var(--herbe) 40%,transparent)}
.mca-guide-pastille--lave{color:var(--lave);border-color:color-mix(in srgb,var(--lave) 40%,transparent)}
.mca-guide-pastille--redstone{color:var(--redstone);border-color:color-mix(in srgb,var(--redstone) 40%,transparent)}
.mca-guide-pastille--non{color:var(--texte-bas)}
/* ---------- 9. GRILLE DE FABRICATION — le point précis reproché ------------ */
.mca-guide-recette-corps{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;justify-content:center}
.mca-guide-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:150px;flex:none}
.mca-guide-case{aspect-ratio:1;border-radius:6px;background:var(--nuit);border:1px solid var(--trait);
box-shadow:inset 0 2px 5px rgba(0,0,0,.55);display:grid;place-items:center;padding:.28rem;min-width:0;
transition:border-color .2s ease}
.mca-guide-case img{width:82%;height:82%;object-fit:contain}
.mca-guide-case.est-vide{background:var(--ardoise);opacity:.5}
.mca-guide-case-nom{font-size:8.5px;color:var(--texte-bas);text-align:center;line-height:1.15}
.mca-guide-fleche{color:var(--guide-accent,var(--violet-clair));flex:none;display:flex}
.mca-guide-fleche svg{width:26px;height:26px;animation:mca-guide-fleche-va-vient 1.6s ease-in-out infinite}
@keyframes mca-guide-fleche-va-vient{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.mca-guide-resultat{display:flex;flex-direction:column;align-items:center;gap:.4rem;flex:none;width:84px}
.mca-guide-resultat img{width:44px;height:44px;object-fit:contain;background:var(--nuit);border:1px solid var(--trait);
border-radius:8px;padding:.3rem}
.mca-guide-resultat-nom{font-size:11px;color:var(--texte-bas);text-align:center;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;max-width:100%}
.mca-guide-legende{display:flex;flex-direction:column;gap:.5rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--trait)}
.mca-guide-legende li{display:flex;align-items:center;gap:.6rem;font-size:12.5px;color:var(--texte-bas)}
.mca-guide-legende-icone{width:22px;height:22px;flex:none;display:grid;place-items:center;background:var(--nuit);
border:1px solid var(--trait);border-radius:4px;overflow:hidden}
.mca-guide-legende-icone img{width:82%;height:82%;object-fit:contain}
.mca-guide-legende-qte{margin-left:auto;font-family:var(--mono);font-weight:700;color:var(--texte)}
@media (max-width:480px){
.mca-guide-recette-corps{flex-direction:column}
.mca-guide-fleche svg{transform:rotate(90deg)}
.mca-guide-grille{width:132px}
}
/* ---------- 10. FICHES LIÉES (entre dans / obtenu à partir de) ------------- */
.mca-guide-liees{display:flex;flex-direction:column;gap:.5rem}
.mca-guide-liees a{display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;border-radius:var(--rayon-s);
background:var(--nuit);border:1px solid var(--trait);font-size:13px;min-width:0;color:var(--texte)}
.mca-guide-liees a:hover{background:var(--ardoise-haute);text-decoration:none;border-color:var(--violet)}
.mca-guide-liees-icone{width:24px;height:24px;flex:none;display:grid;place-items:center;background:var(--ardoise-haute);
border-radius:4px;overflow:hidden}
.mca-guide-liees-icone img{width:82%;height:82%;object-fit:contain}
.mca-guide-liees span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- 11. NAVIGATION VERS LA MÊME CATÉGORIE, EN BAS ------------------ */
.mca-guide-voisines{padding-block:2.2rem;border-top:1px solid var(--trait)}
.mca-guide-voisines h2{font-size:18px;margin-bottom:1rem;font-family:var(--titre);color:var(--texte)}
.mca-guide-voisines-liste{display:flex;flex-wrap:wrap;gap:.7rem}
.mca-guide-voisine{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .95rem;border-radius:999px;
background:var(--ardoise);border:1px solid var(--trait);color:var(--texte);font-size:13px;min-height:44px;
transition:border-color .15s ease,transform .15s ease}
.mca-guide-voisine:hover{border-color:var(--violet);transform:translateY(-2px);text-decoration:none}
.mca-guide-voisine-icone{width:22px;height:22px;flex:none;display:grid;place-items:center}
.mca-guide-voisine-icone img{width:100%;height:100%;object-fit:contain}
/* ---------- 12bis. Cycle de 4 accents pour les éléments indexés par n --------
(frise de profondeur, cartes voisines) : violet/herbe/or/diamant, jamais du hasard. */
[data-accent-n="0"]{--accent-n:var(--violet)}
[data-accent-n="1"]{--accent-n:var(--herbe)}
[data-accent-n="2"]{--accent-n:var(--or)}
[data-accent-n="3"]{--accent-n:var(--diamant)}
/* ---------- 13. FRISE DE PROFONDEUR — le point le plus attendu d'une fiche -- */
.mca-guide-profondeur{display:flex;gap:1.3rem;align-items:flex-start;flex-wrap:wrap}
.mca-guide-profondeur-ruban{position:relative;flex:0 0 48px;width:48px;height:280px;border-radius:10px;
overflow:hidden;border:1px solid var(--trait);
background:linear-gradient(180deg,
color-mix(in srgb,var(--ardoise-haute) 60%,transparent) 0%,
color-mix(in srgb,var(--ardoise-haute) 60%,transparent) 66.7%,
#3a3550 66.7%, #2a2540 83.3%, #17141f 83.3%, #0a080f 100%)}
.mca-guide-profondeur-repere{position:absolute;left:0;right:0;top:var(--y);border-top:1px dashed rgba(242,238,255,.25);
font:700 7.5px/1 var(--mono);color:rgba(242,238,255,.6);padding:2px 0 0 3px;letter-spacing:.02em}
.mca-guide-profondeur-bande{position:absolute;left:2px;right:2px;top:var(--haut);height:var(--epaisseur);
min-height:4px;border-radius:3px;background:var(--accent-n);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 10px -2px var(--accent-n)}
.mca-guide-profondeur-legende{flex-basis:100%;order:3;margin-top:.5rem;font-size:11.5px;color:var(--texte-bas)}
.mca-guide-profondeur-liste{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:.7rem}
.mca-guide-profondeur-carte{background:var(--ardoise-haute);border:1px solid var(--trait);border-left:3px solid var(--accent-n);
border-radius:var(--rayon-s);padding:.75rem .9rem}
.mca-guide-profondeur-carte-tete{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.mca-guide-profondeur-carte-tete strong{font-size:14px;color:var(--texte)}
.mca-guide-profondeur-carte-tete span.mca-mono{font-size:12px;color:var(--accent-n);font-weight:700}
.mca-guide-profondeur-carte p{margin-top:.35rem;font-size:12.5px;color:var(--texte-bas);line-height:1.5}
@media (max-width:520px){
.mca-guide-profondeur-ruban{flex-basis:34px;width:34px;height:220px}
.mca-guide-profondeur-repere{font-size:6.5px}
}
/* ---------- 14. CRÉATURES — cœurs, épées, pastilles ------------------------- */
.mca-guide-creature-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.1rem}
.mca-guide-creature-bloc{background:var(--ardoise-haute);border:1px solid var(--trait);border-radius:var(--rayon-s);padding:1rem}
.mca-guide-creature-label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--texte-bas);margin-bottom:.6rem}
.mca-guide-creature-rangee{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.5rem}
.mca-guide-creature-valeur{font-size:12.5px;color:var(--texte-bas)}
.mca-guide-coeur{position:relative;width:18px;height:18px;flex:none;display:inline-block}
.mca-guide-coeur svg{position:absolute;inset:0;width:100%;height:100%}
.mca-guide-coeur-fond{fill:none;stroke:var(--trait);stroke-width:1.4}
.mca-guide-coeur-plein{fill:var(--redstone)}
.mca-guide-coeur--demi .mca-guide-coeur-plein{clip-path:inset(0 50% 0 0)}
.mca-guide-epee{width:17px;height:17px;flex:none;color:var(--lave)}
/* ---------- 15. BUTIN — cartes avec sprite ---------------------------------- */
.mca-guide-butin-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem}
.mca-guide-butin-carte{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;
background:var(--ardoise-haute);border:1px solid var(--trait);border-radius:var(--rayon-s);padding:.9rem .7rem}
.mca-guide-butin-icone{width:38px;height:38px;display:grid;place-items:center;background:var(--nuit);
border:1px solid var(--trait);border-radius:8px}
.mca-guide-butin-icone img{width:80%;height:80%;object-fit:contain}
.mca-guide-butin-nom{font-size:12.5px;color:var(--texte);line-height:1.3}
.mca-guide-butin-qte{font-size:11.5px;color:var(--or)}
/* ---------- 16. COMMANDES — bloc de code copiable, paramètres, exemples ---- */
.mca-guide-code-bloc{position:relative;background:var(--nuit);border:1px solid var(--trait);border-radius:var(--rayon-s);
padding:1rem 3.2rem 1rem 1.1rem;margin-bottom:1rem}
.mca-guide-code-bloc code{display:block;overflow-x:auto;white-space:pre;font-size:14px;color:var(--texte);
-webkit-overflow-scrolling:touch}
.mca-guide-param{color:var(--diamant);font-weight:700}
.mca-guide-code-copier{position:absolute;top:.6rem;right:.6rem;display:inline-flex;align-items:center;gap:.35rem;
background:var(--ardoise-haute);border:1px solid var(--trait);border-radius:999px;padding:.4rem .7rem;
cursor:pointer;color:var(--texte-bas);font-size:11px;font-weight:700;min-height:32px;
transition:border-color .15s ease,color .15s ease}
.mca-guide-code-copier:hover{border-color:var(--guide-accent);color:var(--texte)}
.mca-guide-code-copier svg{width:13px;height:13px;flex:none}
.mca-guide-code-copier.est-copie{border-color:var(--herbe);color:var(--herbe)}
.mca-guide-code-bloc--exemple{margin-bottom:.4rem}
.mca-guide-exemple-effet{font-size:12.5px;color:var(--texte-bas);margin:0 0 1.1rem;padding-left:.2rem}
.mca-guide-parametres{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem;margin-bottom:1.2rem}
.mca-guide-parametre-carte{background:var(--ardoise-haute);border:1px solid var(--trait);border-radius:var(--rayon-s);padding:.85rem}
.mca-guide-parametre-nom{display:block;color:var(--diamant);font-size:13.5px;margin-bottom:.5rem}
.mca-guide-parametre-carte p{margin-top:.5rem;font-size:12.5px;color:var(--texte-bas);line-height:1.5}
.mca-guide-permission{margin-top:.4rem;font-size:13.5px;color:var(--texte-bas)}
.mca-guide-permission strong{color:var(--texte)}
/* ---------- 17. ASTUCES / ERREURS — encarts colorés, jamais un simple -- */
.mca-guide-encarts-colores{display:flex;flex-direction:column;gap:.8rem}
.mca-guide-encart-astuce,.mca-guide-encart-erreur{display:flex;gap:.8rem;align-items:flex-start;
border-radius:var(--rayon-s);padding:1rem 1.1rem;border:1px solid transparent}
.mca-guide-encart-astuce{background:color-mix(in srgb,var(--herbe) 10%,var(--ardoise));border-color:color-mix(in srgb,var(--herbe) 35%,transparent)}
.mca-guide-encart-astuce svg{color:var(--herbe);flex:none;width:22px;height:22px;margin-top:.1rem}
.mca-guide-encart-erreur{background:color-mix(in srgb,var(--redstone) 10%,var(--ardoise));border-color:color-mix(in srgb,var(--redstone) 35%,transparent)}
.mca-guide-encart-erreur svg{color:var(--redstone);flex:none;width:22px;height:22px;margin-top:.1rem}
.mca-guide-encart-astuce strong,.mca-guide-encart-erreur strong{display:block;margin-bottom:.25rem;color:var(--texte);font-size:14px}
.mca-guide-encart-astuce p,.mca-guide-encart-erreur p{margin:0;font-size:13.5px;color:var(--texte-bas);line-height:1.55}
/* ---------- 18. FAQ — accordéon, jamais du texte brut ----------------------- */
.mca-guide-faq{display:flex;flex-direction:column;gap:.6rem}
.mca-guide-faq-item{background:var(--ardoise-haute);border:1px solid var(--trait);border-radius:var(--rayon-s);
padding:0;overflow:hidden}
.mca-guide-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
gap:1rem;padding:1rem 1.1rem;font-weight:700;font-size:14.5px;color:var(--texte);min-height:44px}
.mca-guide-faq-item summary::-webkit-details-marker{display:none}
.mca-guide-faq-item summary svg{flex:none;width:16px;height:16px;color:var(--texte-bas);transition:transform .18s ease}
.mca-guide-faq-item[open] summary svg{transform:rotate(180deg)}
.mca-guide-faq-item[open] summary{border-bottom:1px solid var(--trait)}
.mca-guide-faq-item p{margin:0;padding:.9rem 1.1rem 1.1rem;font-size:13.5px;color:var(--texte-bas);line-height:1.6}
/* ---------- 19. FRISE DE VERSIONS — horizontale, défilable sur mobile ------- */
.mca-guide-versions{display:flex;overflow-x:auto;padding:1.6rem .2rem .4rem;gap:0;-webkit-overflow-scrolling:touch}
.mca-guide-versions-item{position:relative;flex:0 0 232px;width:232px;padding:1.5rem 1rem 0;text-align:center}
.mca-guide-versions-item::before{content:"";position:absolute;top:.45rem;left:0;right:0;height:2px;background:var(--trait)}
.mca-guide-versions-item:first-child::before{left:50%}
.mca-guide-versions-item:last-child::before{right:50%}
.mca-guide-versions-item::after{content:"";position:absolute;top:calc(.45rem - 4px);left:50%;transform:translateX(-50%);
width:10px;height:10px;border-radius:50%;background:var(--guide-accent);border:2px solid var(--nuit)}
.mca-guide-versions-item strong{display:block;font-size:15px;color:var(--texte)}
.mca-guide-versions-item p{margin-top:.4rem;font-size:12px;color:var(--texte-bas);line-height:1.5}
/* ---------- 20. reduced-motion — cohérent avec la règle globale du thème --- */
@media (prefers-reduced-motion: reduce){
.mca-guide-sprite,.mca-guide-sprite-halo::before,.mca-guide-fleche svg{animation:none!important}
.mca-guide-faq-item summary svg{transition:none!important}
}
/* ------------------------------------------------------------------
Corps éditorial : ni mur de texte, ni puce nue
Une liste rendue en disques gris est refusée (CM-0539) : dans une fiche,
chaque
devient une carte à liseré, et le final devient
l'encadré « à retenir » de la page.
------------------------------------------------------------------ */
.mca-guide-section-corps .mca-prose > p:first-of-type{font-size:16.5px;color:var(--texte)}
.mca-guide-section-corps .mca-prose h2{font-size:17px;margin:2rem 0 .8rem;color:var(--violet-clair);
letter-spacing:.01em;display:flex;align-items:center;gap:.6rem}
.mca-guide-section-corps .mca-prose h2::before{content:"";width:9px;height:9px;flex:0 0 9px;
background:var(--violet-clair);box-shadow:0 0 10px -1px var(--violet-clair)}
.mca-guide-section-corps .mca-prose ul{list-style:none;margin:1.1rem 0 1.4rem;padding:0;
display:grid;gap:.6rem}
@media (min-width:860px){
.mca-guide-section-corps .mca-prose ul{grid-template-columns:repeat(3,1fr)}
}
.mca-guide-section-corps .mca-prose ul > li{margin:0;position:relative;
background:color-mix(in srgb,var(--ardoise-haute) 75%,transparent);
border:1px solid var(--trait);border-top:2px solid var(--violet-clair);
border-radius:var(--rayon-s);padding:.85rem .9rem;font-size:13.5px;line-height:1.55;
color:var(--texte-bas)}
.mca-guide-section-corps .mca-prose ul > li:nth-child(2){border-top-color:var(--herbe)}
.mca-guide-section-corps .mca-prose ul > li:nth-child(3){border-top-color:var(--or,#e6b422)}
.mca-guide-section-corps .mca-prose ul > li strong{display:block;margin-bottom:.3rem;
font-family:var(--titre);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
color:var(--texte)}
.mca-guide-section-corps .mca-prose blockquote{margin:1.8rem 0 .2rem;padding:1.1rem 1.2rem 1.1rem 3.2rem;
position:relative;border:1px solid var(--trait);border-left:3px solid var(--herbe);
border-radius:var(--rayon-s);background:color-mix(in srgb,var(--herbe) 9%,var(--ardoise-haute));
font-size:15px;line-height:1.65;color:var(--texte)}
.mca-guide-section-corps .mca-prose blockquote::before{content:"À RETENIR";position:absolute;
left:1.1rem;top:1.25rem;writing-mode:vertical-rl;font:700 9px/1 var(--mono);letter-spacing:.18em;
color:var(--herbe)}
.mca-guide-section-corps .mca-prose blockquote p{margin:0}
.mca-guide-section-corps .mca-prose blockquote p + p{margin-top:.5rem}
/* Les titres du texte entrent dans le sommaire en second niveau : sans ce décalage
ils se confondaient avec les grandes sections de la fiche. */
.mca-guide-sommaire li.est-sous{padding-left:.85rem;position:relative}
.mca-guide-sommaire li.est-sous::before{content:"";position:absolute;left:.15rem;top:.85em;
width:5px;height:1px;background:var(--trait)}
.mca-guide-sommaire li.est-sous a{font-size:12.5px;color:var(--texte-bas)}
/* Les textures du jeu font 16 px de côté : agrandies, un lissage navigateur les
rend floues et trahit le pixel art. Toute image de la zone Guides reste nette. */
.mca-guide-sprite,
.mca-guide-case img,
.mca-guide-recette img,
.mca-guide-voisines img,
.mca-guide-apercu img,
.mca-guide-butin img,
.mca-prose img.mca-guide-sprite{image-rendering:pixelated;image-rendering:crisp-edges}
/* Sans ruban de profondeur, les cartes de lieux prennent toute la largeur. */
.mca-guide-profondeur.sans-ruban .mca-guide-profondeur-liste{flex-basis:100%}
/* Un seul lieu laissait 220 px de vide à droite du ruban : les cartes se centrent
sur la hauteur de la frise plutôt que de flotter en haut. */
.mca-guide-profondeur:not(.sans-ruban) .mca-guide-profondeur-liste{min-height:280px;justify-content:center}
@media (max-width:520px){
.mca-guide-profondeur:not(.sans-ruban) .mca-guide-profondeur-liste{min-height:0}
}