@font-face{
  font-family:"Marelle Kido";
  src:url("/fonts/MarelleBaton-Regular.ttf") format("truetype");
  font-display:swap
}
@font-face{
  font-family:"Marelle Kido CE1";
  src:url("/fonts/Marelle-Regular.ttf") format("truetype");
  font-display:swap
}
.writing-hero{padding:38px 0}
.writing-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.writing-trust span{background:#fff;border:1px solid var(--seyes);border-radius:999px;padding:6px 11px;font-size:.78rem;font-weight:800}
.writing-tool{padding:34px 0}
.writing-layout{display:grid;grid-template-columns:minmax(290px,380px) minmax(0,1fr);gap:28px;align-items:start}
.writing-controls{background:#fff;border:2px solid var(--seyes);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.writing-controls h2{color:var(--encre);font-size:1.35rem;margin-bottom:4px}
.writing-local{font-size:.82rem;color:var(--gris);margin-bottom:18px}
.writing-step{border:0;border-top:1px solid var(--seyes);padding:15px 0 2px}
.writing-step legend{font-family:"Baloo 2";font-weight:800;color:var(--encre);padding:0 6px 0 0}
.writing-step legend span{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--jaune);margin-right:7px}
.writing-step label{display:block;font-weight:800;font-size:.86rem;margin:9px 0 4px}
.writing-step input[type=text],.writing-step select{width:100%;padding:10px 11px;border:2px solid var(--seyes);border-radius:10px;background:#fff;color:var(--txt)}
.writing-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.writing-choice{position:relative}
.writing-choice input{position:absolute;opacity:0}
.writing-choice span{display:block;border:2px solid var(--seyes);border-radius:12px;padding:9px;text-align:center;font-weight:800;cursor:pointer}
.writing-choice input:checked+span{background:var(--encre);border-color:var(--encre);color:#fff}
.writing-progress{display:grid;gap:7px}
.writing-progress label{display:flex;align-items:center;gap:8px;margin:0;font-weight:700}
.writing-progress input{accent-color:var(--encre);width:18px;height:18px}
.writing-actions{border-top:1px solid var(--seyes);margin-top:15px;padding-top:16px}
.writing-actions .btn{width:100%;border:0;cursor:pointer}
.writing-error{min-height:1.4em;color:#A52F20;font-weight:800;font-size:.82rem;margin-top:8px}
.writing-status{min-height:1.4em;color:var(--vert);font-weight:800;font-size:.82rem;margin-top:8px}
.writing-preview{min-width:0;background:#EDF6FC;border-radius:22px;padding:22px}
.writing-preview canvas{display:block;width:min(100%,720px);height:auto;margin:auto;background:#fff;box-shadow:0 12px 34px rgba(30,58,138,.16)}
.writing-help{padding:38px 0}
.writing-help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.writing-help-card{background:#fff;border:2px solid var(--seyes);border-radius:16px;padding:18px}
.writing-help-card h3{color:var(--encre);font-size:1.04rem;margin-bottom:5px}
.writing-help-card p{color:var(--gris);font-size:.9rem}
.writing-related{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
@media(max-width:900px){
  .writing-layout{grid-template-columns:1fr}
  .writing-controls{max-width:720px;margin:auto;width:100%}
}
@media(max-width:520px){
  .writing-hero{padding:28px 0}
  .writing-tool{padding:22px 0}
  .writing-controls,.writing-preview{padding:15px;border-radius:16px}
  .writing-choice-grid{grid-template-columns:1fr}
  .writing-help-grid{grid-template-columns:1fr}
  .writing-related{display:grid}
}