/* =========================================================
   MISSION GÉOGRAPHIQUE — HABILLAGE DES ÉNIGMES
   ---------------------------------------------------------
   Styles des 15 types d'activités produits par activites.js,
   de l'enveloppe commune (consigne, barre d'actions, retour)
   et des états de correction (.bon, .faux, .mauvais).
   Les variables de couleur sont définies dans style.css.

   Sommaire
     1.  Enveloppe commune d'une énigme
     2.  Retours (partagés avec la piste finale)
     3.  QCM
     4.  Vrai / Faux
     5.  Étiquettes de mots (texte à trous, cartes)
     6.  Texte à trous
     7.  Relier deux colonnes
     8.  Remise en ordre
     9.  Carte à légender
     10. Tri en paniers
     11. Mots croisés
     12. Mots mêlés
     13. Anagramme
     14. Saisies
     15. Répartition
     16. Tableau à compléter
     17. Diagramme circulaire
     18. Réponse ouverte
     19. Adaptations téléphone
   ========================================================= */


/* =========================================================
   1. ENVELOPPE COMMUNE D'UNE ÉNIGME
   ========================================================= */
.activite{
  position: relative;
  margin: .6rem 0 0;
}

/* La consigne : fiche épinglée */
.activite .consigne{
  margin: 0 0 .6rem;
  padding: .2rem 0 .2rem 1rem;
  border-left: 6px solid var(--rouge);
  font-family: var(--police-titre);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
}
.activite .precision{
  margin: 0 0 .8rem 1.4rem;
  color: var(--encre-douce);
  font-style: italic;
}

/* Document à lire (texte, tableau, extrait) */
.encadre{
  margin: .8rem 0 1rem;
  padding: .9rem 1.1rem;
  background: var(--blanc);
  border: 2px dashed var(--kraft-fonce);
  border-radius: var(--rayon-petit);
  overflow-x: auto;
}
.encadre > :last-child{ margin-bottom: 0; }

.activite .corps{
  margin: 1rem 0 1.1rem;
}

/* Boutons d'une énigme validée : ils gardent leurs couleurs de correction */
.activite .corps button:disabled{
  opacity: 1;
  cursor: default;
}

/* Champs d'une énigme validée : texte lisible, fond de correction visible */
.activite .corps input:disabled,
.activite .corps select:disabled,
.activite .corps textarea:disabled{
  color: var(--encre);
  -webkit-text-fill-color: var(--encre);
  opacity: 1;
  cursor: default;
}

/* Barre d'actions : Vérifier, Coup de pouce, Correction */
.barre-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  padding-top: .9rem;
  border-top: 1px solid var(--trait);
}
.barre-actions .essais{
  margin-left: auto;
  color: var(--encre-douce);
  font-size: .9rem;
  font-weight: 600;
}
.barre-actions .essais:empty{ display: none; }

/* Énigme validée : tampon « dossier classé » */
.activite.validee::after{
  content: "Dossier classé";
  position: absolute;
  top: -.4rem;
  right: 0;
  padding: .2rem .6rem;
  border: 3px double var(--vert);
  border-radius: 6px;
  color: var(--vert);
  font-family: var(--police-tampon);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(4deg);
  background: rgba(255,253,248,.85);
  pointer-events: none;
}
.activite.validee .consigne{ padding-right: 9rem; }

/* Petite aide sous un exercice */
.aide-calcul{
  margin: .6rem 0;
  color: var(--encre-douce);
  font-size: .92rem;
  font-style: italic;
}


/* =========================================================
   2. RETOURS (partagés avec la piste finale)
   ========================================================= */
.retour{
  margin: 1rem 0 0;
  padding: .85rem 1.1rem;
  border: 1px solid transparent;
  border-left-width: 6px;
  border-radius: var(--rayon-petit);
  font-weight: 600;
  line-height: 1.5;
}
.retour.bon{
  background: var(--vert-pale);
  border-color: #a9d0a6;
  border-left-color: var(--vert);
  color: #1d4d2b;
}
.retour.faux{
  background: var(--rouge-pale);
  border-color: #eab2ab;
  border-left-color: var(--rouge);
  color: #8a1c15;
  animation: secouer .35s ease;
}
@keyframes secouer{
  0%, 100%{ transform: none; }
  25%{ transform: translateX(-5px); }
  75%{ transform: translateX(5px); }
}


/* =========================================================
   3. QCM
   ========================================================= */
.qcm{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
}
.qcm.liste{ grid-template-columns: minmax(0, 1fr); }

.qcm button{
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 3.6rem;
  padding: .7rem 1rem;
  border: 2px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  text-align: left;
  font-weight: 600;
  box-shadow: 0 3px 0 rgba(27,42,74,.1);
  transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
  overflow-wrap: anywhere;
}
.qcm button:hover:not(:disabled){ border-color: var(--bleu); }
.qcm button:has(.vignette){
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
}
.qcm .vignette{
  display: grid;
  place-items: center;
  min-height: 3.2rem;
  font-size: 2.4rem;
  line-height: 1;
}
.qcm .vignette img{
  display: block;
  max-height: 130px;
  width: auto;
  border-radius: 6px;
}
.qcm button.choisi{
  border-color: var(--encre);
  background: var(--bleu-pale);
  box-shadow: 0 0 0 3px rgba(27,42,74,.18);
}
.qcm button.bon{
  border-color: var(--vert);
  background: var(--vert-pale);
  color: #1d4d2b;
}
.qcm button.mauvais{
  border-color: var(--rouge);
  background: var(--rouge-pale);
  color: #8a1c15;
}
.qcm button.bon::after,
.qcm button.mauvais::after{
  position: absolute;
  top: .35rem;
  right: .5rem;
  font-weight: 800;
}
.qcm button.bon::after{ content: "\2713"; color: var(--vert); }
.qcm button.mauvais::after{ content: "\2717"; color: var(--rouge); }


/* =========================================================
   4. VRAI / FAUX
   ========================================================= */
table.vf{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 .5rem;
}
.vf td{
  padding: .6rem .9rem;
  background: var(--blanc);
  border-top: 2px solid var(--trait);
  border-bottom: 2px solid var(--trait);
  vertical-align: middle;
}
.vf td:first-child{
  border-left: 2px solid var(--trait);
  border-radius: var(--rayon-petit) 0 0 var(--rayon-petit);
}
.vf td:last-child{
  width: 1%;
  white-space: nowrap;
  border-right: 2px solid var(--trait);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  text-align: right;
}
.vf .bascule{
  width: var(--cible);
  height: var(--cible);
  margin-left: .35rem;
  border: 2px solid var(--encre);
  border-radius: 10px;
  background: var(--blanc);
  font-weight: 800;
  font-size: 1.1rem;
}
.vf .bascule:hover:not(:disabled){ background: var(--bleu-pale); }
.vf .bascule.choisi{
  background: var(--encre);
  color: #fff;
}
.vf tr.bon td{ background: var(--vert-pale); border-color: var(--vert); }
.vf tr.faux td{ background: var(--rouge-pale); border-color: var(--rouge); }


/* =========================================================
   5. ÉTIQUETTES DE MOTS (texte à trous, carte à légender)
   ========================================================= */
.banque-mots{
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 0 1rem;
  padding: .8rem;
  background: var(--kraft-pale);
  border: 2px dashed var(--kraft-fonce);
  border-radius: var(--rayon-petit);
}
.mot-etiquette{
  min-height: 2.75rem;
  padding: .4rem .9rem;
  border: 2px solid var(--kraft-fonce);
  border-radius: 8px;
  background: var(--blanc);
  font-weight: 700;
  box-shadow: 0 3px 0 rgba(120,85,30,.3);
  transition: transform .12s ease, background-color .12s ease;
}
.mot-etiquette:hover:not(:disabled):not(.utilise){ transform: translateY(-2px); }
.mot-etiquette.selectionne{
  border-color: var(--encre);
  background: var(--encre);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 5px 0 #0d1830;
}
.mot-etiquette.utilise{
  opacity: .38;
  text-decoration: line-through;
  box-shadow: none;
  cursor: default;
}


/* =========================================================
   6. TEXTE À TROUS
   ========================================================= */
.texte-trous{
  padding: 1rem 1.2rem;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  font-size: 1.08rem;
  line-height: 2.5;
}
.trou{
  display: inline-block;
  min-width: 6.5em;
  margin: 0 .15em;
  padding: 0 .5em;
  line-height: 1.8;
  border-bottom: 3px solid var(--encre);
  border-radius: 6px 6px 0 0;
  background: var(--bleu-pale);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.trou.vide{
  background: rgba(228,237,248,.45);
  border-bottom-style: dashed;
  color: transparent;            /* les points de suspension restent invisibles */
  user-select: none;
}
.trou.vide:hover{ background: var(--bleu-pale); }
.trou.bon{ background: var(--vert-pale); border-bottom-color: var(--vert); color: #1d4d2b; }
.trou.faux{ background: var(--rouge-pale); border-bottom-color: var(--rouge); color: #8a1c15; }


/* =========================================================
   7. RELIER DEUX COLONNES
   ========================================================= */
.relier{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .8rem;
  align-items: stretch;
}
.relier .colonne{
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.relier .lien-milieu{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  color: var(--kraft-fonce);
  font-family: var(--police-tampon);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  background: repeating-linear-gradient(180deg, var(--trait) 0 6px, transparent 6px 12px) center / 2px 100% no-repeat;
}
.relier button{
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 3.4rem;
  padding: .55rem .8rem;
  border: 2px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  text-align: left;
  font-weight: 600;
  box-shadow: 0 3px 0 rgba(27,42,74,.1);
  overflow-wrap: anywhere;
}
/* Colonne de gauche : la pastille va du côté du milieu */
.relier .colonne:first-child button{ flex-direction: row-reverse; justify-content: space-between; }
.relier button > span:not(.pastille){ flex: 1; }
.relier button img{
  max-height: 64px;
  width: auto;
  border-radius: 6px;
}
.relier .pastille{
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px dashed var(--trait);
  border-radius: 50%;
  font-family: var(--police-tampon);
  font-weight: 800;
}
.relier .pastille:not(:empty){
  border: 2px solid var(--encre);
  background: var(--encre);
  color: #fff;
}
.relier button:hover:not(:disabled){ border-color: var(--bleu); }
.relier button.selectionne{
  border-color: var(--rouge);
  background: var(--rouge-pale);
  box-shadow: 0 0 0 3px rgba(179,38,30,.2);
}
.relier button.appariee{
  border-color: var(--encre);
  background: var(--bleu-pale);
}
.relier button.bon,
.relier button.faux{ box-shadow: 0 3px 0 rgba(27,42,74,.1); }
.relier button.bon{ border-color: var(--vert); background: var(--vert-pale); }
.relier button.bon .pastille{ background: var(--vert); border-color: var(--vert); }
.relier button.faux{ border-color: var(--rouge); background: var(--rouge-pale); }
.relier button.faux .pastille{ background: var(--rouge); border-color: var(--rouge); }


/* =========================================================
   8. REMISE EN ORDRE
   ========================================================= */
.ordre{
  display: grid;
  gap: .55rem;
  counter-reset: rang;
}
.ordre .element{
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .5rem .6rem .5rem .7rem;
  background: var(--blanc);
  border: 2px solid var(--trait);
  border-radius: var(--rayon-petit);
  box-shadow: 0 3px 0 rgba(27,42,74,.08);
  counter-increment: rang;
}
.ordre .rang{
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--encre);
  color: #fff;
  font-weight: 800;
}
.ordre .rang::before{ content: counter(rang); }
.ordre .element img{
  max-height: 72px;
  width: auto;
  border-radius: 6px;
}
.ordre .libelle{
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ordre .fleches{
  flex: none;
  display: flex;
  gap: .35rem;
}
.ordre .fleches button{
  width: var(--cible);
  height: var(--cible);
  border: 2px solid var(--encre);
  border-radius: 10px;
  background: var(--blanc);
  font-size: 1rem;
}
.ordre .fleches button:hover:not(:disabled){ background: var(--bleu-pale); }
.activite .ordre .fleches button:disabled{ opacity: .3; }
.ordre .element.bon{ border-color: var(--vert); background: var(--vert-pale); }
.ordre .element.bon .rang{ background: var(--vert); }
.ordre .element.faux{ border-color: var(--rouge); background: var(--rouge-pale); }
.ordre .element.faux .rang{ background: var(--rouge); }


/* =========================================================
   9. CARTE À LÉGENDER
   ========================================================= */
.carte-zone{
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  overflow: hidden;
  border: 4px solid var(--blanc);
  border-radius: var(--rayon-petit);
  box-shadow: 0 3px 12px rgba(27,42,74,.18);
  background: #dceaf6;
}
.carte-zone > svg,
.carte-zone > img{
  display: block;
  width: 100%;
  height: auto;
}
.zone-depot{
  position: absolute;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem;
  min-height: 2.2rem;
  padding: .15rem .55rem;
  border: 2px solid var(--encre);
  border-radius: 8px;
  background: var(--bleu-pale);
  color: var(--encre);
  font-size: .85rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(27,42,74,.3);
  cursor: pointer;
}
.zone-depot.vide{
  border-style: dashed;
  background: rgba(255,253,248,.92);
  color: var(--rouge);
}
.zone-depot:hover{ outline: 3px solid rgba(184,134,27,.6); }
.zone-depot.bon{ border-color: var(--vert); background: var(--vert-pale); color: #1d4d2b; }
.zone-depot.faux{ border-color: var(--rouge); background: var(--rouge-pale); color: #8a1c15; }


/* =========================================================
   10. TRI EN PANIERS
   ========================================================= */
.reserve-jetons{
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  min-height: 4rem;
  margin: 0 0 1rem;
  padding: .8rem;
  background: var(--kraft-pale);
  border: 2px dashed var(--kraft-fonce);
  border-radius: var(--rayon-petit);
}
.reserve-jetons:empty::before{
  content: "Tout est classé.";
  align-self: center;
  color: var(--encre-douce);
  font-style: italic;
}
.paniers{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .9rem;
}
/* Panier : chemise cartonnée avec onglet */
.panier{
  display: flex;
  flex-direction: column;
  min-height: 9rem;
  background: var(--blanc);
  border: 2px solid var(--kraft-fonce);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) var(--rayon-petit);
  cursor: pointer;
  transition: box-shadow .12s ease;
}
.panier:hover{ box-shadow: 0 0 0 3px rgba(34,80,143,.2); }
.panier h4{
  margin: 0;
  padding: .55rem .8rem;
  background: var(--kraft);
  color: var(--encre);
  font-size: 1rem;
  border-bottom: 2px solid var(--kraft-fonce);
}
.panier .contenu{
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .45rem;
  padding: .7rem;
}
.jeton-tri{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: .35rem .8rem;
  border: 2px solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  font-weight: 600;
  text-align: left;
  box-shadow: 0 2px 0 rgba(27,42,74,.2);
  overflow-wrap: anywhere;
}
.jeton-tri img{
  max-height: 44px;
  width: auto;
  border-radius: 4px;
}
.jeton-tri.selectionne{
  background: var(--encre);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 #0d1830;
}
.jeton-tri.bon,
.jeton-tri.faux{ transform: none; box-shadow: 0 2px 0 rgba(27,42,74,.15); }
.jeton-tri.bon{ border-color: var(--vert); background: var(--vert-pale); color: #1d4d2b; }
.jeton-tri.faux{ border-color: var(--rouge); background: var(--rouge-pale); color: #8a1c15; }


/* =========================================================
   11. MOTS CROISÉS
   ========================================================= */
.mots-croises{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.4rem 2rem;
}
.grille-mc{
  display: grid;
  gap: 2px;
  flex: none;
  padding: 6px;
  background: var(--kraft-pale);
  border-radius: 8px;
}
.grille-mc .case{
  position: relative;
  width: 1.85rem;
  height: 1.85rem;
}
.grille-mc .case.jouable{
  background: #fff;
  border: 2px solid var(--encre);
  border-radius: 3px;
}
.grille-mc .case .num{
  position: absolute;
  top: 0;
  left: 1px;
  z-index: 1;
  color: var(--rouge);
  font-size: .5rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.grille-mc .case input{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}
.grille-mc .case input:focus{
  box-shadow: none;
  background: var(--jaune-pale);
}
.grille-mc .case.bon{ background: var(--vert-pale); border-color: var(--vert); }
.grille-mc .case.faux{ background: var(--rouge-pale); border-color: var(--rouge); }
.mots-croises .definitions{
  flex: 1 1 260px;
  min-width: 0;
}
.mots-croises .definitions h4{
  margin: 0 0 .3rem;
  color: var(--vert);
}
.mots-croises .definitions ul{ margin-bottom: 1rem; }
.mots-croises .definitions li{ margin-bottom: .4rem; }
/* l'enveloppe peut défiler mais la liste de définitions reste lisible */
.enveloppe-tableau:has(.mots-croises){ overflow-x: auto; }


/* =========================================================
   12. MOTS MÊLÉS
   ========================================================= */
.grille-mm{
  display: grid;
  gap: 3px;
  width: max-content;
  margin: 0 auto;
  padding: 8px;
  background: var(--kraft-pale);
  border: 2px solid var(--kraft-fonce);
  border-radius: var(--rayon-petit);
  user-select: none;
  -webkit-user-select: none;
}
.grille-mm .lettre{
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 5px;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .1s ease;
}
.grille-mm .lettre:hover{ background: var(--bleu-pale); }
.grille-mm .lettre.trouve{
  background: #bfe2bf;
  border-color: var(--vert);
  color: #16401f;
}
.grille-mm .lettre.selection{
  background: var(--rouge);
  border-color: var(--rouge);
  color: #fff;
}
.liste-a-trouver{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: .9rem;
}
.liste-a-trouver span{
  padding: .3rem .8rem;
  background: var(--blanc);
  border: 2px solid var(--trait);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .03em;
}
.liste-a-trouver span.trouve{
  border-color: var(--vert);
  background: var(--vert-pale);
  color: #1d4d2b;
  text-decoration: line-through;
}


/* =========================================================
   13. ANAGRAMME
   ========================================================= */
.anagramme{
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
}
.anagramme .lettres,
.anagramme .reponse{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
}
/* Lettres : tuiles en bois */
.anagramme .lettres button{
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--kraft-fonce);
  border-radius: 8px;
  background: linear-gradient(180deg, #f6e8c8, #e2c995);
  font-size: 1.35rem;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(120,85,30,.45);
  transition: transform .1s ease;
}
.anagramme .lettres button:hover:not(:disabled){ transform: translateY(-2px); }
.anagramme .lettres button.utilisee{
  opacity: .25;
  box-shadow: none;
}
.anagramme .reponse{
  min-height: 3.6rem;
  padding: .3rem .6rem;
  border-bottom: 3px dashed var(--trait);
}
.anagramme .reponse span{
  display: inline-grid;
  place-items: center;
  width: 2.8rem;
  height: 3rem;
  border: 2px solid var(--trait);
  border-bottom-width: 4px;
  border-radius: 6px;
  background: var(--velin);
  font-size: 1.35rem;
  font-weight: 800;
  cursor: pointer;
}


/* =========================================================
   14. SAISIES (nombres, mots)
   ========================================================= */
.saisies{
  display: grid;
  gap: .7rem;
}
.saisies .ligne{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .8rem;
  padding: .6rem .8rem;
  background: var(--blanc);
  border: 2px solid var(--trait);
  border-radius: var(--rayon-petit);
}
.saisies .ligne label{
  flex: 1 1 260px;
  min-width: 0;
  font-weight: 600;
}
.saisies .ligne input{
  flex: 0 1 12rem;
  width: 12rem;
  font-weight: 700;
}
.saisies .unite{
  color: var(--encre-douce);
  font-weight: 700;
}
.saisies .ligne.bon{ border-color: var(--vert); background: var(--vert-pale); }
.saisies .ligne.bon input{ border-color: var(--vert); background: #fff; }
.saisies .ligne.faux{ border-color: var(--rouge); background: var(--rouge-pale); }
.saisies .ligne.faux input{ border-color: var(--rouge); }


/* =========================================================
   15. RÉPARTITION (gouttes, budget…)
   ========================================================= */
.repartition{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .8rem;
}
.repartition .poste{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .9rem .8rem;
  background: var(--blanc);
  border: 2px solid var(--trait);
  border-radius: var(--rayon-petit);
  text-align: center;
}
.repartition .poste h4{ margin-bottom: .2rem; }
.repartition .poste .aide-calcul{ margin: 0 0 .4rem; font-size: .85rem; }
.repartition .compteur{
  margin: auto 0 .4rem;
  font-family: var(--police-titre);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.repartition .boutons{
  display: flex;
  gap: .6rem;
}
.repartition .boutons button{
  width: 3.2rem;
  height: 3.2rem;
  border: 2px solid var(--encre);
  border-radius: 50%;
  background: var(--blanc);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.repartition .boutons button:last-child{
  background: var(--encre);
  color: #fff;
}
.repartition .boutons button:hover:not(:disabled){ filter: brightness(1.1); }
.activite .repartition .boutons button:disabled{ opacity: .45; }
.reste-a-placer{
  margin: .9rem 0 0;
  padding: .55rem 1rem;
  background: var(--bleu-pale);
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
}
.reste-a-placer.ok{
  background: var(--vert-pale);
  color: #1d4d2b;
}


/* =========================================================
   16. TABLEAU À COMPLÉTER
   ========================================================= */
table.a-completer{
  width: 100%;
  min-width: 480px;
  background: var(--blanc);
  border: 2px solid var(--encre);
}
.a-completer th,
.a-completer td{
  padding: .45rem .55rem;
  border: 1px solid var(--trait);
  text-align: left;
  vertical-align: middle;
}
.a-completer thead th{
  background: var(--encre);
  color: #fff;
  font-weight: 700;
}
.a-completer tbody th{
  background: var(--kraft-pale);
  font-weight: 700;
}
.a-completer select{
  width: 100%;
  min-width: 8rem;
}
.a-completer td.bon{ background: var(--vert-pale); }
.a-completer td.bon select{ border-color: var(--vert); background: var(--vert-pale); font-weight: 700; }
.a-completer td.faux{ background: var(--rouge-pale); }
.a-completer td.faux select{ border-color: var(--rouge); background: var(--rouge-pale); font-weight: 700; }


/* =========================================================
   17. DIAGRAMME CIRCULAIRE
   ========================================================= */
.diagramme{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2rem;
}
.diagramme > svg{
  flex: none;
  width: min(280px, 100%);
  height: auto;
}
.diagramme .secteur{
  stroke: #fff;
  stroke-width: 2;
}
.legende-diagramme{
  flex: 1 1 280px;
  display: grid;
  gap: .55rem;
  min-width: 0;
}
.legende-diagramme .ligne{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .4rem .6rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  font-weight: 700;
}
.legende-diagramme .pastille{
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.12);
}
.legende-diagramme select{
  flex: 1 1 12rem;
  min-width: 0;
  font-weight: 400;
}


/* =========================================================
   18. RÉPONSE OUVERTE
   ========================================================= */
.ouverte{
  display: grid;
  justify-items: start;
  gap: .7rem;
}
.ouverte textarea{
  background-color: #fff;
  background-image: repeating-linear-gradient(180deg, transparent 0 1.5em, rgba(34,80,143,.12) 1.5em calc(1.5em + 1px));
  background-attachment: local;
  line-height: 1.5em;
}
.ouverte .pistes{
  width: 100%;
  padding: .8rem 1rem;
  background: var(--jaune-pale);
  border: 2px solid var(--or);
  border-radius: var(--rayon-petit);
}
.ouverte .pistes ul{ margin: .4rem 0 0; }


/* =========================================================
   19. ADAPTATIONS TÉLÉPHONE
   ========================================================= */
@media (max-width: 600px){
  /* Relier : la ligne du milieu disparaît, les deux colonnes restent face à face */
  .relier{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
  .relier .lien-milieu{ display: none; }
  .relier button{ padding: .5rem; gap: .4rem; font-size: .92rem; hyphens: auto; -webkit-hyphens: auto; }
  .relier .pastille:empty{ display: none; }   /* gagne de la place pour le texte */
  .relier .pastille{ width: 1.7rem; height: 1.7rem; }
  .relier .colonne:first-child button{ flex-direction: row; }

  .zone-depot{ font-size: .72rem; min-width: 1.9rem; min-height: 1.8rem; padding: .1rem .35rem; }

  .vf td{ padding: .5rem .6rem; }
  .vf .bascule{ width: 44px; height: 44px; margin-left: .2rem; }

  .ordre .element{ gap: .5rem; padding: .45rem; }
  .ordre .rang{ width: 1.9rem; height: 1.9rem; }
  .ordre .fleches button{ width: 44px; height: 44px; }

  /* Tableau à compléter : tient dans la largeur quand il n'a que deux colonnes */
  table.a-completer{ min-width: 0; }
  .a-completer select{ min-width: 6.5rem; }

  /* Mots mêlés : grille légèrement réduite pour tenir sur un téléphone */
  .grille-mm{ zoom: .86; gap: 2px; padding: 5px; }

  .saisies .ligne input{ flex: 1 1 100%; width: 100%; }
  .activite .consigne{ font-size: 1.12rem; }
  .activite.validee .consigne{ padding-right: 0; padding-top: 1.8rem; }
  .barre-actions > button{ flex: 1 1 auto; }
  .barre-actions .essais{ flex-basis: 100%; margin-left: 0; }
}