/* TDD Alchimie V1.3 — intégration d'assets IA */
.alchemy-title{display:flex;justify-content:space-between;gap:1.2rem;align-items:flex-end;margin-bottom:1.1rem}.alchemy-title h1{margin:.1rem 0 0;font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:-.035em}.alchemy-title p{margin:.4rem 0 0;opacity:.72;max-width:780px}.alchemy-eyebrow{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;color:#a97c3f}.alchemy-grimoire-link{display:grid;gap:.08rem;min-width:190px;padding:.72rem 1rem;border:1px solid rgba(167,125,69,.34);border-radius:.65rem;text-decoration:none;color:inherit;background:linear-gradient(135deg,rgba(117,83,43,.08),rgba(255,255,255,.01))}.alchemy-grimoire-link span{font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;opacity:.58}.alchemy-grimoire-link b{font-size:.86rem}
.alchemy-aaa-shell{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(600px,1.55fr);gap:1rem;min-height:760px}.alchemy-aaa-stock,.alchemy-aaa-scene{border:1px solid rgba(174,131,70,.34);border-radius:14px;overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.22)}.alchemy-aaa-stock{position:relative;padding:1rem;background:linear-gradient(155deg,#1c140e,#0d0b09 75%);color:#e7dcc8}.alchemy-aaa-stock:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 10% 0,rgba(195,132,56,.14),transparent 35%)}.alchemy-panel-title{position:relative;z-index:2;display:grid;gap:.18rem;margin-bottom:.8rem;color:#e9d6ac}.alchemy-panel-title span{text-transform:uppercase;letter-spacing:.12em;font-size:.85rem}.alchemy-panel-title small{color:#938574;font-size:.66rem}.alchemy-search-wrap{position:relative;z-index:2}.alchemy-search-wrap>span{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:#9b7441}.alchemy-search-wrap input{width:100%;padding:.7rem .75rem .7rem 2.1rem;border:1px solid rgba(180,139,81,.27);border-radius:.5rem;background:rgba(0,0,0,.33);color:#e7ddce}.material-list{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin-top:.75rem;max-height:660px;overflow:auto;padding-right:.15rem;scrollbar-width:thin;scrollbar-color:#6f5131 transparent}.material{position:relative;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:.48rem;min-height:56px;padding:.48rem .5rem;border:1px solid rgba(184,140,79,.18);border-radius:.5rem;background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(0,0,0,.18));color:#dcd2c1;text-align:left;cursor:grab;transition:.16s}.material:hover{transform:translateY(-2px);border-color:rgba(202,156,87,.48);background:linear-gradient(135deg,rgba(138,92,40,.18),rgba(0,0,0,.2));box-shadow:0 8px 18px rgba(0,0,0,.3)}.material.is-selected{opacity:.28}.material-glyph{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:radial-gradient(circle at 35% 25%,#b88a4d,#4c331d 62%,#20140d);border:1px solid rgba(231,194,132,.22)}.material-glyph:before{content:"✦";color:#ecd3a0;text-shadow:0 0 8px rgba(225,173,89,.4)}.material-glyph i{display:none}.material-name{font-size:.73rem;line-height:1.18}.material-action{font-size:.55rem;text-transform:uppercase;letter-spacing:.08em;color:#b38a50;opacity:0}.material:hover .material-action{opacity:1}
.alchemy-aaa-scene{position:relative;min-height:760px;background:#090a0b url('../images/alchemy/alchemy-workshop-bg.webp') center 42%/cover no-repeat;color:#f1e5cf;isolation:isolate}.alchemy-scene-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,8,9,.7) 0,rgba(7,8,9,.18) 25%,rgba(7,8,9,.08) 64%,rgba(7,8,9,.72) 100%),linear-gradient(180deg,rgba(0,0,0,.28),transparent 28%,transparent 68%,rgba(0,0,0,.48));pointer-events:none}.alchemy-liquid-rack{position:absolute;z-index:5;left:18px;top:18px;display:flex;gap:8px;flex-wrap:wrap;max-width:320px}.alchemy-liquid-card{display:grid;place-items:center;gap:2px;width:90px;min-height:126px;padding:4px;border:1px solid rgba(196,152,87,.32);border-radius:8px;background:rgba(10,10,11,.72);color:#e8d4ac;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.42);font:inherit;font-size:.66rem;transition:.18s;backdrop-filter:blur(3px)}.alchemy-liquid-card img{width:68px;height:91px;object-fit:cover;object-position:center;border-radius:6px;filter:saturate(1.08) contrast(1.04)}.alchemy-liquid-card:hover,.alchemy-liquid-card.is-active{transform:translateY(-2px);border-color:#d2a85c;box-shadow:0 0 0 2px rgba(210,168,92,.11),0 10px 28px rgba(0,0,0,.5)}.alchemy-liquid-card.is-active{background:rgba(67,49,23,.78)}.alchemy-liquid-card--special{min-height:72px}.alchemy-special-liquid{font-size:1.5rem;color:#cda45c}.alchemy-live-status{position:absolute;z-index:5;right:18px;top:18px;display:grid;gap:.1rem;min-width:190px;padding:.7rem .9rem;border:1px solid rgba(193,148,81,.27);border-radius:7px;background:rgba(9,10,11,.73);backdrop-filter:blur(3px);text-align:right;box-shadow:0 8px 20px rgba(0,0,0,.35)}.alchemy-live-status__label{font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;color:#9d8b6e}.alchemy-live-status b{font-size:.78rem;color:#e5d2aa}
.alchemy-cauldron-drop{position:absolute;z-index:6;left:50%;top:44%;transform:translate(-50%,-50%);width:44%;height:27%;border-radius:50%;display:grid;place-items:center;text-align:center;color:rgba(244,226,191,.58);font-size:.73rem;text-shadow:0 2px 5px #000;cursor:default;transition:.22s}.alchemy-cauldron-drop:after{content:"";position:absolute;inset:6%;border:2px dashed rgba(223,182,103,.16);border-radius:50%;transition:.22s}.alchemy-cauldron-drop.is-ready:after,.alchemy-cauldron-drop.is-over:after{border-color:rgba(244,197,104,.74);box-shadow:0 0 25px rgba(198,142,55,.44),inset 0 0 24px rgba(163,115,45,.22)}.alchemy-cauldron-drop.is-over{transform:translate(-50%,-50%) scale(1.035);color:#fff0c8}.alchemy-reaction-glow{position:absolute;z-index:4;left:50%;top:47%;width:34%;aspect-ratio:1.8;border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;background:radial-gradient(ellipse,rgba(139,224,182,.72),rgba(72,159,125,.24) 45%,transparent 72%);filter:blur(8px);pointer-events:none}.alchemy-reaction-glow.pulse{animation:alchemyGlow .7s ease-out}@keyframes alchemyGlow{0%{opacity:.8;transform:translate(-50%,-50%) scale(.25)}55%{opacity:.65;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}.alchemy-particles{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}.alchemy-particles i{position:absolute;width:4px;height:4px;border-radius:50%;background:#f0c268;box-shadow:0 0 7px currentColor;animation:alchemyParticle var(--d,1.4s) ease-out forwards}@keyframes alchemyParticle{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
.alchemy-scene-counter{position:absolute;z-index:7;left:50%;bottom:116px;transform:translateX(-50%);display:flex;align-items:baseline;gap:.35rem;padding:.5rem .9rem;border:1px solid rgba(201,155,85,.28);border-radius:7px;background:rgba(8,9,10,.78);backdrop-filter:blur(3px);box-shadow:0 8px 22px rgba(0,0,0,.38)}.alchemy-scene-counter b{font-size:1.2rem;color:#e4c079}.alchemy-scene-counter span{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:#a99b84}.selected-materials{position:absolute;z-index:7;left:10%;right:10%;bottom:78px;display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem;min-height:30px}.selected-chip{padding:.34rem .55rem;border:1px solid rgba(204,160,91,.32);border-radius:999px;background:rgba(12,13,14,.83);color:#dccdb0;cursor:pointer;font:inherit;font-size:.62rem;box-shadow:0 6px 15px rgba(0,0,0,.34)}.selected-chip b{opacity:.5;margin-left:.2rem}.alchemy-aaa-actions{position:absolute;z-index:7;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:.65rem}.alchemy-button,.alchemy-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.72rem 1rem;border-radius:.5rem;border:1px solid rgba(187,141,73,.48);cursor:pointer;font:inherit}.alchemy-button{min-width:220px;background:linear-gradient(180deg,#73522c,#3c2918);color:#f6e8ca;box-shadow:0 10px 28px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.14);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}.alchemy-button:hover{filter:brightness(1.12)}.alchemy-secondary{background:rgba(8,9,10,.74);color:#c8bca7}.alchemy-result{display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem;border-radius:.75rem;margin-bottom:1rem}.alchemy-result__sigil{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:1.15rem}.alchemy-result>div{display:grid;gap:.12rem}.alchemy-result small{text-transform:uppercase;letter-spacing:.12em;font-size:.58rem;opacity:.65}.alchemy-result b{font-size:1rem}.alchemy-result span{font-size:.78rem}.alchemy-result.success{border:1px solid rgba(93,143,87,.62);background:linear-gradient(110deg,rgba(61,108,59,.16),rgba(28,58,34,.04))}.alchemy-result.success .alchemy-result__sigil{background:rgba(94,148,83,.14);border:1px solid rgba(119,171,106,.4);color:#91bd80}.alchemy-result.failure{border:1px solid rgba(141,86,72,.58);background:linear-gradient(110deg,rgba(130,62,48,.13),rgba(67,29,25,.03))}.alchemy-result.failure .alchemy-result__sigil{background:rgba(139,73,60,.14);border:1px solid rgba(160,89,73,.35);color:#bd7d6f}.alchemy-ghost{position:fixed;z-index:99999;transform:translate(-50%,-50%);pointer-events:none;transition:left .62s cubic-bezier(.15,.8,.2,1),top .62s cubic-bezier(.15,.8,.2,1),transform .62s,opacity .62s}.alchemy-ghost__orb{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#cf9d5b,#54371f 60%,#1f140d);border:1px solid rgba(240,203,144,.42);color:#f0d4a4;box-shadow:0 10px 18px rgba(0,0,0,.5)}
@media(max-width:1050px){.alchemy-aaa-shell{grid-template-columns:1fr}.alchemy-aaa-stock{min-height:auto}.material-list{max-height:330px;grid-template-columns:repeat(3,minmax(0,1fr))}.alchemy-aaa-scene{min-height:720px}}
@media(max-width:700px){.alchemy-title{align-items:flex-start;flex-direction:column}.alchemy-grimoire-link{width:100%}.material-list{grid-template-columns:repeat(2,minmax(0,1fr))}.alchemy-aaa-scene{min-height:650px;background-position:center center}.alchemy-liquid-rack{left:10px;top:10px;max-width:230px}.alchemy-liquid-card{width:68px;min-height:102px;font-size:.56rem}.alchemy-liquid-card img{width:52px;height:72px}.alchemy-live-status{right:10px;top:10px;min-width:140px}.alchemy-cauldron-drop{width:56%;height:25%;top:45%}.selected-materials{left:4%;right:4%;bottom:88px}.alchemy-aaa-actions{flex-direction:column;left:12%;right:12%}.alchemy-aaa-actions button{width:100%}.alchemy-scene-counter{bottom:148px}}

/* TDD Alchimie V1.4 — correction de composition + assets IA ingrédients */
.alchemy-aaa-shell{grid-template-columns:minmax(250px,31%) minmax(0,69%);align-items:stretch}
.alchemy-aaa-stock{position:relative;z-index:2;min-width:0}
.alchemy-aaa-scene{position:relative;z-index:3;min-width:0}
.material-list{grid-template-columns:repeat(2,minmax(0,1fr));}
.material{grid-template-columns:58px minmax(0,1fr) auto;min-height:72px;padding:.4rem}
.material-glyph{width:56px;height:56px;border-radius:8px;overflow:hidden;background:#111;border:1px solid rgba(231,194,132,.28);box-shadow:inset 0 0 18px rgba(0,0,0,.35)}
.material-glyph:before{display:none}
.material-glyph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.06);transition:transform .18s,filter .18s;filter:saturate(1.08) contrast(1.04)}
.material:hover .material-glyph img{transform:scale(1.13);filter:saturate(1.18) contrast(1.08) brightness(1.05)}
.material-name{font-size:.72rem}
.alchemy-cauldron-drop{z-index:12}
.alchemy-reaction-glow{z-index:11}
.alchemy-particles{z-index:13}
.alchemy-scene-counter,.selected-materials,.alchemy-aaa-actions{z-index:14}
@media(max-width:900px){.alchemy-aaa-shell{grid-template-columns:minmax(220px,34%) minmax(0,66%);gap:.65rem}.material-list{grid-template-columns:1fr}.alchemy-liquid-rack{max-width:220px}.alchemy-liquid-card{width:64px}}
@media(max-width:720px){.alchemy-aaa-shell{grid-template-columns:1fr}.alchemy-aaa-stock{z-index:3}.alchemy-aaa-scene{z-index:2;min-height:620px}.material-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:300px}}
.alchemy-ghost__orb--img{overflow:hidden;background:#111}.alchemy-ghost__orb--img img{display:block;width:100%;height:100%;object-fit:cover}

/* TDD Alchimie V1.5 — composition nettoyée, 6 liquides IA, réserve visuelle */
.alchemy-aaa-shell{grid-template-columns:minmax(330px,34%) minmax(0,66%);gap:1rem;min-height:780px}
.alchemy-aaa-stock{padding:1rem .9rem}
.material-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;max-height:690px}
.material{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:.35rem;min-height:128px;padding:.42rem;border-color:rgba(184,140,79,.22);text-align:center}
.material-glyph{width:100%;height:82px;border-radius:7px;background:#090a0b;overflow:hidden}
.material-glyph img{width:100%;height:100%;object-fit:contain;object-position:center;transform:none!important;filter:saturate(1.08) contrast(1.04)}
.material:hover .material-glyph img{transform:scale(1.035)!important}
.material-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.25em;font-size:.68rem;line-height:1.12;text-align:center}
.material-action{display:none}

.alchemy-aaa-scene{min-height:780px;background-position:center 46%}
.alchemy-scene-shade{background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 30%,transparent 76%,rgba(0,0,0,.3)),linear-gradient(90deg,rgba(0,0,0,.23),rgba(0,0,0,.03) 22%,rgba(0,0,0,.02) 78%,rgba(0,0,0,.25))}
.alchemy-liquid-rack{left:18px;right:18px;top:16px;max-width:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;flex-wrap:nowrap}
.alchemy-liquid-card{width:auto;min-width:0;min-height:116px;padding:4px 4px 7px;gap:2px;background:rgba(8,9,10,.76)}
.alchemy-liquid-card img{width:58px;height:78px;object-fit:contain;object-position:center;border-radius:5px;filter:saturate(1.08) contrast(1.05)}
.alchemy-liquid-card>span{font-size:.58rem;line-height:1.04;text-align:center;min-height:2em;display:flex;align-items:center;justify-content:center}
.alchemy-liquid-card.is-active{border-color:#7ec7e5;background:rgba(20,48,61,.78);box-shadow:0 0 0 2px rgba(78,176,219,.15),0 0 24px rgba(54,148,194,.35),0 10px 28px rgba(0,0,0,.5)}

.alchemy-added-panel{position:absolute;z-index:9;left:50%;top:145px;transform:translateX(-50%);width:min(480px,66%);padding:.48rem .7rem .58rem;border:1px solid rgba(195,150,81,.28);border-radius:9px;background:rgba(8,9,10,.76);backdrop-filter:blur(3px);box-shadow:0 10px 25px rgba(0,0,0,.35)}
.alchemy-added-panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem;color:#dbc79d;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}
.alchemy-added-panel__head b{color:#e6c277;font-size:.72rem}
.selected-materials{position:static;display:grid;grid-template-columns:repeat(5,1fr);gap:.42rem;min-height:0}
.selected-slot{position:relative;display:grid;place-items:center;aspect-ratio:1;border:1px solid rgba(189,149,83,.27);border-radius:50%;background:rgba(5,6,7,.55);color:#725f43;overflow:hidden;padding:0}
.selected-slot>span{font-size:1.1rem;opacity:.45}
.selected-slot.is-filled{cursor:pointer;border-color:rgba(214,172,98,.52);box-shadow:inset 0 0 12px rgba(167,110,43,.15)}
.selected-slot img{display:block;width:100%;height:100%;object-fit:contain;background:#090a0b}
.selected-slot i{position:absolute;right:2px;top:1px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.82);color:#d8b36e;font-style:normal;font-size:.65rem}

.alchemy-cauldron-drop{top:49%;width:47%;height:30%;z-index:12;color:transparent}
.alchemy-cauldron-drop:after{border-color:transparent}
.alchemy-cauldron-drop.is-ready:after,.alchemy-cauldron-drop.is-over:after{border-color:rgba(244,197,104,.7)}
.alchemy-reaction-glow{top:50%}
.alchemy-aaa-actions{bottom:18px;gap:.7rem;padding:0 1rem}
.alchemy-button,.alchemy-secondary{min-height:46px}
.alchemy-button{min-width:270px;background:linear-gradient(180deg,#664925,#302216);opacity:.72}
.alchemy-button.is-ready{opacity:1;background:linear-gradient(180deg,#315d84,#173752);border-color:rgba(106,178,222,.55);box-shadow:0 0 22px rgba(50,134,188,.22),0 10px 28px rgba(0,0,0,.38)}
.alchemy-secondary{min-width:150px}
.alchemy-live-status,.alchemy-scene-counter{display:none!important}

@media(max-width:1180px){
  .alchemy-aaa-shell{grid-template-columns:minmax(300px,35%) minmax(0,65%)}
  .material-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .material{min-height:112px}.material-glyph{height:70px}
  .alchemy-liquid-card img{width:50px;height:70px}.alchemy-liquid-card>span{font-size:.54rem}
}
@media(max-width:900px){
  .alchemy-aaa-shell{grid-template-columns:1fr}
  .material-list{grid-template-columns:repeat(4,minmax(0,1fr));max-height:360px}
  .alchemy-aaa-scene{min-height:760px}
}
@media(max-width:720px){
  .material-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alchemy-liquid-rack{grid-template-columns:repeat(3,1fr);top:10px}
  .alchemy-liquid-card{min-height:92px}.alchemy-liquid-card img{height:58px}
  .alchemy-added-panel{top:210px;width:82%}
  .alchemy-cauldron-drop{top:54%}
  .alchemy-aaa-actions{flex-direction:column}.alchemy-aaa-actions>*{width:100%;min-width:0}
}

/* =========================================================
   TDD Alchimie V1.5.2 — stabilisation structure réelle
   ========================================================= */

/* IMPORTANT : #hidden-inputs est un enfant direct du form/grid.
   Sans display:none, il occupait la première cellule de la grille,
   décalant la réserve en colonne 2 et le chaudron en ligne suivante. */
.alchemy-aaa-shell > #hidden-inputs{
  display:none !important;
}

/* Placement explicite : évite tout auto-placement parasite. */
.alchemy-aaa-shell{
  width:100%;
  max-width:none;
  display:grid;
  grid-template-columns:minmax(330px,34%) minmax(0,66%);
  grid-template-areas:"stock scene";
  gap:1rem;
  align-items:stretch;
  min-height:780px;
}
.alchemy-aaa-stock{
  grid-area:stock;
  min-width:0;
  width:100%;
  min-height:780px;
}
.alchemy-aaa-scene{
  grid-area:scene;
  min-width:0;
  width:100%;
  min-height:780px;
  overflow:hidden;
  background-image:url('../images/alchemy/alchemy-workshop-bg.webp');
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* Réserve : grille stable, images entièrement visibles. */
.material-list{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-content:start;
  max-height:690px;
}
.material{
  min-width:0;
  overflow:hidden;
}
.material-glyph{
  width:100%;
  height:82px;
  padding:4px;
  background:#08090a;
}
.material-glyph img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
}
.material:hover .material-glyph img{
  transform:scale(1.035) !important;
}

/* Les six bases restent sur une seule ligne en desktop. */
.alchemy-liquid-rack{
  left:16px;
  right:16px;
  top:16px;
  max-width:none;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
}
.alchemy-liquid-card{
  min-width:0;
  width:auto;
}
.alchemy-liquid-card img{
  object-fit:contain !important;
}

/* Le panneau des composants reste entre les fioles et le chaudron. */
.alchemy-added-panel{
  top:142px;
  width:min(500px,72%);
}

/* Le fond ne contient plus l'ancien compteur / ancien bouton :
   la barre d'action HTML est la seule interface basse. */
.alchemy-aaa-actions{
  bottom:16px;
  left:0;
  right:0;
  padding:0 18px;
  flex-wrap:nowrap;
}
.alchemy-secondary{flex:0 0 auto}
.alchemy-button{flex:0 1 300px;min-width:240px}

/* Pas de texte parasite dans la zone de chute. */
.alchemy-cauldron-drop{
  color:transparent !important;
}

/* Tablette : conserve deux colonnes tant que la largeur le permet. */
@media (min-width:901px) and (max-width:1180px){
  .alchemy-aaa-shell{
    grid-template-columns:minmax(285px,35%) minmax(0,65%);
    grid-template-areas:"stock scene";
    gap:.75rem;
  }
  .material-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .material-glyph{height:74px}
  .alchemy-liquid-card img{width:48px;height:66px}
  .alchemy-liquid-card>span{font-size:.52rem}
  .alchemy-added-panel{top:132px;width:76%}
}

/* 721–900 : deux colonnes aussi, réserve plus étroite. */
@media (min-width:721px) and (max-width:900px){
  .alchemy-aaa-shell{
    grid-template-columns:minmax(245px,36%) minmax(0,64%);
    grid-template-areas:"stock scene";
    gap:.6rem;
  }
  .alchemy-aaa-stock{min-height:720px}
  .alchemy-aaa-scene{min-height:720px}
  .material-list{grid-template-columns:1fr;max-height:630px}
  .material{min-height:92px}
  .material-glyph{height:58px}
  .alchemy-liquid-rack{left:8px;right:8px;gap:4px}
  .alchemy-liquid-card{min-height:94px;padding:3px}
  .alchemy-liquid-card img{width:40px;height:55px}
  .alchemy-liquid-card>span{font-size:.47rem}
  .alchemy-added-panel{top:112px;width:84%}
  .alchemy-aaa-actions{gap:.4rem;padding:0 8px}
  .alchemy-secondary{min-width:110px;padding:.65rem .7rem}
  .alchemy-button{min-width:0;padding:.65rem .7rem;font-size:.62rem}
}

/* Mobile uniquement : empilement. */
@media (max-width:720px){
  .alchemy-aaa-shell{
    grid-template-columns:1fr;
    grid-template-areas:"stock" "scene";
  }
  .alchemy-aaa-stock{min-height:auto}
  .alchemy-aaa-scene{min-height:700px}
  .material-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:320px}
  .alchemy-liquid-rack{grid-template-columns:repeat(3,minmax(0,1fr));}
  .alchemy-added-panel{top:205px;width:88%}
  .alchemy-aaa-actions{flex-direction:column;left:10%;right:10%;padding:0}
  .alchemy-aaa-actions>*{width:100%;min-width:0}
}

/* ==========================================================
   TDD Alchimie V1.5.3 — correctifs visuels issus du test réel
   ========================================================== */

/* 1. La réserve et la scène sont deux panneaux de même hauteur.
   La liste absorbe l'espace restant au lieu d'être coupée par un
   max-height arbitraire. */
.alchemy-aaa-shell{
  grid-template-columns:minmax(360px,34%) minmax(0,66%);
  min-height:820px;
  align-items:stretch;
}
.alchemy-aaa-stock{
  display:flex;
  flex-direction:column;
  min-height:820px;
  max-height:820px;
}
.alchemy-search-wrap{flex:0 0 auto}
.material-list{
  flex:1 1 auto;
  min-height:0;
  max-height:none !important;
  overflow-y:auto;
  overflow-x:hidden;
  align-content:start;
  padding-bottom:.45rem;
}
.alchemy-aaa-scene{
  min-height:820px;
  height:820px;
  background-position:center 48%;
}

/* 2. Vignettes ingrédients : on masque les bordures/parasites qui
   restent dans certains crops IA et on garde un cadre identique. */
.material{
  min-height:122px;
  padding:.42rem;
  overflow:hidden;
}
.material-glyph{
  position:relative;
  width:100%;
  height:82px;
  padding:0;
  overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#17130e 0,#08090a 68%);
  border:1px solid rgba(190,149,88,.22);
}
.material-glyph img{
  position:absolute;
  inset:-7px;
  width:calc(100% + 14px);
  height:calc(100% + 14px);
  object-fit:cover !important;
  object-position:center !important;
  transform:scale(1.06) !important;
  clip-path:inset(5px round 5px);
}
.material:hover .material-glyph img{
  transform:scale(1.10) !important;
}
.material-name{
  min-height:2.15em;
  font-size:.69rem;
  line-height:1.08;
}

/* 3. Les six fioles forment un vrai bandeau compact et régulier. */
.alchemy-liquid-rack{
  left:14px;
  right:14px;
  top:14px;
  gap:5px;
}
.alchemy-liquid-card{
  min-height:112px;
  padding:3px 3px 6px;
  border-radius:7px;
}
.alchemy-liquid-card img{
  width:54px;
  height:72px;
  object-fit:contain !important;
}
.alchemy-liquid-card>span{
  min-height:1.8em;
  font-size:.54rem;
  line-height:1.02;
}

/* 4. Le panneau des ingrédients ajoutés ne masque plus inutilement
   la vapeur et les cinq emplacements sont plus compacts. */
.alchemy-added-panel{
  top:138px;
  width:min(510px,70%);
  padding:.42rem .62rem .5rem;
}
.selected-materials{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;
  gap:9px;
}
.selected-slot{
  flex:0 0 62px;
  width:62px;
  height:62px;
  aspect-ratio:auto;
}
.selected-slot img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.08);
}

/* 5. Zone interactive du chaudron recentrée sur l'ouverture réelle. */
.alchemy-cauldron-drop{
  top:46%;
  width:53%;
  height:24%;
}
.alchemy-reaction-glow{top:47%}

/* 6. Barre d'actions : plus de chevauchement avec le chaudron et
   hauteur constante. */
.alchemy-aaa-actions{
  bottom:14px;
  padding:0 18px;
  gap:.6rem;
}
.alchemy-aaa-actions .alchemy-secondary{
  min-width:145px;
  min-height:44px;
}
.alchemy-aaa-actions .alchemy-button{
  flex:0 1 300px;
  min-width:260px;
  min-height:44px;
}

/* 7. Le décor conserve plus de détails, notamment à droite. */
.alchemy-scene-shade{
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),transparent 27%,transparent 78%,rgba(0,0,0,.24)),
    linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,.01) 24%,rgba(0,0,0,.01) 78%,rgba(0,0,0,.16));
}

/* Ecrans intermédiaires : conserver la composition horizontale sans
   écraser le chaudron ni les six fioles. */
@media (min-width:901px) and (max-width:1180px){
  .alchemy-aaa-shell{grid-template-columns:minmax(330px,36%) minmax(0,64%);min-height:780px}
  .alchemy-aaa-stock,.alchemy-aaa-scene{min-height:780px;height:780px;max-height:780px}
  .material-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .material{min-height:112px}.material-glyph{height:72px}
  .alchemy-liquid-card img{width:46px;height:62px}
  .alchemy-liquid-card>span{font-size:.48rem}
  .alchemy-added-panel{top:126px;width:78%}
  .selected-slot{flex-basis:54px;width:54px;height:54px}
}

@media (min-width:721px) and (max-width:900px){
  .alchemy-aaa-shell{grid-template-columns:minmax(270px,36%) minmax(0,64%);min-height:740px}
  .alchemy-aaa-stock,.alchemy-aaa-scene{min-height:740px;height:740px;max-height:740px}
  .material-list{grid-template-columns:1fr}
  .material{min-height:88px;display:grid;grid-template-columns:66px 1fr;align-items:center;text-align:left}
  .material-glyph{height:62px}.material-name{text-align:left;min-height:0}
  .alchemy-liquid-card{min-height:88px}.alchemy-liquid-card img{width:38px;height:50px}
  .alchemy-added-panel{top:102px;width:86%}
  .selected-slot{flex-basis:46px;width:46px;height:46px}
  .alchemy-aaa-actions{padding:0 8px}
  .alchemy-aaa-actions .alchemy-secondary{min-width:105px}
  .alchemy-aaa-actions .alchemy-button{min-width:0}
}

@media (max-width:720px){
  .alchemy-aaa-shell{grid-template-columns:1fr;min-height:0}
  .alchemy-aaa-stock{min-height:auto;height:auto;max-height:none}
  .alchemy-aaa-scene{min-height:700px;height:700px;max-height:none}
  .material-list{max-height:320px !important;grid-template-columns:repeat(2,minmax(0,1fr))}
  .alchemy-liquid-rack{grid-template-columns:repeat(3,minmax(0,1fr))}
  .alchemy-added-panel{top:198px;width:90%}
  .selected-slot{flex-basis:48px;width:48px;height:48px}
  .alchemy-cauldron-drop{top:55%;width:64%;height:22%}
  .alchemy-aaa-actions{flex-direction:column;left:10%;right:10%;padding:0}
  .alchemy-aaa-actions>*{width:100%!important;min-width:0!important}
}

/* ==========================================================
   TDD Alchimie V1.6 — assets IA unitaires + hiérarchie AAA
   ========================================================== */
@media (min-width:1181px){
  .alchemy-aaa-shell{grid-template-columns:minmax(400px,38%) minmax(0,62%);}
}

/* La réserve devient une vraie galerie d'objets plutôt qu'une liste HTML. */
.material-list{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55rem;
  padding-right:.35rem;
}
.material{
  min-height:136px;
  padding:.42rem .42rem .52rem;
  gap:.3rem;
  border-color:rgba(193,151,88,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.12));
  box-shadow:none;
}
.material:hover{
  border-color:rgba(213,174,105,.46);
  background:linear-gradient(180deg,rgba(126,86,41,.12),rgba(0,0,0,.12));
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.material-glyph{
  height:94px;
  border:0;
  background:radial-gradient(circle at 50% 48%,rgba(55,45,30,.32),rgba(6,7,8,.96) 72%);
  box-shadow:inset 0 0 18px rgba(0,0,0,.38);
}
.material-glyph img{
  position:static!important;
  inset:auto!important;
  display:block;
  width:100%!important;
  height:100%!important;
  padding:3px;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  clip-path:none!important;
  filter:saturate(1.08) contrast(1.04)!important;
}
.material:hover .material-glyph img{transform:scale(1.035)!important;}
.material-name{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-height:2.2em;
  font-size:.69rem;
  line-height:1.08;
  color:#e2d8c8;
}
.material-action{display:none!important;}

/* Les six bases utilisent mieux l'espace : fiole dominante, carte moins massive. */
.alchemy-liquid-rack{top:12px;left:12px;right:12px;gap:6px;}
.alchemy-liquid-card{min-height:104px;padding:3px 3px 5px;background:rgba(7,8,9,.68);}
.alchemy-liquid-card img{width:62px;height:78px;}
.alchemy-liquid-card>span{font-size:.53rem;min-height:1.55em;}

/* Le bandeau des composants ajoutés devient discret et laisse respirer la vapeur. */
.alchemy-added-panel{
  top:124px;
  width:min(455px,62%);
  padding:.34rem .55rem .4rem;
  background:rgba(7,8,9,.67);
  border-color:rgba(195,150,81,.22);
  box-shadow:0 8px 18px rgba(0,0,0,.24);
}
.alchemy-added-panel__head{margin-bottom:.28rem;font-size:.56rem;}
.selected-materials{gap:7px;}
.selected-slot{
  flex:0 0 48px;
  width:48px;
  height:48px;
  border-color:rgba(190,149,83,.24);
  background:rgba(5,6,7,.48);
}
.selected-slot img{object-fit:contain!important;transform:none!important;padding:2px;background:#070809;}

/* La scène garde le chaudron comme point focal. */
.alchemy-scene-shade{
  background:
    linear-gradient(180deg,rgba(0,0,0,.04),transparent 24%,transparent 82%,rgba(0,0,0,.18)),
    linear-gradient(90deg,rgba(0,0,0,.11),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 82%,rgba(0,0,0,.12));
}
.alchemy-cauldron-drop{top:45%;width:55%;height:25%;}
.alchemy-aaa-actions{bottom:18px;}

@media (min-width:901px) and (max-width:1180px){
  .alchemy-aaa-shell{grid-template-columns:minmax(350px,37%) minmax(0,63%);}
  .material-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .material-glyph{height:86px;}
  .alchemy-added-panel{top:116px;width:70%;}
}
@media (min-width:721px) and (max-width:900px){
  .material{display:flex;min-height:116px;text-align:center;}
  .material-glyph{height:76px;}
  .alchemy-added-panel{top:101px;width:82%;}
}

/* ==========================================================
   TDD Alchimie V1.8 — Grimoire dark fantasy
   ========================================================== */
.grimoire-hero{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;margin:0 0 1.25rem;padding:1rem 1.2rem;border:1px solid rgba(177,132,68,.34);border-radius:12px;background:radial-gradient(circle at 12% 0,rgba(151,101,42,.16),transparent 34%),linear-gradient(135deg,rgba(37,27,19,.94),rgba(14,13,12,.97));box-shadow:0 16px 35px rgba(0,0,0,.16);color:#e7d8bc}.grimoire-hero__sigil{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(205,164,94,.4);border-radius:50%;font-size:1.45rem;color:#d7ad65;background:rgba(0,0,0,.22)}.grimoire-hero__content{display:grid;gap:.28rem}.grimoire-kicker{font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:#a98a5c}.grimoire-hero__content b{font-size:.9rem}.grimoire-hero>strong{font-size:1.15rem;color:#d6b270}.grimoire-progressbar{height:5px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.07)}.grimoire-progressbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#745027,#d0a75f);box-shadow:0 0 12px rgba(206,163,88,.35)}
.potion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.potion-card{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);min-height:285px;overflow:hidden;border:1px solid rgba(151,111,62,.28);border-radius:12px;background:linear-gradient(145deg,rgba(35,28,22,.98),rgba(17,16,15,.99));box-shadow:0 14px 32px rgba(0,0,0,.16);color:#dfd4c3;transition:transform .18s,border-color .18s,box-shadow .18s}.potion-card:before{content:"";position:absolute;inset:7px;pointer-events:none;border:1px solid rgba(198,158,91,.08);border-radius:8px}.potion-card.known:hover{transform:translateY(-3px);border-color:rgba(199,154,84,.5);box-shadow:0 18px 40px rgba(0,0,0,.25)}.potion-card__visual,.potion-unknown-visual{position:relative;display:grid;place-items:center;min-height:100%;border-right:1px solid rgba(173,129,70,.2);background:radial-gradient(circle at 50% 38%,rgba(123,86,43,.25),transparent 48%),rgba(4,5,5,.34)}.potion-card__visual img{width:92px;height:155px;object-fit:contain;filter:drop-shadow(0 12px 15px rgba(0,0,0,.55)) saturate(.92)}.potion-card__seal{position:absolute;bottom:17px;display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(206,163,90,.38);border-radius:50%;background:#18130e;color:#c69a53;font-size:.8rem}.potion-card__body{position:relative;z-index:2;display:flex;flex-direction:column;padding:1rem}.potion-grade{align-self:flex-start;margin-bottom:.4rem;padding:.24rem .48rem;border:1px solid rgba(186,141,74,.3);border-radius:99px;color:#cba565;background:rgba(129,86,36,.1);font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em}.potion-card h2{margin:0 0 .7rem;color:#f0e3cb;font-family:Georgia,'Times New Roman',serif;font-size:1.1rem;line-height:1.15}.potion-base{display:flex;align-items:baseline;gap:.45rem;margin-bottom:.7rem;font-size:.68rem}.potion-base span,.potion-effect>span{font-size:.55rem;text-transform:uppercase;letter-spacing:.12em;color:#907a5b}.potion-base b{font-weight:600;color:#c8b99f}.potion-ingredients{display:flex;flex-wrap:wrap;gap:.38rem;margin-bottom:.75rem}.potion-ingredient{position:relative;width:46px}.potion-ingredient img{display:block;width:46px;height:46px;object-fit:contain;border:1px solid rgba(185,141,76,.22);border-radius:50%;background:radial-gradient(circle,#282016,#090a0a 72%)}.potion-ingredient span{display:none}.potion-effect{margin-top:auto;padding-top:.65rem;border-top:1px solid rgba(185,141,76,.15)}.potion-effect p{margin:.25rem 0 0;font-size:.72rem;line-height:1.4;color:#cfc4b3}.potion-admin{display:flex;gap:.8rem;margin-top:.7rem;padding-top:.55rem;border-top:1px solid rgba(255,255,255,.05)}.potion-admin a{font-size:.62rem;color:#c9a263;text-decoration:none}.potion-admin a:last-child{color:#b77b6d}.potion-unknown-visual{filter:saturate(.35)}.potion-unknown-visual span{display:grid;place-items:center;width:70px;height:100px;border:1px solid rgba(142,122,92,.22);border-radius:50% 50% 42% 42%;color:#665d51;background:linear-gradient(rgba(255,255,255,.025),rgba(0,0,0,.22));font:2rem Georgia,serif}.potion-card.unknown{opacity:.72;background:linear-gradient(145deg,#201e1b,#121212)}.potion-card.unknown h2{color:#9f978b}.potion-mystery{margin:.1rem 0 .9rem;font-size:.72rem;line-height:1.45;color:#837d74}.potion-runes{margin-top:auto;color:#655c4f;letter-spacing:.28em;font-size:1rem}.potion-card[data-grade="Initié"]{border-top-color:rgba(108,144,129,.58)}.potion-card[data-grade="Maître"]{border-top-color:rgba(111,128,169,.62)}.potion-card[data-grade="Grand Maître"]{border-top-color:rgba(178,137,70,.78);box-shadow:0 14px 34px rgba(120,77,25,.12)}
.alchemy-form{display:grid;gap:1rem;max-width:850px}.alchemy-form label{display:grid;gap:.35rem}.alchemy-form input,.alchemy-form select,.alchemy-form textarea{width:100%;padding:.72rem;border:1px solid rgba(150,118,76,.28);border-radius:7px;background:rgba(0,0,0,.16);color:inherit}.alchemy-form input[type="checkbox"]{width:auto}.alchemy-button{display:inline-flex;align-items:center;justify-content:center;padding:.72rem 1rem;border:1px solid rgba(190,146,79,.42);border-radius:7px;background:linear-gradient(180deg,#664925,#302216);color:#ead9b8;text-decoration:none;cursor:pointer}
@media(max-width:1280px){.potion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.alchemy-title{align-items:flex-start;flex-direction:column}.potion-grid{grid-template-columns:1fr}.potion-card{grid-template-columns:100px minmax(0,1fr)}.grimoire-hero{grid-template-columns:auto 1fr}.grimoire-hero>strong{display:none}}@media(max-width:480px){.potion-card{grid-template-columns:1fr}.potion-card__visual,.potion-unknown-visual{min-height:150px;border-right:0;border-bottom:1px solid rgba(173,129,70,.2)}.potion-card__visual img{height:125px}}

/* ==========================================================
   TDD Alchimie V1.9 — Grimoire : cartes cliquables & fiche
   ========================================================== */
.potion-card__link{position:absolute;inset:0;z-index:3;border-radius:inherit}
.potion-card.known{cursor:pointer}
.potion-card.known:hover{transform:translateY(-3px)}
.potion-admin{position:relative;z-index:4}

/* Contour complet selon le rang */
.potion-card.known[data-grade="Débutant"]{border-color:#78c9e8;box-shadow:0 0 0 1px rgba(120,201,232,.12),0 14px 32px rgba(0,0,0,.18)}
.potion-card.known[data-grade="Initié"]{border-color:#b87333;box-shadow:0 0 0 1px rgba(184,115,51,.13),0 14px 32px rgba(0,0,0,.18)}
.potion-card.known[data-grade="Maître"]{border-color:#c4c8ce;box-shadow:0 0 0 1px rgba(196,200,206,.13),0 14px 32px rgba(0,0,0,.18)}
.potion-card.known[data-grade="Grand Maître"]{border-color:#d6ad45;box-shadow:0 0 0 1px rgba(214,173,69,.16),0 14px 34px rgba(120,77,25,.15)}
.potion-card.known[data-grade="Débutant"]:hover{border-color:#a8e5fb;box-shadow:0 0 18px rgba(120,201,232,.16),0 18px 40px rgba(0,0,0,.25)}
.potion-card.known[data-grade="Initié"]:hover{border-color:#d18c4e;box-shadow:0 0 18px rgba(184,115,51,.16),0 18px 40px rgba(0,0,0,.25)}
.potion-card.known[data-grade="Maître"]:hover{border-color:#e2e5e9;box-shadow:0 0 18px rgba(196,200,206,.14),0 18px 40px rgba(0,0,0,.25)}
.potion-card.known[data-grade="Grand Maître"]:hover{border-color:#f0cd68;box-shadow:0 0 20px rgba(214,173,69,.19),0 18px 42px rgba(0,0,0,.27)}

/* Recette inconnue : teinte neutre + cadenas + chaînes */
.potion-card.unknown{opacity:.82;border-color:#585858;background:linear-gradient(145deg,#242424,#121212);box-shadow:0 14px 30px rgba(0,0,0,.17)}
.potion-card.unknown:before{border-color:rgba(170,170,170,.08)}
.potion-card.unknown .potion-grade{border-color:rgba(150,150,150,.22);background:rgba(110,110,110,.08);color:#9e9e9e}
.potion-unknown-visual{position:relative;overflow:hidden;filter:none;background:radial-gradient(circle at 50% 48%,rgba(115,115,115,.13),transparent 36%),linear-gradient(145deg,#222,#101010);border-right-color:rgba(140,140,140,.16)}
.potion-lock{position:relative;z-index:4;display:grid;place-items:center;width:62px;height:62px;border:1px solid rgba(175,175,175,.28);border-radius:50%;background:radial-gradient(circle,#363636,#171717 72%);box-shadow:0 7px 18px rgba(0,0,0,.55),inset 0 0 0 4px rgba(255,255,255,.025);font-size:1.65rem;filter:grayscale(1)}
.potion-chain{position:absolute;z-index:2;left:50%;top:50%;width:92px;height:7px;transform-origin:0 50%;opacity:.67;background:repeating-linear-gradient(90deg,#747474 0 5px,#303030 5px 9px);border:1px solid rgba(20,20,20,.7);border-radius:5px;box-shadow:0 2px 4px rgba(0,0,0,.48)}
.potion-chain--nw{transform:rotate(-142deg)}
.potion-chain--ne{transform:rotate(-38deg)}
.potion-chain--sw{transform:rotate(142deg)}
.potion-chain--se{transform:rotate(38deg)}

/* Fiche détaillée */
.potion-detail{position:relative;overflow:hidden;padding:1.35rem;border:1px solid rgba(180,142,83,.28);border-radius:14px;background:radial-gradient(circle at 12% 4%,rgba(150,104,48,.13),transparent 30%),linear-gradient(145deg,rgba(34,27,21,.98),rgba(14,14,13,.99));box-shadow:0 18px 42px rgba(0,0,0,.2);color:#ded2c0}
.potion-detail:before{content:"";position:absolute;inset:8px;pointer-events:none;border:1px solid rgba(201,165,104,.08);border-radius:10px}
.potion-detail[data-grade="Débutant"]{border-color:#78c9e8}
.potion-detail[data-grade="Initié"]{border-color:#b87333}
.potion-detail[data-grade="Maître"]{border-color:#c4c8ce}
.potion-detail[data-grade="Grand Maître"]{border-color:#d6ad45}
.potion-detail__header{position:relative;z-index:1;display:grid;grid-template-columns:180px 1fr;align-items:center;gap:1.4rem;padding:1rem 1rem 1.35rem;border-bottom:1px solid rgba(190,145,80,.17)}
.potion-detail__visual{display:grid;place-items:center;min-height:210px;border:1px solid rgba(183,145,87,.18);border-radius:12px;background:radial-gradient(circle,rgba(117,83,43,.22),transparent 61%),rgba(0,0,0,.18)}
.potion-detail__visual img{width:125px;height:195px;object-fit:contain;filter:drop-shadow(0 15px 16px rgba(0,0,0,.52))}
.potion-detail__intro h1{margin:.45rem 0 .35rem;font-family:Georgia,'Times New Roman',serif;font-size:2rem;line-height:1.08;color:#f1e4ce}
.potion-detail__lead{margin:0;color:#9f927f;font-size:.8rem}
.potion-detail__grid{position:relative;z-index:1;display:grid;grid-template-columns:2fr 1fr;gap:1rem;padding:1.25rem 1rem .5rem}
.potion-detail__section{padding:1rem;border:1px solid rgba(185,143,80,.15);border-radius:10px;background:rgba(0,0,0,.12)}
.potion-detail__label{display:block;margin-bottom:.8rem;color:#a68c62;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em}
.potion-detail__ingredients{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.potion-detail__ingredient{display:flex;align-items:center;gap:.7rem;min-width:0;padding:.45rem .55rem;border:1px solid rgba(181,142,82,.13);border-radius:8px;background:rgba(255,255,255,.018)}
.potion-detail__ingredient img{flex:0 0 58px;width:58px;height:58px;object-fit:contain;border-radius:50%;background:radial-gradient(circle,#282016,#090a0a 72%)}
.potion-detail__ingredient b{font-size:.76rem;line-height:1.25;color:#d7cab6}
.potion-detail__base{display:flex;align-items:center;gap:.85rem}
.potion-detail__base img{width:72px;height:100px;object-fit:contain;filter:drop-shadow(0 9px 10px rgba(0,0,0,.4))}
.potion-detail__base b{font-family:Georgia,'Times New Roman',serif;color:#e4d6bf;font-size:1rem}
.potion-detail__effect{grid-column:1/-1}
.potion-detail__effect p{margin:0;color:#d4c8b6;font-size:.86rem;line-height:1.6}
.potion-detail__actions{position:relative;z-index:4;display:flex;gap:.65rem;justify-content:space-between;padding:1rem}
.potion-detail__actions .alchemy-secondary{background:linear-gradient(180deg,#3c352b,#211d18)}

@media(max-width:760px){
  .potion-detail__header{grid-template-columns:1fr;text-align:center}
  .potion-detail__visual{min-height:170px}
  .potion-detail__visual img{height:155px}
  .potion-detail__grid{grid-template-columns:1fr}
  .potion-detail__effect{grid-column:auto}
  .potion-detail__ingredients{grid-template-columns:1fr}
  .potion-detail__actions{flex-direction:column}
  .potion-chain{width:120px}
}

/* ==========================================================
   TDD Alchimie V1.9.1 — correction proportions grimoire/fiche
   ========================================================== */

/* Le grimoire est un index lisible : 2 cartes larges maximum. */
.potion-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.potion-card{
  grid-template-columns:150px minmax(0,1fr);
  min-height:255px;
}
.potion-card__visual{
  min-height:255px;
}
.potion-card__visual img{
  width:112px;
  height:175px;
}
.potion-card__body{
  min-width:0;
  padding:1rem 1.05rem;
}
.potion-card h2{
  font-size:1.2rem;
  line-height:1.12;
}
.potion-ingredient{
  width:44px !important;
}
.potion-ingredient img{
  width:44px !important;
  height:44px !important;
}
/* Les noms appartiennent à la fiche détaillée, jamais à l'index. */
.potion-ingredient span{
  display:none !important;
}
.potion-effect p{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Recettes inconnues : une carte neutre complète, scellée au centre. */
.potion-card.unknown{
  display:block;
  min-height:255px;
  isolation:isolate;
  opacity:.88;
  border-color:#5d5d5d;
  background:
    radial-gradient(circle at 50% 46%,rgba(112,112,112,.10),transparent 34%),
    linear-gradient(145deg,#242321,#111211);
}
.potion-card.unknown .potion-card__body--unknown{
  position:relative;
  z-index:1;
  width:100%;
  min-height:255px;
  padding:1rem 1.1rem;
  opacity:.58;
}
.potion-card.unknown h2{font-size:1.15rem}
.potion-mystery{max-width:340px}
.potion-seal-overlay{
  position:absolute;
  z-index:2;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.potion-lock{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border:1px solid rgba(190,190,190,.34);
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#3c3c3b,#171817 72%);
  box-shadow:0 9px 24px rgba(0,0,0,.62),inset 0 0 0 5px rgba(255,255,255,.025);
  font-size:1.7rem;
  filter:grayscale(1);
}
.potion-chain{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:75%;
  height:6px;
  transform-origin:0 50%;
  opacity:.58;
  background:repeating-linear-gradient(90deg,#777 0 7px,#303130 7px 12px);
  border:1px solid rgba(10,10,10,.72);
  border-radius:6px;
  box-shadow:0 2px 4px rgba(0,0,0,.55);
}
.potion-chain--nw{transform:rotate(-150deg)}
.potion-chain--ne{transform:rotate(-30deg)}
.potion-chain--sw{transform:rotate(150deg)}
.potion-chain--se{transform:rotate(30deg)}

/* Fiche recette : un seul manuscrit, sans empilement de cards. */
.potion-detail{
  --rank:#b68b52;
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:0;
  width:min(1120px,100%);
  margin:0 auto;
  padding:0;
  overflow:hidden;
  border:1px solid var(--rank);
  border-radius:14px;
  background:
    radial-gradient(circle at 12% 8%,rgba(142,94,42,.14),transparent 26%),
    linear-gradient(145deg,#231c16,#10100f 72%);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.potion-detail[data-grade="Débutant"]{--rank:#78c9e8}
.potion-detail[data-grade="Initié"]{--rank:#b87333}
.potion-detail[data-grade="Maître"]{--rank:#c4c8ce}
.potion-detail[data-grade="Grand Maître"]{--rank:#d6ad45}
.potion-detail:before{
  inset:8px;
  border-color:color-mix(in srgb,var(--rank) 18%,transparent);
}
.potion-detail__aside{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  padding:1.4rem;
  border-right:1px solid rgba(190,150,90,.16);
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.08));
}
.potion-detail__visual{
  min-height:280px;
  border:0;
  border-radius:0;
  background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--rank) 12%,transparent),transparent 55%);
}
.potion-detail__visual img{
  width:165px;
  height:250px;
}
.potion-detail__base{
  display:block;
  margin-top:auto;
  padding-top:1rem;
  border-top:1px solid rgba(190,150,90,.14);
}
.potion-detail__base>div{
  display:flex;
  align-items:center;
  gap:.7rem;
}
.potion-detail__base img{
  width:46px;
  height:64px;
}
.potion-detail__base b{
  font-size:.92rem;
}
.potion-detail__content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:1.55rem 1.65rem 1.25rem;
}
.potion-detail__header{
  display:block;
  padding:0 0 1.15rem;
  border-bottom:1px solid rgba(190,145,80,.16);
}
.potion-detail__intro h1,
.potion-detail__header h1{
  margin:.45rem 0 .35rem;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.8rem,3vw,2.55rem);
  line-height:1.06;
  color:#f1e4ce;
}
.potion-detail__section{
  padding:1.15rem 0;
  border:0;
  border-radius:0;
  background:none;
}
.potion-detail__components{
  border-bottom:1px solid rgba(190,145,80,.13);
}
.potion-detail__ingredients{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem .9rem;
}
.potion-detail__ingredient{
  padding:.5rem .6rem;
  border-color:rgba(181,142,82,.16);
  background:rgba(255,255,255,.018);
}
.potion-detail__ingredient img{
  flex-basis:54px;
  width:54px;
  height:54px;
}
.potion-detail__effect{
  flex:1 1 auto;
  padding-bottom:1.35rem;
}
.potion-detail__effect p{
  font-size:.94rem;
  line-height:1.65;
}
.potion-detail__actions{
  margin-top:auto;
  padding:1rem 0 0;
  border-top:1px solid rgba(190,145,80,.14);
}

@media(max-width:1050px){
  .potion-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .potion-card{grid-template-columns:120px minmax(0,1fr);min-height:235px}
  .potion-card__visual{min-height:235px}
  .potion-detail{grid-template-columns:1fr}
  .potion-detail__aside{border-right:0;border-bottom:1px solid rgba(190,150,90,.16)}
  .potion-detail__visual{min-height:200px}
  .potion-detail__visual img{height:185px}
  .potion-detail__base{margin-top:.4rem}
  .potion-detail__ingredients{grid-template-columns:1fr}
}
@media(max-width:480px){
  .potion-card{grid-template-columns:1fr}
  .potion-card__visual{min-height:145px;border-right:0;border-bottom:1px solid rgba(173,129,70,.2)}
  .potion-card__visual img{height:125px}
  .potion-card.unknown,.potion-card.unknown .potion-card__body--unknown{min-height:230px}
  .potion-detail__content{padding:1.2rem}
}


/* =========================================================
   TDD Alchimie V1.10.1 — Chaudron animé
   Base CSS : V1.9.1 (Grimoire conservé)
   ========================================================= */

.alchemy-cauldron-fx{
  --brew-rgb: 91, 220, 151;
  position:absolute;
  z-index:11;
  left:50%;
  top:45.3%;
  width:48%;
  height:31%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  overflow:visible;
}

/* Surface du liquide : ellipse volontairement calée sur l'ouverture du chaudron. */
.alchemy-cauldron-liquid{
  position:absolute;
  left:6%;
  right:6%;
  top:22%;
  height:31%;
  overflow:hidden;
  border-radius:50%;
  opacity:.82;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 50% 48%,
      rgba(226,255,229,.26) 0%,
      rgba(var(--brew-rgb),.24) 34%,
      rgba(var(--brew-rgb),.08) 63%,
      transparent 73%);
  box-shadow:
    0 0 20px rgba(var(--brew-rgb),.34),
    inset 0 0 18px rgba(232,255,236,.20);
  animation:tddLiquidBreath 2.6s ease-in-out infinite;
}

/* Reflet mobile qui permet de voir immédiatement que la surface bouge. */
.alchemy-cauldron-shimmer{
  position:absolute;
  left:-38%;
  top:18%;
  width:55%;
  height:54%;
  border-radius:50%;
  background:linear-gradient(
    100deg,
    transparent 0%,
    rgba(237,255,239,.08) 25%,
    rgba(237,255,239,.48) 48%,
    rgba(185,255,207,.12) 66%,
    transparent 100%
  );
  filter:blur(4px);
  transform:skewX(-14deg);
  animation:tddLiquidShimmer 4.4s ease-in-out infinite;
}

/* Bulles de surface. */
.alchemy-cauldron-liquid i{
  position:absolute;
  display:block;
  border:1px solid rgba(226,255,231,.72);
  border-radius:50%;
  box-shadow:
    0 0 5px rgba(205,255,220,.50),
    inset 0 0 4px rgba(205,255,220,.30);
  opacity:0;
  animation:tddCauldronBubble 3.1s ease-in-out infinite;
}
.alchemy-cauldron-liquid i:nth-of-type(1){width:10px;height:5px;left:18%;top:46%;animation-delay:.1s}
.alchemy-cauldron-liquid i:nth-of-type(2){width:7px;height:4px;left:35%;top:61%;animation-delay:1.25s}
.alchemy-cauldron-liquid i:nth-of-type(3){width:13px;height:6px;left:51%;top:34%;animation-delay:2.0s}
.alchemy-cauldron-liquid i:nth-of-type(4){width:8px;height:4px;left:68%;top:56%;animation-delay:.75s}
.alchemy-cauldron-liquid i:nth-of-type(5){width:11px;height:5px;left:79%;top:39%;animation-delay:2.55s}

/* Feu : halo plus franc mais toujours intégré à l'image. */
.alchemy-cauldron-fire{
  position:absolute;
  left:17%;
  right:17%;
  top:67%;
  height:27%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      rgba(255,183,66,.60) 0%,
      rgba(244,95,27,.34) 35%,
      rgba(158,37,16,.15) 58%,
      transparent 74%);
  filter:blur(9px);
  opacity:.56;
  mix-blend-mode:screen;
  transform-origin:center;
  animation:tddFireFlicker .72s steps(2,end) infinite alternate;
}

/* Vapeur : chaque volute a une vitesse et une dérive différentes. */
.alchemy-cauldron-steam{
  position:absolute;
  inset:-18% 0 0;
  overflow:visible;
}
.alchemy-cauldron-steam i{
  position:absolute;
  bottom:48%;
  width:13%;
  height:58%;
  border-radius:48% 52% 46% 54%;
  background:
    radial-gradient(ellipse at 50% 80%,rgba(235,244,233,.22),transparent 57%),
    linear-gradient(90deg,transparent,rgba(235,244,233,.20),transparent);
  filter:blur(6px);
  opacity:0;
  transform-origin:50% 100%;
  animation:tddSteamRise 5.8s ease-out infinite;
}
.alchemy-cauldron-steam i:nth-child(1){left:22%;height:52%;animation-delay:0s}
.alchemy-cauldron-steam i:nth-child(2){left:34%;height:68%;animation-delay:1.05s;animation-duration:6.6s}
.alchemy-cauldron-steam i:nth-child(3){left:48%;height:58%;animation-delay:2.15s;animation-duration:5.3s}
.alchemy-cauldron-steam i:nth-child(4){left:61%;height:72%;animation-delay:3.25s;animation-duration:6.9s}
.alchemy-cauldron-steam i:nth-child(5){left:70%;height:49%;animation-delay:4.35s;animation-duration:5.5s}

/* Une base liquide sélectionnée renforce légèrement la réaction. */
.alchemy-cauldron-fx.is-active .alchemy-cauldron-liquid{
  opacity:1;
  box-shadow:
    0 0 30px rgba(var(--brew-rgb),.52),
    inset 0 0 22px rgba(232,255,236,.26);
}
.alchemy-cauldron-fx.is-active .alchemy-cauldron-fire{
  opacity:.68;
}
.alchemy-cauldron-fx.is-reacting{
  animation:tddCauldronFlash .72s ease-out;
}

@keyframes tddLiquidBreath{
  0%,100%{
    transform:scaleX(.97) scaleY(.93) translateY(1px);
    filter:brightness(.88) saturate(.95);
  }
  50%{
    transform:scaleX(1.035) scaleY(1.055) translateY(-2px);
    filter:brightness(1.25) saturate(1.18);
  }
}
@keyframes tddLiquidShimmer{
  0%{left:-45%;opacity:0}
  15%{opacity:.22}
  48%{opacity:.80}
  78%{opacity:.26}
  100%{left:102%;opacity:0}
}
@keyframes tddCauldronBubble{
  0%,58%{opacity:0;transform:scale(.25)}
  67%{opacity:.25;transform:scale(.6)}
  78%{opacity:.92;transform:scale(1)}
  100%{opacity:0;transform:scale(1.75)}
}
@keyframes tddFireFlicker{
  0%{transform:scale(.90,.74) translateY(3px);filter:blur(10px) brightness(.78)}
  35%{transform:scale(1.04,.96) translateY(-1px);filter:blur(8px) brightness(1.12)}
  72%{transform:scale(.96,1.08) translateY(-3px);filter:blur(9px) brightness(.95)}
  100%{transform:scale(1.09,.88) translateY(1px);filter:blur(7px) brightness(1.24)}
}
@keyframes tddSteamRise{
  0%{
    opacity:0;
    transform:translate(0,18px) scale(.55,.72) rotate(-7deg);
  }
  14%{opacity:.16}
  34%{opacity:.38}
  70%{opacity:.16}
  100%{
    opacity:0;
    transform:translate(24px,-105px) scale(1.48,1.68) rotate(18deg);
  }
}
@keyframes tddCauldronFlash{
  0%{filter:brightness(1)}
  28%{filter:brightness(1.85)}
  100%{filter:brightness(1)}
}

@media(max-width:900px){
  .alchemy-cauldron-fx{width:54%;top:45.5%}
}
@media(max-width:700px){
  .alchemy-cauldron-fx{width:64%;top:54.3%;height:28%}
}
@media(prefers-reduced-motion:reduce){
  .alchemy-cauldron-liquid,
  .alchemy-cauldron-shimmer,
  .alchemy-cauldron-liquid i,
  .alchemy-cauldron-fire,
  .alchemy-cauldron-steam i,
  .alchemy-cauldron-fx.is-reacting{
    animation:none!important;
  }
}