/* Les Ailes de Dedale, maquette jouable : couleurs et polices du prototype de Romain, en attendant le style choisi. */
:root{
  color-scheme:dark;
  --nuit:#1b130d;--bois:#2a1d14;--bois-2:#33241a;--argile:#c96a35;--argile-clair:#e39062;--cire:#ebc461;
  --papyrus:#efe2c9;--encre:#b39d7d;--mer:#0b4565;--ecume:#bfe3ee;--soleil:#ff8a3d;--noir:#16100b;--or:#f2c14e;
  --f-titre:"Marcellus",Georgia,serif;--f-texte:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--nuit);color:var(--papyrus);font-family:var(--f-texte);font-size:16px;line-height:1.45;-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--papyrus);outline-offset:3px}

/* ---------- Atelier ---------- */
#atelier{max-width:1040px;margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 16px 0;display:flex;flex-direction:column;gap:14px;min-height:100%}
.haut{display:flex;justify-content:space-between;align-items:center;gap:10px}
.retour-portail{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--argile);border-radius:3px;
  font-family:var(--f-titre);font-size:1rem;color:var(--papyrus);text-decoration:none;background:var(--bois)}
.retour-portail:hover{border-color:var(--cire);color:var(--cire)}
.bourse{margin:0 0 0 auto;display:flex;align-items:center;gap:7px;font-size:.95rem;color:var(--encre)}
.bourse b{font-family:var(--f-titre);font-weight:400;font-size:1.35rem;color:var(--or);font-variant-numeric:tabular-nums}
.piece{display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe08a,#d79a24 60%,#9b6814);box-shadow:inset 0 0 0 1.5px rgba(22,16,11,.45)}
.titre{text-align:center;display:flex;flex-direction:column;gap:2px}
.sur{margin:0;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--argile)}
h1,h2{font-family:var(--f-titre);font-weight:400;margin:0;color:var(--argile-clair);text-wrap:balance}
h1{font-size:clamp(1.9rem,6vw,2.6rem);line-height:1.05}
h2{font-size:1.2rem}
.colonnes{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){.colonnes{grid-template-columns:1fr 1fr;align-items:start}.colonnes>.bloc:first-child{grid-column:1 / -1}}
.bloc{background:var(--bois);border:1px solid rgba(201,106,53,.28);border-radius:4px;padding:14px;display:flex;flex-direction:column;gap:10px}
.note{margin:0;font-size:.9rem;color:var(--encre)}

/* la route : Crete, Cythere, Zante, Sicile */
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.route button{width:100%;min-height:56px;padding:6px 4px;border:1px solid rgba(201,106,53,.4);border-radius:3px;background:transparent;color:var(--papyrus);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;line-height:1.15}
.route button b{font-family:var(--f-titre);font-weight:400;font-size:.98rem}
.route button small{font-size:.75rem;color:var(--encre)}
@media (max-width:440px){.route{gap:4px}.route button{padding:6px 1px}.route button b{font-size:.74rem;letter-spacing:-.01em}.route button small{font-size:.66rem}}
.route button[aria-pressed=true]{background:rgba(201,106,53,.2);border-color:var(--argile-clair);box-shadow:0 0 0 3px rgba(201,106,53,.15)}
.route button:disabled{opacity:.45;cursor:default}
.route button .fait{color:var(--cire)}
.etape{display:flex;flex-direction:column;gap:6px}
.danger{margin:0;font-family:var(--f-titre);font-size:1.05rem;color:var(--cire);text-align:center}
.dedale{margin:0;font-style:italic;text-align:center;color:var(--papyrus);text-wrap:balance}
.dedale cite{display:block;font-style:normal;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre);margin-top:4px}
.record{margin:0;font-size:.88rem;color:var(--encre);text-align:center}

/* les ailes : apercu, caracteristiques, 3 x 3 pieces */
.ailes{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center}
#apercu{width:150px;height:150px;display:block}
@media (max-width:370px){.ailes{grid-template-columns:128px 1fr}#apercu{width:128px;height:128px}}
.vitrine-amel{display:block;width:100%;height:120px}
.stats{display:grid;grid-template-columns:1fr;gap:5px}
.stat{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.88rem;color:var(--encre);transition:color .4s}
.pips{display:flex;gap:6px}
.pips i{width:10px;height:10px;transform:rotate(45deg);border:1.5px solid var(--argile);transition:background-color .4s,border-color .4s}
.pips i.on{background:var(--argile)}
/* une qualite qui vient de changer (choix d'une piece, achat) : verte si elle monte, rouge si elle baisse, 1,8 s */
.stat.monte{color:#3c6a26}.stat.monte .pips i{border-color:#3c6a26}.stat.monte .pips i.on{background:#3c6a26}
.stat.baisse{color:#9b2c1c}.stat.baisse .pips i{border-color:#9b2c1c}.stat.baisse .pips i.on{background:#9b2c1c}
@media (prefers-reduced-motion:reduce){.stat,.pips i{transition:none}}
.choix{display:flex;flex-direction:column;gap:10px}
.mat{display:flex;flex-direction:column;gap:6px}
.mat h3{margin:0;display:flex;align-items:center;gap:8px;font-family:var(--f-titre);font-weight:400;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--argile)}
.mat h3::after{content:"";flex:1;height:1px;background:rgba(201,106,53,.3)}
.meds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.med{position:relative;display:flex;align-items:center;gap:7px;min-height:48px;padding:4px 6px;border:1px solid rgba(201,106,53,.25);border-radius:3px;cursor:pointer;min-width:0}
.med input{position:absolute;opacity:0;pointer-events:none}
.med svg{width:28px;height:28px;flex:none}
.med .n{font-size:.85rem;line-height:1.1;color:var(--encre)}
.med:has(input:checked){border-color:var(--argile-clair);background:rgba(201,106,53,.18)}
.med:has(input:checked) .n{color:var(--papyrus)}
.med:has(input:focus-visible){outline:2px solid var(--papyrus);outline-offset:2px}
.mat .desc{margin:0;font-size:.85rem;color:var(--encre);min-height:1.3em}
/* sous le choix qu'on vient de toucher : ce qui monte et ce qui baisse */
.mat .changement{margin:2px 0 0;font-size:.85rem;display:flex;flex-wrap:wrap;gap:2px 12px}
.mat .changement:empty{display:none}
.mat .changement .plus{color:#3c6a26;font-weight:700}
.mat .changement .moins{color:#9b2c1c;font-weight:700}

/* les ameliorations */
.amels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.amel{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:8px 0;border-top:1px solid rgba(201,106,53,.18)}
.amel:first-child{border-top:0;padding-top:0}
.amel h3{margin:0;font-family:var(--f-titre);font-weight:400;font-size:1rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.amel p{margin:0;font-size:.85rem;color:var(--encre);grid-column:1}
.amel .acheter{grid-row:1 / span 2;grid-column:2;min-width:96px;min-height:44px;padding:4px 10px;border:1px solid var(--cire);border-radius:3px;background:transparent;color:var(--cire);
  display:flex;align-items:center;justify-content:center;gap:6px;font-variant-numeric:tabular-nums}
.amel .acheter .piece{width:14px;height:14px}
.amel .acheter:disabled{border-color:rgba(201,106,53,.3);color:var(--encre);cursor:default}
/* trop cher : bord en tirets, piece eteinte, et ce qui manque en dessous */
.amel .acheter.trop-cher{flex-direction:column;gap:0;border-style:dashed;line-height:1.15;padding:3px 8px}
.amel .acheter.trop-cher .prix{display:flex;align-items:center;gap:6px;opacity:.7}
.amel .acheter.trop-cher .piece{filter:grayscale(1);opacity:.6}
.amel .acheter.trop-cher small{font-size:.75rem;color:var(--argile)}
.amel .acheter:not(:disabled):hover{background:rgba(235,196,97,.12)}
.amel .acheter:active:not(:disabled){transform:scale(.97)}
.aide p{margin:0;font-size:.92rem;color:var(--encre)}
.aide b{color:var(--papyrus);font-weight:500}

/* le depart : toujours visible en bas de l'ecran */
.depart{position:sticky;bottom:0;margin:0 -16px;padding:10px 16px max(12px,env(safe-area-inset-bottom));background:linear-gradient(rgba(27,19,13,0),var(--nuit) 30%);display:flex;justify-content:center}
.go{width:100%;max-width:520px;min-height:52px;font-family:var(--f-titre);font-size:1.2rem;padding:12px 16px;border:0;border-radius:3px;background:var(--argile);color:var(--noir);transition:transform .12s cubic-bezier(.23,1,.32,1)}
.go:hover{background:var(--argile-clair)}
.go:active{transform:scale(.97)}
.sec{min-height:48px;font-size:1rem;padding:10px 14px;border:1px solid rgba(201,106,53,.6);border-radius:3px;background:transparent;color:var(--papyrus)}
.sec:hover{background:rgba(201,106,53,.14)}

/* ---------- Vol ---------- */
#vol{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;background:var(--noir);touch-action:none;user-select:none;-webkit-user-select:none}
.scene{position:relative;flex:1;min-height:0;width:100%;max-width:560px;overflow:hidden}
.scene canvas{display:block;width:100%;height:100%;touch-action:none}
#hud{position:absolute;inset:0;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.75)}
.hhaut{position:absolute;top:max(8px,env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:center;gap:12px}
.trajet{flex:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-family:var(--f-titre);font-size:.95rem}
.barre-route{height:5px;border-radius:3px;background:rgba(191,227,238,.25);overflow:hidden}
.barre-route i{display:block;height:100%;width:0;background:var(--cire)}
.gain{margin:0;display:flex;align-items:center;gap:6px;font-family:var(--f-titre);font-size:1.2rem;color:var(--or);font-variant-numeric:tabular-nums}
.alti{position:absolute;right:14px;top:22%;height:42%;width:10px;border-radius:5px;background:rgba(191,227,238,.18)}
.alti .zs{position:absolute;left:0;right:0;top:0;border-radius:5px 5px 0 0;background:linear-gradient(var(--soleil),rgba(255,138,61,.35))}
.alti .ze{position:absolute;left:0;right:0;bottom:0;border-radius:0 0 5px 5px;background:linear-gradient(rgba(191,227,238,.3),var(--ecume))}
.alti .zm{position:absolute;left:-3px;right:-3px;bottom:40%;height:20%;border-top:1px solid rgba(232,226,214,.55);border-bottom:1px solid rgba(232,226,214,.55);background:repeating-linear-gradient(135deg,rgba(232,226,214,.22) 0 3px,transparent 3px 7px)}
.alti .cur{position:absolute;left:-6px;width:22px;height:5px;margin-bottom:-2.5px;border-radius:2px;background:var(--papyrus);box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.alti span{position:absolute;right:16px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.alti .ls{top:0;color:#ffc59a}
.alti .le{bottom:0;color:var(--ecume)}
.jauges{position:absolute;left:10px;bottom:10px;display:grid;grid-template-columns:auto 96px;gap:4px 8px;align-items:center;padding:7px 10px;border-radius:4px;background:rgba(22,16,11,.55);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.jauge{height:6px;border-radius:3px;background:rgba(0,0,0,.4);overflow:hidden}
.jauge i{display:block;height:100%;width:100%}
#jSou i{background:var(--ecume)}
#jSou.vide i{background:#7d93a0}
#jPlu i{background:var(--papyrus)}
#jChal i{background:var(--soleil)}
#jHum i{background:#6fb3d6}
#toast{position:absolute;left:50%;top:18%;transform:translateX(-50%);margin:0;font-family:var(--f-titre);font-size:1.2rem;white-space:nowrap;opacity:0;transition:opacity .4s}
#toast.on{opacity:1}
/* le tutoriel (10-tuto.js) : le jeu en pause, l'ecran assombri sauf ce dont on parle (le « trou »), une carte de
   papyrus qui l'explique, « Compris » pour repartir */
#guide{position:fixed;inset:0;z-index:50;touch-action:none}
#guide .trou{position:fixed;border-radius:10px;border:2px solid #ebc461;box-shadow:0 0 0 200vmax rgba(12,8,5,.66);
  transition:left .25s,top .25s,width .25s,height .25s;pointer-events:none}
#guide .trou.vide{left:50%!important;top:40%!important;width:0!important;height:0!important;border:0}
#guide .carte-guide{position:fixed;width:min(330px,calc(100vw - 32px));padding:12px 14px 10px;border-radius:6px;border:1.5px solid #74391a;
  background:#f6ead0;color:#3b2a17;font-family:var(--f-texte);box-shadow:0 12px 30px -10px rgba(0,0,0,.7)}
#guide .carte-guide p{margin:0 0 10px;font-size:1rem;line-height:1.4}
#guide .carte-guide b{color:#74391a}
#guide .btns{display:flex;justify-content:space-between;align-items:center;gap:10px}
#guide .compris{min-height:44px;padding:0 20px;border:1.5px solid #3b2a17;border-radius:3px;background:#74391a;color:#f6ead0;font-family:"IM Fell English SC",Georgia,serif;font-size:1.05rem;cursor:pointer}
#guide .passer{min-height:44px;padding:0 6px;border:0;background:none;color:#5e4630;text-decoration:underline;text-underline-offset:2px;font-size:.9rem;cursor:pointer}
@media (prefers-reduced-motion:reduce){#guide .trou{transition:none}}

.pad{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;padding:8px 12px max(10px,env(safe-area-inset-bottom));touch-action:none}
.glisse{flex:1;height:68px;position:relative;border-radius:34px;background:var(--bois);border:1.5px solid var(--argile);display:grid;place-items:center;
  color:var(--encre);font-family:var(--f-titre);font-size:.95rem;overflow:hidden;touch-action:none}
.glisse::after{content:"";position:absolute;top:10px;bottom:10px;left:var(--doigt,50%);width:3px;margin-left:-1.5px;border-radius:2px;background:var(--cire);opacity:0}
.glisse.tenu{background:var(--bois-2)}
.glisse.tenu::after{opacity:1}
.battre{width:84px;height:84px;flex:none;border-radius:50%;border:1.5px solid var(--cire);background:var(--bois);color:var(--cire);font-family:var(--f-titre);font-size:1rem;touch-action:none}
.battre.tenu{background:var(--bois-2);transform:scale(.96)}
.touches{display:none;margin:6px 0 10px;font-size:.85rem;color:var(--encre)}
@media (hover:hover) and (pointer:fine){.pad{display:none}.touches{display:block}}

/* fin du vol */
.fin{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(22,16,11,.55)}
.boite{width:100%;max-width:360px;background:rgba(27,19,13,.96);border:1px solid var(--argile);border-radius:4px;padding:18px 16px;display:flex;flex-direction:column;gap:10px;text-align:center}
.boite h2{font-size:1.6rem}
.recette{list-style:none;margin:0;padding:8px 0;border-block:1px solid rgba(201,106,53,.25);display:flex;flex-direction:column;gap:3px;font-size:.92rem}
.recette li{display:flex;justify-content:space-between;gap:10px;color:var(--encre)}
.recette li b{color:var(--papyrus);font-weight:500;font-variant-numeric:tabular-nums}
.recette li.total{margin-top:4px;padding-top:6px;border-top:1px solid rgba(201,106,53,.18);font-family:var(--f-titre);font-size:1.1rem;color:var(--papyrus)}
.recette li.total b{color:var(--or);font-weight:400}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btns .go{flex:1 1 160px;font-size:1.1rem}
.btns .sec{flex:1 1 120px}
@media (prefers-reduced-motion:reduce){#toast{transition:none}.go,.amel .acheter{transition:none}}

/* L'atelier en « carte sur papyrus » : encre sepia sur papyrus, cartouches a double trait. Choix de Romain (2026-10-13) :
   l'atelier en papyrus, le vol aux couleurs du prototype (l'essai du vol en papyrus : commit cf003f8). */

/* ---------- le menu (atelier) ---------- */
body{background:#e6d3a9}
#atelier{
  --nuit:#e6d3a9;--bois:rgba(250,240,214,.7);--bois-2:#e2cfa3;--argile:#74391a;--argile-clair:#5a2d10;--cire:#74391a;
  --papyrus:#3b2a17;--encre:#5e4630;--or:#6e3814;--noir:#f6ead0;
  --f-titre:"IM Fell English SC",Georgia,serif;
  color:var(--papyrus);
  background:radial-gradient(ellipse at 20% 10%,#f2e4c2,rgba(242,228,194,0) 55%),radial-gradient(ellipse at 85% 80%,#dcc596,rgba(220,197,150,0) 60%),#e6d3a9;
}
#atelier .bloc{border:1.5px solid #3b2a17;border-radius:2px;box-shadow:inset 0 0 0 3px rgba(250,240,214,.7),inset 0 0 0 4px rgba(59,42,23,.45)}
#atelier .retour-portail{background:rgba(250,240,214,.7);border:1.5px solid #3b2a17;border-radius:2px}
#atelier .retour-portail:hover{color:#8c4a1e;border-color:#8c4a1e}
#atelier .dedale{font-family:"IM Fell English",Georgia,serif;font-size:1.05rem}
#atelier .route button{border:1.5px solid #3b2a17;border-radius:2px;color:#3b2a17}
#atelier .route button[aria-pressed=true]{background:#3b2a17;color:#f6ead0;box-shadow:none}
#atelier .route button[aria-pressed=true] small,#atelier .route button[aria-pressed=true] .fait{color:#e8c98a}
#atelier .route button:disabled{border-style:dashed}
#atelier .route button .fait{color:#8c4a1e}
#atelier .med{border:1.5px solid rgba(59,42,23,.45);border-radius:2px}
#atelier .med:has(input:checked){border-color:#3b2a17;background:rgba(140,74,30,.14)}
#atelier .mat h3::after,#atelier .amel{border-color:rgba(59,42,23,.3)}
#atelier .mat h3::after{background:rgba(59,42,23,.35)}
#atelier .amel .acheter{border:1.5px solid #8c4a1e;border-radius:2px}
#atelier .amel .acheter:disabled{border-color:rgba(59,42,23,.3)}
#atelier .amel .acheter:not(:disabled):hover{background:rgba(140,74,30,.1)}
#atelier .depart{background:linear-gradient(rgba(230,211,169,0),#e6d3a9 30%)}
#atelier .go{border:2px solid #3b2a17;border-radius:2px;box-shadow:inset 0 0 0 3px #8c4a1e,inset 0 0 0 4px #f3e6c6}
#atelier .go:hover{background:#6e3814}

/* l'accueil du vrai jeu : accroche, pastilles, « Le jeu » et « Le mythe », liens du site (modele : Les Enfants de Zeus) */
#atelier .titre{gap:6px}
#atelier .lead{margin:0 auto;max-width:56ch;font-size:1.05rem;text-align:center;text-wrap:balance}
#atelier .atouts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:2px 0 0;padding:0;list-style:none}
#atelier .atouts li{border:1px solid rgba(59,42,23,.45);border-radius:999px;padding:2px 11px;font-size:.85rem;color:var(--encre)}
#atelier .presentation{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){#atelier .presentation{grid-template-columns:1.4fr 1fr;align-items:start}}
#atelier .presentation p{margin:0;color:var(--encre)}
#atelier .presentation h3{margin:4px 0 0;font-family:var(--f-titre);font-weight:400;font-size:1.02rem}
#atelier .presentation a,#atelier .liens-site a,#atelier .sauvegarde a{color:var(--argile)}
#atelier .presentation a:hover,#atelier .liens-site a:hover,#atelier .sauvegarde a:hover{color:var(--argile-clair)}
/* tant qu'aucune amelioration n'est achetee : la bande qui y mene (10-tuto.js) */
#atelier .astuce{margin:0;padding:10px 14px;border:1.5px solid var(--argile);border-radius:4px;background:rgba(250,240,214,.85);text-align:center;font-size:.98rem}
#atelier .astuce a{color:var(--argile);font-weight:700}
#atelier .sauvegarde{margin:0 auto -8px;max-width:560px;font-size:.9rem;color:var(--encre);text-align:center}
#atelier .conseils{margin:0;padding-left:1.1em;color:var(--encre);display:flex;flex-direction:column;gap:4px}
#atelier .liens-site{margin:0;font-size:.9rem;color:var(--encre);text-align:center;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 6px}
/* le point qui separe deux liens reste en fin de ligne quand la ligne se coupe, jamais en tete de la suivante */
#atelier .liens-site>:not(:last-child)::after{content:"·";display:inline-block;margin-left:6px;color:var(--encre);text-decoration:none}
#atelier .effacer{all:unset;cursor:pointer;color:var(--encre);text-decoration:underline;text-underline-offset:2px;padding:12px 2px}
#atelier .effacer:hover{color:var(--argile)}
#atelier .effacer:focus-visible{outline:2px solid var(--papyrus);outline-offset:2px}

/* rentrer a l'atelier pendant le vol (le vol compte, avec ce qu'il a deja rapporte) */
.quitter{pointer-events:auto;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(239,226,201,.5);background:rgba(22,16,11,.45);
  color:var(--papyrus);font-size:1.1rem;display:grid;place-items:center;padding:0}
.quitter:hover{background:rgba(22,16,11,.7)}

/* le bouton son : en haut a droite de l'atelier (en face de « ← Petit Olympe »), et pendant le vol */
.son{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;cursor:pointer}
.son svg{width:20px;height:20px}
.hhaut .son{pointer-events:auto;border-radius:50%;border:1px solid rgba(239,226,201,.5);background:rgba(22,16,11,.45);color:var(--papyrus)}
.hhaut .son:hover{background:rgba(22,16,11,.7)}
#atelier .son{border:1.5px solid #3b2a17;border-radius:2px;background:rgba(250,240,214,.7);color:#3b2a17}
#atelier .son:hover{color:#8c4a1e;border-color:#8c4a1e}

/* les defis de Dedale (3 par etape) et les teintures des plumes (Romain, 2026-10-15 : « un peu plus de contenu ») */
#atelier .defis-bloc{display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(59,42,23,.3);padding-top:10px}
#atelier .defis-bloc h3{margin:0;font-family:var(--f-titre);font-weight:400;font-size:1rem;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#atelier .defis-bloc h3 small{font-family:var(--f-texte);font-size:.85rem;color:var(--encre)}
.defis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.defis li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.3}
.defis li small{display:block;font-size:.82rem;color:var(--encre)}
.defis .coche{flex:none;width:20px;height:20px;margin-top:1px;border:1.5px solid var(--argile);border-radius:2px;display:grid;place-items:center;font-size:.85rem;font-weight:700;color:#f6ead0}
.defis li.fait .coche{background:var(--argile)}
.defis li.fait>span:last-child{color:var(--encre);text-decoration:line-through;text-decoration-color:rgba(59,42,23,.4)}
.teintures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.teinte{min-height:64px;padding:6px 2px 4px;border:1.5px solid rgba(59,42,23,.45);border-radius:2px;background:transparent;color:var(--papyrus);
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;line-height:1.1}
.teinte .pastille{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(22,16,11,.55)}
.teinte .pastille.or{background:radial-gradient(circle at 35% 30%,#fff3c4,var(--c) 45%,#9c761e)}
.teinte .tn{font-size:.82rem}
.teinte small{font-size:.82rem;color:var(--encre);min-height:1em}
.teinte.portee{border-color:#3b2a17;background:rgba(140,74,30,.16)}
.teinte.fermee .pastille{opacity:.55}
.teinte:disabled{cursor:default;opacity:.75}
.teinte:not(:disabled):hover{background:rgba(140,74,30,.1)}
.fin-defis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.9rem;text-align:left}
.fin-defis b{color:var(--cire);font-weight:500;margin-right:4px}
.recette li.defi{color:var(--cire)}