/* =====================================================================
   vues/cas-pratique.css — l'atelier du cas pratique (famille méthode)
   docs/CDC-cas-pratique-v2.md §12. Préfixes : .cp2- (atelier) et .cpm-
   (majeure structurée, partagée avec le Syllogisme). Une feuille à part
   pour que les ateliers de la méthode travaillent sans contention.
   Mobile 390 px : tout s'empile, les onglets défilent, aucun débordement.
   ===================================================================== */

.cp2-barre, .cp2-gab, .cp2-vue > .card, .cp2-pret, .cp2-mes, .cp2-commencer { max-width: var(--gab-large, 920px); margin-left: auto; margin-right: auto; }
.cp2-vue { display: flex; flex-direction: column; gap: var(--sp-3, 12px); }
.cp2-vue > .card, .cp2-barre, .cp2-gab, .cp2-pret, .cp2-mes, .cp2-commencer { width: 100%; box-sizing: border-box; margin-bottom: var(--sp-3, 12px); }

.cp2-barre-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--sp-3, 12px); align-items: end; }
.cp2-barre-row > * { min-width: 0; }
.cp2-barre-row .input { width: 100%; }
.cp2-barre-a { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); align-items: center; justify-content: flex-end; }
.cp2-etat { white-space: nowrap; }
.cp2-etat-pret, .cp2-etat-redige, .cp2-etat-compose, .cp2-etat-confronte { background: var(--ok-tint, color-mix(in srgb, var(--method) 12%, var(--card))); color: var(--ok-text, var(--method)); }

.cp2-gab summary { cursor: pointer; }
.cp2-gab-src { font-size: var(--t-small, 12.5px); margin: var(--sp-2, 8px) 0; }
.cp2-attentes { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.cp2-attentes small { display: inline; }

.cp2-onglets, .cp2-sous-onglets { max-width: var(--gab-large, 920px); margin: 0 auto var(--sp-3, 12px); display: flex; gap: var(--sp-1, 4px); overflow-x: auto; border-bottom: 1px solid var(--hairline); scrollbar-width: thin; }
.cp2-sous-onglets { border-bottom-style: dashed; }
.cp2-onglet { flex: 0 0 auto; min-height: 44px; background: none; border: 0; border-bottom: 2px solid transparent; padding: 7px 12px; font-family: var(--sans); font-size: var(--t-ui, 13.5px); color: var(--ink-soft); cursor: pointer; }
.cp2-onglet.is-on { color: var(--ink); border-bottom-color: var(--gold); font-weight: 600; }

.cp2-h { font-family: var(--serif); font-size: var(--t-h4, 17px); margin: 0 0 var(--sp-2, 8px); }
.cp2-h3 { font-family: var(--serif); font-size: var(--t-body, 15px); margin: var(--sp-3, 12px) 0 var(--sp-2, 8px); }
.cp2-row { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); align-items: center; margin-top: var(--sp-2, 8px); }
.cp2-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3, 12px); }
.cp2-deux > * { min-width: 0; }
.cp2-lignes { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.cp2-ligne { display: flex; gap: var(--sp-2, 8px); align-items: center; }
.cp2-ligne > .input { flex: 1 1 0; min-width: 0; }
.cp2-add { align-self: flex-start; }
.cp2-enonce, .cp2-rappel, .cp2-redaction, .cp2-saisie, .cp2-q-texte, .cp2-min, .cp2-s-concl, .cp2-c-rep, .cp2-ensemble, .cp2-conseil, .cp2-titre, .cp2-source { width: 100%; box-sizing: border-box; font-family: var(--sans); line-height: 1.5; }
.cp2-redaction { font-family: var(--serif); font-size: var(--t-lecture, 16.5px); line-height: 1.65; }
.cp2-alertes { margin: 0; padding-left: 1.2em; color: var(--warn-ink, var(--enjeu-ink)); font-size: var(--t-small, 12.5px); }
.cp2-alertes:empty { display: none; }
.cp2-alerte, .cp2-raison { font-size: var(--t-small, 12.5px); color: var(--warn-ink, var(--enjeu-ink)); margin: var(--sp-1, 4px) 0 0; }
.cp2-origine.is-exo { background: var(--warn-bg); color: var(--warn-ink); }
.cp2-reconst, .cp2-corrige-m { font-size: var(--t-small, 12.5px); }

.cp2-questions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2, 8px); counter-reset: q; }
.cp2-q { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.cp2-q-posee { margin: 0; font-size: var(--t-small, 12.5px); }
.cp2-q-a { display: flex; gap: var(--sp-2, 8px); justify-content: flex-end; }
.cp2-commande { border: 1px solid var(--hairline); border-radius: var(--r-s, 6px); padding: var(--sp-2, 8px); display: flex; flex-wrap: wrap; gap: var(--sp-3, 12px); }
.cp2-commande legend { font-size: var(--t-caption, 11.5px); color: var(--ink-soft); }
.cp2-arbre-l, .cp2-arbre-l ul { margin: 0; padding-left: 1.2em; }
.cp2-q-rappel { margin: 0; font-family: var(--serif); }

.cp2-min-i { display: flex; flex-direction: column; gap: var(--sp-1, 4px); margin-bottom: var(--sp-2, 8px); }
.cp2-min-l { font-weight: 600; font-size: var(--t-ui, 13.5px); }
.cp2-verdict p { margin: 0 0 var(--sp-1, 4px); }
.cp2-arg-col { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.cp2-arg-ref { max-width: 40%; }
.cp2-aucun { display: inline-flex; gap: var(--sp-1, 4px); align-items: center; font-size: var(--t-ui, 13.5px); }
.cp2-chef { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.cp2-concl-g { max-width: var(--gab-large, 920px); margin: 0 auto; font-size: var(--t-small, 12.5px); }

.cp2-chrono-l { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.cp2-chrono-l li { display: flex; justify-content: space-between; gap: var(--sp-2, 8px); align-items: center; flex-wrap: wrap; }
.cp2-chrono-l li.is-depasse .num { color: var(--warn-ink, var(--enjeu-ink)); }
.cp2-redac-a { margin-top: var(--sp-3, 12px); }

.cp2-corrige { border-left: 3px solid var(--gold); padding-left: var(--sp-3, 12px); }
.cp2-corrige-p { font-family: var(--serif); line-height: 1.6; }
.cp2-ecarts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.cp2-ecart p { margin: 0 0 var(--sp-1, 4px); }
.cp2-ecart.is-refuse { opacity: .6; }
.cp2-ecart.is-journal, .cp2-ecart.is-chantier, .cp2-ecart.is-carte { border-left: 3px solid var(--method); }
.cp2-ecart-codes { font-size: var(--t-caption, 11.5px); }
.cp2-carte { display: flex; flex-direction: column; gap: var(--sp-2, 8px); margin-top: var(--sp-2, 8px); }

.cp2-pret { border-left: 3px solid var(--warn-line, var(--gold)); }
.cp2-pret.is-ok { border-left-color: var(--method); }
.cp2-manques { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--sp-1, 4px); }
.btn-lien { background: none; border: 0; padding: 0; color: var(--c-a-text, var(--c-a)); text-align: left; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cp2-avert summary { cursor: pointer; font-size: var(--t-small, 12.5px); }

.cp2-mes-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.cp2-mes-i { display: flex; justify-content: space-between; gap: var(--sp-2, 8px); align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); padding-bottom: var(--sp-2, 8px); }
.cp2-section { margin-top: var(--sp-3, 12px); display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.cp2-section > summary { cursor: pointer; }
.cp2-sujets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1, 4px); }
.cp2-sujet-b { width: 100%; text-align: left; display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); align-items: center; white-space: normal; }
.cp2-pill-corrige { background: color-mix(in srgb, var(--gold) 14%, var(--card)); }
.cp2-constr-i { display: flex; flex-direction: column; gap: var(--sp-1, 4px); }
.cp2-dlg { max-width: min(640px, 92vw); }
.cp2-dlg-l { list-style: none; margin: var(--sp-2, 8px) 0; padding: 0; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-1, 4px); }
.cp2-dlg-i { width: 100%; text-align: left; white-space: normal; }
.cp2-devoir { max-width: var(--gab-large, 920px); margin: 0 auto var(--sp-3, 12px); }

/* --- La majeure structurée (partagée avec le Syllogisme) --- */
.cpm { display: flex; flex-direction: column; gap: var(--sp-3, 12px); }
.cpm-outils { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); }
.cpm-el { border: 1px solid var(--hairline); border-radius: var(--r-m, 10px); padding: var(--sp-3, 12px); display: flex; flex-direction: column; gap: var(--sp-2, 8px); min-width: 0; }
.cpm-el legend, .cpm-el > summary { font-family: var(--serif); font-weight: 600; padding: 0 var(--sp-1, 4px); }
.cpm-el > summary { cursor: pointer; }
.cpm-el-i { display: flex; flex-direction: column; gap: var(--sp-2, 8px); border-top: 1px dashed var(--hairline); padding-top: var(--sp-2, 8px); }
.cpm-el-h { display: flex; gap: var(--sp-2, 8px); align-items: center; flex-wrap: wrap; }
.cpm-invoquee { display: inline-flex; gap: var(--sp-1, 4px); align-items: center; font-size: var(--t-small, 12.5px); }
.cpm-principe, .cpm-el textarea { width: 100%; box-sizing: border-box; font-family: var(--sans); line-height: 1.5; }
.cpm-sources, .cpm-conds, .cpm-edd { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.cpm-src { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 8rem) auto auto; gap: var(--sp-2, 8px); align-items: center; }
.cpm-src-orig { grid-column: 1 / -1; font-size: var(--t-caption, 11.5px); }
.cpm-vigueur summary { cursor: pointer; font-size: var(--t-small, 12.5px); }
.cpm-vigueur-b { display: flex; flex-direction: column; gap: var(--sp-1, 4px); }
.cpm-cond { display: flex; gap: var(--sp-2, 8px); align-items: center; }
.cpm-cond-lib { flex: 1 1 0; min-width: 0; }
.cpm-cond-n { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c-b) 12%, var(--card)); font-size: var(--t-caption, 11.5px); font-weight: 700; }
.cpm-edd-i { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(0, 12rem) auto; gap: var(--sp-2, 8px); align-items: center; }
.cpm-assemblage { font-family: var(--serif); line-height: 1.6; margin: var(--sp-1, 4px) 0 0; }
.cpm-avert { margin: 0; padding-left: 1.2em; color: var(--warn-ink, var(--enjeu-ink)); font-size: var(--t-small, 12.5px); }
.cpm-avert:empty { display: none; }
.cpm-ordre, .cpm-frise { font-size: var(--t-small, 12.5px); margin: 0; }
.sy-cas, .sy-rattacher { max-width: 760px; margin: 0 auto 14px; }
.sy-structuree > summary { cursor: pointer; list-style: none; }

@media (max-width: 640px) {
  .cp2-barre-row, .cp2-deux { grid-template-columns: minmax(0, 1fr); }
  .cp2-barre-a { justify-content: flex-start; }
  .cpm-src { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cpm-src .cpm-src-ref { grid-column: 1 / -1; order: -1; }
  .cpm-edd-i { grid-template-columns: minmax(0, 1fr) auto; }
  .cpm-edd-i .cpm-edd-texte, .cpm-edd-i .cpm-edd-src { grid-column: 1 / -1; }
  .cp2-ligne { flex-wrap: wrap; }
  .cp2-ligne > .input { flex-basis: 100%; }
  .cp2-arg-ref { max-width: none; }
}