/* Espace admin — Challenge Ingénieurs Conseils */

:root {
    --orange: #e07a26;
    --orange-dark: #b85e14;
    --yellow: #f6dc1a;
    --ink: #14181f;
    --text: #333a45;
    --muted: #6b7380;
    --line: #e4e1da;
    --tint: #f7f5f0;
    --red: #b03024;
    --radius: 12px;
    --font: "Manrope", "Segoe UI", system-ui, sans-serif;
    --display: "Sora", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); line-height: 1.55; color: var(--text); background: var(--tint); }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2 { font-family: var(--display); color: var(--ink); margin: 0; letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.1rem; margin-bottom: 18px; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.muted { color: var(--muted); font-size: .92rem; }
.wrap { width: min(100% - 32px, 1040px); margin-inline: auto; }
main.wrap { padding-block: 32px 64px; }

/* Barre du haut */
.bar { background: var(--ink); color: #fff; }
.bar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 12px; }
.bar__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.bar__brand img { padding: 4px; border-radius: 8px; background: #fff; }
.bar__brand span { display: flex; flex-direction: column; line-height: 1.2; }
.bar__brand strong { font-family: var(--display); }
.bar__brand small { font-size: .74rem; color: var(--yellow); }
.bar__nav { display: flex; align-items: center; gap: 20px; font-weight: 600; font-size: .92rem; }
.bar__nav a { text-decoration: none; color: #d5d9df; }
.bar__nav a:hover { color: #fff; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: .8em 1.3em; border: 1.5px solid transparent; border-radius: 999px; font-weight: 700; font-size: .93rem; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.btn--sm { padding: .55em 1em; font-size: .85rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-dark); }
.btn--light { background: #fff; border-color: var(--line); color: var(--ink); }
.btn--light:hover { border-color: var(--ink); }
.btn--danger { background: #fff; border-color: #ecc5c0; color: var(--red); }
.btn--danger:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* Messages */
.alert { margin-bottom: 22px; padding: 14px 18px; border-radius: 10px; font-weight: 600; font-size: .94rem; }
.alert--ok { background: #e9f7ee; border: 1px solid #b6e0c4; color: #1d6b3a; }
.alert--error { background: #fdf0ee; border: 1px solid #f1c3bd; color: #a12c20; }

/* En-tête de page */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.head p { margin: 6px 0 0; }
.back { display: inline-block; margin-bottom: 8px; font-size: .88rem; font-weight: 700; color: var(--orange-dark); text-decoration: none; }
.back:hover { text-decoration: underline; }

/* Liste des réalisations */
.list { display: grid; gap: 10px; }
.row { display: grid; grid-template-columns: auto 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px 12px 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 16px; }
.row:target { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(224, 122, 38, .18); }
.row__order form { display: grid; gap: 4px; }
.row__order button { width: 30px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--tint); font-size: .7rem; color: var(--ink); }
.row__order button:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.row__order button:disabled { opacity: .3; cursor: default; }
.row__img { width: 96px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--tint); }
.row__img--none { display: grid; place-items: center; font-size: .72rem; color: var(--muted); }
.row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row__main strong { font-family: var(--display); color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.row__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.star { padding: .5em .9em; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-weight: 700; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.star:hover { border-color: var(--ink); color: var(--ink); }
.star.is-on { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.empty { padding: 56px 20px; border: 1.5px dashed var(--line); border-radius: var(--radius); background: #fff; text-align: center; }

/* Formulaires */
.form { display: grid; gap: 18px; }
.panel { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field label { font-weight: 700; font-size: .88rem; color: var(--ink); }
.field label b { color: var(--orange-dark); }
.field input:not([type="file"]), .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--tint); font: inherit; color: var(--ink); }
.field input[type="file"] { padding: 14px; border: 1.5px dashed var(--line); border-radius: 9px; background: var(--tint); font: inherit; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(224, 122, 38, .15); }
.field [aria-invalid="true"] { border-color: var(--red); background: #fdf3f2; }
.field__error { font-size: .84rem; font-weight: 600; color: var(--red); }
.hint { font-size: .82rem; color: var(--muted); }
.form__actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; }
.photos li { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; font-size: .86rem; font-weight: 600; }
.photos img { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; object-fit: cover; background: var(--tint); }
.photos label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.photos .danger { color: var(--red); }
.photos li:has(input[type="checkbox"]:checked) { border-color: var(--red); background: #fdf3f2; }
.photos li:has(input[type="checkbox"]:checked) img { opacity: .35; }
input[type="radio"], input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--orange); flex: none; }

.check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; cursor: pointer; }
.check + .check { border-top: 1px solid var(--line); }
.check input { margin-top: 3px; }
.check span { display: flex; flex-direction: column; }
.check strong { color: var(--ink); }
.check small { color: var(--muted); font-size: .86rem; }

/* Confirmation de suppression */
.confirm { max-width: 520px; margin: 24px auto 0; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.confirm img { width: 100%; max-height: 240px; margin-bottom: 22px; border-radius: 10px; object-fit: cover; }
.confirm h1 { margin-bottom: 12px; font-size: 1.4rem; }
.confirm form { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* Connexion */
body.auth { display: grid; min-height: 100vh; place-items: center; background: var(--ink); }
.wrap--auth { width: min(100% - 32px, 420px); }
.auth-card { padding: 36px 32px; border-radius: 16px; background: #fff; }
.auth-card > img { margin: 0 auto 18px; }
.auth-card h1 { margin-bottom: 8px; font-size: 1.4rem; text-align: center; }
.auth-card > .muted { margin-bottom: 22px; text-align: center; }
.auth-card .btn { margin-top: 6px; }
.auth-back { margin: 20px 0 0; font-size: .88rem; text-align: center; }
.auth-back a { color: var(--muted); text-decoration: none; }
.auth-back a:hover { color: var(--ink); }

@media (max-width: 760px) {
    .row { grid-template-columns: auto 72px minmax(0, 1fr); }
    .row__img { width: 72px; height: 54px; }
    .row__actions { grid-column: 1 / -1; justify-content: flex-start; }
    .grid { grid-template-columns: 1fr; }
    .panel { padding: 20px; }
    .bar__nav { gap: 14px; }
    .form__actions .btn { flex: 1; }
}