/* mc-course-tarot.css — l'habillage du lecteur de cours (carte des chapitres, leçons, quiz).
 *
 * Recopié depuis le <style> de premium/index.html (lignes 1376-1504 au 2026-09-20) plutôt
 * qu'extrait : ces mêmes règles y habillent AUSSI les cours de runes, d'histoire et de
 * numérologie, qui restent réservés à l'abonnement. Les retirer de là aurait cassé trois cours
 * pour en déplacer un. C'est une duplication assumée, et elle ne porte que de l'apparence —
 * la logique, elle, n'existe qu'en un exemplaire dans mc-course-tarot.js.
 *
 * Les variables --c* et --s1 gardent leurs valeurs de repli dans chaque règle : la palette
 * claire de mc-theme.js les définit quand elle est active, sinon le repli s'applique.
 */
:root{
  --gold2:#e8c060;
  --pale:#d8ecff;
  --sky:#5ab0ff;
  --soft:#8ab4d8;
  --white:#eef6ff;
}

@keyframes lt-bob{0%,100%{transform:translateX(-50%) translateY(0) rotate(-1deg);}50%{transform:translateX(-50%) translateY(-8px) rotate(1.5deg);}}
@keyframes lt-twinkle{0%,100%{opacity:.3;transform:scale(.8);}50%{opacity:1;transform:scale(1.2);}}
/* ⚠ translateX(-50%) DOIT être répété dans les deux images-clés. Les huit éléments qui portent
   cette animation sont posés en `left:50%; transform:translateX(-50%)` : pendant l'animation,
   le transform des keyframes REMPLACE le transform en ligne, donc sans lui la correction de
   centrage disparaît et l'élément part d'une demi-largeur vers la droite. C'est exactement ce
   que Floryne a vu le 2026-09-28 : « wooly est un peu trop décalé sur la droite sur son nuage ».
   Mesuré avant correction : écart de 30 px pour un mouton de 60 px de large.
   lt-bob juste au-dessus le fait déjà — le même piège avait donc déjà été rencontré ici. */
@keyframes lt-tipbob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-4px);}}
@keyframes lt-pulse{0%,100%{box-shadow:0 6px 0 rgba(0,0,0,.3),0 0 0 0 rgba(90,176,255,.4);}50%{box-shadow:0 6px 0 rgba(0,0,0,.3),0 0 0 8px rgba(90,176,255,0);}}
@keyframes lt-pathbob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.learn-screen{display:none;} .learn-screen.active{display:block;}
.rune-screen{display:none;} .rune-screen.active{display:block;}
.history-screen{display:none;} .history-screen.active{display:block;}
.numerology-screen{display:none;} .numerology-screen.active{display:block;}
.lt-node{width:68px;height:68px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:transform .2s;margin-bottom:32px;}
.lt-node:active{transform:translateY(3px);}
.lt-node.done{background:linear-gradient(135deg,#22c55e,#0ea5e9);border:3px solid #4ade80;box-shadow:0 6px 0 rgba(0,0,0,.3),0 0 20px rgba(34,197,94,.3);}
.lt-node.active{background:linear-gradient(135deg,#1a6fd4,var(--c28,#0a47a0));border:3px solid #5ab0ff;box-shadow:0 6px 0 rgba(0,0,0,.3);animation:lt-pulse 2s ease-in-out infinite;}
.lt-node.locked{background:linear-gradient(135deg,rgba(var(--c145,30,50,90),.8),rgba(var(--c146,15,30,60),.9));border:3px solid rgba(26,111,212,.2);opacity:.55;cursor:default;box-shadow:0 6px 0 rgba(0,0,0,.2);}
.lt-node-lbl{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);font-size:0.845rem;color:var(--pale);white-space:nowrap;font-weight:500;max-width:110px;overflow:hidden;text-overflow:ellipsis;}
.lt-conn{width:3px;height:20px;background:rgba(26,111,212,.2);border-radius:2px;}
.lt-conn.done{background:linear-gradient(to bottom,#22c55e,#16a34a);}
.lt-chest{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,rgba(200,146,42,.2),rgba(138,92,16,.3));border:2px solid rgba(200,146,42,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;margin:12px 0;box-shadow:0 4px 0 rgba(0,0,0,.3),0 0 16px rgba(200,146,42,.2);}
.lt-chest.locked{opacity:.35;cursor:default;}
.lt-chest.opened{background:rgba(var(--s1,10,25,55),.5);border-color:rgba(26,111,212,.2);box-shadow:none;cursor:default;}
.lt-chapterlbl{background:linear-gradient(135deg,rgba(26,111,212,.2),rgba(var(--c7,7,26,54),.4));border:1px solid rgba(26,111,212,.3);border-radius:20px;padding:8px 20px;margin:20px 0 16px;font-size:0.825rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);text-align:center;width:100%;}
.lt-chapterlbl.done{border-color:rgba(200,146,42,.3);color:var(--gold2);}
.lt-chapterlbl.locked{opacity:.4;}


/* ── LEARN TAROT LESSONS ── */
.page-hero{ text-align:center; padding:28px 0 24px; }
.lesson-eye{ font-size:0.775rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold2); margin-bottom:10px; display:block; }
.lesson-title{ font-family:'Cormorant',serif; font-weight:300; font-size:clamp(1.6rem,5vw,2.4rem); color:var(--white); margin-bottom:18px; line-height:1.2; }
.lesson-title em{ font-style:italic; color:var(--sky); }
.lesson-hdr{ display:flex; align-items:center; gap:12px; margin-bottom:24px; padding:4px 0; }
.lesson-back{ width:36px; height:36px; border-radius:50%; background:rgba(var(--c110,10,20,50),.7); border:1.5px solid rgba(26,111,212,.2); color:var(--soft); font-size:1.125rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lesson-progress{ flex:1; height:12px; background:rgba(26,111,212,.12); border-radius:6px; overflow:hidden; border:1.5px solid rgba(26,111,212,.15); }
.lesson-prog-fill{ height:100%; background:linear-gradient(to right,#4ade80,#22c55e); border-radius:6px; transition:width .5s cubic-bezier(.23,1,.32,1); }
.lesson-hearts{ display:flex; gap:6px; flex-shrink:0; font-size:1.325rem; }
.lesson-content{ max-width:560px; margin:0 auto; }
.lesson-card{ background:linear-gradient(160deg,rgba(var(--s1,10,25,55),.95),rgba(var(--c16,4,12,34),.98)); border:1px solid rgba(26,111,212,.18); border-radius:16px; padding:22px; margin-bottom:16px; }
.lesson-card p{ font-size:1.075rem; color:var(--soft); line-height:1.85; margin-bottom:14px; }
.lesson-card p:last-child{ margin-bottom:0; }
.lesson-card p strong{ color:var(--pale); }
.highlight{ background:rgba(200,146,42,.08); border-left:3px solid var(--gold2); padding:12px 14px; border-radius:0 10px 10px 0; font-size:1.025rem; color:var(--pale); line-height:1.7; margin:4px 0; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin:4px 0; }
.mini-card{ background:rgba(var(--c147,7,20,50),.8); border:1px solid rgba(26,111,212,.2); border-radius:10px; padding:12px 10px; text-align:center; }
.mini-card-e{ font-size:1.625rem; margin-bottom:5px; }
.mini-card-n{ font-size:0.845rem; color:var(--pale); font-weight:500; margin-bottom:3px; }
.mini-card-d{ font-size:0.775rem; color:var(--soft); line-height:1.4; }
.wooly-tip{ display:flex; gap:12px; align-items:flex-end; background:linear-gradient(160deg,rgba(var(--c148,8,22,52),.97),rgba(var(--c149,3,10,30),.99)); border:1.5px solid rgba(200,146,42,.25); border-radius:0 16px 16px 16px; padding:16px; margin-bottom:16px; position:relative; }
.wooly-tip-txt{ font-family:'Cormorant',serif; font-style:italic; font-size:1.075rem; color:var(--pale); line-height:1.7; }
.lesson-next-btn{ width:100%; padding:15px; background:linear-gradient(135deg,#1a6fd4,var(--c28,#0a47a0)); color:#fff; border:none; border-radius:50px; font-family:'DM Sans',sans-serif; font-size:1.025rem; font-weight:500; letter-spacing:.08em; cursor:pointer; box-shadow:0 0 24px rgba(26,111,212,.4); transition:all .3s; margin-top:8px; }
.lesson-next-btn:hover{ transform:translateY(-2px); }
.quiz-wrap{ max-width:560px; margin:0 auto; }
.quiz-options{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.quiz-opt{ padding:14px 18px; background:rgba(var(--s1,10,25,55),.7); border:2px solid rgba(26,111,212,.25); border-radius:14px; cursor:pointer; font-size:1.045rem; color:var(--pale); transition:all .2s; text-align:left; font-family:'DM Sans',sans-serif; }
.quiz-opt:hover:not(.answered){ background:rgba(var(--c30,10,28,68),.9); border-color:rgba(90,176,255,.5); transform:translateX(4px); }
.quiz-opt.correct{ background:rgba(34,197,94,.15); border-color:#22c55e; color:#86efac; }
.quiz-opt.wrong{ background:rgba(239,68,68,.1); border-color:#ef4444; color:#fca5a5; }
.quiz-opt.answered{ cursor:default; }
.quiz-feedback{ border-radius:14px; margin-bottom:14px; font-size:1.005rem; line-height:1.65; display:none; }
.quiz-feedback.show{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; }
.quiz-feedback.ok{ background:rgba(34,197,94,.1); border:1.5px solid rgba(34,197,94,.3); }
.quiz-feedback.ko{ background:rgba(239,68,68,.08); border:1.5px solid rgba(239,68,68,.2); }
.quiz-feedback strong{ display:block; margin-bottom:3px; color:var(--pale); }
.quiz-next-btn{ width:100%; padding:15px; background:linear-gradient(135deg,#c8922a,#8a5c10); color:#fff; border:none; border-radius:50px; font-family:'DM Sans',sans-serif; font-size:1.045rem; font-weight:600; cursor:pointer; box-shadow:0 0 24px rgba(200,146,42,.35); letter-spacing:.05em; display:none; }
.quiz-next-btn.show{ display:block; }
.complete-title{ font-family:'Cormorant',serif; font-size:2.325rem; color:var(--white); margin-bottom:8px; font-weight:300; }
.complete-title em{ font-style:italic; color:var(--gold2); }
.complete-btn{ padding:15px 40px; background:linear-gradient(135deg,#c8922a,#8a5c10); color:#fff; border:none; border-radius:50px; font-family:'DM Sans',sans-serif; font-size:1.025rem; font-weight:500; cursor:pointer; box-shadow:0 0 28px rgba(200,146,42,.4); }


/* ── LEARN TAROT 2 COLONNES DESKTOP ── */
.learn-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  max-width:1080px;
  margin:0 auto;
}
@media(min-width:900px){
  .learn-layout{
    grid-template-columns:1fr 320px;
    align-items:start;
    margin:0 auto;
  }
}
.learn-sidebar-chapters{
  display:flex;
  flex-direction:column;
  gap:10px;
}
@media(max-width:899px){
  .learn-sidebar-chapters{ order:-1; }
}
@media(min-width:900px){
  .learn-sidebar-chapters{
    position:sticky;
    top:20px;
  }
}
.lsc-title{
  font-size:0.725rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--gold2);margin-bottom:8px;
}
.lsc-item{
  background:rgba(var(--s1,10,25,55),.7);border:1px solid rgba(26,111,212,.15);
  border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:all .2s;
}
.lsc-item:hover{ border-color:rgba(90,176,255,.3);background:rgba(var(--c30,10,28,68),.8); }
.lsc-item.active{ border-color:rgba(200,146,42,.3);background:rgba(200,146,42,.06); }
.lsc-item.locked{ opacity:.4;cursor:default; }
.lsc-icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:1.325rem;flex-shrink:0;
}
.lsc-icon.active-ch{ background:linear-gradient(135deg,#1a6fd4,var(--c28,#0a47a0));box-shadow:0 0 12px rgba(26,111,212,.4); }
.lsc-icon.done-ch{ background:linear-gradient(135deg,#c8922a,#8a5c10);box-shadow:0 0 12px rgba(200,146,42,.3); }
.lsc-icon.locked-ch{ background:rgba(var(--c150,20,35,70),.6); }
.lsc-body{ flex:1; }
.lsc-name{ font-size:0.945rem;color:var(--pale);font-weight:500;margin-bottom:2px; }
.lsc-prog{ font-size:0.775rem;color:var(--soft); }
.lsc-progbar{ height:3px;background:rgba(26,111,212,.15);border-radius:2px;margin-top:4px;overflow:hidden; }
.lsc-progfill{ height:100%;background:linear-gradient(to right,var(--sky),var(--gold2));border-radius:2px; }


@media(max-width:600px){
  #ltPath>div{padding-left:8px !important;padding-right:8px !important;}
  .lt-node{width:60px !important;height:60px !important;}
  .lt-node-lbl{font-size:.8rem !important;max-width:85px !important;}
}

/* ── Tenir dans un écran pendant une leçon ───────────────────────────────────────────────────
 * Ajouté le 2026-09-28. Demande de Floryne, capture à l'appui : « je voudrais qu'on compresse un
 * peu pour qu'on voie tout à l'écran, y compris le bouton continuer la leçon ».
 *
 * Le coût vertical n'était pas dans la question, il était AU-DESSUS : l'en-tête de la page
 * (mascotte 200x170, bulle de dialogue, titre « Learn Tarot », sous-titre) pèse environ 430 px et
 * restait affiché pendant toute la leçon. Mesuré sur son écran (1710x1021) : question + quatre
 * propositions + explication + bouton = ~845 px, donc ça tient — mais seulement une fois
 * l'en-tête replié.
 *
 * `lt-en-lecon` est posée sur <body> par ltShow() et retirée au retour à la carte : rien n'est
 * supprimé, tout revient. */
body.lt-en-lecon .page-hero{ display:none; }
/* La barre de progression devient le haut de l'écran : elle n'a plus besoin de respirer autant. */
body.lt-en-lecon .lesson-hdr{ margin-bottom:14px; }

/* Le décor au-dessus de la question cède AVANT le contenu quand l'écran est court. À 160 px il
 * garde sa taille d'origine ; en dessous de ~860 px de hauteur utile il se réduit, et il
 * disparaît complètement sur un écran vraiment court plutôt que de pousser le bouton dehors. */
/* La carte de la leçon reste affichée pendant tout le quiz (demandé le 2026-09-28), posée À CÔTÉ
 * de la mascotte et alignée sur la même base. Conséquence voulue : la hauteur de l'en-tête ne
 * bouge pas, donc rien de ce qui tient dans un écran n'en sort. */
.quiz-tete{ display:flex; align-items:flex-end; justify-content:center; gap:16px; }
.quiz-carte{ height:150px; width:auto; border-radius:8px; flex:none;
  border:1px solid rgba(232,192,96,.45); box-shadow:0 8px 22px rgba(0,0,0,.45); }
.quiz-mascotte{ height:160px; overflow:hidden; }
@media (max-height:900px){ .quiz-mascotte{ height:112px; } .quiz-carte{ height:112px; } }
/* ⚠ Sur écran très court la mascotte disparaît, mais PAS la carte : c'est le décor qui cède,
   jamais ce qui sert à répondre à la question. */
@media (max-height:760px){ .quiz-mascotte{ height:0; margin-bottom:4px; } .quiz-carte{ height:84px; } }

/* Compactage mesuré des propositions : de quoi gagner ~60 px sur quatre options sans rendre les
 * cibles tactiles trop petites (on reste au-dessus des 44 px recommandés). */
@media (max-height:900px){
  .quiz-opt{ padding:11px 16px; }
  .quiz-options{ gap:8px; margin-bottom:12px; }
  .quiz-feedback.show{ padding:11px 14px; }
  .quiz-feedback{ margin-bottom:10px; }
  .quiz-next-btn, .lesson-next-btn{ padding:13px; }
}