:root {
    color-scheme: light;
    --ink: #111;
    --muted: #667085;
    --line: #666;
    --panel: #f3f5f7;
    --control: #fff;
    --accent: #c62828;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--panel);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
}

.app-shell {
    display: grid;
    grid-template-columns: minmax(360px, 520px) 1fr;
    gap: 24px;
    align-items: start;
    padding: 24px;
}

.editor {
    background: #fff;
    border: 1px solid #dde1e6;
    border-radius: 8px;
    padding: 20px;
}

.editor__header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

h1 {
    margin: 0 0 6px;
    font-size: 24px;
}

.editor p {
    margin: 0;
    color: var(--muted);
}

.generated-number {
    margin: -4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.generated-number b {
    color: var(--ink);
}

form {
    display: grid;
    gap: 16px;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

label {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}

input,
textarea {
    width: 100%;
    border: 1px solid #c8ced6;
    border-radius: 6px;
    padding: 10px 11px;
    color: var(--ink);
    font: 15px Arial, Helvetica, sans-serif;
    background: var(--control);
}

textarea {
    resize: vertical;
}

.section-title,
.form-actions,
.moyen-row {
    display: flex;
    gap: 12px;
    align-items: end;
}

.section-title {
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.section-title h2 {
    margin: 0;
    font-size: 18px;
}

.moyens-list {
    display: grid;
    gap: 10px;
}

.moyen-row label {
    flex: 1;
}

button {
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font: 700 14px Arial, Helvetica, sans-serif;
}

.primary-action,
.secondary-action {
    min-height: 40px;
    padding: 0 14px;
}

.primary-action {
    background: var(--accent);
    color: #fff;
}

.secondary-action {
    background: #e9edf2;
    color: var(--ink);
}

.icon-action {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    background: #f1d7d7;
    color: #8c1d1d;
    font-size: 22px;
    line-height: 1;
}

.preview-pane {
    overflow: auto;
    min-height: 970px;
}

.sheet {
    position: relative;
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 11.5mm 11mm 12mm;
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0 10px 35px rgb(15 23 42 / 18%);
}

@media screen and (min-width: 1101px) {
    .sheet {
        transform: scale(.86);
        transform-origin: top left;
        margin: 0;
    }
}

.sheet-header {
    display: grid;
    grid-template-columns: 1fr 42px 1fr;
    align-items: start;
    gap: 12px;
}

.sheet-header__left h2 {
    margin: 0 0 2px;
    font-size: 18pt;
    font-weight: 400;
    line-height: 1.05;
}

.sheet-header__left p {
    margin: 0;
    font-size: 16.5pt;
    line-height: 1.1;
}

.sheet-header__right {
    text-align: right;
}

.sheet-header__right strong {
    display: block;
    font-size: 37pt;
    font-weight: 400;
    line-height: .95;
}

.sheet-header__right p {
    margin: 8px 0 0;
    font-size: 10.5pt;
}

.stars {
    padding-top: .8mm;
    text-align: center;
    font-size: 7.5pt;
    font-weight: 700;
    letter-spacing: 0;
}

.stars span:nth-child(1) {
    color: red;
}

.stars span:nth-child(2) {
    color: green;
}

.stars span:nth-child(3) {
    color: blue;
}

.ordre-numero {
    margin: 7.2mm 0 .4mm;
    font-size: 17pt;
    line-height: 1.05;
}

.rang {
    margin: 0 0 1.9mm;
    font-size: 10.5pt;
    line-height: 1.05;
}

.line-block,
.sheet h3,
.means-table {
    border-top: .2mm solid var(--line);
}

.line-block {
    border-bottom: .2mm solid var(--line);
    padding: 1mm 0;
}

.line-block p {
    display: grid;
    grid-template-columns: 26mm 4mm 1fr;
    margin: 0;
    font-size: 10.5pt;
    line-height: 1.05;
}

.sheet h3 {
    margin: 0;
    padding: 2.1mm 0 1.7mm;
    border-bottom: .2mm solid var(--line);
    font-size: 12pt;
    font-weight: 400;
    line-height: 1.05;
}

.info-list {
    margin: 1.35mm 0 2.3mm;
    font-size: 10.5pt;
    line-height: 1.05;
}

.info-list div {
    display: grid;
    grid-template-columns: 26mm 1fr;
}

.info-list .commune-line {
    grid-template-columns: 26mm 92mm 21mm 16mm 16mm 1fr;
}

.commune-line dt,
.commune-line dd {
    white-space: nowrap;
}

.info-list dt {
    font-weight: 700;
}

.info-list dd {
    margin: 0;
}

.hydrants {
    margin-bottom: 0;
}

.hydrants p {
    grid-template-columns: 26mm 4mm 1fr;
}

.means-table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: .2mm solid var(--line);
    margin-top: 0;
    font-size: 10.5pt;
    line-height: 1.2;
}

.means-table thead,
.means-table tbody {
    display: block;
}

.means-table tr {
    display: grid;
    grid-template-columns: 26mm 1fr;
    break-inside: avoid;
}

.means-table th,
.means-table td {
    padding: 2mm 0;
    text-align: left;
    font-weight: 400;
    vertical-align: top;
}

.means-table th {
    padding-top: 2.2mm;
    padding-bottom: 1.8mm;
}

.means-table td {
    padding-top: 1.75mm;
}

.means-table td:last-child {
    white-space: pre-wrap;
}

.sheet-footer {
    position: absolute;
    right: 11mm;
    bottom: 7mm;
    left: 11mm;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    font-size: 10.5pt;
}

.sheet-footer .stars {
    grid-column: 2;
}

.sheet-footer span:last-child {
    grid-column: 3;
    text-align: right;
}

@media (max-width: 1100px) {
    .app-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .app-shell {
        padding: 12px;
    }

    .editor__header,
    .field-grid,
    .section-title,
    .form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sheet {
        transform: scale(.54);
        transform-origin: top left;
        margin: 0;
    }

    .preview-pane {
        min-height: 610px;
    }
}

@page {
    size: A4;
    margin: 0;
}

@media print {
    body {
        background: #fff;
    }

    .editor {
        display: none;
    }

    .app-shell {
        display: block;
        padding: 0;
    }

    .preview-pane {
        overflow: visible;
    }

    .sheet {
        width: 210mm;
        min-height: 297mm;
        margin: 0;
        transform: none;
        box-shadow: none;
        page-break-after: avoid;
    }
}