:root {
    --bg: #faf8f6;
    --surface: #ffffff;
    --text: #222222;
    --muted: #6b6b6b;
    --border: #e6e1dc;
    --primary: #A32D2D;
    --primary-dark: #832020;
    --stage-dev: #E07B00;
    --stage-dev-text: #000000;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

a { color: var(--primary); }

.btn {
    display: inline-block;
    padding: .65rem 1.1rem;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: var(--primary-dark); }
.btn:disabled, .btn[aria-disabled="true"],
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: var(--border); color: var(--muted); cursor: default; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
}

/* Organizer layout */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.5rem;
    background: var(--surface);
    border-bottom: 3px solid var(--primary);
}
.topbar .brand { font-weight: 700; color: var(--primary); text-decoration: none; }
.topbar { flex-wrap: wrap; gap: .5rem; }
.topbar-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; align-items: center; }
.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

/* Guest layout: designed for phones first */
.guest-wrap { max-width: 480px; margin: 0 auto; padding: 1rem; }
.guest-wrap header { text-align: center; padding: 1rem 0; color: var(--primary); font-weight: 700; }
.guest-wrap .btn { display: block; width: 100%; text-align: center; }

/* Groups and guests */
.notice { background: #eef6ee; border: 1px solid #b9d8b9; border-radius: 8px; padding: .6rem 1rem; }
.notice.error { background: #fbeeee; border-color: #e3b5b5; }
.toolbar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin: 1rem 0; }
/* Event page and guest management: same-size action buttons, stacked on phones (see media query below). */
.nav-links .btn, .toolbar-actions .btn { flex: 1 1 10rem; min-height: 44px; text-align: center; display: flex; align-items: center; justify-content: center; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: .75rem; flex: 0 1 22rem; }
.toolbar-secondary { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.toolbar-secondary .btn { min-height: 44px; display: inline-flex; align-items: center; }
.inline-form { display: inline-flex; gap: .5rem; align-items: center; }
.btn.small { padding: .35rem .7rem; font-size: .9rem; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.form label { display: block; margin: .6rem 0; }
.form label.check { display: flex; gap: .5rem; align-items: center; }

.card { margin: 1rem 0; }
input.wide { width: 100%; max-width: 40rem; padding: .45rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Guest answer flow */
.guest-wrap { overflow-wrap: anywhere; }
.guest-wrap h1 { font-size: 1.4rem; margin: .5rem 0; }
.guest-wrap h2 { font-size: 1.1rem; }
.muted { color: var(--muted); }
.countdown { margin-left: .5rem; color: var(--primary); white-space: nowrap; }
.card-figures { margin: .5rem 0 0; padding-left: 1.1rem; overflow-wrap: anywhere; }
.event-name { margin: 0; text-align: center; }
.progress-label { margin: .5rem 0 .25rem; font-size: .9rem; color: var(--muted); }
.progress { display: block; width: 100%; height: .6rem; margin-bottom: 1rem; accent-color: var(--primary); }
.choice { border: 1px solid var(--border); border-radius: 10px; margin: 1rem 0; padding: .5rem .85rem .85rem; min-width: 0; }
.choice legend { font-weight: 600; padding: 0 .35rem; }
.option { display: flex; align-items: center; gap: .75rem; min-height: 48px; margin: .35rem 0; padding: .4rem .75rem; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.option input { width: 1.3rem; height: 1.3rem; flex: none; accent-color: var(--primary); }
.option:has(input:checked) { border-color: var(--primary); background: #fbf1f1; }
.guest-wrap .form input[type=text], .guest-wrap .form select, .guest-wrap .form textarea { max-width: 100%; min-height: 44px; font-size: 1rem; }
.guest-wrap .form textarea { display: block; width: 100%; }
.guest-wrap .btn { min-height: 48px; margin-top: 1rem; }
.answer { padding-left: 1.1rem; }
.back { text-align: center; }

/* Event contents */
.hero { display: block; width: 100%; height: auto; max-height: 16rem; object-fit: cover; border-radius: 10px; margin-bottom: 1rem; }
.hero-preview { max-width: 100%; max-height: 12rem; border-radius: 8px; }
.prose { overflow-wrap: anywhere; margin: .4rem 0; }
.prose p { margin: .4rem 0; }
.prose ul, .prose ol { margin: .4rem 0; padding-left: 1.4rem; }
.prose h3 { font-size: 1rem; margin: .6rem 0 .2rem; }
.answer li .prose, .answer li .prose > p:first-child { display: inline; margin: 0; }
.block { margin: 1.25rem 0; }
.guest-wrap h3 { font-size: 1rem; margin: .9rem 0 .2rem; }
.item { border-top: 1px solid var(--border); padding-top: .25rem; }
.item h3 { margin-top: .5rem; }
.map { display: block; width: 100%; height: 14rem; border: 1px solid var(--border); border-radius: 8px; margin: .75rem 0; }
.guest-wrap .when, .guest-wrap .where { margin: .2rem 0; }

/* Event dashboard */
.dash { overflow-wrap: anywhere; }
.dash h2 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
.dash .brief { max-width: 60rem; }
.dash .map { max-width: 40rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .75rem; margin: .75rem 0 1rem; }
.timeline { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .5rem 0; counter-reset: stage; }
.timeline li { flex: 1 1 8rem; min-width: 0; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); counter-increment: stage; }
.timeline li::before { content: counter(stage) ". "; }
.timeline li.done { color: var(--text); }
.timeline li.done::after { content: " (fait)"; color: var(--muted); font-size: .85rem; }
.timeline li.current { border-color: var(--primary); border-width: 2px; color: var(--primary); font-weight: 700; }
.todos { list-style: none; padding: 0; margin: .75rem 0; }
.todos > li { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: .6rem .85rem; margin: .5rem 0; }
.todos .count { font-weight: 700; color: var(--primary); }
.todos .btn { margin-top: .4rem; }
.todos ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.stats-grid .card { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: .75rem 1rem; margin: 0; }
.stats-grid .card.current { border-color: var(--primary); }
.stats-grid h3 { margin: 0 0 .5rem; font-size: 1rem; }
.stats-grid dl { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; margin: 0; }
.stats-grid dt { color: var(--muted); }
.stats-grid dd { margin: 0; font-weight: 700; text-align: right; }
@media (max-width: 480px) {
    .container { padding: 1rem; }
    .timeline li { flex-basis: 100%; }
    .nav-links .btn, .todos .btn { display: block; width: 100%; text-align: center; }
    .nav-links { flex-direction: column; }
    .nav-links .btn { display: flex; flex: 0 0 auto; }
    .toolbar-actions { flex: 1 1 100%; flex-direction: column; }
    .toolbar-actions .btn, .toolbar-secondary .btn { flex: 0 0 auto; width: 100%; }
}

/* The long personal link of a message preview must not widen the page. */
.sample { overflow-wrap: anywhere; }
.sample a { word-break: break-all; }

.pre-wrap { white-space: pre-wrap; }
.site-footer { margin-top: 1.5rem; font-size: .85rem; text-align: center; }
.site-footer .tagline { color: #777; font-size: .8rem; font-style: italic; }

/* Preview of an e-mail body (the sent message carries its own inline styles). */
.email-preview { font-family: Arial, sans-serif; line-height: 1.5; }
.email-preview-rule { border: 0; border-top: 1px solid #ddd; margin: 24px 0; }

/* Pagination (resources/views/vendor/pagination/francais.blade.php). */
.pagination { margin: 1rem 0; text-align: center; }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.pagination-summary { margin: 0 0 .5rem; font-size: .9rem; }
.pagination .btn.disabled { background: var(--border); color: var(--muted); cursor: default; }
.pagination .btn.current { background: var(--primary-dark); }
.pagination-gap { padding: .35rem .5rem; color: var(--muted); }

/* Version line and dev banner. The dev orange is deliberately far from --primary. */
.site-footer .version { color: var(--muted); font-size: .75rem; }
.stage-banner { background: var(--stage-dev); color: var(--stage-dev-text); text-align: center; font-size: .8rem; font-weight: 700; padding: .15rem .5rem; position: sticky; top: 0; z-index: 100; }

/* Form fields: one rule for every form. Fields and the main button fill the form column. */
.form { width: 100%; }
.container .form { max-width: 40rem; }
.form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]),
.form select,
.form textarea { display: block; width: 100%; max-width: 100%; min-height: 44px; padding: .45rem .6rem; font: inherit; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.form input[type=file] { display: block; width: 100%; max-width: 100%; }
.form input[type=checkbox], .form input[type=radio] { width: 1.3rem; height: 1.3rem; accent-color: var(--primary); }
.form label.check { min-height: 44px; }
.form > .btn[type=submit], .form > p > .btn[type=submit] { display: block; width: 100%; min-height: 44px; margin-top: 1rem; text-align: center; }
.form .field { margin: .6rem 0; }
.form .field label { margin: 0 0 .25rem; }
.form [aria-invalid=true] { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 0; }
.field-error { display: block; margin-top: .25rem; color: var(--primary-dark); font-size: .9rem; font-weight: 600; }
.field-help { display: block; margin-top: .25rem; color: var(--muted); font-size: .9rem; font-weight: 400; }
.form-delete { margin-top: 1rem; }

/* Search bar of the group list: the field stretches, the button stays next to it. */
.search-form { display: flex; flex: 1 1 20rem; flex-wrap: wrap; gap: .5rem; align-items: center; max-width: 40rem; }
.search-form input[type=search] { flex: 1 1 12rem; min-width: 0; min-height: 44px; padding: .45rem .6rem; font: inherit; border: 1px solid var(--border); border-radius: 6px; }
.search-form .btn { min-height: 44px; }
@media (max-width: 480px) {
    .search-form input[type=search], .search-form .btn { flex: 1 1 100%; }
}

/* Dialog window shared by the date picker and the later confirmation / link windows (see public/js/date-picker.js). */
body.dialog-open { overflow: hidden; }
.dialog-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: color-mix(in srgb, var(--text) 55%, transparent); }
.dialog { display: flex; flex-direction: column; width: 100%; max-width: 26rem; max-height: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 30px color-mix(in srgb, var(--text) 35%, transparent); overflow: hidden; }
.dialog.dialog-small { max-width: 22rem; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .5rem .5rem 1rem; border-bottom: 3px solid var(--primary); }
.dialog-title { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.dialog-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.dialog-close:hover { background: var(--bg); }
.dialog-body { flex: 1 1 auto; min-height: 0; padding: 1rem; overflow-y: auto; }
.dialog-text { margin: 0; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--border); }
.dialog-actions .btn { min-height: 44px; }
.btn.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn.btn-secondary:hover { background: var(--bg); }
.dialog button:focus-visible, .dialog input:focus-visible, .dialog select:focus-visible, .picker-field button:focus-visible, .picker-display:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Date picker field: the read-only text and the calendar button share the width of the other fields. */
.picker-field { display: flex; align-items: stretch; gap: .5rem; width: 100%; max-width: 100%; }
.picker-field input.picker-display { flex: 1 1 auto; min-width: 0; cursor: pointer; text-overflow: ellipsis; }
.picker-open { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--primary); cursor: pointer; }
.picker-open:hover { background: var(--bg); }

/* Picker window content. */
.picker-nav { display: flex; align-items: center; gap: .35rem; }
.picker-step { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; }
.picker-step:hover { background: var(--bg); }
.picker-dialog select.picker-month, .picker-dialog input.picker-year { flex: 1 1 0; min-width: 0; min-height: 44px; padding: .35rem .5rem; font: inherit; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.picker-dialog input.picker-year { flex: 0 0 5.5rem; }
.picker-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.picker-grid { margin-top: .75rem; }
.picker-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.picker-weekday { padding: .25rem 0; text-align: center; font-size: .8rem; color: var(--muted); }
.picker-empty { min-height: 44px; }
.picker-day { min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.picker-day:hover { background: var(--bg); border-color: var(--border); }
.picker-day.today { border-color: var(--primary); }
.picker-day.selected, .picker-day.selected:hover { background: var(--primary); border-color: var(--primary); color: var(--surface); font-weight: 700; }
.picker-time { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.picker-stepper { display: flex; align-items: center; gap: .25rem; }
.picker-dialog input.picker-time-input { width: 3.5rem; min-height: 44px; padding: .35rem; text-align: center; font: inherit; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.picker-colon { font-weight: 700; }
.picker-message { margin-top: .75rem; }

@media (max-width: 480px) {
    .dialog-backdrop { padding: 0; }
    .dialog { max-width: none; height: 100%; border: 0; border-radius: 0; }
    .dialog.dialog-small { max-width: none; height: auto; max-height: 100%; margin-top: auto; border-radius: 12px 12px 0 0; }
    .dialog-backdrop:has(.dialog-small) { align-items: flex-end; }
    .dialog-actions .btn { flex: 1 1 100%; }
    .picker-dialog .dialog-actions .btn { flex: 1 1 0; padding-left: .5rem; padding-right: .5rem; }
}
.dialog:focus { outline: none; }

/* Rich-text editor (public/js/rich-editor.js) and emoji picker (public/js/emoji-picker.js). */
.rich-editor, .emoji-field { position: relative; width: 100%; max-width: 100%; }
.rich-editor [hidden], .rich-source[hidden], .emoji-field [hidden] { display: none !important; }
.rich-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .4rem; }
.rich-button, .emoji-open { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.rich-button:hover, .emoji-open:hover { background: var(--bg); }
.rich-button[aria-pressed=true] { background: var(--primary); border-color: var(--primary); color: var(--surface); }
.rich-button:focus-visible, .emoji-open:focus-visible, .emoji-item:focus-visible, .rich-area:focus-visible, .dialog-input:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.rich-area { display: block; width: 100%; max-width: 100%; min-height: calc(8 * 1.5em + 1rem); padding: .45rem .6rem; font: inherit; line-height: 1.5; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); overflow-wrap: anywhere; }
.rich-area[hidden] { display: none !important; }
.rich-area p { margin: 0 0 .5rem; }
.rich-area p:last-child { margin-bottom: 0; }
.rich-area ul, .rich-area ol { margin: .4rem 0; padding-left: 1.4rem; }
.rich-area h3 { font-size: 1.05rem; margin: .6rem 0 .2rem; }
.rich-area a { color: var(--primary); }

/* Single-line field with its emoji button at the end. */
.emoji-field { display: flex; align-items: stretch; gap: .5rem; }
.emoji-field input { flex: 1 1 0; min-width: 0; }
.emoji-open { flex: none; padding: 0; }

/* Pop-over with the emojis, under the button (right-aligned, never wider than the field on a phone). */
.emoji-popover { position: absolute; top: 100%; right: 0; z-index: 50; width: min(100%, 22rem); max-height: 18rem; margin-top: .25rem; padding: .5rem; overflow-y: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 20px color-mix(in srgb, var(--text) 30%, transparent); }
.emoji-category-name { margin: .35rem 0 .2rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 2px; }
.emoji-item { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.emoji-item:hover { background: var(--bg); }

/* Link window. */
.link-label { display: block; margin-bottom: .35rem; font-weight: 600; }
.dialog-input { display: block; width: 100%; min-height: 44px; padding: .45rem .6rem; font: inherit; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.dialog-input[aria-invalid=true] { border-color: var(--primary); }
.rich-toolbar { position: relative; }
.variable-buttons { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .4rem; }
.variable-buttons[hidden] { display: none !important; }
.rich-toolbar .emoji-popover { left: 0; right: auto; }
.emoji-status:empty { display: none; }
@media (max-width: 480px) {
    .picker-dialog .picker-time { flex-wrap: nowrap; gap: .15rem; }
    .picker-dialog .picker-stepper { gap: .15rem; }
    .picker-dialog input.picker-time-input { width: 2.75rem; padding-left: 0; padding-right: 0; }
}
[data-banner-fields][hidden], [data-companion-options][hidden] { display: none !important; }
.banner-preview { display: block; width: 100%; max-width: 600px; height: auto; border: 0; }
.email-preview-banner { display: block; width: 100%; max-width: 600px; height: auto; border: 0; }

/* Guest home and dedicated pages */
.back-link-wrap { margin: 0 0 .5rem; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; }
.page-links { display: flex; flex-direction: column; gap: .5rem; }
.page-links .btn { margin-top: 0; text-align: center; display: flex; align-items: center; justify-content: center; }
.guest-wrap .item h2 { font-size: 1.1rem; margin: .5rem 0 .2rem; }

/* Password field with its show/hide button inside the frame, on the right (public/js/password-toggle.js). */
.password-field { position: relative; display: block; width: 100%; max-width: 100%; }
.form .password-field input { padding-right: 48px !important; }
.password-toggle { position: absolute; top: 1px; right: 1px; bottom: 1px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: auto; padding: 0; border: 0; border-radius: 0 5px 5px 0; background: transparent; color: var(--primary); cursor: pointer; }
.password-toggle:hover { background: var(--bg); }
.password-toggle:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.password-toggle[aria-pressed=true] { color: var(--primary-dark); }
.password-field input::-ms-reveal, .password-field input::-ms-clear { display: none; }