/* ──────────────────────────────────────────────────────────────────────────
   Karoka – administration
   Feuille de style unique. Principes :
   1. Une palette courte, chaque couleur a UN rôle (voir « Jetons »). Aucune couleur écrite en dur ailleurs.
   2. Le texte respecte un contraste d'au moins 4,5:1 (clair ET sombre) ; les liens ont leur propre jeton.
   3. Une échelle de tailles, de graisses (500 / 600 / 700), de rayons et d'espacements.
   ────────────────────────────────────────────────────────────────────────── */

/* ───── Jetons ───── */
:root {
  /* Action principale : boutons, élément actif, focus */
  --p: 29, 78, 216;                         /* bleu Karoka (#1d4ed8), forme « r, g, b » pour les transparences */
  --on-p: #fff;                             /* texte sur action principale (6,7:1) */
  --link: rgb(var(--p));                    /* liens et texte d'accent sur fond clair (6,3:1) */

  /* Surfaces et texte */
  --bg: #f8f7fa;                            /* fond de page */
  --card: #fff;                             /* cartes, menus, fenêtres */
  --line: #e6e6e8;                          /* séparateurs et bordures de cartes */
  --field-line: #918fa0;                    /* bordure des champs (3,2:1) */
  --head: #444050;                          /* titres */
  --text: #5d596c;                          /* texte courant (6,3:1) */
  --muted: #6b6878;                         /* texte secondaire (5,1:1 même sur le fond de page) */
  --hover: rgba(var(--p), .08);             /* état survolé */

  /* États : « solid » = fond de bouton (texte blanc ≥ 4,5:1) ; « ink » = texte/icône sur surface ; « soft » = fond de pastille */
  --ok: #17712f;      --ok-ink: #17712f;      --ok-soft: #e6f4ea;
  --warn: #a35200;    --warn-ink: #a35200;    --warn-soft: #fdf0dc;
  --danger: #d32f2f;  --danger-ink: #d32f2f;  --danger-soft: #fdeaea;

  /* Ombres */
  --shadow: 0 .1875rem .75rem rgba(75, 70, 92, .12);
  --shadow-sm: 0 .125rem .5rem rgba(75, 70, 92, .10);

  /* Échelle : rayons, tailles, espacements */
  --radius: .5rem;  --radius-sm: .375rem;  --radius-pill: 999px;
  --fs-xs: .75rem;  --fs-sm: .85rem;  --fs-md: .9375rem;  --fs-lg: 1.15rem;  --fs-xl: 1.4rem;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem;
  --control: 2.5rem;  --control-sm: 2rem;   /* hauteur des champs / boutons */
  --inset: 260px;                            /* largeur retirée au contenu (même largeur qu'avec l'ancien menu) */
}
.dark {
  --p: 58, 108, 240;                        /* bleu éclairci : bouton visible sur fond sombre, texte blanc 4,6:1 */
  --link: #9db4ff;                          /* 7,1:1 sur le fond, 6,2:1 sur les cartes */
  --bg: #25293c; --card: #2f3349; --line: #434968; --field-line: #6f77a0;
  --head: #cfd3ec; --text: #b6bee3; --muted: #aab1d2; --hover: rgba(157, 180, 255, .12);
  --ok-ink: #7be0a0;      --ok-soft: #25423a;
  --warn-ink: #ffc46b;    --warn-soft: #4a3a22;
  --danger-ink: #ff8a8a;  --danger-soft: #4a2b3a;
  --shadow: 0 .1875rem .75rem rgba(15, 20, 34, .4);
  --shadow-sm: 0 .125rem .5rem rgba(15, 20, 34, .35);
}

/* ───── Base ───── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; } html.dark { color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: var(--fs-md)/1.55 Inter, "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--link); text-underline-offset: .15em; }
h1, h2, h3 { margin: 0; color: var(--head); line-height: 1.25; }
h1 { font-size: var(--fs-xl); font-weight: 700; }
h2 { font-size: 1rem; font-weight: 600; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: var(--radius-sm); }
.sub { font-size: var(--fs-sm); color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-sm); letter-spacing: .02em; }
.name { font-weight: 600; color: var(--head); }

/* ───── Marque ───── */
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.brand__logo { height: 2.4rem; width: 2.4rem; flex: none; border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-sm); }
.brand__name { font-size: 1.35rem; font-weight: 700; letter-spacing: .06em; color: var(--head); line-height: 1.1; }
.brand__sub { display: block; font-size: var(--fs-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ───── Barre du haut ───── */
.top { position: sticky; top: var(--s3); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
       max-width: calc(100% - var(--inset) - 3rem); margin: var(--s3) auto 0; padding: var(--s3) var(--s5);
       border-radius: var(--radius); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: saturate(200%) blur(6px); box-shadow: var(--shadow); }
.top__left, .top > div:first-child { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.brand--top { gap: var(--s3); margin-right: var(--s4); }
.brand--top .brand__name { font-size: var(--fs-lg); }
.top__title { font-weight: 600; color: var(--head); }
.top__right { display: flex; align-items: center; gap: var(--s2); }
.user { text-align: right; line-height: 1.2; font-size: var(--fs-sm); } .user strong { display: block; color: var(--head); font-weight: 600; }
.crumbs { display: flex; align-items: center; gap: var(--s3); font-size: .9rem; }
.crumbs a { color: var(--head); text-decoration: none; font-weight: 500; }
.crumbs a:hover { color: var(--link); }
.crumbs a[aria-current="page"] { font-weight: 700; }
.crumbs .crumbs__alt { color: var(--warn-ink); }
.crumbs__sep { width: 1px; height: 1.1rem; background: var(--line); }
.iconbtn { display: inline-grid; place-items: center; width: var(--control); height: var(--control); border: 0; border-radius: var(--radius); background: transparent; color: var(--head); cursor: pointer; }
.iconbtn:hover { background: var(--hover); }
.iconbtn svg { width: 1.2rem; height: 1.2rem; }

/* ───── Contenu ───── */
.content { max-width: calc(100% - var(--inset)); margin: 0 auto; padding: var(--s5) var(--s5) 3rem; }
.card { border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); }
.card__pad { padding: var(--s5); }
.flash { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--ok-soft); color: var(--ok-ink); font-weight: 500; }
.flash--err { background: var(--danger-soft); color: var(--danger-ink); }
.err { margin: var(--s2) 0 0; color: var(--danger-ink); font-size: var(--fs-sm); font-weight: 500; }
.hint { margin: var(--s2) 0 0; font-size: var(--fs-sm); color: var(--warn-ink); }

/* ───── Boutons : une hauteur, un rayon, trois variantes ───── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--control); padding: 0 var(--s4); border: 1px solid transparent; border-radius: var(--radius);
       font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer; background: rgb(var(--p)); color: var(--on-p); }
.btn:hover { filter: brightness(1.08); }
.btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
.btn--ghost { background: var(--card); color: var(--head); border-color: var(--field-line); }
.btn--ghost:hover { filter: none; background: var(--hover); }
.btn--ok { background: var(--ok); color: #fff; } .btn--warn { background: var(--warn); color: #fff; } .btn--danger { background: var(--danger); color: #fff; }
.btn--out { background: var(--danger); color: #fff; }
.btn--sm { height: var(--control-sm); padding: 0 var(--s3); font-size: .82rem; }
.btn[disabled] { opacity: .65; cursor: not-allowed; filter: none; }

/* ───── Champs ───── */
input[type=text], input[type=search], input[type=email], input[type=password], input[type=date], select, textarea { height: var(--control); padding: 0 var(--s3); font: inherit; color: var(--head); background: var(--card); border: 1px solid var(--field-line); border-radius: var(--radius); }
textarea { height: auto; padding: var(--s3); width: 100%; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(var(--p), .25); }
select { max-width: 100%; text-overflow: ellipsis; }
label.lab { display: block; margin: var(--s4) 0 var(--s1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--head); }
label.lab:first-child { margin-top: 0; }

/* ───── Cartes de chiffres ───── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.stats--one { grid-template-columns: minmax(0, 260px); }
.stat { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; border: 2px solid transparent; transition: transform .15s, box-shadow .15s; }
a.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat.is-on { border-color: var(--link); }
.stat__txt { display: block; min-width: 0; }
.stat__label, .stat__value, .stat__hint { display: block; }
.stat__label { font-size: var(--fs-sm); font-weight: 600; }
.stat__value { font-size: 1.7rem; font-weight: 700; color: var(--head); font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat__hint { font-size: var(--fs-sm); color: var(--muted); }
.stat__icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--radius); }
.stat__icon svg { width: 1.3rem; height: 1.3rem; }
.stat__icon--blue { background: rgba(var(--p), .14); color: var(--link); }
.stat__icon--amber { background: var(--warn-soft); color: var(--warn-ink); }
.stat__icon--green { background: var(--ok-soft); color: var(--ok-ink); }
.stat__value.is-bump { animation: kabump .55s ease-out; }
@keyframes kabump { 0% { transform: scale(1); } 35% { transform: scale(1.18); color: var(--link); } 100% { transform: scale(1); } }

/* ───── Barre d'outils et menus ───── */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; justify-content: space-between; padding: var(--s4) var(--s5); }
.toolbar__search, .toolbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.toolbar__search { flex: 1 1 22rem; }
.searchbox { position: relative; flex: 1 1 14rem; max-width: 26rem; display: block; }
.searchbox svg { position: absolute; left: var(--s3); top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.searchbox input { width: 100%; padding-left: 2.5rem; padding-right: 2.2rem; background: var(--bg); }
.searchbox kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); padding: 0 .4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: var(--fs-xs)/1.4 ui-monospace, monospace; color: var(--muted); }
details.dd { position: relative; }
details.dd > summary { list-style: none; } details.dd > summary::-webkit-details-marker { display: none; }
.dd__panel { position: absolute; z-index: 30; top: calc(100% + var(--s2)); left: 0; min-width: 17rem; padding: var(--s4); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line); }
.dd--right .dd__panel { left: auto; right: 0; }
.dd__panel select { width: 100%; max-width: none; }
.dd__panel--menu { min-width: 15rem; padding: var(--s2); }
.dd__panel--row { position: fixed; z-index: 60; min-width: 13.5rem; }
.dd__item { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s2) var(--s3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--head); font: inherit; font-size: .9rem; text-align: left; text-decoration: none; cursor: pointer; }
.dd__item:hover { background: var(--hover); color: var(--link); }
.dd__item svg { width: 1.05rem; height: 1.05rem; flex: none; }
.dd__item--ok { color: var(--ok-ink); } .dd__item--warn { color: var(--warn-ink); } .dd__item--danger { color: var(--danger-ink); }
.dd__item--ok:hover { background: var(--ok-soft); color: var(--ok-ink); } .dd__item--warn:hover { background: var(--warn-soft); color: var(--warn-ink); } .dd__item--danger:hover { background: var(--danger-soft); color: var(--danger-ink); }
.dd__sep { border: 0; border-top: 1px solid var(--line); margin: var(--s1) 0; }
details.dd--row[open] > summary { background: var(--hover); }

/* ───── Tableau ───── */
.tablewrap { position: relative; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead { background: var(--bg); }
th { padding: var(--s3) .4rem; text-align: left; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--head); white-space: nowrap; border-bottom: 1px solid var(--line); }
th a { color: inherit; text-decoration: none; } th a:hover { color: var(--link); }
td { padding: var(--s3) .4rem; vertical-align: middle; border-bottom: 1px solid var(--line); font-size: .85rem; }
.tablewrap th:first-child, .tablewrap td:first-child { padding-left: var(--s5); } .tablewrap th:last-child, .tablewrap td:last-child { padding-right: var(--s5); }
tbody tr:hover { background: var(--hover); }
.tablewrap tr { transition: opacity .25s, transform .25s; }
tr.is-leaving { opacity: 0; transform: translateX(-12px); pointer-events: none; }
.rowmenu { width: 2.6rem; text-align: right; }
.empty { padding: 3rem var(--s4); text-align: center; color: var(--muted); }
.chip { display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.7rem; padding: 0 var(--s2); border: 1px solid var(--field-line); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 700; color: var(--head); text-decoration: none; background: var(--card); }
a.chip:hover { border-color: var(--link); color: var(--link); }
.chip--off { opacity: .45; cursor: default; }
.badge { display: inline-block; white-space: nowrap; padding: .15rem .6rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; background: rgba(var(--p), .14); color: var(--link); }
.badge--validated { background: var(--ok-soft); color: var(--ok-ink); }
.badge--rejected { background: var(--danger-soft); color: var(--danger-ink); }
.badge--archived { background: var(--line); color: var(--muted); }
.inl { display: block; min-height: 1.4rem; padding: .1rem .3rem; border-radius: var(--radius-sm); cursor: text; overflow-wrap: anywhere; }
.inl:empty::before { content: attr(data-ph); color: var(--muted); font-style: italic; }
.inl:hover, .inl:focus { background: var(--hover); outline: none; box-shadow: inset 0 0 0 1px rgba(var(--p), .45); }
.inl.is-saving { opacity: .5; } .inl.is-ok { box-shadow: inset 0 0 0 1px var(--ok-ink); } .inl.is-err { box-shadow: inset 0 0 0 1px var(--danger-ink); }
.datecell { position: relative; display: inline-flex; align-items: center; gap: var(--s1); }
.inl--date { min-width: 5.6rem; white-space: nowrap; }
.calbtn { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }
.calbtn:hover, .calbtn:focus-visible { color: var(--link); background: var(--hover); }
.calbtn svg { width: 1rem; height: 1rem; }
.calpick { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); font-size: .88rem; }
.pager ul { display: flex; flex-wrap: wrap; gap: var(--s1); list-style: none; margin: 0; padding: 0; }
.pager li a, .pager li span { display: inline-grid; place-items: center; min-width: var(--control-sm); height: var(--control-sm); padding: 0 var(--s2); border-radius: var(--radius-sm); text-decoration: none; color: var(--head); }
.pager li a:hover { background: var(--hover); color: var(--link); }
.pager li .on { background: rgb(var(--p)); color: var(--on-p); } .pager li .off { color: var(--muted); }
#listBody { transition: opacity .15s; }
#listBody.is-busy { opacity: .55; pointer-events: none; }

/* ───── Fiche candidat : deux cartes de même hauteur, mêmes titres, boutons alignés en bas ───── */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s5); }
.page-head .sub { margin-top: var(--s1); }
.backlink { display: inline-flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.backlink:hover { text-decoration: underline; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s5); align-items: stretch; }
.panel { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 3.5rem; padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); }
.panel__body { display: flex; flex-direction: column; flex: 1; padding: var(--s5); }
.panel__foot { margin-top: auto; padding-top: var(--s5); }
.panel__foot .actions { padding-top: var(--s4); border-top: 1px solid var(--line); }
.panel__foot h3 { margin-bottom: var(--s3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--head); }
dl.facts { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s3) var(--s4); margin: 0; }
dl.facts dt { color: var(--muted); font-size: var(--fs-sm); }
dl.facts dd { margin: 0; color: var(--head); font-weight: 500; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.panel--wide { margin-top: var(--s5); }
.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.linklist li:first-child { border-top: 0; padding-top: 0; }

/* ───── Connexion ───── */
body.auth { padding: var(--s5); display: grid; place-items: center; position: relative; overflow-x: hidden; }
body.auth::before, body.auth::after { content: ""; position: fixed; border-radius: 50%; background: rgba(var(--p), .10); z-index: 0; }
body.auth::before { width: 38rem; height: 38rem; left: -14rem; bottom: -16rem; } body.auth::after { width: 26rem; height: 26rem; right: -9rem; top: -9rem; }
.authbox { position: relative; z-index: 1; width: min(420px, 100%); }
.authbox .card { padding: 2.25rem var(--s6) var(--s6); box-shadow: var(--shadow); }
.authbox .brand { justify-content: center; margin-bottom: var(--s5); }
.authbox .brand__logo { height: 3.2rem; width: 3.2rem; }
.authbox h1 { font-size: var(--fs-xl); text-align: center; }
.authbox .lead { margin: var(--s2) 0 var(--s5); text-align: center; }
.authbox input[type=email], .authbox input[type=password], .authbox .pw input { width: 100%; height: 2.9rem; }
.authbox .btn { width: 100%; height: 2.9rem; margin-top: var(--s5); }
.authbox .backlink { justify-content: center; width: 100%; margin: var(--s5) 0 0; }
.legal { margin: var(--s4) 0 0; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.pw { position: relative; } .pw input { padding-right: 3rem; }
.pw__eye { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }
.pw__eye:hover, .pw__eye[aria-pressed="true"] { color: var(--link); background: var(--hover); }
.pw__eye svg[hidden] { display: none; }
.authbox input[aria-invalid="true"] { border-color: var(--danger-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-ink) 25%, transparent); }
.remember { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); font-size: .88rem; cursor: pointer; }
.remember input { width: 1.05rem; height: 1.05rem; accent-color: rgb(var(--p)); }
.spin { display: none; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: kaspin .7s linear infinite; }
.btn.is-loading .spin { display: inline-block; }
@keyframes kaspin { to { transform: rotate(360deg); } }

/* ───── Fenêtre de confirmation, messages, bandeaux ───── */
dialog.modal { padding: 0; border: 0; background: transparent; max-width: calc(100vw - 2rem); overflow: visible; }
dialog.modal::backdrop { background: rgba(35,32,48,.6); backdrop-filter: blur(2px); }
.modal__card { width: min(26rem, calc(100vw - 2rem)); margin: 0; padding: var(--s6) var(--s5) var(--s5); border-radius: var(--radius); background: var(--card); color: var(--text); box-shadow: 0 1rem 3rem rgba(15,20,34,.35); text-align: center; animation: kapop .16s ease-out; }
.modal__icon { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: var(--s3); border-radius: 50%; }
.modal__icon--danger { background: var(--danger-soft); color: var(--danger-ink); }
.modal__icon--ok { background: var(--ok-soft); color: var(--ok-ink); }
.modal__title { font-size: var(--fs-lg); margin: 0 0 var(--s2); font-weight: 600; }
.modal__text { margin: 0 0 var(--s5); font-size: .92rem; line-height: 1.5; }
.modal__actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }
.modal__actions .btn { flex: 1 1 8rem; }
@keyframes kapop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.toasts { position: fixed; z-index: 80; right: var(--s4); bottom: var(--s4); display: flex; flex-direction: column; gap: var(--s2); width: min(24rem, calc(100vw - 2rem)); }
.toast { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--card); color: var(--head); box-shadow: 0 .5rem 1.6rem rgba(15,20,34,.28); border-left: 4px solid var(--ok-ink); animation: kapop .18s ease-out; transition: opacity .2s, transform .2s; }
.toast svg { flex: none; margin-top: .1rem; color: var(--ok-ink); }
.toast--err { border-left-color: var(--danger-ink); } .toast--err svg { color: var(--danger-ink); }
.toast__txt { flex: 1; font-size: .9rem; line-height: 1.4; }
.toast__x { border: 0; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.toast.is-out { opacity: 0; transform: translateY(6px); }
.livebar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius); font-size: .9rem; font-weight: 500; }
.livebar[hidden] { display: none; }
.livebar--err { background: var(--danger-soft); color: var(--danger-ink); }
.livebar--info { background: rgba(var(--p), .14); color: var(--link); }
.livebar .btn { flex: none; }

/* ───── Tablette ───── */
@media (max-width: 1199px) {
  .top { max-width: none; margin: var(--s2) var(--s3) 0; top: var(--s2); }
  .content { max-width: none; padding: var(--s4) var(--s3) 2rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid2 { grid-template-columns: minmax(0, 1fr); }
}
/* ───── Mobile ───── */
@media (max-width: 700px) {
  .top { padding: var(--s2) var(--s3); }
  .brand--top .brand__name { display: none; }
  .crumbs { gap: var(--s2); font-size: var(--fs-sm); } .crumbs a { white-space: nowrap; }
  .user { display: none; }
  .top__right .btn--out span { display: none; } .top__right .btn--out { padding: 0 .65rem; }
  .stat { padding: var(--s3) var(--s4); } .stat__value { font-size: 1.45rem; }
  .toolbar { padding: var(--s3) var(--s4); }
  .toolbar__search, .toolbar__right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; flex: none; }
  .searchbox, .toolbar__search details.dd, .toolbar__right > a:first-child { grid-column: 1 / -1; max-width: none; }
  .toolbar .btn, .toolbar details.dd > summary { width: 100%; }
  .toolbar .dd__panel { left: 0; right: 0; min-width: 0; } .toolbar .dd--right .dd__panel { left: 0; right: 0; }
  .panel__head, .panel__body { padding-left: var(--s4); padding-right: var(--s4); }
  dl.facts { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } dl.facts dd { margin-bottom: var(--s3); }
  .pager { padding: var(--s3) var(--s4); }
}
@media (max-width: 420px) { .stats { gap: var(--s3); } .stat { padding: var(--s3); } .stat__icon { display: none; } .stat__hint { font-size: var(--fs-xs); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ───── Utilitaires (remplacent les styles en ligne) ───── */
.nowrap { white-space: nowrap; }
.link-plain { text-decoration: none; }
.col-check { width: 2.5rem; }
.col-comment { min-width: 8rem; max-width: 13rem; }
.col-todo { min-width: 7rem; }
.badge--count { margin-left: var(--s2); text-decoration: none; }
.btn--spaced { margin-top: var(--s3); }
.actions--spaced { margin-top: var(--s4); }
.menu-hint { margin: 0 0 var(--s2); }
.field-full { width: 100%; }
.field-date { width: 10rem; }

/* ───── Responsive et messages : corrections de l'audit ───── */
/* Toasts : avertissement et information, au-dessus du contenu, jamais plus larges que l'écran */
.toast--warn { border-left-color: var(--warn-ink); } .toast--warn svg { color: var(--warn-ink); }
.toast--info { border-left-color: var(--link); } .toast--info svg { color: var(--link); }
.toasts { bottom: max(var(--s4), env(safe-area-inset-bottom)); right: max(var(--s4), env(safe-area-inset-right)); pointer-events: none; }
.toast { pointer-events: auto; }
@media (max-width: 700px) { .toasts { left: var(--s3); right: var(--s3); width: auto; } }
/* Archives : la carte unique garde sa largeur sous 1200 px */
.stats.stats--one { grid-template-columns: minmax(0, 260px); }
/* Fenêtres modales : jamais plus hautes que l'écran (téléphone en paysage), titre sans « ? » orphelin */
.modal__card { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; }
.modal__title { text-wrap: balance; }
/* Devis : le bouton ne se casse plus sur deux lignes, le message garde une largeur lisible */
.tablewrap .btn { white-space: nowrap; }
.col-msg { min-width: 14rem; }
/* Tableau des candidatures : le menu « … » reste visible quand le tableau défile */
.rowmenu { position: sticky; right: 0; background: var(--card); }
tbody tr:hover .rowmenu { background: color-mix(in srgb, var(--card), rgb(var(--p)) 8%); }
thead .rowmenu, thead th:last-child { background: var(--bg); }
/* En-tête sur mobile : Candidatures, Archives et Devis restent atteignables (plus cachés sous les boutons) */
@media (max-width: 700px) {
  .top { flex-wrap: wrap; row-gap: var(--s2); }
  .top__left, .top > div:first-child { display: contents; }
  .brand--top { order: 1; margin-right: auto; }
  .top__right { order: 2; }
  .crumbs { order: 3; flex: 1 1 100%; justify-content: space-between; }
}
/* Cibles tactiles confortables sur écran tactile */
@media (pointer: coarse) {
  input[type=checkbox] { width: 1.4rem; height: 1.4rem; }
  .btn--sm { height: 2.75rem; }
  .calbtn { width: 2.5rem; height: 2.5rem; }
  .chip { min-height: 2.25rem; min-width: 2.5rem; }
  .pager li a, .pager li span { min-width: 2.5rem; height: 2.5rem; }
  .toast__x { min-width: 2.75rem; min-height: 2.75rem; margin: -.7rem -.8rem -.7rem 0; }
}
/* Menu « … » d'une ligne : la cellule collante forme son propre empilement ; sans z-index, les icônes calendrier des lignes suivantes (.datecell, positionnées) passaient par-dessus le menu */
.rowmenu { z-index: 2; }
.rowmenu:has(details[open]) { z-index: 30; }
/* Devis : raison de l'échec d'envoi de l'e-mail, visible sans survol */
.mailerr { display: block; max-width: 16rem; margin-top: var(--s1); font-size: .75rem; line-height: 1.35; color: var(--muted); word-break: break-word; }
/* Devis : « Marquer traité » et « Supprimer » côte à côte, l'un sous l'autre si la place manque */
.rowactions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.rowactions form { margin: 0; }