/* ==========================================================================
   9RIB — le guide local imprimé
   ========================================================================== */

:root {
    --navy: #1b2840;
    --navy-2: #24344f;
    --orange: #d95f3d;
    --orange-dark: #c04e2e;
    --gold: #e8a845;
    --cream: #f8f1e6;
    --paper: #fffcf5;
    --sand: #e9e3d8;
    --mint: #e8efe9;
    --sage: #dbe6df;
    --green: #2f6f4f;
    --red: #b23a2a;
    --red-bg: #fdf0ed;
    --ink: #1b2840;
    --muted: #6b7280;
    --line: #e4ddd0;
    --radius: 6px;
    --shadow: 0 1px 2px rgba(27, 40, 64, .06), 0 8px 24px rgba(27, 40, 64, .06);
    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--orange-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.container { width: min(1120px, 100% - 32px); margin-inline: auto; }
.center { text-align: center; }
.mt { margin-top: 1.5rem; }
.muted { color: var(--muted); }
.small, .small-note { font-size: .85rem; }
.small-note { color: var(--muted); margin: .75rem 0; }
.accent { color: var(--orange); font-weight: 600; }
.strong { font-weight: 700; }
.show-sm { display: none; }

/* ---------- Typography ---------- */
.display, .h1, .h2, .h3, .h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0 0 .5rem; letter-spacing: -.01em; }
.display { font-size: clamp(2.2rem, 5vw, 3.6rem); color: #fff; }
.display--dark { color: var(--navy); }
.h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.h3 { font-size: 1.2rem; }
.h4 { font-family: var(--sans); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.lead { font-size: 1.1rem; max-width: 34rem; }
.eyebrow {
    font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--orange); margin: 0 0 .6rem;
}
.eyebrow--gold { color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .8rem 1.3rem; border-radius: var(--radius); border: 2px solid transparent;
    font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-dark); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-2); }
.btn--ghost { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--link-light { color: #fff; padding-inline: .5rem; }
.btn--link-light:hover { text-decoration: underline; }
.btn--sm { padding: .55rem .9rem; font-size: .75rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0; color: var(--orange-dark); text-decoration: underline; cursor: pointer; }

/* ---------- Header / footer ---------- */
.demo-bar {
    background: var(--orange); color: #fff; text-align: center;
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem 1rem;
}
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.site-header__brand { text-decoration: none; margin-right: auto; }
.site-nav { display: flex; gap: 1.4rem; }
.site-nav a { color: var(--navy); text-decoration: none; font-weight: 600; font-size: .9rem; }
.site-nav a:hover, .site-nav a.is-active { color: var(--orange); }

.logo { display: inline-flex; flex-direction: column; align-items: center; color: var(--orange); line-height: 1; }
.logo__pin { width: 22px; height: 22px; }
.logo__text { font-weight: 800; color: var(--navy); font-size: 1rem; letter-spacing: .02em; }

.site-footer { background: var(--navy); color: #cfd6e2; margin-top: 4rem; padding: 3rem 0 1.5rem; font-size: .9rem; }
.site-footer .logo__text { color: #fff; }
.site-footer__inner { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2rem; }
.site-footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.5rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer__contact { display: grid; gap: .4rem; align-content: start; }
.site-footer__legal { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1rem; margin-top: 2rem; font-size: .78rem; color: #93a0b5; }

/* ---------- Flash ---------- */
.flash { padding: .85rem 1rem; border-radius: var(--radius); margin: 1rem 0; font-weight: 500; border-left: 4px solid; }
.flash--success { background: #e9f4ee; border-color: var(--green); color: var(--green); }
.flash--error { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.flash--info { background: #fff6e6; border-color: var(--gold); color: #6d4b12; }

/* ---------- Sections ---------- */
.section { padding: 4rem 0; }
.section--tight { padding: 1rem 0 2rem; }
.section--paper { background: var(--paper); border-block: 1px solid var(--line); }
.section--navy { background: var(--navy); color: #e8ecf3; }
.section--navy .h1 { color: #fff; }
.section--navy .small-note { color: #a9b4c6; }
.section__head { max-width: 46rem; margin-bottom: 2rem; }
.page-head { padding: 3rem 0 1.5rem; max-width: 52rem; }
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.cta { text-align: center; padding: 4rem 0 2rem; }
.cta .muted { margin-bottom: 1.5rem; }
.caption { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 1rem; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; background: var(--navy); color: #e8ecf3; min-height: 460px; }
.hero__text { padding: 3.5rem max(2rem, calc((100vw - 1120px) / 2)) 3rem; padding-right: 3rem; display: flex; flex-direction: column; justify-content: center; }
.hero__text .display { margin-bottom: 1.5rem; }
.hero__small { color: #b8c2d3; font-size: .95rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 1rem; }
.hero__visual {
    position: relative; overflow: hidden; display: grid; place-items: center; padding: 2rem 1rem;
    background:
        radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .55), transparent 40%),
        linear-gradient(160deg, #9cc3d8 0%, #d9c9a8 55%, #b89b72 100%);
}
.trust { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding: 1.25rem 0; font-weight: 700; font-size: .95rem; }
.trust span + span::before { content: "·"; margin-right: 2rem; color: var(--orange); }

/* ---------- The printed guide (HTML/CSS mock) ---------- */
.guide {
    --h: 330px;
    display: flex; gap: 6px; height: var(--h); justify-content: center;
    font-size: calc(var(--h) / 42);
}
.guide--tilt { transform: perspective(1400px) rotateY(-14deg) rotateX(4deg); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .28)); }
.panel {
    width: calc(var(--h) * .42); flex: none; background: #fff; border-radius: 3px; padding: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12); overflow: hidden;
}
.panel--cover {
    width: calc(var(--h) * .5); display: flex; flex-direction: column; align-items: stretch; text-align: center; color: #fff; padding: 2.2em 1em 1em;
    background: linear-gradient(180deg, rgba(27, 40, 64, .92), rgba(27, 40, 64, .7) 60%, rgba(60, 90, 110, .85)),
                linear-gradient(135deg, #3b6f8f, #a3c4c9);
}
.cover__title { display: flex; flex-direction: column; font-family: var(--serif); line-height: 1.05; }
.cover__title b { font-size: 1.45em; letter-spacing: .02em; }
.cover__title i { font-style: normal; color: var(--gold); font-size: 1.3em; letter-spacing: .05em; text-transform: uppercase; }
.cover__title small { font-size: .8em; opacity: .8; font-style: italic; }
.cover__sub { border-top: 1px solid rgba(255, 255, 255, .5); padding-top: .6em; margin: .8em 0 .4em; font-weight: 700; text-transform: uppercase; font-size: .8em; line-height: 1.3; }
.cover__ed { color: var(--gold); font-size: .85em; text-transform: uppercase; margin: 0; }
.cover__card {
    margin-top: auto; background: #fff; color: var(--navy); border-radius: 3px; padding: .7em; width: 100%;
    display: flex; flex-direction: column; gap: .15em; border: 2px solid var(--orange);
}
.cover__card small { color: var(--orange); font-size: .75em; font-weight: 700; text-transform: uppercase; }
.cover__card strong { font-family: var(--serif); font-size: 1em; line-height: 1.1; }
.cover__card b { font-size: .8em; }
.cover__card span { color: var(--orange); font-size: .8em; display: flex; justify-content: space-between; align-items: center; }

.panel--slots { display: grid; grid-template-rows: repeat(3, 1fr); gap: 5px; background: #f3efe7; }
.slot {
    background: #fff; border: 1px solid #d9d2c3; border-radius: 3px; padding: .6em; min-height: 0;
    display: flex; flex-direction: column; gap: .25em; overflow: hidden;
}
.slot__brand { font-size: .72em; text-transform: uppercase; font-weight: 700; color: var(--muted); display: flex; justify-content: space-between; gap: .3em; }
.slot__brand em { font-style: normal; background: var(--green); color: #fff; border-radius: 99px; padding: 0 .5em; white-space: nowrap; }
.slot__title { font-family: var(--serif); font-size: 1.15em; line-height: 1.1; color: var(--navy); text-transform: uppercase; }
.slot__text { font-size: .78em; color: var(--muted); }
.slot__foot { margin-top: auto; font-size: .75em; color: var(--orange); font-weight: 600; display: flex; justify-content: space-between; align-items: flex-end; gap: .3em; }
.qr {
    display: inline-grid; place-items: center; width: 2.4em; height: 2.4em; flex: none;
    border: 1.5px solid var(--navy); border-radius: 2px; font-size: .75em; font-weight: 800; color: var(--navy); background: #fff;
}
.slot--a { background: var(--mint); }
.slot--b { background: #fff; }
.slot--mint { background: var(--sage); }
.slot--photo::before { content: ""; display: block; flex: none; height: 3.2em; margin: -.6em -.6em .2em; }
.slot--warm::before { background: linear-gradient(135deg, #e7b98a, #b9714d); }
.slot--cool::before { background: linear-gradient(135deg, #8aa9c4, #4a6680); height: 6em; }

.slot--you { display: none; background: #fff8ee; border: 2px solid var(--orange); padding: 0; }
.slot--you .slot__tag { background: var(--navy); color: #fff; font-size: .8em; font-weight: 700; text-transform: uppercase; padding: .5em .6em; }
.slot--you .slot__photo { display: none; background: var(--sage); color: var(--muted); font-weight: 700; font-size: .8em; text-transform: uppercase; place-items: center; margin: .5em; flex: 1; border-radius: 2px; min-height: 0; }
.slot--you .slot__offer { font-family: var(--serif); color: var(--orange); font-size: 1.6em; padding: 0 .4em; }
.slot--you .slot__foot { color: var(--navy); padding: .4em .5em; }

.panel--slots[data-size="1"] .slot--you,
.panel--slots[data-size="2"] .slot--you,
.panel--slots[data-size="3"] .slot--you { display: flex; }
.panel--slots[data-size="2"] .slot--you { grid-row: span 2; }
.panel--slots[data-size="3"] .slot--you { grid-row: span 3; }
.panel--slots[data-size="2"] .slot--you .slot__photo,
.panel--slots[data-size="3"] .slot--you .slot__photo { display: grid; }
.panel--slots[data-size="2"] .slot--a,
.panel--slots[data-size="3"] .slot--a,
.panel--slots[data-size="3"] .slot--b { display: none; }

.panel--full {
    background: linear-gradient(180deg, #2b4466 0%, var(--navy) 55%); color: #fff; padding: 1em .8em;
    display: flex; flex-direction: column; justify-content: flex-end; gap: .4em;
}
.panel--full strong { font-family: var(--serif); font-size: 2em; line-height: 1; text-transform: uppercase; }
.panel--full .slot__brand { color: #c9d3e3; }
.panel--full .slot__brand em { background: var(--gold); color: var(--navy); }
.panel--full .slot__text { color: #c9d3e3; }
.panel--full .slot__foot { color: var(--gold); }

.guide-stage { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.5rem 1rem; overflow-x: auto; }
.guide-stage .guide { --h: 460px; }

.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.format { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .75rem; --h: 360px; font-size: calc(var(--h) / 42); }
.format .panel { width: calc(var(--h) * .5); height: var(--h); }
.format figcaption { font-size: .95rem; text-align: center; }
.format figcaption span { color: var(--muted); font-size: .85rem; }

/* ---------- Journey ---------- */
.journey { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 4rem; position: relative; }
.journey__col { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.journey__step {
    position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .85rem 1rem; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; display: flex; gap: 1rem;
}
.journey__step + .journey__step::before { content: "↓"; position: absolute; top: -1.15rem; left: 50%; color: var(--orange); font-size: .8rem; }
.journey__step.is-key { border-color: var(--orange); }
.journey__n { color: var(--orange); min-width: 1.5rem; }

/* ---------- Zones ---------- */
.zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.zone-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.zone-card .btn { margin-top: .75rem; }
.zone-card__name { font-family: var(--serif); font-size: 1.15rem; margin: 0; text-transform: uppercase; }
.zone-card__areas, .zone-card__meta { margin: 0; color: var(--muted); font-size: .88rem; }
.zone-card--soon { background: transparent; border-style: dashed; }
.status { margin: 0; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.status--open { color: var(--green); }
.status--soon { color: var(--orange); }
.spaces { margin: 0; font-size: .82rem; font-weight: 700; color: var(--green); }
.spaces--low { color: var(--orange); }
.note-box { background: #edf1ef; border-radius: var(--radius); padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.note-box p { margin: 0; flex: 1 1 100%; color: var(--muted); font-size: .9rem; }
.note-box .btn { margin-top: .5rem; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin: 1.5rem 0; }
.kpis--2 { grid-template-columns: repeat(2, 1fr); }
.kpi { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.section--navy .kpi { background: var(--navy-2); }
.kpi b { font-family: var(--serif); color: var(--gold); font-size: 1.9rem; line-height: 1; text-transform: uppercase; }
.kpi span { font-size: .7rem; text-transform: uppercase; font-weight: 700; letter-spacing: .06em; }
.kpis--light .kpi { background: var(--paper); color: var(--navy); border: 1px solid var(--line); }
.kpis--light .kpi b { color: var(--navy); font-size: 1.6rem; }
.kpis--light .kpi span { color: var(--muted); }

/* ---------- Rules ---------- */
.rules { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1rem; }
.rules li { break-inside: avoid; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: .6rem; display: flex; gap: .9rem; font-size: .92rem; }
.rules span { color: var(--orange); font-weight: 700; }

/* ---------- Campaign wizard ---------- */
.campaign { padding-top: 2rem; }
.steps { list-style: none; padding: 0; margin: 1.5rem 0 1.25rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.steps button {
    width: 100%; text-align: left; border: 0; background: var(--sand); color: var(--navy);
    padding: .7rem .9rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
}
.steps button:disabled { cursor: default; color: #9aa1ab; }
.steps li.is-current button { background: var(--navy); color: #fff; }
.steps li.is-done button { background: #d8d1c3; }
.steps-mobile { display: none; color: var(--orange); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }

.campaign__grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1rem; align-items: start; }
.campaign__main { min-height: 420px; padding: 1.5rem 1.5rem 1rem; }
.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.js .step:not(.is-current) { display: none; }
.step legend { padding: 0; margin-bottom: .25rem; }

.choice-grid { display: grid; gap: .75rem; margin: 1.25rem 0; }
.choice-grid--2 { grid-template-columns: repeat(2, 1fr); }
.choice-grid--3 { grid-template-columns: repeat(3, 1fr); }
.choice { position: relative; cursor: pointer; display: block; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__body {
    display: flex; flex-direction: column; gap: .2rem; height: 100%;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; transition: border-color .15s, background .15s;
}
.choice:hover .choice__body { border-color: #c9bfae; }
.choice input:checked + .choice__body { border: 2px solid var(--orange); background: #fff8ee; padding: calc(.9rem - 1px) calc(1rem - 1px); }
.choice input:focus-visible + .choice__body { outline: 3px solid var(--gold); outline-offset: 2px; }
.choice__title { font-family: var(--serif); font-size: 1.1rem; }
.choice__eyebrow { color: var(--orange); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.choice__sub, .choice__meta { color: var(--muted); font-size: .82rem; }
.choice__price { font-weight: 700; font-size: .82rem; }
.choice__check { display: none; color: var(--orange); font-size: .7rem; font-weight: 700; text-transform: uppercase; margin-top: auto; align-self: flex-end; }
.choice input:checked + .choice__body .choice__check { display: block; }
.choice.is-unavailable .choice__body { opacity: .55; }

.preview { background: #f5efe3; border-radius: var(--radius); padding: 1rem; overflow-x: auto; }
.preview .guide { --h: 250px; justify-content: flex-start; width: max-content; margin-inline: auto; }
.ok-line { color: var(--green); font-weight: 700; font-size: .85rem; }

.availability:empty { display: none; }
.availability { margin: 1rem 0; border-radius: var(--radius); padding: 1rem 1.1rem; font-weight: 600; font-size: .92rem; }
.availability.is-ok { background: #e8f2ec; color: var(--green); }
.availability.is-ko { background: var(--red-bg); color: var(--red); border: 1px solid #e6b2a7; }
.availability.is-ko b { display: block; text-transform: uppercase; font-size: .85rem; letter-spacing: .03em; }
.availability p { margin: .35rem 0 .75rem; font-weight: 400; }
.alt-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.alt-actions button { background: #fff; color: var(--red); border: 0; border-radius: 4px; padding: .6rem; font-weight: 700; font-size: .75rem; text-transform: uppercase; cursor: pointer; }
.alt-actions button:hover { background: #fff3f0; }
.alt-actions button:disabled { opacity: .4; cursor: not-allowed; }
.avail-detail { margin: .5rem 0 1rem; }
.avail-detail summary { cursor: pointer; color: #31617f; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; padding: .5rem 0; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1.2rem; margin: 1rem 0; }
.form-grid--1 { grid-template-columns: 1fr; }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
.form-grid--7 { grid-template-columns: repeat(7, 1fr); }
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .82rem; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
    width: 100%; border: 1px solid #d5cdbe; background: #fff; border-radius: 4px; padding: .65rem .75rem; font-weight: 400; font-size: .95rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
input.is-invalid { border-color: var(--red); background: var(--red-bg); }
.field-error { color: var(--red); font-weight: 600; font-size: .88rem; min-height: 1px; margin: .5rem 0 0; }
.field-error:empty { display: none; }

.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: block; border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: .7rem .6rem; font-size: .8rem; height: 100%; }
.chip input:checked + span { border: 2px solid var(--orange); background: #fff8ee; padding: calc(.7rem - 1px) calc(.6rem - 1px); }
.chip input:focus-visible + span { outline: 3px solid var(--gold); }
.check { flex-direction: row; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 500; margin-top: .5rem; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--orange); }

.recap-line { font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .03em; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.recap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; margin: 1rem 0; }
.preview--recap .guide { --h: 230px; }
.recap__prices { margin: 0; background: #edf1ef; border-radius: var(--radius); padding: 1.25rem; display: grid; gap: 1rem; align-content: center; }
.recap__prices dt { font-size: .75rem; text-transform: uppercase; font-weight: 700; color: var(--muted); letter-spacing: .05em; }
.recap__prices dd { margin: 0; font-family: var(--serif); font-size: 1.8rem; font-weight: 700; }
.recap__prices .is-accent dd { color: var(--orange); }
.terms { background: #fbf0dd; border-radius: var(--radius); padding: 1rem 1.25rem; }
.terms p { margin: 0 0 .5rem; }

.step-nav { display: flex; justify-content: space-between; gap: .75rem; border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1rem; }
.step-nav [data-next], .step-nav [data-submit] { margin-left: auto; }
.no-js .step-nav [data-next], .no-js .step-nav [data-prev] { display: none; }

.summary { background: var(--navy); color: #c9d3e3; border-radius: var(--radius); padding: 1.4rem; position: sticky; top: 84px; }
.summary__title { font-family: var(--serif); color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 1rem; }
.summary__rows { margin: 0 0 1.75rem; }
.summary__rows div { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, .15); padding: .55rem 0; font-size: .88rem; }
.summary__rows dd { margin: 0; color: #fff; font-weight: 700; }
.summary__money { margin: 0; display: grid; gap: .9rem; }
.summary__money dt { font-size: .82rem; }
.summary__money dd { margin: 0; font-family: var(--serif); color: var(--gold); font-weight: 700; font-size: 1.5rem; }
.mobile-bar { display: none; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.table td.low { color: var(--orange); font-weight: 700; }
.table tr.is-muted { opacity: .55; }
.table--grid td { min-width: 130px; }
.table .actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cell-input { flex-direction: row; align-items: center; gap: .4rem; font-weight: 500; color: var(--muted); margin-bottom: .3rem; }
.cell-input input { width: 4.5rem !important; padding: .35rem .5rem !important; }

/* ---------- Confirmation ---------- */
.confirm { padding-top: 2.5rem; }
.confirm__card { max-width: 760px; margin-inline: auto; padding: 2rem; }
.next-step { background: #fff3e6; border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 1.5rem 0; }
.next-step p { margin: 0 0 .6rem; }
.upload__drop { border: 2px dashed #d9b893; border-radius: var(--radius); padding: 1rem; background: #fff; cursor: pointer; font-weight: 500; }
.upload__drop input { font-size: .85rem; }
.upload__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }
.file-list { list-style: none; padding: 0; margin: .75rem 0 0; color: var(--green); font-size: .88rem; font-weight: 600; }
.timeline { list-style: none; margin: 1.5rem 0; padding: 0 0 0 1.75rem; border-left: 2px solid var(--gold); margin-left: .4rem; }
.timeline li { position: relative; padding-bottom: 1rem; display: flex; flex-direction: column; font-size: .92rem; }
.timeline li::before { content: ""; position: absolute; left: calc(-1.75rem - 7px); top: .2rem; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); }
.timeline li.is-done::before { background: var(--green); }
.timeline small { color: var(--orange); font-weight: 700; text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; }
.confirm__money { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 0; }
.confirm__money div { background: #edf1ef; border-radius: var(--radius); padding: .8rem 1rem; }
.confirm__money dt { font-size: .72rem; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.confirm__money dd { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 1.25rem; }

/* ---------- Report ---------- */
.report-wrap { padding-top: 2.5rem; }
.report { max-width: 880px; margin-inline: auto; padding: 2rem; }
.report__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; }
.report__chart { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; background: #fff; }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: .6rem; height: 180px; align-items: end; margin-top: .5rem; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .25rem; }
.bar__fill { width: 70%; background: var(--orange); border-radius: 2px 2px 0 0; min-height: 2px; }
.bar__val { font-size: .7rem; color: var(--muted); }
.bar__day { font-size: .7rem; font-weight: 700; }
.report__zones { background: #edf1ef; border-radius: var(--radius); padding: 1rem 1.25rem; }
.report__zones dl { margin: 0; }
.report__zones dl div { display: flex; justify-content: space-between; border-bottom: 1px solid #d5ddd8; padding: .7rem 0; }
.report__zones dd { margin: 0; color: var(--orange); font-weight: 700; }
.report__next { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.report__next b { text-transform: uppercase; font-size: .88rem; letter-spacing: .03em; }

/* ---------- Modal ---------- */
.modal { border: 0; border-radius: var(--radius); padding: 0; width: min(460px, 100% - 32px); background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.modal::backdrop { background: rgba(27, 40, 64, .6); }
.modal__body { padding: 1.75rem; position: relative; }
.modal__close { position: absolute; top: .6rem; right: .8rem; border: 0; background: none; font-size: 1.6rem; cursor: pointer; color: var(--muted); }
.form-msg { font-weight: 600; font-size: .9rem; }
.form-msg.is-ok { color: var(--green); }
.form-msg.is-ko { color: var(--red); }

/* ---------- Admin ---------- */
.admin-body { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-side { background: var(--navy); color: #c9d3e3; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 2rem; position: sticky; top: 0; height: 100vh; }
.admin-side__brand { text-decoration: none; display: flex; align-items: center; gap: .75rem; }
.admin-side__brand .logo__text { color: #fff; }
.admin-side__brand small { color: var(--gold); font-size: .72rem; text-transform: uppercase; font-weight: 700; letter-spacing: .06em; }
.admin-nav { display: grid; gap: .2rem; }
.admin-nav a { color: #c9d3e3; text-decoration: none; padding: .6rem .8rem; border-radius: 4px; font-weight: 600; font-size: .9rem; }
.admin-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.admin-nav a.is-active { background: var(--orange); color: #fff; }
.admin-user { margin-top: auto; display: grid; gap: .1rem; font-size: .85rem; }
.admin-user b { color: #fff; }
.admin-user .link-btn { color: var(--gold); margin-top: .5rem; }
.admin-main { padding: 2rem clamp(1rem, 3vw, 2.5rem); min-width: 0; }
.admin-head { margin-bottom: 1.5rem; }
.admin-head p { margin: 0 0 .25rem; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.meter { margin-bottom: 1rem; }
.meter__label { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .3rem; }
.meter__label span:last-child { color: var(--muted); }
.meter__track { height: 10px; border-radius: 99px; background: var(--sand); overflow: hidden; }
.meter__track span { display: block; height: 100%; background: var(--orange); border-radius: 99px; }
.todo { list-style: none; padding: 0; margin: 0; }
.todo li a { display: flex; gap: .75rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.todo li a:hover { color: var(--orange); }
.todo b { font-family: var(--serif); font-size: 1.3rem; color: var(--orange); min-width: 1.5rem; }
.todo li.is-empty { opacity: .45; }
.badge { display: inline-block; font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 99px; text-transform: uppercase; letter-spacing: .03em; background: var(--sand); white-space: nowrap; }
.badge--reserved { background: #fde9d9; color: #9a4a1f; }
.badge--assets_received { background: #fff2cc; color: #7a5a00; }
.badge--ad_validated { background: #dfeaf6; color: #2a5482; }
.badge--balance_paid { background: #e2f0e8; color: var(--green); }
.badge--distributed { background: var(--green); color: #fff; }
.badge--cancelled { background: #eee; color: #777; }
.status-select { min-width: 170px; font-size: .82rem !important; padding: .45rem .5rem !important; }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.filters input, .filters select { width: auto !important; min-width: 220px; }
.dl { display: grid; grid-template-columns: 160px 1fr; gap: .5rem 1rem; margin: 0 0 1rem; font-size: .9rem; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.inline-form select { width: auto !important; }
.file-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.file-grid a { display: grid; gap: .3rem; text-decoration: none; color: var(--ink); }
.file-grid img, .file-icon { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: #fff; }
.file-icon { display: grid; place-items: center; font-weight: 800; color: var(--orange); }
.file-grid small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }

.auth-body { min-height: 100vh; display: grid; place-items: center; background: var(--navy); padding: 16px; }
.auth-card { width: min(420px, 100%); padding: 2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .hero { grid-template-columns: 1fr; }
    .hero__text { padding: 2.5rem 16px; }
    .hero__visual { padding: 1.5rem 0; }
    .hero__visual .guide { --h: 260px; }
    .split, .report__grid, .admin-grid, .recap { grid-template-columns: 1fr; }
    .campaign__grid { grid-template-columns: 1fr; }
    .summary { display: none; }
    .mobile-bar {
        display: flex; position: fixed; inset: auto 0 0 0; z-index: 40; background: var(--navy); color: #fff;
        padding: .7rem 16px; align-items: center; justify-content: space-between; gap: 1rem;
    }
    .mobile-bar small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
    .mobile-bar b { color: var(--gold); font-size: .85rem; text-transform: uppercase; }
    .campaign { padding-bottom: 5rem; }
    .formats { grid-template-columns: 1fr; }
    .site-footer__inner { grid-template-columns: 1fr; }
    .cards-3 { grid-template-columns: 1fr; }
    .admin-body { grid-template-columns: 1fr; }
    .admin-side { position: static; height: auto; flex-direction: column; gap: 1rem; }
    .admin-nav { grid-template-columns: repeat(3, 1fr); }
    .form-grid--7 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 720px) {
    .site-nav { display: none; }
    .hide-sm { display: none; }
    .show-sm { display: inline; }
    .steps { display: none; }
    .steps-mobile { display: block; }
    .choice-grid--2, .choice-grid--3, .form-grid, .form-grid--3, .chips, .alt-actions, .confirm__money { grid-template-columns: 1fr; }
    .journey { grid-template-columns: 1fr; gap: 1.1rem; }
    .journey__col + .journey__col .journey__step:first-child::before { content: "↓"; position: absolute; top: -1.15rem; left: 50%; color: var(--orange); font-size: .8rem; }
    .rules { columns: 1; }
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .kpi b { font-size: 1.5rem; }
    .trust span + span::before { margin-right: .5rem; }
    .trust { gap: .5rem 1rem; font-size: .85rem; }
    .campaign__main { padding: 1.1rem; }
    .dl { grid-template-columns: 1fr; gap: .1rem; }
    .dl dd { margin-bottom: .5rem; }
    .admin-nav { grid-template-columns: repeat(2, 1fr); }
    .form-grid--7 { grid-template-columns: repeat(2, 1fr); }
    .confirm__card, .report { padding: 1.25rem; }
    .format { --h: 320px; }
}