:root {
  --fond: #faf6ef; --carte: #fffdf9; --bord: #e6dccb; --texte: #2a2118; --doux: #6b5d4d;
  --accent: #c2410c; --accent-fonce: #9a3412; --encre-accent: #ffffff; --surlign: #fde5c8;
  --ok: #2f6f3e; --ko: #a32a1f;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #17130f; --carte: #1f1a14; --bord: #3a3026; --texte: #f1e9dd; --doux: #b3a592;
    --accent: #f08a4b; --accent-fonce: #f6a56f; --encre-accent: #1b1007; --surlign: #4a2e17; --ok: #7fcf91; --ko: #f28b82; }
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
body { background: var(--fond); color: var(--texte); font: 16px/1.6 var(--sans); }
.haut { max-width: 1120px; margin: 0 auto; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; gap: 8px; }
.logo i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--encre-accent); font-style: normal; }
.badge { font-size: .82rem; color: var(--doux); border: 1px solid var(--bord); border-radius: 99px; padding: 4px 12px; }
main { max-width: 1120px; margin: 0 auto; padding: 0 20px 60px; }
.intro { padding: 34px 0 26px; max-width: 46rem; }
h1 { font-family: var(--serif); font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em; }
h1 em { color: var(--accent); }
.intro p { margin-top: 16px; color: var(--doux); font-size: 1.05rem; }
.atelier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.volet { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.volet-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.volet-tete label, .volet-tete h2 { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; }
.compte { color: var(--doux); font-size: .85rem; }
textarea, .sortie { width: 100%; min-height: 340px; flex: 1; font: inherit; line-height: 1.7; color: var(--texte); background: transparent; border: 1px solid var(--bord); border-radius: 12px; padding: 14px; resize: vertical; overflow-wrap: break-word; }
.sortie { white-space: pre-wrap; overflow: auto; max-height: 520px; }
textarea:focus-visible, .sortie:focus-visible, button:focus-visible, input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.vide { color: var(--doux); white-space: normal; }
mark { background: var(--surlign); color: inherit; border-radius: 4px; padding: 0 2px; }
.commandes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.segments { display: inline-flex; border: 1px solid var(--bord); border-radius: 99px; padding: 3px; flex-wrap: wrap; }
.segments label { cursor: pointer; }
.segments input { position: absolute; opacity: 0; pointer-events: none; }
.segments span { display: block; padding: 6px 14px; border-radius: 99px; font-size: .9rem; color: var(--doux); }
.segments input:checked + span { background: var(--accent); color: var(--encre-accent); font-weight: 600; }
.segments input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.case { display: inline-flex; gap: 8px; align-items: center; font-size: .9rem; color: var(--doux); cursor: pointer; }
.case input { accent-color: var(--accent); width: 16px; height: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
button { font: inherit; cursor: pointer; border-radius: 99px; padding: 10px 20px; border: 1px solid var(--bord); background: transparent; color: var(--texte); }
button.principal { background: var(--accent); border-color: var(--accent); color: var(--encre-accent); font-weight: 700; }
button.principal:hover:not(:disabled) { background: var(--accent-fonce); border-color: var(--accent-fonce); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.discret { color: var(--doux); padding: 8px 14px; font-size: .9rem; }
button.discret:hover { color: var(--texte); border-color: var(--doux); }
#details { margin-top: 34px; }
.chiffres { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.chiffres li { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.chiffres small { color: var(--doux); font-size: .8rem; }
.chiffres b { font-family: var(--serif); font-size: 1.3rem; }
.titre-section { font-family: var(--serif); font-size: 1.4rem; margin-top: 30px; }
.aide { color: var(--doux); font-size: .92rem; margin: 4px 0 12px; }
details.groupe { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; margin-bottom: 10px; }
details.groupe summary { cursor: pointer; padding: 12px 14px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
details.groupe summary span { font-size: .78rem; background: var(--surlign); border-radius: 99px; padding: 1px 9px; }
details.groupe ul { list-style: none; padding: 0 0 6px; }
details.groupe li { padding: 10px 14px; border-top: 1px solid var(--bord); display: grid; gap: 3px; }
details.groupe label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; overflow-wrap: anywhere; }
details.groupe input { accent-color: var(--accent); width: 16px; height: 16px; margin-top: .3em; flex: none; }
del { color: var(--ko); } ins { color: var(--ok); text-decoration: none; font-weight: 600; }
.pourquoi { padding-left: 26px; font-size: .82rem; color: var(--doux); }
.signaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.signaux article { background: var(--carte); border: 1px solid var(--bord); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 14px; }
.signaux h3 { font-size: .98rem; } .signaux blockquote { font-style: italic; color: var(--doux); font-size: .88rem; margin: 6px 0; }
.signaux p { font-size: .9rem; color: var(--doux); }
.honnete { margin-top: 46px; max-width: 48rem; }
.honnete h2 { font-family: var(--serif); font-size: 1.4rem; margin-bottom: 10px; }
.honnete ul { padding-left: 20px; display: grid; gap: 8px; color: var(--doux); }
.honnete b { color: var(--texte); }
.pied { max-width: 1120px; margin: 0 auto; padding: 24px 20px 40px; color: var(--doux); font-size: .88rem; border-top: 1px solid var(--bord); }
@media (max-width: 820px) { .atelier { grid-template-columns: minmax(0, 1fr); } textarea, .sortie { min-height: 220px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.etapes { list-style: none; padding: 0; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.etapes li { display: flex; align-items: center; gap: 8px; background: var(--carte); border: 1px solid var(--bord); border-radius: 99px; padding: 6px 16px 6px 8px; font-size: .95rem; }
.etapes b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--encre-accent); font-size: .85rem; }
button.gros { padding: 13px 26px; font-size: 1.05rem; }
.force { border: 1px solid var(--bord); border-radius: 12px; padding: 10px 14px 12px; display: grid; gap: 8px; min-width: 0; }
.force legend { padding: 0 6px; font-size: .85rem; color: var(--doux); }
.legende { font-size: .88rem; color: var(--doux); min-height: 1.4em; }
.resume { font-size: .88rem; color: var(--doux); min-height: 1.4em; }
details.plus { margin-top: 26px; background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 4px 16px 16px; }
details.plus > summary { cursor: pointer; padding: 12px 0; font-weight: 700; font-family: var(--serif); font-size: 1.1rem; }
details.plus .chiffres { margin-top: 16px; }