/**
 * « Report a disaster » (/request on ClimatCheck or with ?climat=1) — owner,
 * 2026-11-14: « rebrand ». A red header that says what happens to the
 * report, a safety line, the disasters as cards with a picture. The theme's
 * rules for the request form are « html body … !important »: the same here.
 */
html body .srd-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; margin: 0 0 .8rem; padding: 1.2rem 1.3rem; border-radius: 18px; background: linear-gradient(135deg, #7a1410, #b42318); color: #fff; }
html body .srd-head__icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgba(255, 255, 255, .16); }
html body .srd-head__icon svg { width: 1.8rem; height: 1.8rem; fill: #fff; }
html body .srd-head .srd-head__title { margin: 0 0 .25rem !important; color: #fff !important; font-size: 1.6rem; font-weight: 800; line-height: 1.15; }
html body .srd-head .srd-head__lead { margin: 0 0 .65rem !important; color: #fff !important; font-size: 1.02rem; line-height: 1.45; }
html body .srd-head .srd-head__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 !important; padding: 0 !important; list-style: none; }
html body .srd-head .srd-head__chips li { margin: 0 !important; padding: .25rem .75rem !important; border-radius: 999px; background: #fff; color: #7a1410; font-size: .85rem; font-weight: 700; line-height: 1.4; }
html body .srd-head .srd-head__chips li::before, html body .srd-head .srd-head__chips li::marker { content: none; }
html body p.srd-danger { margin: 0 0 1.1rem !important; padding: .7rem 1rem !important; border-left: 4px solid #b42318; border-radius: 10px; background: #fdecea; color: #5c0f0b; font-weight: 600; line-height: 1.45; }

/* The step under way and the buttons that go on: the red of the header. */
html body form.sr-form--disaster .srw-progress li.is-current b { border-color: #b42318 !important; background: #b42318 !important; box-shadow: 0 0 0 5px rgba(180, 35, 24, .18) !important; }
html body form.sr-form--disaster .srw-next, html body form.sr-form--disaster .form-actions .form-submit { border-color: #b42318 !important; background: #b42318 !important; color: #fff !important; }
html body form.sr-form--disaster .srw-next:hover, html body form.sr-form--disaster .form-actions .form-submit:hover { border-color: #7a1410 !important; background: #7a1410 !important; }

/* The disasters: cards with a picture, three in a row. */
html body form.sr-form--disaster fieldset.sr-categories .fieldset-wrapper, html body form.sr-form--disaster fieldset.sr-categories > div:not(.form-item):not(legend), html body form.sr-form--disaster fieldset.sr-categories .form-radios { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html body form.sr-form--disaster fieldset.sr-categories .fieldset-wrapper > .form-radios { display: grid !important; gap: .6rem; grid-column: 1 / -1; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio label { flex-direction: column; align-items: flex-start !important; justify-content: flex-start; gap: .5rem; min-height: 122px; padding: .9rem 1rem !important; font-weight: 700; line-height: 1.3; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio label::before { content: "⚠️"; position: static; width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; font-size: 2rem; line-height: 1; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="rain"] + label::before { content: "🌧️"; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="storm"] + label::before { content: "⛈️"; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="flood"] + label::before { content: "🌊"; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="erosion"] + label::before { content: "⛰️"; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="trees"] + label::before { content: "🌳"; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="fire"] + label::before { content: "🔥"; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="earthquake"] + label::before { content: "🏚️"; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="collapse"] + label::before { content: "🌉"; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="shipwreck"] + label::before { content: "🚤"; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="mine"] + label::before { content: "⛏️"; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="epidemic"] + label::before { content: "🏥"; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="drought"] + label::before { content: "☀️"; }
/* One frame a card: the label's; the wrapper of the radio has none here. */
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="drainage"] + label::before { content: "🚧"; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input:checked + label { border-color: #b42318 !important; background: #fdecea !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input:checked + label::before { border: 0; background: none; box-shadow: none; }
@media (max-width: 700px) {
  html body .srd-head { grid-template-columns: 1fr; padding: 1rem; }
  html body .srd-head__icon { width: 3rem; height: 3rem; }
  html body .srd-head .srd-head__title { font-size: 1.35rem; }
  html body form.sr-form--disaster fieldset.sr-categories .fieldset-wrapper, html body form.sr-form--disaster fieldset.sr-categories > div:not(.form-item):not(legend), html body form.sr-form--disaster fieldset.sr-categories .form-radios { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body form.sr-form--disaster fieldset.sr-categories .form-type-radio label { min-height: 108px; }
}

/* Line icons instead of emoji (owner, 2026-11-14: « use only modern icon… even in forms »): the
   icon of the site's set for each disaster, drawn as a mask in the colour of the card. */
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio label::before { content: "" !important; flex: none; width: 2.3rem; height: 2.3rem; background: #3b3a5e !important; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3zM12 10v4.5M12 17.5h.01'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="rain"] + label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15.5a4.2 4.2 0 0 1 .4-8.4 5.6 5.6 0 0 1 10.8 1.6A3.4 3.4 0 0 1 17.6 15.5H7zM8.5 18.5l-1 2.5M12.5 18.5l-1 2.5M16.5 18.5l-1 2.5'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="rain"] + label::before { content: "" !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="storm"] + label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14.5a4.2 4.2 0 0 1 .4-8.4 5.6 5.6 0 0 1 10.8 1.6A3.4 3.4 0 0 1 17.6 14.5H7zM12.5 16.5l-2 2.5h3l-2 2.5'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="storm"] + label::before { content: "" !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="flood"] + label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5L12 5l8 6.5M6.5 10v4.5M17.5 10v4.5M3 17.5c1.5-1.2 3-1.2 4.5 0s3 1.2 4.5 0 3-1.2 4.5 0 3 1.2 4.5 0M3 21c1.5-1.2 3-1.2 4.5 0s3 1.2 4.5 0 3-1.2 4.5 0 3 1.2 4.5 0'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="flood"] + label::before { content: "" !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="erosion"] + label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 20L9 8.5l3.5 5.5 2-3 7 9zM16 5.5h.01M19.5 8h.01M19 4h.01'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="erosion"] + label::before { content: "" !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="fire"] + label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.6 2.8 4.5 4.6 4.5 9.2A4.5 4.5 0 0 1 12 21a4.5 4.5 0 0 1-4.5-8.8c0-1.9 1-3.3 2-4.2.1 1.4.8 2.4 1.6 2.6C11 8.4 10.9 5.3 12 3z'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="fire"] + label::before { content: "" !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="earthquake"] + label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7M6 9.5V20h12V9.5M12 8l-1.5 3 3 2-2.5 3 1.5 4'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="earthquake"] + label::before { content: "" !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="collapse"] + label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5h7.5l1.5 2.5M22 9.5h-6.5l-1.5 3.5M5.5 9.5V19M18.5 9.5V19M2 19h20M11 16.5h.01M13.5 18h.01'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="collapse"] + label::before { content: "" !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="shipwreck"] + label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13.5h17l-2.5 4.5h-12zM12 13.5V4.5l5 6h-5M3 21c1.5-1 3-1 4.5 0s3 1 4.5 0 3-1 4.5 0 3 1 4.5 0'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="shipwreck"] + label::before { content: "" !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="mine"] + label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 15.5a7.5 7.5 0 0 1 15 0M3 15.5h18v3H3zM10 8.3V12M14 8.3V12'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="mine"] + label::before { content: "" !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="epidemic"] + label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.6-2.9 7.9-7 9.8-4.1-1.9-7-5.2-7-9.8V5.8zM12 8.5v6M9 11.5h6'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="epidemic"] + label::before { content: "" !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="drought"] + label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zM12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="drought"] + label::before { content: "" !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="trees"] + label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l4.5 6h-2.5l4 6H6l4-6H7.5zM12 15v6M9 21h6'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="trees"] + label::before { content: "" !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="drainage"] + label { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5h18v7H3zM7.5 8.5v7M12 8.5v7M16.5 8.5v7M5 19.5h.01M9.5 20.5h.01M14.5 19.5h.01M19 20.5h.01'/%3E%3C/svg%3E"); }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input[value="drainage"] + label::before { content: "" !important; }
html body form.sr-form--disaster fieldset.sr-categories .form-type-radio input:checked + label::before { background: #b42318 !important; }