/* Charte algoralp : _CDC/charte-graphique/charte-graphique.md */
:root {
    --paper: #fff9ef;
    --sand: #f5ecdf;
    --cream: #fbefd9;
    --warm: #efd8b4;
    --ink: #241a12;
    --muted: rgba(36, 26, 18, .65);
    --orange: #e86f2d;
    --forest: #1f2f25;
    --forest-light: #58745a;
    --peach: #f29b65;
    --ok: #3f7a45;
    --warn: #b5651d;
    --alert: #a3341f;
    --radius: .75rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    background: var(--sand);
    border-bottom: 1px solid var(--warm);
}
.brand img { display: block; }
.brand-app { font-weight: 600; flex: 1; }

.container { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.eyebrow { color: var(--orange); text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 600; margin: 0; }
.muted { color: var(--muted); }

.card {
    background: #fff;
    border: 1px solid var(--warm);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.btn {
    display: inline-block;
    border: 0;
    border-radius: 999px;
    padding: .65rem 1.4rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    background: var(--ink);
    color: var(--paper);
}
.btn-accent { background: var(--orange); color: #fff; }
.btn:hover { opacity: .9; }

.link-quiet { color: var(--muted); font-size: .9rem; }
a { color: var(--orange); }

input[type=password] {
    width: 100%;
    max-width: 320px;
    padding: .6rem .9rem;
    border: 1px solid var(--warm);
    border-radius: 999px;
    font: inherit;
    background: var(--paper);
}

.flash { background: var(--cream); border-left: 4px solid var(--orange); padding: .75rem 1rem; border-radius: .375rem; }

.badge { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.badge-ok { background: #e3efe1; color: var(--ok); }
.badge-warn { background: #f8e7d4; color: var(--warn); }
.badge-alert { background: #f6dcd5; color: var(--alert); }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--sand); vertical-align: top; }
th { background: var(--sand); font-weight: 600; }
code { background: var(--sand); padding: .05rem .35rem; border-radius: .25rem; font-size: .85em; word-break: break-all; }

.footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 1.5rem 1rem; border-top: 1px solid var(--warm); }