/* Présentation Dysclick ; styles du générateur d’origine dans styles.css. */
@font-face {
    font-family: Atkinson;
    src: url('/font/AtkinsonHyperlegibleNext-Regular.ttf') format('truetype');
    font-display: swap;
}
body { padding: 0; background: #eef3f6; color: #17202a; font-family: Atkinson, Arial, sans-serif; line-height: 1.5; }
button, input, select { font: inherit; }
.lignages-shell { width: calc(100% - 16px); margin: 8px auto 24px; }
.lignages-header { padding: 20px 16px; margin-bottom: 12px; border: 1px solid #d7e0e6; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 10px 30px #1f394912; }
.lignages-header h1 { color: #203b4e; font-size: clamp(25px, 4vw, 36px); margin-bottom: 8px; line-height: 1.3; }
.lignages-header p { color: #435565; }
.lignages-header .privacy-note { margin-top: 8px; font-size: 14px; }
.container { flex-direction: row; max-width: none; gap: 12px; min-height: 0; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.parameters-panel { flex: 0 0 525px; max-width: 525px; padding: 16px; background: #fff; border: 1px solid #d7e0e6; border-radius: 18px; }
.panel-title { margin: 0 0 12px; color: #203b4e; font-size: 23px; }
.section { box-shadow: none; border-color: #d7e0e6; border-radius: 12px; animation: none; }
.section h2, .download-options summary { color: #203b4e; border-bottom-color: #f0a23b; }
.preset-btn[aria-pressed="true"] { color: #203b4e; background: #eaf3f8; border-color: #31536b; }
.preset-btn:hover { border-color: #31536b; }
.form-group label, .settings-group legend { color: #203b4e; font-weight: 700; }
.info-text, .range-limits { color: #526174; }
.form-group input, .form-group select { border-color: #bfcbd3; }
.form-group input[type="range"], .form-group input[type="checkbox"] { accent-color: #31536b; }
.form-group.checkbox-row input.toggle-switch:checked { background: #31536b; }
.collapsible-header button { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; text-align: left; }
.collapsible .collapsible-header button::after, .download-options summary::after { color: #31536b; }
.collapsible-content { max-height: none; overflow: visible; transition: none; }
.collapsible.collapsed .collapsible-content { display: none; }
.download-btn { min-height: 48px; background: #31536b; }
.download-btn:hover:not(:disabled) { background: #203b4e; box-shadow: none; transform: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, .form-group input:focus-visible, .form-group select:focus-visible { outline: 3px solid #bd7200; outline-offset: 3px; }
.preview-panel { position: sticky; top: 16px; height: auto; padding: 16px; border: 1px solid #d7e0e6; border-radius: 18px; }
.preview-container { flex: none; height: auto; aspect-ratio: 210 / 297; border-color: #d7e0e6; box-shadow: none; background: #f4f7f9; }
.preview-hint { margin-bottom: 14px; color: #526174; font-size: 14px; }
.preview-link { display: inline-block; padding: 10px 0; color: #31536b; font-weight: 700; text-underline-offset: 3px; }
.parameters-panel > .preview-link { display: none; margin-bottom: 12px; }
#apercu-lignage, #choix-lignage { scroll-margin-top: 16px; }
.lignage-actions { display: flex; gap: 8px; }
.lignage-actions .download-btn { flex: 1; width: auto; min-width: 0; margin: 0; }
.lignage-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 8px 12px; border: 1px solid #31536b; border-radius: 8px; background: #fff; color: #203b4e; cursor: pointer; }
.lignage-actions .lignage-action { flex: 0 0 48px; padding: 8px; }
.lignage-action:hover { background: #eaf3f8; }
.lignage-action:disabled { opacity: .6; cursor: wait; }
@media (max-width: 960px) {
    .container { flex-direction: column; }
    .parameters-panel { flex: auto; max-width: none; width: 100%; }
    .parameters-panel > .preview-link { display: inline-block; }
    .preview-panel { position: static; width: 100%; height: auto; min-height: 0; }
}
@media (max-width: 600px) {
    .lignages-shell { width: calc(100% - 12px); margin-top: 6px; }
    .lignages-header, .parameters-panel, .preview-panel { padding: 16px 12px; }
    .section { padding: 14px 10px; }
    .form-group.line-style-row { flex-wrap: wrap; }
    .form-group.line-style-row label { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}