/* ============================================================
   Activités du programme : remise en ordre, tri, associations.
   Mobile d'abord — cibles tactiles d'au moins 44 px, une action à la
   fois, et des couleurs franches pour les 4-6 ans.
   ============================================================ */

.activite-consigne {
  font-size: 1.08rem; background: var(--surface-2); border-radius: var(--rayon-petit);
  padding: .8rem 1rem; margin: .4rem 0 1rem;
}

/* ---------- Commun aux fins de jeu ---------- */
.jeu-fin { text-align: center; padding: 1.6rem .8rem; }
.jeu-fin-etoile { font-size: 3.4rem; line-height: 1; }
.jeu-fin h2 { margin: .4rem 0 .3rem; }
.jeu-fin .btn { margin-top: .7rem; }

/* ---------- Remise en ordre ---------- */
.ord-piste-titre, .ord-tas-titre {
  font-weight: 700; margin: 1rem 0 .4rem; display: flex; align-items: baseline; gap: .5rem;
}
.ord-piste, .ord-tas {
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.ord-piste {
  min-height: 120px; background: var(--surface-2); border: 2px dashed var(--bordure);
  border-radius: var(--rayon); padding: .6rem;
}
.ord-vide { grid-column: 1 / -1; margin: auto; text-align: center; color: var(--texte-doux); font-size: .9rem; }
.ord-carte {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .5rem .4rem .6rem; min-height: 44px; cursor: pointer;
  background: var(--surface); border: 2px solid var(--bordure); border-radius: var(--rayon-petit);
  color: var(--texte); font: inherit; text-align: center; transition: transform .15s, border-color .15s;
}
.ord-carte:hover { transform: translateY(-3px); border-color: var(--accent); }
.ord-carte img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; display: block; }
.ord-emoji { font-size: 2.2rem; }
.ord-texte { font-size: .82rem; line-height: 1.3; }
.ord-rang {
  position: absolute; top: -10px; left: -10px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.ord-juste { border-color: #2f9e5f; background: rgba(47,158,95,.12); }
.ord-faux  { border-color: #d4526e; background: rgba(212,82,110,.10); }
.ord-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.ord-corrige { margin: .8rem 0 0; padding-left: 1.4rem; line-height: 1.7; }

/* ---------- Tri en deux paniers ---------- */
.tri-progres { text-align: center; margin-bottom: .6rem; }
.tri-carte {
  text-align: center; background: var(--surface-2); border-radius: var(--rayon);
  padding: 1rem; margin-bottom: 1rem;
}
.tri-carte img { width: min(100%, 260px); aspect-ratio: 1/1; object-fit: cover; border-radius: var(--rayon-petit); }
.tri-emoji { font-size: 4rem; display: block; }
.tri-texte { font-size: 1.15rem; font-weight: 600; margin: .7rem 0 0; }
.tri-paniers { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
.tri-panier {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1rem .6rem;
  min-height: 44px; cursor: pointer; font: inherit; font-weight: 700; color: var(--texte);
  background: var(--surface); border: 3px solid var(--bordure); border-radius: var(--rayon);
  transition: transform .15s, border-color .15s;
}
.tri-panier:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--accent); }
.tri-panier-ico { font-size: 2.4rem; }
.tri-juste { border-color: #2f9e5f; background: rgba(47,158,95,.14); }
.tri-faux  { border-color: #d4526e; background: rgba(212,82,110,.12); }

/* ---------- Associations ---------- */
.pr-progres { text-align: center; margin-bottom: .7rem; }
.pr-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pr-col { display: flex; flex-direction: column; gap: .55rem; }
.pr-carte {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-height: 62px; padding: .6rem .5rem; cursor: pointer; font: inherit; color: var(--texte);
  background: var(--surface); border: 2px solid var(--bordure); border-radius: var(--rayon-petit);
  text-align: center; transition: transform .15s, border-color .15s, opacity .3s;
}
.pr-carte:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.pr-carte img { width: 100%; max-height: 92px; object-fit: cover; border-radius: 9px; }
.pr-ar { font-size: 1.5rem; line-height: 1.9; }
.pr-texte { font-size: .92rem; line-height: 1.35; }
.pr-choisi { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,163,63,.3); }
.pr-trouve { opacity: .45; border-color: #2f9e5f; background: rgba(47,158,95,.10); cursor: default; }

@media (min-width: 700px) {
  .ord-piste, .ord-tas { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
  .ord-texte { font-size: .9rem; }
}

/* ============================================================
   Mises en situation de fiqh (moteur « cas »)
   Public adulte : plus de texte, moins de couleur, aucune animation
   festive. La lisibilité prime sur l'enthousiasme.
   ============================================================ */
.cas-progres { text-align: center; margin-bottom: .8rem; }

.cas-scene {
  padding: 1rem 1.05rem; margin-bottom: 1rem;
  background: var(--surface-2); border-left: 4px solid var(--turquoise);
  border-radius: var(--rayon-petit);
}
.cas-moment {
  display: inline-block; margin-bottom: .45rem; padding: .16rem .6rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--turquoise-fonce); background: rgba(45,152,158,.14); border-radius: 999px;
}
.cas-situation { margin: 0; font-size: 1.02rem; line-height: 1.62; }
/* La scène illustrée : l'image du moment à gauche, le texte à droite ; sur un
   téléphone, l'image passe au-dessus. Elle accompagne la situation, elle ne
   la remplace pas — c'est le texte qui porte le cas. */
.cas-scene-img { display: grid; gap: .9rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px) { .cas-scene-img { grid-template-columns: 260px 1fr; } }
.cas-img { width: 100%; border-radius: var(--rayon-petit); display: block; }
@media (min-width: 640px) { .cas-scene-img .cas-moment { grid-column: 2; } .cas-scene-img .cas-img { grid-row: 1 / span 2; } }

.cas-question { margin: 0 0 .6rem; font-weight: 700; }

.cas-verdicts { display: flex; flex-direction: column; gap: .5rem; }
.cas-verdict {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .72rem .9rem; cursor: pointer; font: inherit; text-align: left;
  color: var(--texte); background: var(--surface);
  border: 2px solid var(--bordure); border-radius: var(--rayon-petit);
  transition: border-color var(--t-court) var(--m-emphase),
              background var(--t-court) var(--m-emphase);
}
.cas-verdict:hover:not(:disabled) { border-color: var(--accent); }
.cas-verdict:disabled { cursor: default; }
.cas-verdict-nom { font-weight: 600; }
.cas-pastille { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--bordure); }
/* Les pastilles suivent la gravité croissante : vert, ambre, orange, rouge. */
.cas-p0 { background: #2f9e5f; }
.cas-p1 { background: #e0a11c; }
.cas-p2 { background: #e2701d; }
.cas-p3 { background: #c62f28; }

.cas-juste { border-color: #2f9e5f; background: rgba(47,158,95,.10); }
.cas-faux  { border-color: var(--erreur); background: var(--erreur-fond); }

.cas-bareme { margin-top: .9rem; font-size: .88rem; color: var(--texte-doux); }
.cas-bareme summary { cursor: pointer; font-weight: 600; }
.cas-bareme ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.cas-bareme li { margin-bottom: .3rem; line-height: 1.45; }

.cas-regle-titre {
  margin: 0 0 .3rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux);
}
.cas-ref { margin-top: .5rem; font-style: italic; }

.cas-revoir { margin: 1rem 0; text-align: left; }
.cas-revoir ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.cas-revoir li { margin-bottom: .7rem; line-height: 1.5; }

@media (min-width: 700px) {
  .cas-verdicts { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   L'éclair des lettres — grille de repérage devenue jeu de vitesse.
   La grille reprend l'aspect du livret : cases carrées, filet fin,
   beaucoup de blanc. Les cases vides ne sont pas cliquables.
   ============================================================ */
.ecl-accueil { text-align: center; }
.ecl-logo { font-size: 2.6rem; }
.ecl-niveaux { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; margin: 1rem 0; }
@media (min-width: 640px) { .ecl-niveaux { grid-template-columns: repeat(3, 1fr); } }
.ecl-niveau {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .8rem .6rem; cursor: pointer; font: inherit; color: var(--texte);
  background: var(--surface); border: 2px solid var(--bordure); border-radius: var(--rayon-petit);
}
.ecl-niveau:hover { border-color: var(--accent); }
.ecl-niveau-nb {
  font-family: 'Fredoka', var(--police); font-size: 1.5rem; font-weight: 700; color: var(--accent);
}
.ecl-niveau-titre { font-weight: 600; font-size: .92rem; }
.ecl-niveau-sous { line-height: 1.25; }
.ecl-son { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--texte-doux); }

.ecl-barre { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.ecl-points { font-family: 'Fredoka', var(--police); font-size: 1.1rem; color: var(--accent); }

.ecl-cible { text-align: center; margin-bottom: .5rem; }
.ecl-cible-lettre {
  font-size: 3.2rem; line-height: 1.25; color: #d1483f;
  /* La cible reprend le rouge du modèle imprimé dans le livret. */
}
.ecl-cible-nom {
  font-size: .82rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-doux);
}

.ecl-chrono {
  height: 6px; margin: .6rem auto 1rem; max-width: 420px;
  background: var(--bordure); border-radius: 999px; overflow: hidden;
}
.ecl-chrono-jauge {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(90deg, #2f9e5f, #e0a11c);
  transition: width .06s linear;
}

.ecl-grille {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  max-width: 440px; margin: 0 auto;
  border: 1px solid var(--accent-2); border-radius: 4px; overflow: hidden;
}
.ecl-case {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; line-height: 1; color: #2b3350; background: #fff;
  border: 1px solid var(--accent-2); border-radius: 0; margin: -.5px;
  cursor: pointer; font-family: var(--police-ar), serif;
  transition: background var(--t-court) var(--m-emphase);
}
.ecl-case:hover:not(:disabled):not(.ecl-vide) { background: #fdf6e4; }
.ecl-vide { cursor: default; background: #fff; }
.ecl-case:disabled { cursor: default; }
.ecl-trouve { background: #eef8f2; color: #1c6b42; box-shadow: inset 0 0 0 3px #7fc9a4; }
.ecl-rate { background: #fdf0f1; animation: ecl-non 380ms var(--m-emphase); }
@keyframes ecl-non { 0%,100% { transform: none; } 30% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }

.ecl-retour { min-height: 2.6rem; margin-top: .8rem; text-align: center; }
.ecl-note { max-width: 30rem; margin: .2rem auto .8rem; }
.ecl-compteur {
  display: inline-block; margin-top: .2rem; padding: .1rem .6rem;
  font-family: 'Fredoka', var(--police); font-size: .95rem; font-weight: 700;
  color: var(--turquoise-fonce); background: rgba(45,152,158,.14); border-radius: 999px;
}
.ecl-multi .ecl-cible-lettre { color: #b8341f; }