/* ══════════════════════════════════════════════════════════════════════
   css2026/devoir_compose.css
   Composer une feuille d'exercices (devoir_compose.php).

   Deux usages dans un seul fichier :
     - la page de composition, au vocabulaire visuel du site (cartes 14 px,
       titres #1a3a6a, accent #c0392b) ;
     - la feuille elle-même (body.dv-papier), qui doit ressembler à une
       photocopie et non à une page web — fond blanc, pas de décor.
   Tout est préfixé .dv- : la feuille inclut des fragments HTML écrits pour
   d'autres pages, il ne faut pouvoir déteindre ni dans un sens ni dans l'autre.
══════════════════════════════════════════════════════════════════════ */

/* ── Chapô et blocs d'explication ────────────────────────────────── */
.dv-chapo {
  max-width: 820px;
  margin: 1.4rem auto 2rem;
  padding: 1.4rem 1.2rem;
  background: #fffefc;
  border-left: 4px solid #c0392b;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.7;
  color: #2f2f2f;
}
.dv-chapo p { margin: 0 0 0.8rem; }
.dv-chapo p:last-child { margin-bottom: 0; }
.dv-chapo h2 { margin: 0 0 0.6rem; font-size: 1.1rem; color: #1a3a6a; }
.dv-chapo code, .dv-permalien code {
  background: rgba(0,0,0,0.06); padding: 0.05em 0.35em; border-radius: 4px; font-size: 0.92em;
}

/* ── Formulaire ──────────────────────────────────────────────────── */
.dv-form {
  max-width: 820px;
  margin: 0 auto 2rem;
  padding: 1.2rem;
  border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.6);
}
.dv-champ { display: block; margin-bottom: 1rem; border: none; padding: 0; }
.dv-champ > span, .dv-champ legend {
  display: block; margin-bottom: 0.35rem;
  font-weight: 700; color: #1a3a6a; font-size: 0.95rem;
}
.dv-champ small { font-weight: 400; color: #6b6b6b; }
.dv-form textarea, .dv-form input[type="text"] {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 1rem;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid rgba(0,0,0,0.16);
  border-radius: 8px;
  background: #fff;
}
.dv-form textarea { font-family: ui-monospace, "DejaVu Sans Mono", monospace; letter-spacing: 0.06em; }
.dv-champ-court input { max-width: 24rem; }
.dv-radio { display: block; font-weight: 400; color: #333; margin: 0.2rem 0; cursor: pointer; }
.dv-radio input { margin-right: 0.4rem; accent-color: #1a3a6a; }

/* ── Boutons ─────────────────────────────────────────────────────── */
.dv-btn {
  display: inline-block;
  cursor: pointer;
  font: inherit; font-size: 0.95rem; font-weight: 700;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.9);
  color: #1a3a6a;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.dv-btn:hover { background: #fff; transform: translateY(-2px); color: #c0392b; }
.dv-btn-primaire { background: #1a3a6a; color: #fff; border-color: #1a3a6a; }
.dv-btn-primaire:hover { background: #c0392b; border-color: #c0392b; color: #fff; }

/* ── Résultat ────────────────────────────────────────────────────── */
.dv-alerte {
  max-width: 820px; margin: 0 auto 1.4rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid #d68910;
  border-radius: 0 6px 6px 0;
  background: rgba(241,196,15,0.12);
  font-size: 0.92rem; color: #5a4310;
}
.dv-resultat {
  max-width: 820px; margin: 0 auto 2rem; padding: 1.2rem;
  border: 1.5px solid rgba(26,58,106,0.25); border-radius: 14px;
  background: rgba(255,255,255,0.7);
}
.dv-resultat h2 { margin: 0 0 0.8rem; font-size: 1.1rem; color: #1a3a6a; }
.dv-liste { list-style: none; padding: 0; margin: 0 0 1.2rem; counter-reset: none; }
.dv-liste li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.6rem; margin-bottom: 0.35rem;
  border: 1px solid rgba(0,0,0,0.07); border-radius: 8px;
  background: rgba(255,255,255,0.7);
}
.dv-num {
  flex-shrink: 0; width: 1.7rem; height: 1.7rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: #1a3a6a; color: #fff;
  font-size: 0.8rem; font-weight: 700;
}
.dv-liste code.dv-code {
  flex-shrink: 0; font-size: 0.85rem; font-weight: 700; color: #c0392b;
  background: rgba(192,57,43,0.08); padding: 0.1em 0.4em; border-radius: 4px;
}
.dv-liste a { flex: 1 1 auto; color: #1a3a6a; font-weight: 600; text-decoration: none; font-size: 0.93rem; }
.dv-liste a:hover { color: #c0392b; text-decoration: underline; }
.dv-retirer {
  flex: 0 0 auto !important; color: #999 !important; font-weight: 700;
  padding: 0 0.3rem; text-decoration: none;
}
.dv-retirer:hover { color: #c0392b !important; }
.dv-sorties { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.dv-permalien span { display: block; font-size: 0.85rem; color: #5c5c5c; margin-bottom: 0.25rem; }
.dv-permalien input {
  width: 100%; box-sizing: border-box; font-size: 0.82rem;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  padding: 0.45rem 0.6rem; border: 1.5px solid rgba(0,0,0,0.14);
  border-radius: 8px; background: #fbfbfb; color: #444;
}
.dv-note { font-size: 0.88rem; color: #4a4a4a; margin: 0.9rem 0 0; }

/* ══════════════════════════════════════════════════════════════════
   LA FEUILLE (mode=print)
   Volontairement sobre : c'est une photocopie, pas une page du site.
══════════════════════════════════════════════════════════════════ */
body.dv-papier {
  max-width: 21cm;
  margin: 0 auto;
  padding: 1.5cm 1.2cm 2cm;
  background: #fff;
  color: #111;
  font-family: Georgia, "DejaVu Serif", serif;
  font-size: 11.5pt;
  line-height: 1.45;
}
.dv-tete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  border-bottom: 2px solid #1a3a6a; padding-bottom: 0.5rem; margin-bottom: 1.2rem;
}
.dv-tete h1 { margin: 0 0 0.3rem; font-size: 1.5rem; color: #1a3a6a; }
.dv-sous { margin: 0; font-size: 0.85rem; color: #555; }
.dv-source { margin: 0; text-align: right; font-size: 0.8rem; color: #666; font-weight: 700; }
.dv-source span { font-weight: 400; }

.dv-fiche { margin-bottom: 1.6rem; break-inside: auto; }
.dv-fiche > h2 {
  font-size: 1.1rem; color: #1a3a6a;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  padding-bottom: 0.2rem; margin: 0 0 0.7rem;
  display: flex; align-items: baseline; gap: 0.5rem;
}
.dv-fiche .dv-label { font-weight: 400; font-size: 0.9rem; color: #666; flex: 1 1 auto; }
.dv-fiche .dv-code { font-family: ui-monospace, monospace; font-size: 0.78rem; color: #c0392b; }

/* Les fragments viennent des pages de série : ils portent des styles en dur
   (marge de 100 px, titres rouges) pensés pour un affichage écran où la fiche
   est seule. On les ramène à une mise en page de feuille — d'où les
   !important, seul moyen de passer devant un attribut style. */
.dv-enonce h2 {
  font-size: 1rem !important; color: #333 !important;
  margin: 0.9rem 0 0.3rem !important; font-family: inherit;
}
.dv-enonce div[style] { margin-left: 0 !important; font-size: inherit !important; }
.dv-enonce p { margin: 0.35rem 0; }
.dv-enonce ul { margin: 0.3rem 0 0.3rem 1.2rem; }
.dv-enonce table { border-collapse: collapse; margin: 0.5rem 0; }
.dv-enonce table td, .dv-enonce table th { border: 1px solid #888; padding: 0.2rem 0.5rem; }
.dv-enonce svg { max-width: 100%; height: auto; }
.dv-enonce img { max-width: 100%; height: auto; }

.dv-saut { break-before: page; page-break-before: always; height: 0; }
.dv-titre-corriges {
  font-size: 1.3rem; color: #c0392b;
  border-bottom: 2px solid #c0392b; padding-bottom: 0.2rem; margin: 0 0 1.2rem;
}
.dv-corrige > h2 { color: #c0392b; }
.dv-pied { margin-top: 2rem; font-size: 0.75rem; color: #777; text-align: center; }
.dv-pied code { font-family: ui-monospace, monospace; }

.dv-actions-ecran { margin-top: 1.5rem; text-align: center; }
.dv-actions-ecran button, .dv-actions-ecran a {
  font: inherit; font-size: 0.95rem; cursor: pointer;
  padding: 0.5rem 1rem; margin: 0 0.3rem;
  border-radius: 8px; border: 1.5px solid #1a3a6a;
  background: #1a3a6a; color: #fff; text-decoration: none;
  display: inline-block;
}
.dv-actions-ecran a { background: #fff; color: #1a3a6a; }

@media print {
  body.dv-papier { padding: 0; max-width: none; font-size: 11pt; }
  .dv-actions-ecran, #consent-banner, .consent-banner { display: none !important; }
  .dv-fiche { break-inside: avoid-page; }
  .dv-enonce svg { max-height: 7cm; }
}

@media (max-width: 700px) {
  .dv-sorties .dv-btn { width: 100%; text-align: center; }
  .dv-tete { flex-direction: column; }
  .dv-source { text-align: left; }
}

/* ── Tirage au sort ──────────────────────────────────────────────── */
/* Le composeur marche par code ; ce bloc est la porte d'entrée pour qui
   n'en connaît aucun. Il vit dans le même formulaire, donc les codes déjà
   saisis, le titre et le choix des corrigés sont conservés au tirage. */
.dv-tirage {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0 0 1rem; padding: 0.7rem 0.8rem;
  border: 1px dashed rgba(0,0,0,0.18); border-radius: 10px;
  background: rgba(0,0,0,0.02);
}
.dv-tirage label { font-size: 0.9rem; font-weight: 700; color: #1a3a6a; }
.dv-tirage select {
  font: inherit; font-size: 0.9rem; padding: 0.4rem 0.5rem;
  border: 1.5px solid rgba(0,0,0,0.16); border-radius: 8px; background: #fff;
  max-width: 100%; flex: 1 1 14rem;
}
.dv-tirage .dv-btn { flex: 0 0 auto; font-size: 0.88rem; }
@media (max-width: 700px) { .dv-tirage .dv-btn, .dv-tirage select { width: 100%; } }