/* Les Histoires de Julia — ateliers (maths, francais, mission du jour)
   Prolonge app.css : memes variables, memes boutons. Rien n'est redefini ici
   qui existe deja la-bas. */

/* ============================================================
   ACCUEIL REFONDU
   ============================================================ */
#home.home2{
  justify-content:flex-start; gap:10px; padding:12px 14px;
}
.h2-top{display:flex; align-items:center; gap:10px; width:100%;}
.h2-ident{flex:1 1 auto; min-width:0; text-align:left;}
.h2-ident .l1{display:block; font-size:clamp(11px,2.2vw,15px); font-weight:700; color:var(--p3); line-height:1;}
.h2-ident .l2{display:block; font-size:clamp(19px,4.2vw,30px); font-weight:700; color:#fff; line-height:1.05;}
.h2-compte{flex:0 0 auto; display:flex; gap:7px;}
.h2-pill{
  background:rgba(255,255,255,.93); color:var(--ink); border-radius:999px;
  padding:8px 13px; font-size:clamp(11px,2.1vw,14px); font-weight:800; white-space:nowrap;
  box-shadow:0 3px 0 rgba(0,0,0,.15);
}

.mission-card{
  width:100%; background:var(--card); border-radius:24px; padding:13px 15px;
  box-shadow:0 7px 0 rgba(0,0,0,.2); color:var(--ink);
  display:flex; gap:13px; align-items:center; text-align:left;
}
.mission-card.done{background:#e9f9ec;}
.mc-left{flex:1 1 auto; min-width:0;}
.mc-titre{font-size:clamp(15px,3.2vw,22px); font-weight:800; line-height:1.15;}
.mc-sub{font-size:clamp(11px,2.1vw,13.5px); color:var(--muted); font-weight:600; margin-top:3px;}
.mc-steps{display:flex; gap:5px; margin-top:8px; flex-wrap:wrap;}
.mc-steps i{
  width:26px; height:26px; border-radius:9px; display:grid; place-items:center;
  background:#ece7f8; font-size:13px; font-style:normal;
}
.mc-steps i.ok{background:#c9f0d2;}
.mc-steps i.cur{background:var(--p3); box-shadow:0 0 0 3px rgba(255,206,58,.35);}
.mc-btn{
  flex:0 0 auto; border:0; cursor:pointer; border-radius:18px; font-family:inherit;
  font-size:clamp(13px,2.7vw,18px); font-weight:800; color:#fff; background:var(--p1);
  padding:14px 20px; box-shadow:0 5px 0 rgba(0,0,0,.22); line-height:1.15; text-align:center;
}
.mc-btn:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.22);}
.mc-btn.gagne{background:#fff; color:var(--ink); font-size:clamp(12px,2.3vw,15px);}
.mc-btn small{display:block; font-size:.72em; font-weight:700; opacity:.9;}

.h2-ateliers{
  width:100%; flex:1 1 auto; display:grid; grid-template-columns:repeat(4,1fr);
  gap:9px; min-height:0;
}
.h2-at{
  border:0; cursor:pointer; border-radius:20px; font-family:inherit; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:8px 4px; box-shadow:0 5px 0 rgba(0,0,0,.2); min-height:0;
}
.h2-at:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.2);}
.h2-at .em{font-size:clamp(26px,6.5vw,50px); line-height:1;}
.h2-at .lab{font-size:clamp(11px,2.1vw,14.5px); font-weight:800; text-align:center; line-height:1.15;}
.h2-at .note{font-size:clamp(9.5px,1.7vw,11.5px); font-weight:700; opacity:.85;}
.h2-at.c1{background:var(--p1);} .h2-at.c2{background:var(--p2);}
.h2-at.c3{background:var(--p4);} .h2-at.c4{background:var(--p5);}
.h2-at.off{background:rgba(255,255,255,.17); box-shadow:none; color:rgba(255,255,255,.75);}

.h2-tresors{width:100%; flex:0 0 auto; display:flex; gap:9px;}
.h2-tr{
  flex:1 1 0; border:0; cursor:pointer; border-radius:16px; font-family:inherit;
  background:rgba(255,255,255,.16); color:#fff; padding:10px 6px;
  font-size:clamp(11.5px,2.1vw,14px); font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.h2-tr:active{background:rgba(255,255,255,.26);}

@media (orientation:portrait){
  #home.home2 .h2-ateliers{grid-template-columns:repeat(2,1fr);}
  #home.home2 .mission-card{flex-direction:column; align-items:stretch; gap:10px;}
  #home.home2 .mc-btn{width:100%;}
  #home.home2 .h2-tresors{flex-direction:column;}
  #home.home2 .h2-at .em{font-size:38px;}
}

/* ============================================================
   HUBS maths et francais
   ============================================================ */
.hub-grid{
  width:100%; flex:1 1 auto; display:grid; grid-template-columns:repeat(2,1fr);
  gap:12px; align-content:center; min-height:0;
}
.hub-t{
  border:0; cursor:pointer; border-radius:20px; padding:14px; text-align:left;
  background:var(--card); box-shadow:0 6px 0 rgba(0,0,0,.2);
  display:flex; gap:12px; align-items:center; font-family:inherit; color:var(--ink);
}
.hub-t:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.2);}
.hub-t .ic{
  width:46px; height:46px; flex:0 0 auto; border-radius:16px;
  display:grid; place-items:center; font-size:23px; background:#efe9fb;
}
.hub-t b{display:block; font-size:clamp(13px,2.5vw,16px);}
.hub-t span{display:block; font-size:clamp(10.5px,1.9vw,12.5px); color:var(--muted); margin-top:2px;}

/* ============================================================
   ECRAN D'ATELIER (commun a tous)
   ============================================================ */
.at-top{display:flex; align-items:center; gap:10px; width:100%; flex:0 0 auto;}
.at-titre{flex:1 1 auto; min-width:0; text-align:left;}
.at-titre b{display:block; font-size:clamp(14px,2.7vw,18px); color:#fff; font-weight:700;}
.at-titre span{display:block; font-size:clamp(10.5px,1.9vw,12.5px); color:#d9cff2; margin-top:1px;}
.at-body{
  flex:1 1 auto; width:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; min-height:0;
}

.dots-prog{display:flex; gap:5px; justify-content:center; flex-wrap:wrap;}
.dots-prog i{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.28); display:block;}
.dots-prog i.ok{background:var(--p2);}
.dots-prog i.ko{background:var(--p4);}
.dots-prog i.cur{background:var(--p3); transform:scale(1.3);}

.calc-q{
  font-size:clamp(28px,7vw,50px); font-weight:800; color:#fff; text-align:center;
  line-height:1.1; text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.calc-rep{
  min-width:110px; min-height:50px; border-radius:16px; background:var(--card);
  border:3px dashed rgba(124,77,207,.45); display:grid; place-items:center;
  font-size:clamp(24px,5vw,34px); font-weight:800; color:var(--ink); padding:0 16px;
}
.calc-rep.good{border:3px solid var(--ok); background:#eafaef; color:#1f6b4c;}
.calc-rep.bad{border:3px solid var(--no); background:#ffeeee; color:#b83b3b;}
.at-fb{min-height:20px; font-size:clamp(11.5px,2.1vw,14px); font-weight:700; color:#ffe3a8; text-align:center;}

.pave{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; width:100%; max-width:330px;}
.pave button{
  font:800 clamp(16px,3.2vw,21px)/1 inherit; color:var(--ink); cursor:pointer;
  background:var(--card); border:0; border-radius:14px; padding:11px 0;
  box-shadow:0 4px 0 rgba(0,0,0,.18); font-family:inherit;
}
.pave button:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.18);}
.pave button.ok{background:var(--p2); color:#0d4f4b; grid-column:span 4;}
.pave button.del{background:var(--p4); color:#7a2547;}

.choix2{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; width:100%; max-width:340px;}
.choix3{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; width:100%; max-width:430px;}
.choix2 button,.choix3 button{
  font:800 clamp(17px,3.4vw,24px)/1.15 inherit; color:var(--ink); cursor:pointer;
  background:var(--card); border:0; border-radius:16px; padding:15px 6px;
  box-shadow:0 5px 0 rgba(0,0,0,.2); font-family:inherit; word-break:break-word;
}
.choix2 button:active,.choix3 button:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.2);}
.choix2 button.good,.choix3 button.good{background:var(--p2); color:#0d4f4b;}
.choix2 button.bad,.choix3 button.bad{background:var(--p4); color:#7a2547;}

.chrono{width:100%; max-width:340px; height:13px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden;}
.chrono i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--p2),var(--p3)); border-radius:99px;}
.chrono.warn i{background:linear-gradient(90deg,var(--p3),var(--p4));}
.at-compteur{font-size:clamp(11.5px,2.1vw,14px); font-weight:800; color:#d9cff2;}

/* tables : la grille des cadenas */
.tables-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; width:100%; align-content:center;}
.tb{
  border:0; cursor:pointer; border-radius:16px; padding:12px 4px; font-family:inherit;
  background:var(--card); box-shadow:0 5px 0 rgba(0,0,0,.18); color:var(--ink);
}
.tb:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.18);}
.tb b{display:block; font-size:clamp(16px,3.4vw,22px); font-weight:800;}
.tb span{display:block; font-size:clamp(9px,1.6vw,11px); color:var(--muted); margin-top:2px;}
.tb.done{background:linear-gradient(180deg,#eafaf2,#d8f5e7);} .tb.done span{color:#1f7a55;}
.tb.next{box-shadow:0 0 0 3px var(--p3),0 5px 0 rgba(0,0,0,.18);}
.tb.lock{background:rgba(255,255,255,.2); color:rgba(255,255,255,.8); box-shadow:none; cursor:not-allowed;}
.tb.lock span{color:rgba(255,255,255,.7);}
@media (orientation:portrait){ .tables-grid{grid-template-columns:repeat(3,1fr);} }

/* etiquettes : dictee et phrase */
.zone-mot{
  min-height:54px; width:100%; max-width:480px; border-radius:16px;
  border:3px dashed rgba(255,255,255,.4); background:rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; padding:8px 10px;
}
.zone-mot.vide::after{content:'Touche les morceaux, en dessous'; font-size:12px; color:rgba(255,255,255,.65); font-weight:600;}
.zone-mot.good{border-color:var(--ok); background:rgba(55,178,77,.2);}
.zone-mot.bad{border-color:var(--no); background:rgba(250,82,82,.18);}
.banque-eti{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; width:100%; max-width:480px;}
.eti{
  border:0; cursor:pointer; font-family:inherit; border-radius:12px; padding:10px 14px;
  font-size:clamp(14px,2.8vw,19px); font-weight:700; color:var(--ink); background:var(--card);
  box-shadow:0 4px 0 rgba(0,0,0,.18);
}
.eti:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.18);}
.eti.syl{background:#fff3d6; color:#7a5a12;}
.eti.pose{background:var(--p5); color:#fff;}
.eti.off{opacity:.3; pointer-events:none;}

/* detective : la phrase cliquable */
.phrase-mots{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; width:100%; max-width:520px;}
.phrase-mots button{
  border:0; cursor:pointer; font-family:inherit; border-radius:11px; padding:10px 12px;
  font-size:clamp(15px,3vw,21px); font-weight:600; color:var(--ink); background:var(--card);
  box-shadow:0 4px 0 rgba(0,0,0,.16);
}
.phrase-mots button:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.16);}
.phrase-mots button.good{background:var(--p2); color:#0d4f4b;}
.phrase-mots button.bad{background:var(--p4); color:#7a2547;}
.consigne{font-size:clamp(16px,3.4vw,24px); font-weight:800; color:#fff; text-align:center;}

.btn-ecoute{
  border:0; cursor:pointer; border-radius:999px; padding:13px 24px; font-family:inherit;
  font-size:clamp(13px,2.5vw,17px); font-weight:800; color:var(--ink); background:var(--card);
  box-shadow:0 5px 0 rgba(0,0,0,.2); display:inline-flex; align-items:center; gap:9px;
}
.btn-ecoute:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.2);}
.btn-valider{
  border:0; cursor:pointer; font:800 clamp(13px,2.5vw,16px)/1 inherit; color:#0d4f4b;
  background:var(--p2); border-radius:999px; padding:13px 30px; font-family:inherit;
  box-shadow:0 5px 0 rgba(0,0,0,.2);
}
.btn-valider:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.2);}
.btn-valider[disabled]{background:rgba(255,255,255,.25); color:rgba(255,255,255,.6); box-shadow:none; cursor:default;}

/* resultat d'atelier */
.res-emo{font-size:clamp(44px,10vw,72px);}
.res-titre{font-size:clamp(18px,4vw,26px); font-weight:800; color:#fff; text-align:center;}
.res-txt{font-size:clamp(12.5px,2.3vw,15px); color:#d9cff2; text-align:center; max-width:44ch; line-height:1.5;}
.res-ticket{
  display:inline-flex; align-items:center; gap:8px; background:var(--p3); color:#5a4312;
  border-radius:999px; padding:9px 18px; font-size:clamp(11.5px,2.1vw,14px); font-weight:800;
}

/* le chrono de fluence, dans le lecteur */
.btn-round.lit{background:var(--p4); color:#fff;}
.flu-bulle{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%);
  background:var(--card); color:var(--ink); border-radius:999px; padding:9px 18px;
  font-size:13px; font-weight:800; box-shadow:0 6px 18px rgba(0,0,0,.3); z-index:60;
}
.flu-jauge{width:min(88vw,420px); height:16px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden; position:relative;}
.flu-jauge i{display:block; height:100%; background:linear-gradient(90deg,var(--p2),var(--p3)); border-radius:99px;}
.flu-jauge b{
  position:absolute; top:-4px; width:3px; height:24px; background:#fff; border-radius:2px;
  box-shadow:0 0 0 2px rgba(0,0,0,.15);
}