/* =====================================================================
   atelier-m3-m4.css
   Styles propres aux interactions des modules 3 et 4.
   Additif : ne redéfinit aucune classe de theme.css ni d'atelier-texte.css.
   Tous les sélecteurs sont préfixés par at- pour éviter toute collision.
   Les couleurs reprennent les variables du thème quand elles existent,
   avec une valeur de repli sinon.
   ===================================================================== */

.at-badge{
  display:inline-block;width:1.15rem;height:1.15rem;line-height:1.15rem;
  text-align:center;font-size:.72rem;font-weight:700;
  color:var(--papier,#fff);margin-right:.4rem;vertical-align:.05rem;
}
.at-badge--c{background:var(--repere,#2A6179)}
.at-badge--p{background:#7A5B12}

/* ---------- barre de réglages ---------- */
.at-barre{
  background:#F1F4F6;border:1px solid var(--trait,#CBD4DB);
  padding:.8rem 1rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:.7rem 1.2rem;font-size:.9rem;
}
.at-barre label{display:block;font-size:.84rem;color:var(--encre-clair,#4A5866);margin-bottom:.15rem}
.at-barre label.at-case{display:inline-block;font-size:.9rem;color:var(--encre,#16202B);margin-right:.8rem}
.at-barre select,.at-barre input[type=range]{width:100%;font:inherit;font-size:.9rem}

.at-atelier{border:1px solid var(--trait,#CBD4DB);margin:1.2rem 0}
.at-atelier .at-barre{border:0;border-bottom:1px solid var(--trait,#CBD4DB)}
.at-atelier__corps{padding:1.4rem 1.2rem;background:var(--papier,#fff)}
#at-apercu{font-family:Cambria,Georgia,serif}

.at-aligns{display:flex;gap:.3rem;flex-wrap:wrap}
.at-aligns button{padding:.25rem .5rem;font-size:.85rem}
.at-aligns button[aria-pressed="true"]{background:var(--repere,#2A6179);color:var(--papier,#fff)}

/* ---------- tri caractère / paragraphe ---------- */
.at-tri{display:grid;grid-template-columns:1fr auto auto;gap:.3rem .5rem;align-items:center;max-width:64ch;font-size:.95rem}
.at-tri__lib{padding:.25rem 0}
.at-tri button{padding:.2rem .6rem;font-size:.85rem}
.at-tri__lib.est-juste{color:var(--juste,#1E7A4C);font-weight:600}
.at-tri__lib.est-faux{color:var(--erreur,#B03A2E)}
.at-tri__verdict{grid-column:1 / -1;font-size:.88rem;margin:0 0 .35rem}
.at-score{font-weight:600;margin-top:.6rem}

/* ---------- comparaison en deux colonnes ---------- */
.at-duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
.at-duo h4{margin:0 0 .4rem;font-size:.88rem;color:var(--encre-clair,#4A5866);font-weight:600}
@media(max-width:700px){.at-duo{grid-template-columns:1fr}}

/* ---------- simulation de flux de pages (module 4) ---------- */
.at-flux{
  column-count:2;column-gap:1rem;column-rule:1px dashed #9AA8B2;
  height:13rem;overflow:hidden;background:#FBFCFC;
  border:1px solid var(--trait,#CBD4DB);padding:.8rem 1rem;
  font-family:Cambria,Georgia,serif;font-size:.82rem;line-height:1.5;
}
.at-flux p{margin:0 0 .5rem}
.at-flux h5{margin:0 0 .4rem;font-size:.95rem;font-family:inherit;font-weight:700}
.at-flux h5.at-saut{break-before:column;-webkit-column-break-before:always}

/* ---------- feuille A4 réglable (module 4) ---------- */
.at-mise{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1.4rem;align-items:start;margin:1.2rem 0}
@media(max-width:700px){.at-mise{grid-template-columns:1fr}}
.at-page{
  border:1px solid var(--encre-clair,#4A5866);background:var(--papier,#fff);
  width:min(16rem,100%);aspect-ratio:210/297;margin:0 auto;position:relative;
}
.at-page--paysage{aspect-ratio:297/210;width:min(22rem,100%)}
.at-page__zone{position:absolute;background:var(--repere-clair,#E3EDF1);border:1px dashed var(--repere,#2A6179)}
.at-page__bande{
  position:absolute;left:0;right:0;background:#FDF3E3;
  border-top:1px solid #D08C3A;border-bottom:1px solid #D08C3A;
  font-size:.6rem;text-align:center;color:#9C4221;
}
.at-page__note{text-align:center;font-size:.85rem;color:var(--encre-clair,#4A5866);margin-top:.6rem}

/* ---------- champ contre texte tapé ---------- */
.at-pied{font-family:Cambria,Georgia,serif;border:1px solid var(--trait,#CBD4DB);padding:.9rem 1rem;background:#FBFCFC}
.at-champ{background:#E4EAEE}